Page

Page element

A page element represents a page on the UI, it is a first level UI element in a Scolvo script.

Syntax of the page element

page <page-id> {<page-descriptor>}

where:

  • The <page-id> is the name of the page.

  • The <page-descriptor> defines the elements and the look of the page element.

Events of the page

The page UI element supports following events:

  • on loaded: this event is fired when the page is loaded.

  • on page action: this event is fired when button of one of the page actions is selected.

Example on loaded event and action of example page action of the page ExamplePage
1function onExamplePageLoaded(originId) {
2  // business logic to be executed according to the application logic
3}
4
5function onExampleAction(originId) {
6  // business logic to be executed when action button is clicked
7}

Dictionary keys of the page

The title of the page element is defined in the dictionary, the corresponding key has the form of ‘page_<page-name>_headerText’. Other key form is defined for page actions, where the form can be page_<page-name>_<page-action-name>_label and page_<page-name>_<page-action-name>_icon. For possible icon values check the Icons API documentation page.

Dictionary key definition for page Example page in the mobile_dictionary_en.properties file
1page_ExamplePage_headerText=Example page title
2page_ExamplePage_DoAction_label=Do the logic
3page_ExamplePage_DoAction_icon=\ue939

Syntax of the page descriptor

The page descriptor can contain one or more attribute descriptors.

(<attribute-descriptor>[,|;])+ <page-actions> <ui-elements>

where:

  • Multiple <attirbute-descriptor> can be defined, the definitions are optionally separated by ‘,’ or ‘;’.

  • The <page-actions> block defines page level actions.

  • The <ui-elements> block can contain UI elements construction a page content, this is not described here in detail.

Syntax of the page attribute descriptor

<attirubte-name>: <attribute-value>

where:

  • List of valid attribute names and values are defined by client device types below.

Valid page attribute names and values

The following table describes the valid attributes and its values for different client device types.

Valid attribute keys and values

Attribute name

Description

Valid values

Example

template

Defines the template to be used

vertical or horizontal

template: vertical,

layout

Defines the layout to be used

fullscreen or general (default value)

layout: fullscreen;

scolvoMenuVisible

Defines if this page is visible in the Scolvo menu

Boolean value: true or false, default value is false

scolvoMenuVisible: true;

settingsVisible

Defines if the Settings menu is available from this page

Boolean value: true or false, default value is false

settingsVisible: true;

Syntax of the page actions

actions: <action-list>[,|;]

where:

  • The actions are defined by ‘actions’ keyword and the list of actions. This definition can be optionally separated from other page description elements by ‘,’ or ‘;’.

Syntax of the page action-list

[<action-name>+]

where:

  • The action list is defined as collection of strings (in []), where the action names are double-quoted strings. E.g.: [“FirstPageAction”, “SecondPageAction”].

Example page definition

The following code examples are defining a page and its value, where an example UI element is added:

Example definition of a page with menu and display built-in function
 1menu defaultItem Example {
 2  item Example
 3}
 4
 5function onExample(originId) {
 6  display(ExamplePage, {}, originId);
 7}
 8
 9page ExamplePage {
10  layout: vertical;
11  template: fullscreen;
12  scolvoMenuVisible: true;
13  settingsVisible: true;
14
15  actions: ["Do"];
16  label DescriptionLabel {
17    template: display1Primary;
18  }
19}
20
21function onExamplePageLoaded(originId) {
22}
Dictionary key definition for the example label
1menu_Example_label=Example
2
3page_ExamplePage_headerText=Example page
4page_ExamplePage_Do_label=Do the action
5page_ExamplePage_Do_icon=\ue939
6page_ExamplePage_DescriptionLabel_defaultText=Here and now!