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 Content of the Scolvo scripts session.

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!

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:

Definition of HelloWorldPage¶

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

Displaying the page with action events¶

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

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

Definition of the DetailPage¶

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.

Definition of onNavigationButtonClicked function¶

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

The code at the end¶

After performing the changes descibed above, the final form of the mobile.scolvo file should be as defined below:

mobile.scolvo¶

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:

mobile_dictionary_en.properties¶

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