Adding Panes to a Window

By default, the NativeUI nUIWindowDisplay object has two panes, Pane 0 and Pane 1. Pane 1 is for navigation using the nUINavView object. Pane 0 is the main pane and occupies all space that Pane 1 does not use.

The following code example is for a setPaneDimensions method. It defines the dimensions for three panes: the main pane, the navigation pane, and the additional side pane. The code explicitly defines the dimensions of the side pane and the navigation pane. The side pane occupies 40% of the total screen width or two inches, whichever is the smaller. The pane for the navigation bar uses the full width of the screen. The main pane occupies the remaining available space.

int mainpane = 0;
int navpane = 1;
int sidepane = 2;
nUIWindowDisplay main_window;
nUINavView main_navbar_view;
protected void setPaneDimensions()
{
int sidepane_width = Math.min ((CURRENT_SCREEN_WIDTH * 40) / 100,
CURRENT_SCREEN_PPI * 2);
int navbar_height = 0;
if (main_navbar_view != null)
//the navigation bar is not used everywhere in the application
{
navbar_height = main_navbar_view.getHeight ();
}
int height = main_window.getHeight ();
main_window.setPaneDimensions (sidepane, new int [] { 0, 0, sidepane_width,
height - navbar_height });
main_window.setPaneDimensions (mainpane, new int [] { sidepane_width, 0,
CURRENT_SCREEN_WIDTH - sidepane_width, height - navbar_height });
//navigation pane is full-width and calculated automatically.
}

After defining the setPaneDimensions method, it can be invoked during onCreateMainWindow when creating the main window of the application. By doing so, the setPaneDimensions method creates the pane structure. You should define the pane structure as soon as the screen dimensions and screen pixels per inch (PPI) are available.

The following code example shows how to create the main pane, navigation pane, and side pane, as well as showing how to set transitions. Note that the logic adds the navigation pane before setting the pane dimensions so that the setPaneDimensions method can adjust the height.

nUIViewDisplay main_view, side_view;
//onCreateMainWindow is called from CanvasNativeUI.
protected nUIWindowDisplay onCreateMainWindow()
{
main_window = new nUIWindowDisplay(NUIID_MAIN_WINDOW);
main_window.add(onCreateMainNavbarView());
main_view = onCreateMainView();
side_view = onCreateSideView();
setPaneDimensions(); //size panes according to contents
transitionToView(main_view, mainpane);
transitionToView(side_view, sidepane);
return main_window;
}

Note:

By default, the NativeUI system assumes that the application uses two panes, Pane 0 and Pane 1, and uses the default size for each. If an application uses additional panes, the NativeUI system must be aware of the additional panes. To do so, in onCreateMainWindow, the application logic should call the setPaneDimensions method before adding content to panes higher than 1. In the above example, that means before adding content to the additional side pane, Pane 2.

As shown in the code sample below, you can also use the setPaneDimensions method to handle changing the pane sizes when the orientation of a device changes, for example, turning an iPad from landscape to portrait. Whenever the orientation of a device changes, sizeChanged() is called.

public void sizeChanged(int new_width, int new_height)
{
// IMPORTANT to do this first to enable internal handling
// that needs to happen when the canvas size changes.
super.sizeChanged (new_width, new_height);

setPaneDimensions ();
}