CommonJS module providing cross-platform UI elements for Titanium Alloy. By adding
module="xp.ui" to any tag in an Alloy view, this module will become the factory instead of
Ti.UI, allowing it do provide emulate views and behavior when it is not available for the target platform.
Ti.UI.Windowon iOS and
hintTextproperty for iOS.
htmlproperty for iOS using ti-html2as
Disabled Android's autofocus on the first TextField.
Read the original blog at: http://fokkezb.nl/2013/10/21/cross-platform-ui/
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
- Download xp.ui.js to
module="xp.ui"to the element you want to use this library instead of
Ti.UIto create the view.
For iOS, and only if you pass a
html property, it will parse the HTML to an Attributed String using te nl.fokkezb.html2as module which you need to have installed as well.
nl.fokkezb.html2as module is async, the label will first return empty and the attributed string will be set as soon as the HTML is parsed. You will only notice this on slow devices with large HTML.
<Alloy> <Window> <Label module="xp.ui" html="<font size=17>Hello <b>Bold</b> <font color=#FF0000>World!</font></font>" /> </Window> </Alloy>
For some reason, on iOS a TextArea doesn't have a
hintText property. This module adds event listeners for focus and blur to change the color and value to emulate the same behavior as a TextField has.
For some modules, like NappDrawer, you need to have a Window on iOS and a View on Android. The module does exactly this.
For Android, it creates and returns an intermediate object that exposes
closeWindow methods. Two more
close methods will act on the root window wrapped by the
NavigationWindow tags, giving exact the same behavior as on iOS.
<Alloy> <NavigationWindow module="xp.ui"> <Window> <Label>Hello World</Label> </Window> </NavigationWindow> </Alloy>
Swipe to go back
Unless you set the
swipeBack attribute to
false or pass this as an option to
openWindow, the module will add a swipe-eventlistener to close the window when the user swipes to the right, just like it does on iOS7. For Android, it adds
slide_out_right enter/exit animations unless you pass
animated: false as an option for
If you target Android SDK 11 or higher the module will automatically add the up arrow to the action bar of all but the first window. Clicking on the home icon or arrow will close the window. You can disable this by setting the
displayHomeAsUp attribute to
false or passing this as an option to
On Android, this will blur the textfield to prevent auto focus.