| Platform | Since |
|---|---|
| Android | 0.4 |
| iPhone | 0.4 |
| iPad | 0.4 |
| Mobile Web | 1.8 |
The main Titanium.UI module.
The UI module is responsible for native user-interface components and interaction inside Titanium. The goal of the UI module is to provide a native experience along with native performance by compiling Javascript code into their native counterparts as part of the build process.
The UI module is broken down into 3 major area:
Views - Views are containers that
host visual elements such as controls or other views. Views can have
their properties customized, such as their border color and radius, can
fire events such as swipe events or touches, and can optionally contain a
hierarchy or other views as children. In Titanium, most views are
specialized to perform both a visual function and set of interaction
behaviors such as Table View or
Coverflow View. Views are always
named with the suffix View.
Controls - controls, or sometimes referred as widgets, are visual elements such as sliders, buttons and switches. They provide a visual element which has a defined behavior and typical have special configuration and special events. Controls themselves are views and also inherit a views properties, functions and events.
Windows - Windows are typically top-level visual constructs that are the main part of your interface. An application will always have at least one window and windows can take different shapes and sizes, can have display and interaction properties such as fullscreen or modal and can be customized, such as changing their opacity or background color. Windows themselves are views and also inherit a views properties, functions and events. There are a few specialization of Windows such as a Tab Group which offer additional behavior beyond the basic Window.
Titanium uses the Factory
Pattern for
constructing objects and a general naming pattern for APIs. For example,
to construct a Alert Dialog, you
call the method Titanium.UI.createAlertDialog. To create a
TextArea, you call the method
Titanium.UI.createTextArea. Once an object is created, it will be
available until it goes out of scope.
UI objects are optimized by Titanium to not be realized into the drawing
context and placed into the device UI surface until needed. That means that
you can create UI objects, set their properties and add them to their
hierarchy without much worry about memory or performance. When the native
drawing surface needs to render a specific view or control, Titanium will
automatically create the view as needed. Additionally, Titanium is
optimized to also release memory once the view is no longer needed, on
screen or in low memory situations. However, it's a good idea to help
Titanium along in certain cases where you are no longer using objects. For
example, you should call close on a
Window instance when you are no longer
using it. You can safely call open on the window again to re-open it.
Be careful with the objects that are created in app.js but only used once.
Since the app.js context is global and generally is not garbage collected
until the application exits, you should think about the design of your
application as it relates to this fact.
Window objects that are opened up with the
url property to another JavaScript file provide a nice way to decompose
your application into smaller units.
Additionally, Window objects created with a url value run in a
separate JavaScript context and thread. While all UI processing is done on
the main UI thread, other processing inside a Window or the app.js that
does not have UI interaction will run in its own thread.
The other benefit of using the url property is that when the
window is closed, resources allocated in the window's context can be
immediately cleaned up, saving resources such as memory and CPU.
For more information, see the sections "Sub-contexts" and "Passing Data Between Contexts" on the Window reference page.
Titanium components are designed to be portable across as many platforms as
it supports. However, there are cases where a device either does not
support a specific feature or capability or where it support additional
functionality. For cases where the device OS supports capabilities that
other platforms do not, we attempt to place those capabilities in a separate
namespace, such as Titanium.UI.iPhone.
However, in cases where the control is in a common namespace and support
additional features, we continue to place that functionality directly on the
object.
| Name | Summary |
|---|---|
| Titanium.UI.2DMatrix |
The 2D Matrix is an object for holding values for an affine transformation matrix. (Android, iPhone, iPad only.) |
| Titanium.UI.3DMatrix |
Deprecated Use |
| Titanium.UI.ActivityIndicator |
An activity indicator that lets the user know an action is taking place. |
| Titanium.UI.AlertDialog |
The Alert Dialog is created by |
| Titanium.UI.Animation |
The Animation object is used for specifying lower-level animation properties and more low-level control of events during an animation. The Animation is created by the method |
| Titanium.UI.Button |
A button widget. |
| Titanium.UI.ButtonBar |
A Button Bar is created by the method |
| Titanium.UI.DashboardItem |
An item that represents a visual icon in the |
| Titanium.UI.DashboardView |
The Dashboard View provides a view that supports the ability to have Springboard-like view of icons which can be reordered by dragging and can contain multiple pages of icons in a scrollable view. The Dashboard View is created by the method |
| Titanium.UI.EmailDialog |
The Email Dialog is created by |
| Titanium.UI.ImageView |
An Image View is used to display an image or a series of images in an animation. |
| Titanium.UI.Label |
A text label, with optional background image. |
| Titanium.UI.Notification |
An Android Toast-style notification. (Android only.) |
| Titanium.UI.OptionDialog |
The Option Dialog is created by |
| Titanium.UI.Picker |
A Picker is created by the method Titanium.UI.createPicker. A Picker can be used to select one or more fixed values. |
| Titanium.UI.PickerColumn |
The picker row object created by Titanium.UI.createPickerColumn. (Android, iPhone, iPad only.) |
| Titanium.UI.PickerRow |
A picker row, representing a selectable item in a |
| Titanium.UI.ProgressBar |
A progress bar. (Android, iPhone, iPad only.) |
| Titanium.UI.ScrollView |
A Scroll View is used to create a scrollable region of content. |
| Titanium.UI.ScrollableView |
The Scrollable View provides a view that supports horizontal scrolling on one or more views in a gesture motion. The Scrollable View also optionally supports a visual paging control to indicate the page that the view is visible. The Scrollable View is created by the method |
| Titanium.UI.SearchBar |
A Search Bar is created by the method |
| Titanium.UI.Slider |
A Slider is created by the method |
| Titanium.UI.Switch |
A Switch is created by the method |
| Titanium.UI.Tab |
A tab instance for a TabGroup. |
| Titanium.UI.TabGroup |
A tabbed group of windows. |
| Titanium.UI.TabbedBar |
Deprecated A button bar that maintains a selected state. (iPhone, iPad only.) |
| Titanium.UI.TableView |
A Table View allows you to create a scrollable table of content in a list-based fashion. |
| Titanium.UI.TableViewRow |
A TableView row object created by the method |
| Titanium.UI.TableViewSection |
A TableView section object created by the method |
| Titanium.UI.TextArea |
A multiline text field that supports editing and scrolling. |
| Titanium.UI.TextField |
A single line text field. |
| Titanium.UI.Toolbar |
Deprecated An iOS toolbar. See |
| Titanium.UI.View |
An empty drawing surface or container created by the method |
| Titanium.UI.WebView |
The Web View allows you to open an HTML5 based view which can load either local or remote content. The content can be any valid web content such as HTML, PDF, SVG or other WebKit supported content types. The Web View is created by the method |
| Titanium.UI.Window |
The Window is an empty drawing surface or container. |
| Name | Summary |
|---|---|
| addEventListener |
Adds the specified callback as an event listener for the named event. |
| create2DMatrix |
Create and return an instance of |
| create3DMatrix |
Create and return an instance of |
| createActivityIndicator |
Create and return an instance of |
| createAlertDialog |
Create and return an instance of |
| createAnimation |
Create and return an instance of |
| createButton |
Create and return an instance of |
| createButtonBar |
Create and return an instance of |
| createDashboardItem |
Create and return an instance of |
| createDashboardView |
Create and return an instance of |
| createEmailDialog |
Create and return an instance of |
| createImageView |
Create and return an instance of |
| createLabel |
Create and return an instance of |
| createNotification |
Create and return an instance of |
| createOptionDialog |
Create and return an instance of |
| createPicker |
Create and return an instance of |
| createPickerColumn |
Create and return an instance of |
| createPickerRow |
Create and return an instance of |
| createProgressBar |
Create and return an instance of |
| createScrollView |
Create and return an instance of |
| createScrollableView |
Create and return an instance of |
| createSearchBar |
Create and return an instance of |
| createSlider |
Create and return an instance of |
| createSwitch |
Create and return an instance of |
| createTab |
Create and return an instance of |
| createTabGroup |
Create and return an instance of |
| createTabbedBar |
Create and return an instance of |
| createTableView |
Create and return an instance of |
| createTableViewRow |
Create and return an instance of |
| createTableViewSection |
Create and return an instance of |
| createTextArea |
Create and return an instance of |
| createTextField |
Create and return an instance of |
| createToolbar |
Create and return an instance of |
| createView |
Create and return an instance of |
| createWebView |
Create and return an instance of |
| createWindow |
Create and return an instance of |
| fireEvent |
Fires a synthesized event to any registered listeners. |
| getBackgroundColor |
Gets the value of the backgroundColor property. (Android, iPhone, iPad only.) |
| getBackgroundImage |
Gets the value of the backgroundImage property. (Android, iPhone, iPad only.) |
| getCurrentTab |
Gets the value of the currentTab property. |
| getCurrentWindow |
Gets the value of the currentWindow property. (Android, iPhone, iPad only.) |
| getOrientation |
Gets the value of the orientation property. (Android, iPhone, iPad only.) |
| removeEventListener |
Removes the specified callback as an event listener for the named event. |
| setBackgroundImage |
Sets the value of the backgroundImage property. (Android, iPhone, iPad only.) |
| setCurrentTab |
Sets the value of the currentTab property. |
| setOrientation |
Sets the value of the orientation property. (Android, iPhone, iPad only.) |
| Name | Type | Summary |
|---|---|---|
| ANIMATION_CURVE_EASE_IN | Number |
Deprecated Use the animation curve constants in |
| ANIMATION_CURVE_EASE_IN_OUT | Number |
Deprecated Use the animation curve constants in |
| ANIMATION_CURVE_EASE_OUT | Number |
Deprecated Use the animation curve constants in |
| ANIMATION_CURVE_LINEAR | Number |
Deprecated Use the animation curve constants in |
| AUTODETECT_ADDRESS | Number |
Deprecated Use the text auto-detection constants in |
| AUTODETECT_ALL | Number |
Deprecated Use the text auto-detection constants in |
| AUTODETECT_CALENDAR | Number |
Deprecated Use the text auto-detection constants in |
| AUTODETECT_LINK | Number |
Deprecated Use the text auto-detection constants in |
| AUTODETECT_NONE | Number |
Deprecated Use the text auto-detection constants in |
| AUTODETECT_PHONE | Number |
Deprecated Use the text auto-detection constants in |
| BLEND_MODE_CLEAR | Number |
Deprecated Use the blend mode constants in |
| BLEND_MODE_COLOR | Number |
Deprecated Use the blend mode constants in |
| BLEND_MODE_COLOR_BURN | Number |
Deprecated Use the blend mode constants in |
| BLEND_MODE_COLOR_DODGE | Number |
Deprecated Use the blend mode constants in |
| BLEND_MODE_COPY | Number |
Deprecated Use the blend mode constants in |
| BLEND_MODE_DARKEN | Number |
Deprecated Use the blend mode constants in |
| BLEND_MODE_DESTINATION_ATOP | Number |
Deprecated Use the blend mode constants in |
| BLEND_MODE_DESTINATION_IN | Number |
Deprecated Use the blend mode constants in |
| BLEND_MODE_DESTINATION_OUT | Number |
Deprecated Use the blend mode constants in |
| BLEND_MODE_DESTINATION_OVER | Number |
Deprecated Use the blend mode constants in |
| BLEND_MODE_DIFFERENCE | Number |
Deprecated Use the blend mode constants in |
| BLEND_MODE_EXCLUSION | Number |
Deprecated Use the blend mode constants in |
| BLEND_MODE_HARD_LIGHT | Number |
Deprecated Use the blend mode constants in |
| BLEND_MODE_HUE | Number |
Deprecated Use the blend mode constants in |
| BLEND_MODE_LIGHTEN | Number |
Deprecated Use the blend mode constants in |
| BLEND_MODE_LUMINOSITY | Number |
Deprecated Use the blend mode constants in |
| BLEND_MODE_MULTIPLY | Number |
Deprecated Use the blend mode constants in |
| BLEND_MODE_NORMAL | Number |
Deprecated Use the blend mode constants in |
| BLEND_MODE_OVERLAY | Number |
Deprecated Use the blend mode constants in |
| BLEND_MODE_PLUS_DARKER | Number |
Deprecated Use the blend mode constants in |
| BLEND_MODE_PLUS_LIGHTER | Number |
Deprecated Use the blend mode constants in |
| BLEND_MODE_SATURATION | Number |
Deprecated Use the blend mode constants in |
| BLEND_MODE_SCREEN | Number |
Deprecated Use the blend mode constants in |
| BLEND_MODE_SOFT_LIGHT | Number |
Deprecated Use the blend mode constants in |
| BLEND_MODE_SOURCE_ATOP | Number |
Deprecated Use the blend mode constants in |
| BLEND_MODE_SOURCE_IN | Number |
Deprecated Use the blend mode constants in |
| BLEND_MODE_SOURCE_OUT | Number |
Deprecated Use the blend mode constants in |
| BLEND_MODE_XOR | Number |
Deprecated Use the blend mode constants in |
| FACE_DOWN | Number |
Constant value for face-down orientation. (Android, iPhone, iPad only.) read-only |
| FACE_UP | Number |
Constant value for face-up orientation. (Android, iPhone, iPad only.) read-only |
| INPUT_BORDERSTYLE_BEZEL | Number |
Use a bezel-style border on the input field. (Android, iPhone, iPad only.) read-only |
| INPUT_BORDERSTYLE_LINE | Number |
Use a simple line border on the input field. (Android, iPhone, iPad only.) read-only |
| INPUT_BORDERSTYLE_NONE | Number |
Use no border on the input field. (Android, iPhone, iPad only.) read-only |
| INPUT_BORDERSTYLE_ROUNDED | Number |
Use a rounded-rectangle border on the input field. (Android, iPhone, iPad only.) read-only |
| INPUT_BUTTONMODE_ALWAYS | Number |
Always show buttons on the input field. (Android, iPhone, iPad only.) read-only |
| INPUT_BUTTONMODE_NEVER | Number |
Never show buttons on the input field. (Android, iPhone, iPad only.) read-only |
| INPUT_BUTTONMODE_ONBLUR | Number |
Show buttons on the input field when it loses focus. (Android, iPhone, iPad only.) read-only |
| INPUT_BUTTONMODE_ONFOCUS | Number |
Show buttons on the input field when it gains focus. (Android, iPhone, iPad only.) read-only |
| KEYBOARD_APPEARANCE_ALERT | Number |
Use a keyboard appearance suitable for entering text on an alert. (Android, iPhone, iPad only.) read-only |
| KEYBOARD_APPEARANCE_DEFAULT | Number |
Use the default keyboard appearance. (Android, iPhone, iPad only.) read-only |
| KEYBOARD_ASCII | Number |
Use an ASCII keyboard. (Android, iPhone, iPad only.) read-only |
| KEYBOARD_DEFAULT | Number |
Use the default keyboard. (Android, iPhone, iPad only.) read-only |
| KEYBOARD_EMAIL | Number |
Use a keyboard suitable for composing email. (Android, iPhone, iPad only.) read-only |
| KEYBOARD_NAMEPHONE_PAD | Number |
Use a keyboard suitable for entering names and phone numbers. (Android, iPhone, iPad only.) read-only |
| KEYBOARD_NUMBERS_PUNCTUATION | Number |
Use a keyboard with numbers and punctuation only. (Android, iPhone, iPad only.) read-only |
| KEYBOARD_NUMBER_PAD | Number |
Use a keyboard with a number pad only. (Android, iPhone, iPad only.) read-only |
| KEYBOARD_PHONE_PAD | Number |
Use a keyboard with a phone-style number pad. (Android, iPhone, iPad only.) read-only |
| KEYBOARD_URL | Number |
Use an keyboard optimized for entering URLs. (Android, iPhone, iPad only.) read-only |
| LANDSCAPE_LEFT | Number |
Standard landscape orientation (home button on left). (Android, iPhone, iPad only.) read-only |
| LANDSCAPE_RIGHT | Number |
Reverse landscape orientation (home button on right). (Android, iPhone, iPad only.) read-only |
| NOTIFICATION_DURATION_LONG | Number |
Specifies a long duration for an Android Toast notification ( |
| NOTIFICATION_DURATION_SHORT | Number |
Specifies a short duration for an Android Toast notification ( |
| PICKER_TYPE_COUNT_DOWN_TIMER | Number |
Use a picker with a countdown timer appearance, showing hours and minutes. (Android, iPhone, iPad only.) read-only |
| PICKER_TYPE_DATE | Number |
Use a date picker. (Android, iPhone, iPad only.) read-only |
| PICKER_TYPE_DATE_AND_TIME | Number |
Use a date and time picker. (Android, iPhone, iPad only.) read-only |
| PICKER_TYPE_PLAIN | Number |
Use a plain picker (for values other than date or time). (Android, iPhone, iPad only.) read-only |
| PICKER_TYPE_TIME | Number |
Use a time picker. (Android, iPhone, iPad only.) read-only |
| PORTRAIT | Number |
Orientation constant for portrait mode orientation. (Android, iPhone, iPad only.) read-only |
| RETURNKEY_DEFAULT | Number |
Use the default return key on the virtual keyboard. (Android, iPhone, iPad only.) read-only |
| RETURNKEY_DONE | Number |
Set the return key text to "Done". (Android, iPhone, iPad only.) read-only |
| RETURNKEY_EMERGENCY_CALL | Number |
Set the return key text to "Emergency Call". (Android, iPhone, iPad only.) read-only |
| RETURNKEY_GO | Number |
Set the return key text to "Go". (Android, iPhone, iPad only.) read-only |
| RETURNKEY_GOOGLE | Number |
Set the return key text to "Google". (Android, iPhone, iPad only.) read-only |
| RETURNKEY_JOIN | Number |
Set the return key text to "Join". (Android, iPhone, iPad only.) read-only |
| RETURNKEY_NEXT | Number |
Set the return key text to "Next". (Android, iPhone, iPad only.) read-only |
| RETURNKEY_ROUTE | Number |
Set the return key text to "Route". (Android, iPhone, iPad only.) read-only |
| RETURNKEY_SEARCH | Number |
Set the return key text to "Search". (Android, iPhone, iPad only.) read-only |
| RETURNKEY_SEND | Number |
Set the return key text to "Send". (Android, iPhone, iPad only.) read-only |
| RETURNKEY_YAHOO | Number |
Set the return key text to "Yahoo". (Android, iPhone, iPad only.) read-only |
| TEXT_ALIGNMENT_CENTER | Number |
Center align text. (Android, iPhone, iPad only.) read-only |
| TEXT_ALIGNMENT_LEFT | Number |
Left align text. (Android, iPhone, iPad only.) read-only |
| TEXT_ALIGNMENT_RIGHT | Number |
Right align text. (Android, iPhone, iPad only.) read-only |
| TEXT_AUTOCAPITALIZATION_ALL | Number |
Auto-capitalize all text in the input field. (Android, iPhone, iPad only.) read-only |
| TEXT_AUTOCAPITALIZATION_NONE | Number |
Do not auto-capitalize. (Android, iPhone, iPad only.) read-only |
| TEXT_AUTOCAPITALIZATION_SENTENCES | Number |
Use sentence-style auto-capitalization in the input field. (Android, iPhone, iPad only.) read-only |
| TEXT_AUTOCAPITALIZATION_WORDS | Number |
Auto-capitalize the first letter of each word in the input field. (Android, iPhone, iPad only.) read-only |
| TEXT_VERTICAL_ALIGNMENT_BOTTOM | Number |
Align text to the bottom of the view. (Android, iPhone, iPad only.) read-only |
| TEXT_VERTICAL_ALIGNMENT_CENTER | Number |
Vertically align text to the center of the view. (Android, iPhone, iPad only.) read-only |
| TEXT_VERTICAL_ALIGNMENT_TOP | Number |
Align text to the top of the view. (Android, iPhone, iPad only.) read-only |
| UNKNOWN | Number |
Orientation constant representing an unknown orientation. (Android, iPhone, iPad only.) read-only |
| UPSIDE_PORTRAIT | Number |
Orientation constant for inverted portait orientation. (Android, iPhone, iPad only.) read-only |
| backgroundColor | String |
Sets the background color of the master view (when there are no windows or other top-level controls displayed). (Android, iPhone, iPad only.) read-only |
| backgroundImage | String |
Local path or URL to an image file for setting a background for the master view (when there are no windows or other top-level controls displayed). (Android, iPhone, iPad only.) |
| currentTab | Titanium.UI.Tab |
The currently active tab, if a tab group is open. |
| currentWindow | Titanium.UI.Window |
The active window associated with the executing JavaScript context. (Android, iPhone, iPad only.) read-only |
| orientation | Number |
Deprecated Use |
