A new application called UICatalog is available for download on the Samples page. This application aims at providing ELIPS Studio developers with a reference application in order to get the best of ELIPS Studio: Single codebase that makes use of unique platform user experience and capabilities. Note that this application works properly only on ELIPS Studio beta 5 or later release.
This is a good opportunity for me to come back on the key ELIPS Studio features that allows such a paradigm.

Generic and Native UI Components

The UICatalog app exhibits the main UI Components available in ELIPS. There are actually 2 types of components:

• Generic UI component classes contained in the <mx> namespace are common Flex UI component redesigned to fit mobile phones. It includes basic controls like buttons, images or containers that will have the same rendering whatever the underlying platform.

• Native UI components classes contained in the <openplug.elips> namespace are advanced UI components that may have a native implementation specific to each platform (or a generic one if not available). That is the case of the HTML class that will be rendered as the native UIWebView on iPhone and as a native Android WebView on Android devices.

With Native UI Component mapping, your application transparently benefits from the platform native UI implementation in terms of user experience, look and performance.

Check out the UICatalog for more details. UI Components are organized by category and you can copy/paste the code in your own app for rapid design.

ScreenStack Application Navigation Model

ELIPS Studio beta 5 introduces a new model to handle application screens and navigation.
Use the ScreenStack class to design your application screens with the following components:

• Define each screen of your application as a ScreenView Component, independently from other views.
• Define your application title bar for iPhone in a NavigationBarDescriptor Component to handle action buttons and back navigation.
• Define your application softkeys for WinMob and Symbian in a SoftKeyBarDescriptor component.
• Define your application menu for Android using the MenuItem class.

The prime advantage of this model is that it gives developer a clean and standard way (yet optional) to design their application UI once and handle navigation differently depending on the platform.

The second advantage, and that is a BIG one, is that ELIPS Studio will be capable of mapping “behind-the-scene” this standard model to native platform navigation models in term of layout, flow and transitions, especially on iPhone and Android.

For the time being, ELIPS Studio beta 5 uses a generic implementation for the Application Navigation model, but more and more native mapping will come in the future, so stay tuned!   

Conditional Code per platform

The UI Catalog app was also designed to demonstrate some advanced features that are available only on some platforms. That is the case of the SystemAPI class that enables accessing the Camera / Gallery service on iPhone and Android. 

Should you like to have a different behavior in your application code given the underlying platform, two mechanisms can be used:

• In ActionScript, you can use the Capabilities class to test over the device model, platform or screen size.

• In MXML, you can use the excludeFromPlatform or includeInPlatform properties on a UI Component to remove or add this component in the specified platform.

So, with Conditional Code mechanisms as offered in ELIPS Studio, developers do not have to compromise in terms of platform features they can have a single code base and still use each platform specific behaviors and capabilities.

So check out the UICatalog sample now and create great apps on the big 4 platforms!