.. index:: Scolvo script 

Page navigation lesson
======================

To go on with the the basics of the Scolvo script language, in this lesson we extend the functinality of the existing page by adding a button and a deatils page.

The code at start
~~~~~~~~~~~~~~~~~
After finishing the previous lesson, the code should look like as described in the :ref:`Content of the Scolvo scripts <hello_world_result>` session.

.. 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!
..


Adding a Button
~~~~~~~~~~~~~~~
The first step is to add a button to the existing page to be able to open the deatils page. The definition of the HelloWorldPage is simply extended with a *spacer* element and a *button* element. These definitions are simply placed below the existing label as shown below in the code example:

.. code-block:: scolvoscript
  :caption: Definition of HelloWorldPage
  :linenos:

  page HelloWorldPage {
    layout: vertical;
    template: general;
    settingsVisible: true;
    scolvoMenuVisible: true;
  
    label HelloWorldLabel {
      template: display1Primary;
      alignment: center;
    }
    
    spacer {
      span: 20;
    }
    
    button NavigationButton {
      template: primary;
    }
  
  }
..

The new button is created with the name *NavigationButton*, it has only one attribute defined, the *template* with value "primary" (the *button* element supports many templates, check the details at API documentation).

Defining the logic
~~~~~~~~~~~~~~~~~~
We can define the logic of the button by binding a function to the *onClick* event, using the :ref:`createClickSourceEvent()` built-in function when displaying the HelloWorldPage in the onHelloWorld() function. Here we simply define what function to be executed when the button is clicked. Now the content of this function should be:

.. code-block:: scolvoscript
  :caption: Displaying the page with action events
  :linenos:

  function onHelloWorld(originId) {
    var actionEvents = [
      createClickSourceEvent("NavigationButton", "NavigationButtonClicked")
    ];
    display(HelloWorldPage, {}, originId, actionEvents);
  }
..

The :ref:`display()` function call is extended with the definition of the only action event, what is a *Source Event*. (The *display()* function registers all action events when the page is opened.)

From now on when the user clicks on the **NavigationButton** then the **onNavigationButtonClicked** function is executed. As next step we have to define this function and its logic. As the goal of the lesson is to open a new deatils page when clicking on the button, a new page object has to be defined too. The page is simple, it contains only a label. Beside the page definintion we write the appropriate *onLoaded* function too.

.. code-block:: scolvoscript
  :caption: Definition of the DetailPage
  :linenos:

  
  page DetailPage {
    layout: vertical;
    template: general;
  
    label DetailPageLabel {
      template: display1Primary;
      alignment: left;
    }
  }
  
  function onDetailPageLoaded(originId) {}
  
..

Finally we can use the new Page object in the **onNavigationButtonClicked** function.

.. code-block:: scolvoscript
  :caption: Definition of onNavigationButtonClicked function
  :linenos:

  function onNavigationButtonClicked(originId) {
    display(DetailPage, {}, originId);
  }
..

.. _page_navigation_result:

The code at the end
~~~~~~~~~~~~~~~~~~~
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 HelloWorld {
    item HelloWorld
  }
  
  function onHelloWorld(originId) {
    var actionEvents = [
      buildSourceClickedEvent("NavigationButton", "NavigationButtonClicked")
    ];
    display(HelloWorldPage, {}, originId, actionEvents);
  }
  
  page HelloWorldPage {
    layout: vertical;
    template: general;
    settingsVisible: true;
    scolvoMenuVisible: true;
  
    label HelloWorldLabel {
      template: display1Primary;
      alignment: left;
    }
  
    spacer {
      span: 20;
    }
  
    button NavigationButton {
      template: primary;
    }
  }
  
  function onHelloWorldPageLoaded(originId) {}
  
  function onNavigationButtonClicked(originId) {
    display(DetailPage, {}, originId);
  }
  
  page DetailPage {
    layout: vertical;
    template: general;
  
    label DetailPageLabel {
      template: display1Primary;
      alignment: left;
    }
  }
  
  function onDetailPageLoaded(originId) {}
  
..

As we have defined new UI elements, the dictionary file of the application has to be extended with the new keys:

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

  
  menu_HelloWorld_label=HelloWorld
  page_HelloWorldPage_headerText=Hello world
  page_HelloWorldPage_HelloWorldLabel_defaultText=Hello world!
  page_HelloWorldPage_NavigationButton_label=Display details
  
  page_DetailPage_headerText=Details
  page_DetailPage_DetailPageLabel_defaultText=Details label
..


Page navigation screen shots
~~~~~~~~~~~~~~~~~~~~~~~~~~~~
The UI resulted of the above code on different client types should look as below:

HelloWold page
--------------

**Using browser with light theme**

.. image:: images/lesson_2_browser_light.png
   :width: 600

The result of HelloWorld page in browser with light theme


**Using browser with dark theme**

.. image:: images/lesson_2_browser_dark.png
   :width: 600

The result of HelloWorld page in browser with dark theme


**Using mobile browser with light theme**

.. image:: images/lesson_2_mobile_browser_light.png
   :width: 300

The result of HelloWorld page in **mobile browser** with **light** theme

**Using mobile browser with dark theme**

.. image:: images/lesson_2_mobile_browser_dark.png
   :width: 300

The result of HelloWorld page in **mobile browser** with **dark** theme


**Using mobile with light theme**

.. image:: images/lesson_2_mobile_light.png
   :width: 300

The result of HelloWorld page in **mobile** with **light** theme



**Using mobile with dark theme**

.. image:: images/lesson_2_mobile_dark.png
   :width: 300

The result of HelloWorld page in **mobile** with **dark** theme


Detail page
-----------

**Using browser with light theme**

.. image:: images/lesson_2_detail_browser_light.png
   :width: 600

The result of Detail page in browser with light theme


**Using browser with dark theme**

.. image:: images/lesson_2_detail_browser_dark.png
   :width: 600

The result of Detail page in browser with dark theme


**Using mobile browser with light theme**

.. image:: images/lesson_2_detail_mobile_browser_light.png
   :width: 300

The result of Detail page in **mobile browser** with **light** theme

**Using mobile browser with dark theme**

.. image:: images/lesson_2_detail_mobile_browser_dark.png
   :width: 300

The result of Detail page in **mobile browser** with **dark** theme


**Using mobile with light theme**

.. image:: images/lesson_2_detail_mobile_light.png
   :width: 300

The result of Detail page in **mobile** with **light** theme



**Using mobile with dark theme**

.. image:: images/lesson_2_detail_mobile_dark.png
   :width: 300

The result of Detail page in **mobile** with **dark** theme