Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Updated anchor links

...

Attribute

Description

id

Identifies UI elements in the controller (prefixed with '$.') and style sheet (prefixed with '#'). IDs should be unique per view but are not global, so multiple views can have components with the same ID.

class

Applies additional styles (prefixed with '.' in the TSS file). Overwrites the element style but not the id style.

autoStyleEnables the autostyle feature for dynamic styling when adding or removing classes. See Dynamic Styles: Autostyle for more details.

formFactor

Acts as a compiler directive for size-specific view components. Value can either be handheld or tablet. See Conditional Codecode for more details.

ifUse a custom query to apply additional styles to the element. See Conditional Codecode and Alloy Styles and Themes: Custom Query Styles for more details.
moduleRequires in a CommonJS module. Note that the XML element must be named after a create<XMLElement> method in the module. See Module Attribute for more details.

ns

Overrides the default Titanium.UI namespace. See Namespace for more details.

platform

Switches the namespace based on the platform and acts as a compiler directive for platform-specific view components. Values can be any combination of platforms. See Conditional Codecode and Namespace for more details.

<properties>

Assigns values to UI object properties. See Property Mappingmapping for more details.

<events>

Assigns callbacks to UI object events. See Event Handlinghandling for more details.

The following table lists the special XML elements besides the Titanium UI components:

Element

Description

Alloy

Root element for all view XML files. Required in all views.

CollectionCreates a singleton or instance of the specified collection. See the Collection Elementelement for more details.
ModelCreates a singleton or instance of the specified model. See the Model Elementelement for more details.
ModuleImports a module view inside this view. See the Module Elementelement for more details.

Require

Imports a widget or includes another view inside this view. See the Require Elementelement for more details.

Widget

Imports a widget inside this view. Same as the Require Elementelement with the type specified to 'widget'. See Importing Widgetswidgets for more details.

index.xml is a special case that only accepts the following view components as direct children of the Alloy tag:

...

Within a view in the regular Alloy project space (app/views), use the <Widget> tag to import the widget into the application. A <Widget/> element is equivalent to a <Require/> element whose type attribute is set to "widget".

...

Code Block
titleapps/controllers/foo.js
languagejs
var title = $.args.customTitle || 'Foobar';
var image = $.args.customImage || 'default.png';

See Alloy Controllers: Passing Arguments for more details.

Binding events

To bind a callback to an event in a required view using the on attribute as detailed in Event Handling below, add an event listener for the UI component to trigger the event. For example, suppose you want to require a view that only contains a button. In the parent view, you require the button view and assign a callback to the click event:

...

You can also create subfolders, named as the platform, in the views directory as another way to create platform-specific views. Refer to to Alloy Concepts: Platform-Specific Resources.

Property mapping

Each Titanium UI object property is defined as an attribute in the XML markup and TSS file if it accepts a string, boolean, number or Titanium SDK constant, such as TI.UI.SIZE or Ti.UI.TEXT_ALIGNMENT_CENTER. Setting properties in the XML markup overrides the settings in the TSS file. Node text can also be used to define the Label text and Button title properties.

...