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 of 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 (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.
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 ATTRIBUTES(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.
...
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