Pre requisites: XML

All elements are built with xml syntax. With value and attributes if necessary. The attributes are not mandatory and if not filled they will be set with their default values.

All the data can be set in 3 ways:

  • Model data.
  • Properties file.
  • Direct value

 

To get a sense of the elements and their appearance in various environment check Layout. Next we will show how to write elements in ssp files.

Example of an element:

<dec:label align="center">Hello</dec:label>

Common attributes for all elements:

  • id – can be set by the user. If not set the framework will fill the id with a random value
  • colspan – The colspan attribute defines the number of columns a cell should span in a grid
  • screen.small - Size the element in a small device/browser (up to 5 inches). The portrait and landscape sizes can be set, split by ";". Attribute only applied in grids
  • screen.medium - Size the element in a medium device/browser (5.1 to 8 inches). The portrait and landscape sizes can be set, split by ";". Attribute only applied in grids
  • screen.big - Size the element in a big device/browser (above 8 inches). The portrait and landscape sizes can be set, split by ";". Attribute only applied in grids
  • visible – Set if the element is visible or not to the user 
  • vertical.align - Align vertically the element in its row. Only applied on grids. Possible values="top","middle","bottom", which default is "middle"
  • align – align the content of the element to right, center or mid of the container:

 

vertical.align="top" screen.small="70;40" screen.big="100" align="center"

 

  • style – custom style for the Element. The syntax is like css - color in hexadecimal value (ex: black - #000000). Available attributes:
    • color – Color of the content. Ex: for an input text the color of the text will change
    • background color - color of the container
    • font-size
    • font-weight
    • text-decoration


To add transparency to the color (partial or total transparency) you can add the alpha channel of the color. Ex: Partial transparent black) #000000FF (RGBA) which 00 is opaque and FF fully transparent

Note that not all the attributes are applicable to all elements. For example the font size is obviously not applicable to an image.

Ex:

style="color:black; background-color:green; font-size: 14px; font-weight:bold; text-decoration:underline;”