Navigator pane

A navigator pane enables access to several views in an application from a main panel.

For many mobile applications, you will want to provide a view that allows you to show different forms and views that are active at the same time, to expose different functional areas for your application. This can be achieved by providing a top-level navigator with several views, controlled by parallel dialogs.

In order to implement a top-level navigator, create a window with the TYPE=NAVIGATOR attribute and without a form (i.e. using the x ROWS y COLUMNS clause). This window will only be used to display a set of actions views, to let the user switch between views. A view can be implemented as a split view by using a left and right typed window.

Important: The navigator window must be the root window (after closing the default SCREEN window). If regular windows are created before the navigator window, these must be closed:

-- Case 1: Screen window is closed, navigator is the root window
CLOSE WINDOW screen
...
OPEN WINDOW w_main WITH 10 ROWS, 80 COLUMNNS ATTRIBUTES(TYPE=NAVIGATOR)

-- Case 2: Close regular windows created before the navigator window 
OPEN WINDOW w1 WITH FORM "form1"
...
CLOSE WINDOW w1
...
OPEN WINDOW w_main WITH 10 ROWS, 80 COLUMNNS ATTRIBUTES(TYPE=NAVIGATOR)

On iOS devices, the navigator window displays in a typical iOS tab bar at the bottom of the screen:

To customize the iOS application, define the color of the iOS tab bar with the iosTabBarTintColor and iosTabBarUnselectedColor Window-class style attribute.

For example, define a STYLE attribute when creating the window in the program code:

OPEN WINDOW tabbar WITH 1 ROWS,2 COLUMNS
    ATTRIBUTE(TYPE=NAVIGATOR,STYLE=mytabbar)

Then, in your .4st style definition file, define a global style for the Window elements, and a specific style to define the colors for the tab bar elements:

<StyleList>
  <Style name="Window">
    <StyleAttribute name="windowType" value="normal" />
    <StyleAttribute name="startMenuPosition" value="menu" />
    <StyleAttribute name="iosTintColor" value="blue" />
    <StyleAttribute name="iosNavigationBarTintColor" value="#00366B" />
    <StyleAttribute name="iosToolBarTintColor" value="#00366B" />
    <StyleAttribute name="iosTabBarTintColor" value="#00366B" />
  </Style>
  <Style name="Window.mytabbar">
    <StyleAttribute name="iosTintColor" value="#ffff00" />
    <StyleAttribute name="iosTabBarUnselectedColor" value="#ff0000" />
  </Style>
</StyleList>

On Android™ devices, the navigator window displays in the top of the screen, in the view control of the action bar (2):

The navigator window will be controlled by a dedicated parallel dialog implementing a MENU instruction, with the action handlers to select the related window, when the corresponding action is fired.

Important: The name of the actions in the navigator menu must match the name of the corresponding window, which is typically, the left-typed window when using split views.

The next example implements:

The w_main window, and its corresponding controller, the d_navigator parallel dialog.
The w_customers window as a left-pane, with the d_customers parallel dialog.
The w_orders window as a right-pane, with the d_orders parallel dialog.
The navigator MENU dialog implemens the w_customer and w_orders action handlers.

...
OPEN WINDOW w_main WITH 10 ROWS, 80 COLUMNNS ATTRIBUTES(TYPE=NAVIGATOR)
START DIALOG d_navigator
OPEN WINDOW w_customers WITH FORM "customers" ATTRIBUTES(TYPE=LEFT)
START DIALOG d_customers
OPEN WINDOW w_orders WITH FORM "orders" ATTRIBUTES(TYPE=RIGHT)
START DIALOG d_orders
...
DIALOG d_navigator()
   MENU
       ON ACTION w_customers ATTRIBUTES(TEXT="Customers", IMAGE="smiley")
          CURRENT WINDOW IS w_customers
       ON ACTION w_orders ATTRIBUTES(TEXT="Orders")
          CURRENT WINDOW IS w_orders
   END MENU
END DIALOG

The functionality is the same on either mobile platforms: providing the user with the ability to navigate between multiple views efficiently. The rendering depends on the platform:

On an iOS device, navigator window renders as a tab bar, displaying at the bottom of the screen.
On an Android device, navigator window renders as a spinner, which is a drop-down menu in the action bar.