.. index:: Scolvo script 

Menu Structure lesson
=====================

In this lesson we start with a new application, so no previous code content is required. Deatils of *menu* item is described in :ref:`Menu` API documentation section.

Defining a menu with one item
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Every application must have a *menu* defined, what is presented as entry point of the UI. At first we define a simple *menu* with only one Item, what is referenced as default item of the application.

.. code-block:: scolvoscript
  :caption: Menu with only one item
  :linenos:

  
  menu defaultItem Tags {
   item Tags
  }
  
..

For the new menu *item* we define a label and an icon (check the :ref:`Available icons` page) too:

.. code-block:: properties
  :caption: Definition of the label and icon in mobile_dictionary_en.properties
  :linenos:

  
  menu_Tags_label=Tags
  menu_Tags_icon=\ue93b
  
..

When a user selects a menu item, then a function with name *on<Item name>* is executed. For our example this function is the *onTags(originId)*.

.. code-block:: scolvoscript
  :caption: Definition of the onTags() function without any logic
  :linenos:

  
  function onTags(originId) {
  }
  
..

.. _tags_page_introduction:

We can define a :ref:`Page` object to be presented when selecting this **Tags** menu.

.. code-block:: scolvoscript
  :caption: Definition of the Tags page
  :linenos:

  
  page TagsPage {
    layout: vertical;
    template: general;
    settingsVisible: true;
    scolvoMenuVisible: true;
  }
  
  function onTagsPageLoaded(originId) {}
  
..

Now we can change the logic of the *onTags* function to open the Tags page using the :ref:`display()` built-in function.

.. code-block:: scolvoscript
  :caption: Definition of the Tags page
  :linenos:

  
  function onTags(originId) {
    display(TagsPage, {}, originId);
  }
  
..

Extending the menu with a group
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
To have more sophisticated application we introduce a menu *group*. So the new form of the *menu* definition is as below:


.. code-block:: scolvoscript
  :caption: Menu with one item and a group containing an item
  :linenos:

  
  menu defaultItem Notes {
    group Notes defaultItem All {
      item All
   },
   item Tags
  }
  
..

We extend the dictionary with new key (for an *item* in *group* only the label can be defined):

.. code-block:: properties
  :caption: Definition of the label in mobile_dictionary_en.properties
  :linenos:

  
  menu_Notes_All_label=All
  
..


The default item of the *menu* is now the Notes group, and as the default item of the Notes is the **All** item, this is the default of the *menu*.

For the new **All** item a function is defined too:

.. code-block:: scolvoscript
  :caption: Definition of the onAll() function without logic
  :linenos:

  
  function onAll(originId) {
  }
  
..

To have meaningful example we add a page to be opened and change the content of the **onAll()** function.


.. code-block:: scolvoscript
  :caption: Definition of the Notes page and changed onAll function
  :linenos:

  
  page NotesPage {
    layout: vertical;
    template: general;
    settingsVisible: true;
    scolvoMenuVisible: true;
  }
  
  function onNotesPageLoaded(originId) {}
  
  function onAll(originId) {
    display(NotesPage, {}, originId);
  }
  
..

To have more complex functionality we extend the *group* with another item, **Pinned**.

.. code-block:: scolvoscript
  :caption: Menu with one item and a group with multiple items
  :linenos:

  
  menu defaultItem Notes {
    group Notes defaultItem All {
      item All,
      item Pinned
   },
   item Tags
  }
  
..

Now we can define the label for the **Pinned** page:

.. code-block:: properties
  :caption: Definition of the label in mobile_dictionary_en.properties
  :linenos:

  
  menu_Notes_Pinned_label=Pinned
  
..

Another page is defined for this *menu item* with name PinnedPage. The code now contains the **onPinned()** function and the page definition too:

.. code-block:: scolvoscript
  :caption: Pinned page definition and onPinned() function
  :linenos:

  
  page PinnedPage {
    layout: vertical;
    template: general;
    settingsVisible: true;
    scolvoMenuVisible: true;
  }
  
  function onPinnedPageLoaded(originId) {}

  function onPinned(originId) {
    display(PinnedPage, {}, originId);
  }
  
..

.. _menu_structure_result:

The final code with *menu* items and groups
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
After performing the changes descibed above, the final form of the mobile.scolvo file should be as defined below:

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

  menu defaultItem Notes {
    group Notes defaultItem All {
      item All,
      item Pinned
   },
   item Tags
  }
  
  function onAll(originId) {
    display(NotesPage, {}, originId);
  }

  function onPinned(originId) {
    display(PinnedPage, {}, originId);
  }

  function onTags(originId) {
    display(TagsPage, {}, originId);
  }
  
  page NotesPage {
    layout: vertical;
    template: general;
    settingsVisible: true;
    scolvoMenuVisible: true;
  }

  function onNotesPageLoaded(originId) {}
  
  page PinnedPage {
    layout: vertical;
    template: general;
    settingsVisible: true;
    scolvoMenuVisible: true;
  }

  function onPinnedPageLoaded(originId) {}
  
  page TagsPage {
    layout: vertical;
    template: general;
    settingsVisible: true;
    scolvoMenuVisible: true;
  }

  function onTagsPageLoaded(originId) {}
..

The content of the dictionary file is as below:

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

  
  menu_Notes_label=Notes
  menu_Notes_icon=\ue956
  menu_Notes_All_label=All
  menu_Notes_Pinned_label=Pinned
  menu_Tags_label=Tags
  menu_Tags_icon=\ue93b
  
..

Menu structure 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_4_browser_light.png
   :width: 600
   :align: center

The result of code in browser with light theme


**Using browser with dark theme**

.. image:: images/lesson_4_browser_dark.png
   :width: 600
   :align: center

The result of code in browser with dark theme


**Using mobile browser with light theme**

.. image:: images/lesson_4_mobile_browser_light.png
   :width: 300
   :align: center

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

**Using mobile browser with dark theme**

.. image:: images/lesson_4_mobile_browser_dark.png
   :width: 300
   :align: center

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


**Using mobile with light theme**

.. image:: images/lesson_4_mobile_light.png
   :width: 300
   :align: center

The result of code **mobile** with **light** theme


**Using mobile with dark theme**

.. image:: images/lesson_4_mobile_dark.png
   :width: 300
   :align: center

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