Controls: Buttons

Buttons are generally used to take some action. AVM provides three types of buttons namely pushbutton, imagebutton and togglebutton.

What you will learn in this chapter
PUSHBUTTON, IMAGEBUTTON, TOGGLEBUTTON
Reference Tutorial: Basic UI controls - Text, Buttons, Image
Reference: Actions, Data Sourcing, appearance

Below are the sample screen shots for Android and iOS. The XMADL code is common for the two SDK’s.

AndroidiOS

PUSHBUTTON

This type of is used when the button needs to display text. The designer can set the size, location, appearance and text attributes for a PUSHBUTTON. It is mandatory to associate an action to a PUSHBUTTON.

Attributes

Attribute Value Mandatory
type PUSHBUTTON Yes
x See Control Attributes for more details. Yes
y   Yes
width   Yes
height   Yes
appearance_name   Yes
default_value Display Caption No

Example

<control type="PUSHBUTTON" x="20" y="60" width="60" height="8" appearance_name="lightblue_bkgrnd" default_value="Button 1"
    <actions>
        <action event_list="TAP" action_name="SHOW_TAB" target="button_screen"/>
    </actions>
</control>

Changing appearance for buttons

With the appearance settings, the button can have a

  • Gradient
  • Border

The button can change its appearance when it is pressed.

Default

When the appearance has background color, the OS adds default button gradient effect. On pressed color is dependent on the default settings for the device.

<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"/>

Border

A button can have border and radius. Below is the sample appearance. When applied to the button it will draw a border around the button.

<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" border_color="#EEEEEE" border_width="1" border_radius="3"/>

Gradient

A button can have gradient in background color by specifying 2 background colors.

Below is the sample appearance. When applied to the button it will show a gradient starting with first color and ending with the second.

<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"/>

Changing the appearance when pressed

You can set “on pressed” appearance for a button. This appearance is applied to the button when it is in the pressed state.

<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"/>
<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"/>

In the example below, the button has an attribute on_pressed_appearance_name="button_gradient_on_pressed". This appearance is applied to the button when it is tapped.

<control type="PUSHBUTTON" x="39" y="24" width="50" height="8" permission="READONLY"
            appearance_name="button_gradient" data_type="VARCHAR" on_pressed_appearance_name="button_gradient_on_pressed"
            default_value="Button 2">
        <actions>
                            <action event_list="TAP" action_name="SHOW_TAB" target="button_screen"/>
            </actions>
</control>

IMAGEBUTTON

This type of button is used when an image is shown on a button. All the appearance properties like background color, transparency, gradient, border, border radius, can be set for the image button as well.

Attributes

Same as PUSHBUTTON. The default_value is an image specified as IMAGE:<image file name>

Example

<control type="IMAGEBUTTON" x="39" y="54" width="16" height="8" permission="READONLY"
            appearance_name="lightblue_bkgrnd" data_type="VARCHAR"
        default_value="IMAGE:home.png" scale_type="CENTER_INSIDE">
            <actions>
                            <action event_list="TAP" action_name="NEXT_SCREEN" target="Screen 1" />
            </actions>
    </control>

Note

  • Image name is given in default_value attribute. eg. default_value=”home.png”
  • Image has to be uploaded to your project/assets in Android
  • Image has to be uploaded and added to your project/Resources/images in iOS

TOGGLEBUTTON

Togglebutton is a UI element that allows a user to select one of two choices available. For example ON or OFF, Yes or No or any other.. Toggle button is displayed in the native form based on platform.

Example

<control name="on_off_button" type="TOGGLEBUTTON" x="39" y="39" width="20" height="9"
    appearance_name="white_bkgrnd" data_type="BOOLEAN"
            field_name="isreminderset" default_value="ON"
            text_on="ON" text_off="OFF"/>

Attributes

Attribute Value Mandatory
type TOGGLEBUTTON Yes
x   Yes
y   Yes
width   Yes
height   Yes
appearance_name   Yes
default_value “ON” or “OFF” No
data_type BOOLEAN No
text_on Text displayed when the button is in the “ON” state No
text_off Text displayed when the button is in the “OFF” state No
field_name specifies the field name using which the value set by the user will be stored. The value may be stored in the local database or passed on to the next screen. No

Capturing the toggle value selected by the user

The user selection can be either stored in the local database, remotely or passed on to the next screen. The attribute “field_name” is used to pass the value to the action. Learn more on Data Sourcing

Reference tutorial

This chapter uses source code from appemble-tutorial-buttons-imgs. If you have not downloaded tutorial source code, click on Download Source Code - Tutorials

Android - Right click on appemble-tutorial-buttons-imgs and click on Run as Android application.

iOS - Select scheme appemble-tutorial-buttons-imgs and iPhone/iPad x.x simulator. Click on Product -> Run.