Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Replaced /titanium/ links with /platform 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 code for more details.

ifUse a custom query to apply additional styles to the element. See Conditional code 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 code and Namespace for more details.

<properties>

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

<events>

Assigns callbacks to UI object events. See Event handling 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 element for more details.
ModelCreates a singleton or instance of the specified model. See the Model element for more details.
ModuleImports a module view inside this view. See the Module element for more details.

Require

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

Widget

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

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

...

Code Block
titleapp/views/index.xml
linenumberstrue
languagexml
<Alloy>
    <Window backgroundColor="white">
        <!-- Requires in the lib/foo.js module and calls the createFoo method -->
        <Foo module="foo" color="blue" textColor="orange" text="Hello, World!"/>
    </Window>
</Alloy> 

Module element

You can also include also include a view from a native module using the  the  Module XML element. To use the Module tag:

  1. Add the module to your project. For instructions on adding a module to your project, see Using Titanium Modules.
  2. Add the Module tag in to an Alloy view as a child of a window or another parent object depending on the view object returned by the module.
  3. Set the module attribute to the name of the module.
  4. Set the method attribute to the name of the method that creates a view object. If this attribute is not specified, Alloy uses createView.
  5. If the method invoked uses a simple JavaScript object as its only parameter, you can optionally pass in the parameters either inline or with the TSS file.

...

Code Block
app
├── config.json
├── controllers
│   └── index.js
├── views
│   └── index.xml
└── widgets
    └── mywidget
        ├── controllers
        │   ├── foo.js
        │   └── widget.js
        ├── views
        │   ├── foo.xml
        │   └── widget.xml
        └── widget.json

Then, add the <Widget>  tag in the XML. Specify the src attribute as mywidget. Additionally, define the id and name attributes. Since the name attribute is defined, the foo view-controller is used instead of the widget view-controller.

...

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

See Alloy Controllers: Passing Arguments for  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:

...

In the example below, you have the index view which is using the Require element to include another view called info. The required view is a yellow box with a brown border. Its controller adds the label view element passed in as the first element of the $.args.children array.

Code Block
titleapp/views/info.xml
languagehtml/xml
<Alloy>
    <View backgroundColor="yellow" borderWidth="0.5" borderColor="brown"/>
</Alloy>

...

You can use all the attributes in any combination.

In the example below, different  different Annotation objects are displayed in the view based on based on the platform and device size.

Code Block
linenumberstrue
languagexml
langxml
<Alloy>
    <Window>
        <Module id="mapview" module="ti.map" method="createView">
            <Annotation title="Cupertino" platform='ios' formFactor='tablet' latitude='37.3231' longitude='-122.0311'/>
            <Annotation title="Redwood City" platform='ios' formFactor='handheld' latitude='37.4853' longitude='-122.2353'/>
            <Annotation title="Mountain View" platform='android' latitude='37.3861' longitude='-122.0828'/>
            <Annotation title="Palo Alto" platform='android,ios,mobileweb' latitude='37.4419' longitude='-122.1419'/>
            <Annotation title="San Francisco" platform='mobileweb' latitude='37.7750' longitude='-122.4183'/>
        </View>
    </Window>
</Alloy>

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

Property mapping

Each Titanium UI object property is defined as an attribute in the XML 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 overrides the settings in the TSS file. Node text can also be used to define the Label text and Button title properties.

...

Code Block
langxml
<Label borderWidth="1" borderColor="red" color="red" width="Ti.UI.FILL">Hello, World!</Label>

Refer to the Titanium API Guides for the properties of each UI object.

...

Titanium Proxy Object / Alloy tagProxy PropertyChild Alloy TagSince
Titanium.Android.MenuItem / <MenuItem>

actionView

<ActionView>Alloy 1.6.0
Titanium.UI.iPad.Popover / <PopOver>

contentView

 

<ContentView>

 

Alloy 1.4.0

Titanium.UI.Label / <Label>attributedString<AttributedString>Alloy 1.7.6
Titanium.UI.ListSection / <ListSection>

footerView

headerView

<FooterView>

<HeaderView>

Alloy 1.3.0
Titanium.UI.ListView / <ListView>

footerView

headerView

pullView

searchView

<FooterView>

<HeaderView>

<PullView>

<SearchBar> or <SearchView platform="android">

Alloy 1.3.0
Titanium.UI.OptionDialog / <OptionDialog>androidView<AndroidView> or <View>Alloy 1.5.0
Titanium.UI.TableView / <TableView>

footerView

headerPullView

headerView

search

<FooterView>

<HeaderPullView>

<HeaderView>

<Search>

Alloy 1.1.0
Titanium.UI.TableViewSection / <TableViewSection>headerView <HeaderView> 
Titanium.UI.TextArea / <TextArea>

attributedString

keyboardToolbar

<AttributedString>

<KeyboardToolbar>

Alloy 1.7.6

Alloy 1.5.0

Titanium.UI.TextField / <TextField>

attributedHintText

attributedString

keyboardToolbar

leftButton

rightButton 

<AttributeHintText>

<AttributedString>

<KeyboardToolbar>

<LeftButton> 

<RightButton> 

Alloy 1.7.6

Alloy 1.7.6

Alloy 1.3.0

Alloy 1.3.0

Alloy 1.3.

Titanium.UI.Window / <Window>

leftNavButton

rightNavButton

titleControl

toolbar

<LeftNavButton>

<RightNavButton>

<TitleControl> 

<WindowToolbar> 

Alloy 1.6.0

...

You can set ActionBar properties in the ActionBar element to modify the application's action bar. Add the ActionBar element as a child of either  a Window or TabGroup, then set ActionBar attributes in the XML or TSS file. To add action items to the action bar, add add the Menu element as a child of either  a Window or TabGroup , then add MenuItem elements as elements as children of the Menu element. S et MenuItem attributes in either the XML or TSS file.

Code Block
titleapp/views/index.xml
linenumberstrue
languagexml
<Alloy>
    <Window title="My App">
        <ActionBar id="actionbar" platform="android" title="Home Screen" onHomeIconItemSelected="showInfo" />
        <Menu>
            <MenuItem id="editItem" title="Edit" onClick="editInfo" />
            <MenuItem id="viewItem" title="View" onClick="viewInfo" />
        </Menu>
        <Label id="label">Use the ActionBar to Perform an Action.</Label>
    </Window>
</Alloy>

...

Code Block
linenumberstrue
languagexml
langxml
<Alloy>
    <Window>
        <Button id="confirmButton" onClick="confirmCB">OK</Button>
    </Window>
</Alloy>

Refer to the Titanium API Guides for the events of each UI object.

...