Hello world! example

To show the basics of the Scolvo script language, we create a very simple content consisting of a menu, a menu item and appropriate event to be invoked by the Scolvo Virtual Machine when activating the menu item. In this example we use a page and a dictionary to show simple content on a client device.

The project structure is the following:

• mobile.scolvo - Scolvo script file serving as the entry point of a script set of a mobile device.

• mobile_dictionary_en.properties - A dictionary file containing keywords used for UI construction and values in english.

Defining a menu

The application’s entry point is always the menu definition, what it is a mandatory item. A Scolvo application should have at least one menu item defined (you can find more details in the Menu element section of the API documentation).

The application is started by the Scolvo Client Framework, and it automatically triggers the defaultItem menu item (see details in Menu element). In our case, this is the ‘HelloWorld’ item. As a consequence the Scolvo Virtual Machine (SVM) executes the logic of the appropriate menu event: the onHelloWorld(originId) function (the value of the originId is a unique event id generated by the SVM.

Menu definition and event declaration of the HelloWorld example

menu defaultItem HelloWorld {
  item HelloWorld
}

function onHelloWorld(originId) {
  display(HelloWorldPage, {}, originId);
}

Definition of the HelloWold page

The logic defined in the above example function onHelloWorld is to ivoke the display(pageName, pageData, originId) built-in function of the SVM to show a page on the UI. The name of the page definition is HelloWorldPage what has to be defined in the Scolvo script file. For more details on page element please check the relevant Page element page on the Scolvo script API documentation.

Here we define a simple page for this example, having the default (general) template and vertical layout. The content consists of one label using the display1Primary template defining how the text should look like.

All page elements have lifecycle management and the Scolvo Client Framework executes automatically the appropriate event. Here the onHelloWorldPageLoaded function is executed just after the page is loaded. Actually we do not define logic for this function.

Page definition with onLoaded event declaration

page HelloWorldPage {
  layout: vertical;
  template: general;
  settingsVisible: true;
  scolvoMenuVisible: true;

  label HelloWorldLabel {
    template: display1Primary;
    alignment: center;
  }
}

function onHelloWorldPageLoaded(originId) {}

More details about the attributes of the page, and aligment of the label can be found in API documentation (Label element). We will have the settings page (included by default in all applications) navigation visible and menu will also be visible even though we will only have one item in it. Our page will consist of one label using the display1Primary template, which defines how the text will look like.

The application’s dictionary

A dictionary could contain key-value pairs. Scolvo Development Platform supportssupport multilingual applications, where based on the actually selected language the system looks for keys for e.g. to construct the UI. The naming pattern of a dictionary file is <clientType>_dictionary_<language>.properties.

The UI related keys reflect the structure of the pages, so the text of the menu is defined by the key menu_HelloWorld_label and the value of the lable on the page is defined by the key page_HelloWorldPage_HelloWorldLabel_defaultText.

Dictionary with keys for menu item and page label

menu_HelloWorld_label=HelloWorld
page_HelloWorldPage_HelloWorldLabel_defaultText=Hello world!

Content of the Scolvo scripts

During our lesson we’ve created two files

• mobile.scolvo

• and mobile_dictionary_en.properties

with the content below.

mobile.scolvo

menu defaultItem HelloWorld {
  item HelloWorld
}

function onHelloWorld(originId) {
  display(HelloWorldPage, {}, originId);
}

page HelloWorldPage {
  layout: vertical;
  template: general;
  settingsVisible: true;
  scolvoMenuVisible: true;

  label HelloWorldLabel {
    template: display1Primary;
    alignment: center;
  }
}

function onHelloWorldPageLoaded(originId) {}

mobile_dictionary_en.properties

menu_HelloWorld_label=HelloWorld
page_HelloWorldPage_HelloWorldLabel_defaultText=Hello world!

Screen shots

The UI resulted of the above code on different client types should look as below:

Using browser with light theme

The result in browser with light theme

Using browser with dark theme

The result in browser with dark theme

Using mobile browser with light theme

The result in mobile browser with light theme

Using mobile browser with dark theme

The result in mobile browser with dark theme

Using mobile with light theme

The result in mobile with light theme

Using mobile with dark theme

The result in mobile with dark theme