XMADL

Appemble introduces a simple, yet powerful declarative language to write cross-platform native apps called XMADL (eX ensible Mobile App Definition Language).

Objectives:

  1. Simplify the app development process for popular operating systems AndroidTM, iOS TM. Other platforms will be supported in future.
  2. Develop apps using Single Code Base for multiple platforms. Allow platform specific code to write some portions of the app.
  3. Support Multiple Screen Size.
  4. Lower the learning curve to write apps running on multiple platforms and reduce the total application development time.

In order to achieve these objectives, XMADL is XML based markup language that is very intuitive and human-readable. Using the XMADL, you can define

  1. User Interface (UI) for the complete application
  2. Actions on user’s gestures like “TAP”.
  3. Data Sources to populate screen with data. The data source can reside on the local device or on the remote server in the cloud.

This document explains some high level details about the exact format that is used. More details are given when specific UI elements (such as control and action) are decsribed.

XMADL Elements

An app is defined by the following xml elements

XMADL Elements                Description

<screen_deck/>                Defines the application level properties

<appearance/>                 Defines the display properties of the control for example,
                              font, text color, background etc.

<screens></screens>           Contains definition of one or more screens.
(root element)

<screen></screen>             Defines the screen properties

<title_controls>
</title_controls>             Contains one or more controls that are part of the title bar
                              of the screen.

<controls></controls>         Contains one or more controls for the body of the screen

<control/>                    Defines the control. A control is a basic control like
                              TEXT, EDIT, PUSHBUTTON, CHECK_BOX or a complex control
                              like LIST, CHART, COVER_FLOW.

<actions></actions>           Contains actions associated with a particular control,
                              screen.

<action/>                     Defines an action. For example, an action NEXT_SCREEN
                              will display the next screen defined in its attribute
                              called "target".

XMADL Tree Structure

Some basic rules of the XMADL language.

  • An app must contain the following

    • <screen_deck/> - Application definition
    • One or more <appearance/> - Appearances
    • One or more <screen> ... </screen> - Screens

For better source code management, it is recommended that these tags in added in separate XML files.

  • A screen typically contains following child elements

    • <controls> </controls> - Controls in the body of the screen
    • <title_controls> </title_controls> - Title Bar and its controls
    • <actions> </actions> - Actions (attached to the screen). For example, an action triggered on event “ON_RESUME_SCREEN” can only be attached to the screen as ON_RESUME_SCREEN is an event generated for the screen.
  • A control can contain following child elements

    • <control/> - Child controls. For example, LIST control will have list items each containing one or more child controls.
    • <actions> ... </actions> - Actions. For example, an action triggered on event “TAP” can only be attached to a control that can receive the tap gesture.
  • An action can contain a child element action. Actions can be either nested or are peer to each other. See Peer Actions vs. Nested Actions.

  • XMADL elements have attributes which are defined as attribute=”value”. The values have to be in double quotes.

    <screen_deck name="value"/>
    
    <appearance><appearance/>
    
    <screens>
        <screen name="screen1">
            <controls>
                <control name="parentcontrol1">
                    <control name="childcontrol1"/>
                    <control name="childcontrol2"/>
                </control>
                <control name="control2">
                    <actions>
                        <action name="1">
                            <action name="1_1"/>
                        </action>
                    </actions>
               </control>
            </controls>
        </screen>
    </screens>
    

You may think, why do we have <screens> and <screen> tags. AVM allows you to write multiple screens in the same xml file. But for better source code management and for multi developer environment, one screen per xml is recommended. The usage remains the same in both.

To define multiple screens in a single xml, the structure will be

<screens>
    <screen>.......</screen>
    <screen>.......</screen>
    <screen>.......</screen>

</screens>

XML - Escaping reserved charaters

There are 5 predefined entity references in XML

&lt;      <    less than
&gt;      >    greater than
&amp;     &    ampersand
&apos;    '    apostrophe
&quot;    "    quotation mark

Only the characters < and & are strictly illegal in XML. The greater than character is legal, but it is a good habit to replace it.

XMADL Elements - attributes and values

Sample XMADL code

Sample XMADL code for screen_deck

<screen_deck name="appembletestapp" version="Appemble-Test-1.0"
    short_description="Appemble test app"
    long_description="Appemble test app" size="1024" publisher_name="Appemble"
    publish_date="2012-05-31" starting_screen_name="home" />

Sample XMADL code for appearance

 <appearances>
    <appearance name="white" font_family="Sans-Serif" font_name="Helvetica" font_size="5"
        font_color="#000000" background_color="#FFFFFF" alpha="0"
        justify="CENTER"
        font_style_bold="1" font_style_emboss="1"/>
    <appearance name="black" font_family="Sans-Serif" font_name="Helvetica" font_size="2.7"
        font_color="#000000" background_color="#FFFFFF" alpha="255"
        justify="CENTER"
        font_style_bold="1" font_style_emboss="1"/>
</appearances>

Sample XMADL code for screen

<screens>
    <screen name="home" initial_layout="PORTRAIT"
            allowed_layouts="BOTH" width="100" height="100" background="bluebackground.png"
            title_background="titlebar.png">

        <!-- Starting screen controls -->
        <!-- Starting controls on Title Bar -->
            <title_controls>
                <control type="TEXT" x="0" y="2" width="100" height="7" default_value="Home"
                         appearanceName="8" data_type="VARCHAR"/>
            </title_controls>
        <!-- Ending controls on Title Bar -->

        <!-- Starting body controls -->
        <controls>
            <control type="TEXT" x="10" y="20" width="80"
                     height="25" appearance_name="white" word_wrap="1"
                     default_value="You have successfully launched your
                     first app!"/>

            <control type="PUSHBUTTON" x="10" y="70"
                     width="80" height="10" permission="READONLY"
                     appearance_name="black"
                     data_type="VARCHAR"default_value="Enter App" >

                <!-- attaching action to this control -->

                <actions>
                    <action event_list="TAP"
                            action_name="NEXT_SCREEN" target="form"/ >
                </actions>
            </control>
        </controls>
        <!-- Ending screen controls -->
    </screen>
</screens>