This tutorial explains all about the ScreenStackApplication class to design your ELIPS mobile app and get the best of each platform native navigation model.

All examples are taken from the UI Catalog sample app that can be downloaded from there.

Also available:
• Spanish version
• Resource and Variant Management in ELIPS Studio tutorial.

About Application Navigation Models

A navigation model defines how the user interacts and navigates through the application screens. This covers many aspects as diverse as:

• how can the user go back and forth from one screen to another (using both physical keys and the touchscreen),
• what animations and transitions can be displayed in between screens to create a smooth user experience,
• where to place the navigation bar (bottom, up... ) and related soft buttons to ensure a consistent look and feel,
• how to access and display the options menu (list, popup...), and much more.

Each smartphone platform has a navigation model of its own. User-friendliness and ease of navigation became key selling points for smartphones (or major drawbacks in some cases). Indeed, the way you deal with menus and navigation on an iPhone is different from the way you interact with an Android-based device, a Windows phone or a Symbian smartphone. End-users actually got accustomed to the navigation model of their devices (with more or less delight) and they expect a consistent look and feel when downloading applications.

As a Mobile Application developer, complying with the targeted platform navigation model is mandatory if you want to secure user adoption and satisfaction. But this requires a specific expertise and additional development effort.
That is where ELIPS Studio ScreenStackApplication class can help, by providing a unified navigation model.

About ScreenStackApplication Navigation Model

The main purpose of the ScreenStackApplication class is for developers to rely on a single navigation model to design their ELIPS apps for the various platforms. The ELIPS application navigation model is then mapped "behind-the-scene" to the native navigation model of the targeted platform.

In other words, by using the ScreenStackApplication class, your ELIPS application will automatically adapt to the iPhone navigation model once generated for iPhone and to the Android one once built for Android, all that with a single code-base!
Let us see how it works.

Using the ScreenStackApplication class

The ScreenStackApplication is the application container that embeds the unified ELIPS application model. It is a replacement for the <mx:application> and <mx:windowedapplication> tags, functioning as the entry point to an ELIPS application.

All you need is to start your ELIPS Application with this container:

 

Using the ScreenView class

Use the ScreenView class, to define the screens within your application. A ScreenStackApplication typically contains several ScreenView objects, one per actual screen:

The Navigation from one screen to another can be achieved using the following function:

• Jump to the specified screen:
  
    goToScreen("Text");

When going from one screen to another, the ScreenStackApplication stores the sequence in a so-called screen stack, enabling going back to a previous screen automatically (as you will see later) or programmatically, using such functions:

• Go back to the specified screen:
  
    goBack("Base");


• Go back one screen (i.e. the previous screen):
  
    goBack();

Using the TabNavigator class

Some applications consist in several tab panes - one pane being displayed at a time. It could be the case of a basic utility app with a main pane and a settings pane. For such a case, the TabNavigator class can be used. A TabNavigator contains a collection of panes (consisting in child container objects) - each with a label and/or icon. A ToggleButtonBar object is automatically created for navigating between the panes.

Of course, your application can use a mix of "regular" ScreenView objects and TabNavigator-based views.

[iPhone] Using the NavigationBarDescriptor class

The NavigationBarDescriptor class can be used to add a top navigation bar for apps targeting the iPhone.

The iPhone navigation bar typically displays a title - that can be defined using the "title" property - and a back button - that is handled automatically providing the screen stack. iPhone Navigation bar action buttons can also be set programmatically using the properties "leftAction" and "rightAction".

Predefined NavigationBarDescriptor iPhone styles can be set using the "styleName" property with values "styleBlue" and "styleBlack".

To associate a NavigationBarDescriptor with a ScreenView object, use the "navBarDescriptor" property.

[WinMob, Symbian] Using the SoftKeyBarDescriptor class

The SoftKeyBarDescriptor class can be used to add a navigation bar for apps targeting Windows Mobile and Symbian devices.
A Soft Key Bar typically displays soft keys at the bottom of the screen. Left, middle and right soft keys can be set programmatically using the properties "leftAction", "middleAction" and "rightAction".

To associate a SoftKeyBarDescriptor with a ScreenView object, use the "softKeyBarDescriptor" property.

To hide the soft key bar in a specific ScreenView object, use the "softKeyBarStatus" property.

[Android] Using the MenuItem class

The MenuItem class can be used to add a menu items to the Android menu key for apps targeting Android-based devices.

Menu items are typically displayed as a pop-up at the bottom of the screen when pressing the Android menu key. Menu items take a "label", an "icon" and an "actionClick" property and are combined in an array collection.

To associate Android menu items with a ScreenView object, use the "menuProvider" property.

Conclusion

Providing the ELIPS ScreenStackApplication class, you can now make your application benefit from iPhone, Android and other platforms native navigation model, with a single code.
For a complete sample, please refer to the UI Catalog sample app.

For more information about UI Catalog, read the Resource and Variant Management in ELIPS Studio tutorial.