XMADL element : <screen>

Screen Attributes

An app is made up of one or more screens. This XMADL element allows the app writer to specify properties to the screen. It is generally recomended to define this element in the file called “<screen_name>.xml” though any file name can be used.

Attributes Description Mandatory Values
name Describes the name of the screen Yes user defined
screen_type

Describes what type of screen it is.

There are 4 types defined

No

SCREEN (setby default, user does not need to define it)

DIALOG

LONG_TASKS

SPLASH

width Specifies the width of the screen No

100% (setby default, user does not need to define it)

For DIALOG, user can define the value

height Specifies the height of the screen No

100% (setby default, user does not need to define it)

For DIALOG, user can define the value

menuOrder

If the screen is at the top level of navigation,

the menu order of the screens in the default tab bar is

set in this field. Generally for apps there can be upto

5 tab elements. Learn more about TABBED screens

required for

TAB screens

only

-1 : (default - no tabs)

0 : First element in the tab bar

1 : Second element in the tab bar

so on..

menuName

Specifies the menu name in text on the tab bar

Learn more about TABBED screens

required for

TAB screens

only

user defined
icon

Specifies the tab bar icon for the screen.

Learn more about TABBED screens

required for

TAB screens

only

user defined
tab_group_name

Specifies the tab group name for the tabs.

Multiple tab groups can be defined in a single app

Learn more about TABBED screens

required for

TAB screens

only

user defined
allowed_layouts Defines the Orientation allowed for the screen No

BOTH (default)

PORTRAIT

LANDSCAPE

allow_reorientation Defines if re-orientation is allowed for the screen No

TRUE (default)

FALSE

scroll

Defines if Scrolling is needed or not.

A scroll bar will appear when the content is more than

the height or width of the screen

No

NONE (default)

VERTICAL

HORIZONTAL

local_data_source Defines local data source for controls in the screen No See Attributes defining data source for screen
remote_data_source Defines url from where the screen needs to get the data No See Attributes defining data source for screen
remote_request_type Defines type of remote request for the server No

GET (default)

POST

PUT

DELETE

See Attributes defining data source for screen

remote_data_save _locally Instructs AVM to attempt to save data locally. No

boolean

See Attributes defining data source for screen

title_background

Sets the Title background for this screen

Note: if the value is set at screen_deck level, this

will over ride it

No

hex code, example: #474747

image, example: titlebar.png

background

Sets the background for the entire app

Note: if the value is set at screen_deck level, this

will over ride it

No

hex code, example: #FFFFFF

image, example: backgrnd.png

initial_focus

Defines the control to which the focus should be when

the screen paints

No user defined name of control
on_resume_update

Defines if the data needs to be fetched again on

coming back to the screen

No

0 (default) - data will not be refreshed

1 - data will be fetched again

os Defines on which platform the screen 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 is the screen needs to be generated or not No

0 - default (not deleted)

1 - delete

screen_type

  • By default every screen is of type SCREEN, whose dimensions are 100% in width and 100% in height.
  • For a screen if type DIALOG, you can define the dimensions of the dialog. If the size defined is more than 80%, then the size will still be 80% of the screen.
  • LONG_TASKS screen type is used when actions for the current screen (screen level actions) need to be performed in the background.
  • SPLASH screen type is used to display splash screen

TABBED screens

In order to define tabbed screens, menuOrder, menuName and tab_group_name need to be defined. Icon is not mandatory.

Example - The following code shows four tabbed screens Screen 1, Screen 2, Screen 3, Screen 4.

<screen name="screen_1" menuOrder="0" menuName="Screen 1" icon="notepad.png"
        tab_group_name="tabgroup1">

Note

By default

  • For iOS, the tabs will appear at the bottom of the screen
  • For Android, the tabs will appear at the top of the screen
_images/tabscreen.png _images/iOS_tabscreen1_small.png

Setting the tab bar appearance

In Android, you can set additional attributes to change the appearance of the tab bar. The tab bar appearance is set with each screen.

Attributes Description Mandatory
tab_bar_height This can be expressed in px, dp, or % of the screen height No
tab_bar_appearance_name Appearance name to set the background color No
tab_bar_background_image Background Image if need be for this tab. No

Note

The tab_bar_height must be the same for all screen part of the tab group.

Orientation

By default the orientation is set to BOTH, which means both PORTRAIT AND LANDSCAPE. If the user is holding the device in PORTRAIT mode, then the screen will be displayed in PORTRAIT. If the device is in LANDSCAPE mode, then the screen will be displayed in LANDSCAPE mode.

If you want the screen to be generated in one particular orientation you need to give allowed_layouts = “PORTRAIT” or allowed_layouts = “LANDSCAPE”. If allowed_layouts = “LANDSCAPE”, even if the device is in PORTRAIT mode, the screen will still be in LANDSCAPE mode.

If you want the orientation to remain the same even though the user changes the device orientation, then you need to define allow_reorientation = “FALSE”. By default allow_reorientation = “TRUE”. By default the screen will respond to device orientation changes. When allow_reorientation=”TRUE” the screen is repainted. If the screen fetches data from server or local, the data will be fetched again.

Scrolling

If scrolling is set to VERTICAL, vertical scroll bar will be visible on the screen when the content is more than the height of the screen.

If scrolling is set to HORIZONTAL, horizontal scroll bar will be visible when the content is more than the width of the screen.

By default scroll = “NONE”.

Note

There are some controls when scrolling should not be used.

  • If WEBVIEW control is used on the screen, scroll should be NONE. WEBVIEW had its own scroll bars (horizontal and vertical).If the content is more than the height if WEBVIEW control, vertical scroll bar is displayed. If the content is more than the width of WEBVIEW control, horizontal scroll bar is displayed. If content is more than width and height of the control, both scroll bars will be displayed
  • If a screen displays dynamic LIST, scroll should be NONE. LIST control has its own scroll bar and will be displayed when the content height is more than the height of the LIST control.

Title background

Title bar background can be set at screen level and at application level. If the title_background is defined in screen_deck and also in screen, then the screen title_background will over ride the one at application level. If a designer wants to have different title bars for different screens, it can be set in the particular screen. The value of title_background can be hex color code or name of image file

Screen background

Screen background can be set at screen level and at application level. If the background is defined in screen_deck and also in screen, then the screen background will over ride the one at application level. If a designer wants to have different background for different screens, it can be set in the particular screen. The value of background can be hex color code or name of image file

Reference tutorial

You can test the screen properties in appemble-tutorial-screen and appemble-tutorial-tab-screen. If you have not downloaded tutorial source code, click on Download Source Code - Tutorials

Android - Right click on appemble-tutorial-screen and click on Run as Android application. Right click on appemble-tutorial-tab-screen and click on Run as Android application.

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