I just added a CommonJS module to my UTiL repo, providing cross-platform UI elements to Titanium Alloy. For now, XP.UI only provides a cross-platform wrapper for NavigationWindow, but iOS-specific views like PopOver will follow.

Why?

Alloy does a great job at supporting single-codebase cross platform apps by providing conditional tags and constants, but you still have to actually use these to code around the platform differences.

How to use it

1. Get it at: github.com/FokkeZB/UTiL/tree/master/xp.ui
2. Drop it in app/lib/xp.ui.js
3. Replace a NavigationWindow element’s plaform="ios" by module="xp.ui".
4. Get coffee and proceed as usual.

Example code:

How it works

This module leverages Alloy’s ‘new’ module attribute to provide cross-platform versions of UI elements like NavigationWindow by simply replacing platform="ios" by module="xp.ui". Yes, that’s it!

This will instruct Alloy to require the xp.ui.js CommonJS module and call createNavigationWindow on that module instead of Ti.UI.iOS to which this tag normally maps.

For iOS, the module creates an actual Ti.UI.iOS.NavigationWindow, returns it and the flow continues like it would normally. This is possible because we’re fortunate that Alloy does still recognize the tag as being a NavigationWindow and thus passes the wrapped window via its creation-arguments instead of calling add() which is the default for module-provided views that wrap others.

For other platforms, it creates and returns an intermediate object that exposes Ti.UI.iOS.NavigationWindow-like openWindow and closeWindow methods. Two more open and close methods will act on the root window wrapped by the NavigationWindow tags, giving exact the same behavior as on iOS.

Unless you pass swipeBack: false as an option, it will add a swipe-eventlistener to close the window when the user swipes to the right, like it does on iOS7. For Android, it add slide_in_left and slide_out_right enter/exit animations unless you pass animated: false as an option.