Controls: TEXT

What you will learn in this chapter
TEXT control Attributes
Reference Tutorial: Basic UI controls - Text, Buttons, Image
Reference: Actions, Data Sourcing, appearance

TEXT control is the most widely used control. As the name implies, any text on the screen is a TEXT control.

  • You can set font properties and background properties like background transparency , gradient , border , padding using appearance_name attribute for TEXT control . See appearance Attributes
  • TEXT control has same attributes as Control Attributes
  • Another use of TEXT control is for setting the background for multiple controls by using default_value=""

Attributes

Attribute Description Mandatory
name Name identifies this control. If another control wants to include a control as an attribute, then name is used. No
type TEXT Yes
x

Specifies x position (distance from the left edge of the parent control). Parent control could be screen as well. It can be expressed in percentage, or pixels (px) or device pixels (dp).

By default width in percentage is relative to its parent control. It can be made relative to screen using attribute dimensions_relative_to=”SCREEN” in screen_deck . Learn more about dimensions

Yes
y

Specifies y position (distance from the top edge of the parent control). Parent control could be screen as well. It can be expressed in percentage, or pixels (px) or device pixels (dp).

By default width in percentage is relative to its parent control. It can be made relative to screen using attribute dimensions_relative_to=”SCREEN” in screen_deck . Learn more about dimensions

Yes
width

Specifies the width of the control in percentage or pixels (px) or device pixels (dp).

By default width in percentage is relative to its parent control. It can be made relative to screen using attribute dimensions_relative_to=”SCREEN” in screen_deck . Learn more about dimensions

Yes
height

Specifies the height of the control in percentage or pixels (px) or device pixels (dp).

By default width in percentage is relative to its parent control. It can be made relative to screen using attribute dimensions_relative_to=”SCREEN” in screen_deck . Learn more about dimensions

Yes
appearance_name Gives the appearance name for the control as defined in appearance.xml. Yes
default_value Static data is displayed using this attribute No
data_type Defines the type of data applicable for this control. VARCHAR STRING

Example: TEXT controls

<controls>
    <control type="TEXT" x="2" y="2" width="96" height="8"
                     appearance_name="black_bold" word_wrap="1" data_type="VARCHAR"
                     default_value="Welcome to Appearance properties for TEXT control"/>
    <!-- Used just for background -->
    <control type="TEXT" x="10" y="15" width="80" height="35"
                     appearance_name="blue_bkgrnd_border" word_wrap="1" data_type="VARCHAR"
                     default_value=""/>
    <control type="TEXT" x="11" y="16" width="78" height="7"
                     appearance_name="blue_bkgrnd" word_wrap="1" data_type="VARCHAR"
                     default_value="Font Styles"/>
    <!-- Bold text -->
    <control type="TEXT" x="13" y="25" width="20" height="5"
                     appearance_name="white_bold" word_wrap="1" data_type="VARCHAR"
                     default_value="Bold"/>
    <!-- Italics text -->
    <control type="TEXT" x="13" y="31" width="20" height="5"
                     appearance_name="white_ita" word_wrap="1" data_type="VARCHAR"
                     default_value="Italics"/>
    <!-- Red color text -->
    <control type="TEXT" x="13" y="37" width="20" height="5"
                     appearance_name="red" word_wrap="1" data_type="VARCHAR"
                     default_value="Color"/>
    <!-- Emboss text -->
    <control type="TEXT" x="13" y="43" width="20" height="5"
                     appearance_name="white_emboss" word_wrap="1" data_type="VARCHAR"
                     default_value="Emboss"/>
    <!-- Shadow text -->
    <control type="TEXT" x="54" y="25" width="30" height="5"
                     appearance_name="white_shadow" word_wrap="1" data_type="VARCHAR"
                     default_value="Shadow"/>
    <!-- Underline text (not supported in iOS -->
    <control type="TEXT" x="54" y="31" width="30" height="5"
                     appearance_name="white_underline" word_wrap="1" data_type="VARCHAR"
                     default_value="Underline"/>
    <!-- Align text -->
    <control type="TEXT" x="54" y="37" width="30" height="10"
                     appearance_name="white_right" word_wrap="1" data_type="VARCHAR"
                     default_value="Align (left, center, right)"/>
    <!-- Text control with fully opaque background alpha="255" -->
    <control type="TEXT" x="18" y="55" width="60" height="5"
                     appearance_name="blue_bkgrnd" word_wrap="1" data_type="VARCHAR"
                     default_value="Opaque background"/>
    <!-- Text control with semi transparent background alpha="120" -->
    <control type="TEXT" x="18" y="60" width="60" height="5"
                     appearance_name="blue_bkgrnd_tr" word_wrap="1" data_type="VARCHAR"
                     default_value="Semi transparent"/>
    <!-- Text control with border color -->
    <control type="TEXT" x="18" y="65" width="60" height="5"
                     appearance_name="blue_bkgrnd_tr_border" word_wrap="1" data_type="VARCHAR"
                     default_value="Red border"/>
    <control type="TEXT" x="2" y="98" width="96" height="10"
                     appearance_name="black_bold" word_wrap="1" data_type="VARCHAR"
                     default_value=""/>
</controls>

See the android screen on left and iOS screen on right rendered by the XMADL code above.

../_images/text-control.png ../_images/iOS_text.png

Appearance for the above TEXT controls

<appearances>

    <appearance name="black_bold" font_family="Sans-Serif" font_name="Helvetica" font_size="3"
                font_color="#000000" background_color="#FFFFFF" alpha="0" justify="LEFT" font_style_bold="1"/>
    <appearance name="black" font_family="Sans-Serif" font_name="Helvetica" font_size="3"
                font_color="#000000" background_color="#FFFFFF" alpha="0" justify="LEFT" />
    <appearance name="white_bold" font_family="Sans-Serif" font_name="Helvetica" font_size="3"
                font_color="#FFFFFF" background_color="#FFFFFF" alpha="0" justify="LEFT" font_style_bold="1"/>
    <appearance name="white_ita" font_family="Sans-Serif" font_name="Helvetica" font_size="3"
                font_color="#FFFFFF" background_color="#FFFFFF" alpha="0" justify="LEFT" font_style_italic="1"/>
    <appearance name="red" font_family="Sans-Serif" font_name="Helvetica" font_size="3"
                font_color="#FF0000" background_color="#8B0000" alpha="0" justify="LEFT"/>
    <appearance name="white_size2" font_family="Sans-Serif" font_name="Helvetica" font_size="2"
                font_color="#FFFFFF" background_color="#8B0000" alpha="0" justify="LEFT"/>
    <appearance name="white_emboss" font_family="Sans-Serif" font_name="Helvetica" font_size="3"
                font_color="#FFFFFF" background_color="#8B0000" alpha="0" justify="LEFT"
                font_style_emboss="1"/>
    <appearance name="white_shadow" font_family="Sans-Serif" font_name="Helvetica" font_size="3"
                font_color="#FFFFFF" background_color="#8B0000" alpha="0" justify="RIGHT"
                font_style_shadow="1"/>
    <appearance name="white_underline" font_family="Sans-Serif" font_name="Helvetica" font_size="3"
                font_color="#FFFFFF" background_color="#8B0000" alpha="0" justify="RIGHT"
                font_style_underline="1"/>
    <appearance name="blue_bkgrnd_border" font_family="Sans-Serif" font_name="Helvetica" font_size="3"
                font_color="#FFFFFF" background_color="#50A6C2" alpha="255" justify="LEFT" font_style_bold="1"
                border_color="#FFFFFF" border_width="3" border_radius="4" padding="0"
                font_style_emboss="1"/>
    <appearance name="white" font_family="Sans-Serif" font_name="Helvetica" font_size="3"
                font_color="#FFFFFF" background_color="#000000" alpha="0" justify="CENTER" font_style_bold="1"
                font_style_emboss="1"/>
    <appearance name="white_right" font_family="Sans-Serif" font_name="Helvetica" font_size="3"
                font_color="#FFFFFF" background_color="#000000" alpha="0" justify="RIGHT"
                font_style_emboss="1"/>
    <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"/>
    <appearance name="blue_bkgrnd_tr_border" font_family="Sans-Serif" font_name="Helvetica" font_size="3"
                font_color="#FFFFFF" background_color="#50A6C2" alpha="200" justify="CENTER"
                border_color="#FF0000" border_width="2" border_radius="2" padding="0"/>
    <appearance name="lightblue_bkgrnd" font_family="Sans-Serif" font_name="Helvetica" font_size="3"
                font_color="#FFFFFF" background_color="#7EC0EE" alpha="255" justify="CENTER" />
    <appearance name="lightblue_bkgrnd_border" font_family="Sans-Serif" font_name="Helvetica" font_size="3"
                font_color="#FFFFFF" background_color="#7EC0EE" alpha="255" justify="CENTER"
                border_color="#FFFFFF" border_width="2" border_radius="3" padding="0"/>
    <appearance name="white_bkgrnd" font_family="Sans-Serif" font_name="Helvetica" font_size="2.5"
                font_color="#000000" background_color="#FFFFFF" alpha="255" justify="CENTER" />
    <appearance name="grey_border" font_family="Sans-Serif" font_name="Helvetica" font_size="3"
                font_color="#FFFFFF" background_color="#7EC0EE" alpha="0" justify="CENTER"
                border_color="#DDDDDD" border_width="3" border_radius="0" padding="0"/>
    <appearance name="button_gradient" font_family="Sans-Serif" font_name="Helvetica" font_size="3"
                font_color="#FFFFFF" background_color="#449def,#2f6699" alpha="255" justify="CENTER" font_style_bold="1" font_style_shadow="1"
                border_color="#000000" border_width="3" border_radius="5" padding="0"/>
    <appearance name="button_gradient_on_pressed" font_family="Sans-Serif" font_name="Helvetica" font_size="3"
                font_color="#FFFFFF" background_color="#2f6699,#449def" alpha="255" justify="CENTER" font_style_bold="1" font_style_shadow="1"
                border_color="#000000" border_width="3" border_radius="5" padding="0"/>
</appearances>