XMADL element : <appearance>

Every control has an <appearance name = ” “>. Different controls can have same appearance. Appearance is defined in appearance.xml file as shown in the example below. Any number of appearances can be defined.

Example - appearance definition

<appearance name="black_bold_left" alpha="0" background_color="#FFFFFF"
    font_color="#000000" font_family="Sans-Serif" font_name="Helvetica"
    font_size="2.5" font_style_bold="1" font_style_emboss="1" font_style_italic="0"
    font_style_outline="0" font_style_shadow="0" font_style_strikethrough="0"
    font_style_underline="0" justify="LEFT" />

Example - How appearance is used in a control

<control type="TEXT" x="2" y="2" width="96" height="8"
      appearance_name="black_bold_left" word_wrap="1" data_type="VARCHAR"
      default_value="Welcome to Appearance properties for TEXT control"/>

In the above example the text “Welcome to Appearance properties for TEXT control” will be displayed in bold, and is left justified. alpha=”0” determines that the background is transparent.

What you will learn

Attributes , Font properties , Background transparency , Gradient , Border , Padding

Attributes

Attributes Description Mandatory Values
name Describes the name of the appearance Yes user defined
font_family Describes the font family Yes Supported: Sans-Serif, Helvetica
font_name Describes the font name Yes Supported: Helvetica
font_size Specifies font size as percentage of screen No Numeric value: for example 2.5
font_color Specifies font color in hex code Yes Hex value For eg: #FFFFFF (white)
alpha Specifies transparency. alpha=”0” - fully transparent alpha = “255” - fully opaque alpha = “between 0 and 255” - increasing opaqueness Yes Any value between 0 and 255
background_color Specifies background color in hex No eg, #000000 (black) #660000,#96422F (2 values are used for gradient)
gradient_orientation Specifies gradient orientation If gradient needs to given, then background_color must have 2 comma separated values If gradient_orientation is not given, it is taken as TOP_BOTTOM. No BT_LR : bottom-left to top-right BOTTOM_TOP : bottom to top BR_TL : bottom-right to top-left LEFT_RIGHT : left to right RIGHT_LEFT : right to left TL_BR : top left to bottom right TOP_BOTTOM : top to bottom (default) TR_BL : top-right to bottom-left
justify Specifies justification LEFT, RIGHT, CENTER, TOP, No LEFT, CENTER, RIGHT, TOP, BOTTOM CENTER_HORIZONTAL, CENTER_VERTICAL
font_style_bold Bold text No font_style_bold = “1” (bold) font_style_bold = “0” (not bold)
font_style_italic Italicize text No font_style_italic = “1” (italics) font_style_italic= “0” (no italics)
font_style_underline Underline text No font_style_underline =”1” (underline) font_style_underline =”0” (no underline)
font_style_shadow Add shadow to text No font_style_shadow = “1” (shadow) font_style_shadow = “0” (no shadow)
font_style_emboss Emboss text No font_style_emboss = “1” (emboss) font_style_emboss = “0” (no emboss)
font_style_subscript Subscript text No font_style_subscript = “1” (subscript) font_style_subscript = “0” (no subscript)
font_style_superscript Superscript text No font_style_superscript = “1” (superscript) font_style_superscript = “0” (no superscript)
font_style_strikethrough Strikethrough text No font_style_strikethrough = “1” (strikethrough) font_style_strikethrough = “0” (no strikethrough)
border_width Specifies border width in float as percentage of screen No eg: border_width = “2”
border_color specifies as border color in hex code No eg: border_color = “#FF0000” (red border)
border_radius Specify radii for each of the 4 corners. For each corner , the array contains 2 values, [X_radius, Y_radius]. The corners are ordered top-left, top-right, bottom-right, bottom-left No eg: (5) all four corners will be rounded with radius 5 eg: (border_radius=”0,0,0,0,10,10,10,10”) left-top radius is (0,0), top-right radius is (0,0) bottom-right radius is (10,10), bottom-left radius (10,10)
padding Specifies padding for content inside the control. The padding is expressed in pixels for the left, top, right and bottom parts of the control. No eg: padding = “2,1.8,0,0” left padding = 2px, top padding = 1.8px right and bottom padding = 0px
os
Defines on which platform the appearance should be
displayed
No 255 (default) - all platforms 1 - iOS only 2 - Android only 4 - Kindle only 6 - Kindle and Android devices
mark_deleted Defines if the appearance needs to be generated or not No 0 - default (not deleted) 1 - delete

Font properties

For any control, you can define font_type, font_name, font_size and font_color. font_size is expressed as a a percentage of the screen. This allows scaling based on the device screen size.

Background transparency

Transparency of a control is determined by the alpha value in the appearance. If alpha is 0, the background is 100% transparent. When alpha is 255, the background is 0% transparent, which is 100% opaque. Any value in between shows more transparent or less transparent.

_images/alpha.png
<appearance name="blue_bkgrnd" font_family="Sans-Serif" font_name="Helvetica" font_size="3"
            font_color="#FFFFFF" background_color="#3A5894" alpha="255" justify="CENTER" font_style_bold="1"
            font_style_emboss="1"/>
<appearance name="blue_bkgrnd_tr" font_family="Sans-Serif" font_name="Helvetica" font_size="3"
            font_color="#FFFFFF" background_color="#3A5894" alpha="120" justify="CENTER"
            font_style_emboss="1"/>

Gradient

In order to give gradient to background, background_color attribute must have two colors (color1, color2), alpha should be more than 0. By default the gradient orientation is TOP_BOTTOM.

Other orientations of gradient can be specified in gradient_orientation attribute

  • BOTTOM_TOP : bottom to top
  • BR_TL : bottom-right to top-left
  • LEFT_RIGHT : left to right
  • RIGHT_LEFT : right to left
  • TL_BR : top left to bottom right
  • TOP_BOTTOM : top to bottom (default)
  • TR_BL : top-right to bottom-left

For example: The box below has gradient of #660000 and #96422F, TOP-BOTTOM by default.

<appearance name=”brown_box” font_family=”Sans-Serif” font_name=”Helvetica” font_size=”2.5”
font_color=”#FFFFFF” background_color=”#660000,#96422F” alpha=”255” justify=”LEFT” border_color=”” border_width=”0” border_radius=”0,0,0,0,10,10,10,10”/>
_images/gradient.png

Border

3 attributes border_color, border_width, border_radius are required for a specifying border for a control.

  • Border color is given in hex code
  • Border width is a float number eg: 2.5, 3.0

Border radius

  • border_radius =”0”, corners will not be curved
  • border_radius = “2”, radius of all corners will be 2 px
  • border_radius can be set for top-left, top-right, bottom-right and bottom-left corners by specifying an array which contains 2 values, [X_radius, Y_radius]. border_radius=”0,0,0,0,10,10,10,10” defines radius of 0 pixels for top-left and top-right corners and radius of 10px for bottom-right and bottom-left corners. In the fig above shows the border radii.

Note

border radii can be defined without specifying border color or border width.

Padding

Specifies padding for content inside the control. The content can be text, image or any other content. The padding is expressed in pixels for the left, top, right and bottom parts of the control.

eg: padding = “6,1.8,0,0”