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

Menu with only one item

menu defaultItem Tags {
 item Tags
}

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

Definition of the label and icon in mobile_dictionary_en.properties

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

Definition of the onTags() function without any logic

function onTags(originId) {
}

We can define a Page object to be presented when selecting this Tags menu.

Definition of the Tags page

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 display() built-in function.

Definition of the Tags page

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:

Menu with one item and a group containing an item

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

Definition of the label in mobile_dictionary_en.properties

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:

Definition of the onAll() function without logic

function onAll(originId) {
}

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

Definition of the Notes page and changed onAll function

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.

Menu with one item and a group with multiple items

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

Now we can define the label for the Pinned page:

Definition of the label in mobile_dictionary_en.properties

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:

Pinned page definition and onPinned() function

page PinnedPage {
  layout: vertical;
  template: general;
  settingsVisible: true;
  scolvoMenuVisible: true;
}

function onPinnedPageLoaded(originId) {}

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

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:

mobile.scolvo

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:

mobile_dictionary_en.properties

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

The result of code in browser with light theme

Using browser with dark theme

The result of code in browser with dark theme

Using mobile browser with light theme

The result of code in mobile browser with light theme

Using mobile browser with dark theme

The result of code in mobile browser with dark theme

Using mobile with light theme

The result of code mobile with light theme

Using mobile with dark theme

The result of code in mobile with dark theme