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.
| Name | Description |
|---|---|
| Titanium.UI.2DMatrix | The 2DMatrix is created by Titanium.UI.create2DMatrix. The 2D Matrix is an object for holding values for an affine transformation matrix. A 2D matrix is used to rotate, scale, translate, or skew the objects in a two-dimensional space. A 2D matrix is represented by a 3 by 3 matrix. Because the third column is always (0,0,1), the data structure contains values for only the first two columns. |
| Titanium.UI.3DMatrix | The 2DMatrix is created by Titanium.UI.create2DMatrix. The 2D Matrix is an object for holding values for an affine transformation matrix. A 2D matrix is used to rotate, scale, translate, or skew the objects in a three-dimensional space. A 3D matrix is represented by a 4 by 4 matrix. Because the forth column is always (0,0,1), the data structure contains values for only the first three columns. |
| Titanium.UI.ActivityIndicator | An Activity Indicator is created by the method Titanium.UI.createActivityIndicator. An activity indicator can be used to show the progress of an operation in the UI to let the user know some action is taking place. |
| Titanium.UI.AlertDialog | The Alert Dialog is created by Titanium.UI.createAlertDialog and allows you to show a modal application dialog. |
| 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.createAnimation. |
| Titanium.UI.Button | A Button is created by the method Titanium.UI.createButton. |
| Titanium.UI.ButtonBar | A Button Bar is created by the method Titanium.UI.createButtonBar. |
| Titanium.UI.CoverFlowView | The Cover Flow view is container for showing animated, three dimensional images in a nice UI. The Cover Flow view is created by the method Titanium.UI.createCoverFlowView. |
| Titanium.UI.DashboardItem | An item that represents a visual icon in the Titanium.UI.DashboardView. The Dashboard Item is created by the method Titanium.UI.createDashboardItem. |
| 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.createDashboardView. |
| Titanium.UI.EmailDialog | The Email Dialog is created by Titanium.UI.createEmailDialog and allows you to send in application emails on behalf of the application user. |
| Titanium.UI.ImageView | An Image View is used to display an image or a series of images in an animation. The Image View is created by the method Titanium.UI.createImageView. |
| Titanium.UI.Label | A Label is created by the method Titanium.UI.createLabel. |
| Titanium.UI.OptionDialog | The Option Dialog is created by Titanium.UI.createOptionDialog and allows you to show a modal dialog of one or more options to the user. |
| 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. |
| Titanium.UI.PickerRow | The picker row object created by Titanium.UI.createPickerRow. |
| Titanium.UI.ProgressBar | A Progress Bar is created by the method Titanium.UI.createProgressBar. |
| Titanium.UI.ScrollView | A Scroll View is used to create a scrollable region of content. Views added to the Scroll View will be scrolled based on the content size of the Scroll View. The Scroll View is created by the method Titanium.UI.createScrollView. Note: In Android, Scroll Views can only scroll in one direction, either vertical or horizontal, but not both at the same time. See the Titanium.UI.ScrollView.scrollType property |
| 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.createScrollableView. |
| Titanium.UI.SearchBar | A Search Bar is created by the method Titanium.UI.createSearchBar. |
| Titanium.UI.Slider | A Slider is created by the method Titanium.UI.createSlider. |
| Titanium.UI.Switch | A Switch is created by the method Titanium.UI.createSwitch. |
| Titanium.UI.Tab | A TabGroup Tab instance. Each Tab instance maintains a stack of tab windows. Only one window within in the Tab can be visible at a time. When a window is closed, either by the user or by code, the window is removed from the stack, make the previous window visible. The root tab window cannot be removed. The Tab Group is created by the method Titanium.UI.createTab. |
| Titanium.UI.TabGroup | The Tab Group allows you to manage a tabbed UI of one or more windows. The Tab Group is created by the method Titanium.UI.createTabGroup. |
| Titanium.UI.TabbedBar | A Tabbed Bar is created by the method Titanium.UI.createTabbedBar. The difference between the Tabbed Bar and the Button Bar is that the tabbed bar visually maintains a state (visually distinguished as a pressed or selected look). |
| Titanium.UI.TableView | A Table View allows you to create a scrollable table of content in a list-based fashion. The Table View is created by the method Titanium.UI.createTableView. |
| Titanium.UI.TableViewRow | A TableView row object created by the method Titanium.UI.createTableViewRow. |
| Titanium.UI.TableViewSection | A TableView section object created by the method Titanium.UI.createTableViewSection. |
| Titanium.UI.TextArea | A Text Area is created by the method Titanium.UI.createTextArea. The Text Area is a multiline field. |
| Titanium.UI.TextField | A Text Area is created by the method Titanium.UI.createTextField. The Text Field is a single line field. |
| Titanium.UI.Toolbar | A Toolbar is created by the method Titanium.UI.createToolbar. A Toolbar can be placed at the bottom of a window and contain buttons. |
| Titanium.UI.View | The View is an empty drawing surface or container. The View is created by the method Titanium.UI.createView. |
| 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.createWebView. |
| Titanium.UI.Window | The Window is an empty drawing surface or container. The Window is created by the method Titanium.UI.createWindow. Unlike Views, Windows can be opened and closed and can have special display properties such as fullscreen or modal. |
| Name | Description |
|---|---|
| addEventListener | add an event listener for the instance to receive view triggered events |
| create2DMatrix | create and return an instance of Titanium.UI.2DMatrix |
| create3DMatrix | create and return an instance of Titanium.UI.3DMatrix |
| createActivityIndicator | create and return an instance of Titanium.UI.ActivityIndicator |
| createAlertDialog | create and return an instance of Titanium.UI.AlertDialog |
| createAnimation | create and return an instance of Titanium.UI.Animation |
| createButton | create and return an instance of Titanium.UI.Button |
| createButtonBar | create and return an instance of Titanium.UI.ButtonBar |
| createCoverFlowView | create and return an instance of Titanium.UI.CoverFlowView |
| createDashboardItem | create and return an instance of Titanium.UI.DashboardItem |
| createDashboardView | create and return an instance of Titanium.UI.DashboardView |
| createEmailDialog | create and return an instance of Titanium.UI.EmailDialog |
| createImageView | create and return an instance of Titanium.UI.ImageView |
| createLabel | create and return an instance of Titanium.UI.Label |
| createOptionDialog | create and return an instance of Titanium.UI.OptionDialog |
| createPicker | create and return an instance of Titanium.UI.Picker |
| createPickerColumn | create and return an instance of Titanium.UI.PickerColumn |
| createPickerRow | create and return an instance of Titanium.UI.PickerRow |
| createProgressBar | create and return an instance of Titanium.UI.ProgressBar |
| createScrollView | create and return an instance of Titanium.UI.ScrollView |
| createScrollableView | create and return an instance of Titanium.UI.ScrollableView |
| createSearchBar | create and return an instance of Titanium.UI.SearchBar |
| createSlider | create and return an instance of Titanium.UI.Slider |
| createSwitch | create and return an instance of Titanium.UI.Switch |
| createTab | create and return an instance of Titanium.UI.Tab |
| createTabGroup | create and return an instance of Titanium.UI.TabGroup |
| createTabbedBar | create and return an instance of Titanium.UI.TabbedBar |
| createTableView | create and return an instance of Titanium.UI.TableView |
| createTableViewRow | create and return an instance of Titanium.UI.TableViewRow |
| createTableViewSection | create and return an instance of Titanium.UI.TableViewSection |
| createTextArea | create and return an instance of Titanium.UI.TextArea |
| createTextField | create and return an instance of Titanium.UI.TextField |
| createToolbar | create and return an instance of Titanium.UI.Toolbar |
| createView | create and return an instance of Titanium.UI.View |
| createWebView | create and return an instance of Titanium.UI.WebView |
| createWindow | create and return an instance of Titanium.UI.Window |
| fireEvent | fire a synthesized event to the views listener |
| removeEventListener | remove a previously added event listener |
| Name | Type | Description |
|---|---|---|
| ANIMATION_CURVE_EASE_IN | int | animation curve constant |
| ANIMATION_CURVE_EASE_IN_OUT | int | animation curve constant |
| ANIMATION_CURVE_EASE_OUT | int | animation curve constant |
| ANIMATION_CURVE_LINEAR | int | animation curve constant |
| BLEND_MODE_CLEAR | int | image mode constant |
| BLEND_MODE_COLOR | int | image mode constant |
| BLEND_MODE_COLOR_BURN | int | image mode constant |
| BLEND_MODE_COLOR_DODGE | int | image mode constant |
| BLEND_MODE_COPY | int | image mode constant |
| BLEND_MODE_DARKEN | int | image mode constant |
| BLEND_MODE_DESTINATION_ATOP | int | image mode constant |
| BLEND_MODE_DESTINATION_IN | int | image mode constant |
| BLEND_MODE_DESTINATION_OUT | int | image mode constant |
| BLEND_MODE_DESTINATION_OVER | int | image mode constant |
| BLEND_MODE_DIFFERENCE | int | image mode constant |
| BLEND_MODE_EXCLUSION | int | image mode constant |
| BLEND_MODE_HARD_LIGHT | int | image mode constant |
| BLEND_MODE_HUE | int | image mode constant |
| BLEND_MODE_LIGHTEN | int | image mode constant |
| BLEND_MODE_LUMINOSITY | int | image mode constant |
| BLEND_MODE_MULTIPLY | int | image mode constant |
| BLEND_MODE_NORMAL | int | image mode constant |
| BLEND_MODE_OVERLAY | int | image mode constant |
| BLEND_MODE_PLUS_DARKER | int | image mode constant |
| BLEND_MODE_PLUS_LIGHTER | int | image mode constant |
| BLEND_MODE_SATURATION | int | image mode constant |
| BLEND_MODE_SCREEN | int | image mode constant |
| BLEND_MODE_SOFT_LIGHT | int | image mode constant |
| BLEND_MODE_SOURCE_ATOP | int | image mode constant |
| BLEND_MODE_SOURCE_IN | int | image mode constant |
| BLEND_MODE_SOURCE_OUT | int | image mode constant |
| BLEND_MODE_XOR | int | image mode constant |
| FACE_DOWN | int | orientation constant |
| FACE_UP | int | orientation constant |
| INPUT_BORDERSTYLE_BEZEL | int | input border style constant |
| INPUT_BORDERSTYLE_LINE | int | input border style constant |
| INPUT_BORDERSTYLE_NONE | int | input border style constant |
| INPUT_BORDERSTYLE_ROUNDED | int | input border style constant |
| INPUT_BUTTONMODE_ALWAYS | int | input button mode constant |
| INPUT_BUTTONMODE_NEVER | int | input button mode constant |
| INPUT_BUTTONMODE_ONBLUR | int | input button mode constant |
| INPUT_BUTTONMODE_ONFOCUS | int | input button mode constant |
| KEYBOARD_APPEARANCE_ALERT | int | textfield keyboard appearance constant |
| KEYBOARD_APPEARANCE_DEFAULT | int | textfield keyboard appearance constant |
| KEYBOARD_ASCII | int | textfield keyboard constant |
| KEYBOARD_DEFAULT | int | textfield keyboard constant |
| KEYBOARD_EMAIL | int | textfield keyboard constant |
| KEYBOARD_NAMEPHONE_PAD | int | textfield keyboard constant |
| KEYBOARD_NUMBERS_PUNCTUATION | int | textfield keyboard constant |
| KEYBOARD_NUMBER_PAD | int | textfield keyboard constant |
| KEYBOARD_PHONE_PAD | int | textfield keyboard constant |
| KEYBOARD_URL | int | textfield keyboard constant |
| LANDSCAPE_LEFT | int | orientation (home button on left) constant |
| LANDSCAPE_RIGHT | int | orientation (home button on right) constant |
| NOTIFICATION_DURATION_LONG | int | Duration of the notification |
| NOTIFICATION_DURATION_SHORT | int | Duration of the notification |
| PICKER_TYPE_COUNT_DOWN_TIMER | int | picker type constant |
| PICKER_TYPE_DATE | int | picker type constant |
| PICKER_TYPE_DATE_AND_TIME | int | picker type constant |
| PICKER_TYPE_PLAIN | int | picker type constant |
| PICKER_TYPE_TIME | int | picker type constant |
| PORTRAIT | int | orientation (home button on bottom) constant |
| RETURNKEY_DEFAULT | int | textfield return key constant |
| RETURNKEY_DONE | int | textfield return key constant |
| RETURNKEY_EMERGENCY_CALL | int | textfield return key constant |
| RETURNKEY_GO | int | textfield return key constant |
| RETURNKEY_GOOGLE | int | textfield return key constant |
| RETURNKEY_JOIN | int | textfield return key constant |
| RETURNKEY_NEXT | int | textfield return key constant |
| RETURNKEY_ROUTE | int | textfield return key constant |
| RETURNKEY_SEARCH | int | textfield return key constant |
| RETURNKEY_SEND | int | textfield return key constant |
| RETURNKEY_YAHOO | int | textfield return key constant |
| TEXT_ALIGNMENT_CENTER | int | text align constant |
| TEXT_ALIGNMENT_LEFT | int | text align constant |
| TEXT_ALIGNMENT_RIGHT | int | text align constant |
| TEXT_AUTOCAPITALIZATION_ALL | int | text capitalization constant |
| TEXT_AUTOCAPITALIZATION_NONE | int | text capitalization constant |
| TEXT_AUTOCAPITALIZATION_SENTENCES | int | text capitalization constant |
| TEXT_AUTOCAPITALIZATION_WORDS | int | text capitalization constant |
| TEXT_VERTICAL_ALIGNMENT_BOTTOM | int | text vertical align constant |
| TEXT_VERTICAL_ALIGNMENT_CENTER | int | text vertical align constant |
| TEXT_VERTICAL_ALIGNMENT_TOP | int | text vertical align constant |
| UNKNOWN | int | orientation constant |
| UPSIDE_PORTRAIT | int | orientation (home button on top) constant |
The UI module is broken down into 3 major area:
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 contain a nice way to decompose your application into smaller units. The other benefit is that when a Window is closed, its resources can be immediately cleaned up, saving resources such as memory and CPU. Additionally, Window objects 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.
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.
