Sample User Interface XML

The information on this document is out-of-date by now. The latest UI XML schema at the time of this writing is iPhone Console 1.0 (M3) User Interface XML Schema.

What is presented below is the first iteration of an XML document instance that could be used to describe the OpenRemote panel user interfaces. Should the sample instance prove usable, a proper schema should be generated for document instance validation.

The idea is to have a user interface descriptor that is generic enough to be usable both for web console(s) and native user interfaces. There's a lot of similarities here to HTML <table> entity and relevant CSS properties since it is proven markup with sufficient flexibility to create a wide variety of layouts. Therefore mapping from this sample to HTML+CSS should be fairly straight-forward.

Note that the first iteration if the XML is a subset of the final features. It is intended to be just sufficient to implement the first prototypes to prove the concept.


<grid cell-width = "20px" cell-height = "20px">
  <row>
    <cell><icon source = "image1.png" id = "Button1"/></cell>
    <cell/>
  </row>

  <row>
    <cell>  </cell>
    <cell><icon source = "image2.png" id = "Button2"/></cell>
  </row>
</grid>

Grid Element

The <grid> element specifies a rectangular area on the user interface. A grid is divided into rows and cells.

While <grid> may not be the root element in the final UI descriptor, it can be considered the root element for the initial implementation(s).

Grid defines the size of its cells. Initially each cell can be equally sized. While this may not be sufficient in the long run for richer UI layouts, it is sufficient for the first implementation to keep the implementation cycles/prototyping short.

Attributes

The <grid> element has the following attributes:

Cell-Width

Defines the width of all the cells in the grid. The width is defined in absolute terms (pixels) with a numeric value that has a "px" string as a suffix.

NOTE #1: In the coming iterations, allowing relative sizing of cells in terms of percentage values (similar to HTML+CSS) to available UI display area becomes relevant. For this first iteration, absolute pixel sizing is sufficient.

NOTE #2: In the first iteration, cell-width is specified equally for all cells. In the future iterations it can be expected that cells may override and specify their individual widths to accommodate creation of more complex layouts.

Cell-Height

Defines the height of all the cells in the grid. The height is defined in absolute terms (pixels) with a numeric value that has a "px" string as a suffix.

NOTE #1: In the coming iterations, allowing relative sizing of cells in terms of percentage values (similar to HTML+CSS) to available UI display area becomes relevant. For this first iteration, absolute pixel sizing is sufficient.

NOTE #2: In the first iteration, cell-height is specified equally for all cells. In the future iterations it can be expected that cells may override and specify their individual heights to accommodate creation of more complex layouts.

Row Element

Defines a row of cells. No additional attributes required at this point. When rendering, a row of cells should be placed on the same horizontal base line.

At minimum one <row> element must be included within <grid> body.

Cell Element

Defines a specific area within the grid that may optionally contain an icon image. No additional attributes required at this point.

At minimum one <cell> element must be included within <row> body. The body of <cell> may be empty to indicate an unused visual area in the layout.

Icon Element

Defines an icon image within a <cell> element. Icon element may only appear within a <cell> element.

Attributes

The <icon> element has the following attributes:

Source

Defines the URL for image file used for the visual presentation of the icon.

ID

Defines an ID for the icon. This ID will be used to identify UI events associated with the icon.