.. index:: Scolvo script, menu, menu item, page, dictionary, SVM

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 :ref:`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 :ref:`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.

.. code-block:: scolvoscript
  :caption: Menu definition and event declaration of the HelloWorld example
  :linenos:

  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 :ref:`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.

.. code-block:: scolvoscript
  :caption: Page definition with onLoaded event declaration
  :linenos:

  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 (:ref:`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*.

.. code-block:: properties
  :caption: Dictionary with keys for menu item and page label
  :linenos:

  menu_HelloWorld_label=HelloWorld
  page_HelloWorldPage_HelloWorldLabel_defaultText=Hello world!
..

.. _hello_world_result:

Content of the Scolvo scripts
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

During our lesson we've created two files

- mobile.scolvo
- and mobile_dictionary_en.properties

with the content below.

.. code-block:: scolvoscript
  :caption: mobile.scolvo
  :linenos:

  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) {}
..

.. code-block:: properties
  :caption: mobile_dictionary_en.properties
  :linenos:

  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**

.. image:: images/lesson_1_browser_light.png
   :width: 600
   :alt: The result in **browser** with **light** theme
   :class: with-border

The result in **browser** with **light** theme



**Using browser with dark theme**

.. image:: images/lesson_1_browser_dark.png
   :width: 600
   :alt: The result in **browser** with **dark** theme
   :class: with-shadow

The result in **browser** with **dark** theme



**Using mobile browser with light theme**

.. image:: images/lesson_1_mobile_browser_light.png
   :width: 300
   :alt: The result in **mobile browser** with **light** theme
   :class: with-border

The result in **mobile browser** with **light** theme



**Using mobile browser with dark theme**

.. image:: images/lesson_1_mobile_browser_dark.png
   :width: 300
   :alt: The result in **mobile browser** with **dark** theme
   :class: with-shadow

The result in **mobile browser** with **dark** theme


**Using mobile with light theme**

.. image:: images/lesson_1_mobile_light.png
   :width: 300
   :alt: The result in **mobile** with **light** theme
   :class: with-shadow

The result in **mobile** with **light** theme



**Using mobile with dark theme**

.. image:: images/lesson_1_mobile_dark.png
   :width: 300
   :alt: The result in **mobile** with **dark** theme
   :class: with-shadow

The result in **mobile** with **dark** theme