Versions Compared


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


Titanium SDK ComponentAlloy Component

Titanium.UI.* Objects

Code Block
  • XML element. Remove the namespace. For some elements, you may need to assign the ns attribute. For more information, refer to Alloy XML Markup: Namespace.

    Code Block
    <!-- Creates a button -->
    <Button />
  • TSS element. Remove the namespace. If the object belongs to another namespace besides Titanium.UI and is not implicitly assigned a namespace by Alloy, you cannot create a style based on the element name. Instead, create a style based on a selector (XML class attribute) or id (XML id attribute). For a list of objects that Alloy implicitly assigns a namespace, refer to Alloy XML Markup: Namespace.

    Code Block
    // Does not create a button.  Used to style all Button objects in the associated view.
        // Button attributes

Titanium Object properties

Code Block
    text: "Foobar",
    top: 0,
    width: Ti.UI.SIZE
  • XML attribute if the property can be expressed as a string, number or Titanium SDK constant. Some properties that take Titanium objects can be expressed inline using XML tags. For more information, refer to Alloy XML Markup: Property Mapping.

    Code Block
    <Button title="Foobar" top="0" width="Ti.UI.SIZE"/> 
  • TSS attribute if the property can be directly expressed as a string, number, Titanium SDK constant, dictionary or array. Indirectly, you can assign a method or value to the Alloy Globals or CFG namespace and reference it in the TSS file. For more information, refer to Alloy Styles and Themes.

    Code Block
        title: "Foobar",
        top: 0,
        width: Ti.UI.SIZE

Titanium Object methods

Code Block
var button = Titanium.UI.createButton();
button.setTitle('Push Me!');

Use in the controller code. You need to define the id attribute of the object in the XML markup, so the object can be referenced in the controller.

Code Block
// Need to give the object an ID, for example, <Button id="button" />
$.button.setTitle('Push Me!');

Titanium Object events

Code Block
var button = Titanium.UI.createButton();
button.addEventListener('click', doClick);

Image Removed


XML attribute to bind a callback in the associated controller. Capitalize the first character of the event name and append 'on' to the beginning of the name.

Code Block
<!-- doClick needs to be declared in the associated controller -->
<Button onClick="doClick"/>



Contains the models, views, controllers and assets of the application. All work should be done here. See folder descriptions below.


Build configuration file.
See Build Configuration File (alloy.jmk).


Initializer file used to preconfigure components or override Alloy methods before the main controller is executed.
See Initializer File (alloy.js) for more information.


Project configuration file.
See Project Configuration File (config.json).


Contains image assets and other files that need to be copied into the Resources directory.
Reference these files in the code without the 'app/assets' path and without the platform-specific folder if it is inside one.


Contains controllers in the format filename.js to a corresponding view file app/views/filename.xml.
See Alloy Controllers for more information.

Since Alloy 1.8.0 and Titanium 5.2.0 Language Strings are sourced from app/i18n and Alloy will generate the i18n folder in the project root.


Contains application-specific library code, typically in the CommonJS format.
See Library code and CommonJS modules  for more information.


Contains database migration files in the format <DATETIME>_filename.js.
See Migrations for more information.

Alloy Sync Adapters and Migrations:Migrations


Contains model files in the format filename.js.
See Alloy Models for more information.

app/platformSince Alloy 1.8.0 platform resources are sourced from app/platform and Alloy will generate the platform folder in the project root.
app/specsLike the app/lib folder except it is only used if the deploy type is not production (since Alloy 1.2.0).
See Library Code for more information. 


Contains view styling in the format filename.tss, which is applied to a corresponding view file app/views/filename.xml.
See Titanium Style Sheets for more information.


Contains themes to customize the assets and styles of the entire GUI.
See Themes for more information.


Contains views in the format filename.xml with the optional corresponding files app/controllers/filename.js and app/styles/filename.tss.
See Alloy XML Markup for more information.


Contains widget files. Each widget will have its own app-like directory structure.
See Widgets for more information.


Since Alloy 1.8.0 and Titanium 5.2.0 Language Strings are sourced from app/i18n and Alloy will generate the i18n folder in the project root. Before Alloy 1.8.0 and Titanium 5.2.0 you were expected to manage the i18n folder in the project root, just like you do without Alloy.


Contains the Titanium files generated by the Alloy interface from the app directory. All files will be overwritten each time the application is built.
Since Alloy 1.3.0, Alloy creates a separate Titanium project for each platform you build for in the Resources/<platform> folder.
See Compilation process for more information.

Notes: the lib, migrations, themes and widgets folders are not automatically generated when creating a new project. The migrations and widgets folder will be generated by the Alloy command-line interface if any of those components are generated. The lib and themes folders will need to be manually created.


Additionally, the assets folder is laid out the same way as the 'Resources' folder in a Titanium project for platform-specific files and density-specific images. Refer to Platform-Specific Resources for more information.



Alloy comes with additional utilities used to simplify certain functions, such as animations, string manipulation, and display unit conversion. These utilities are referred to as 'builtins.' To use these utilities, the controller needs to call require with 'alloy' as the root directory. For example, to use an animation function to shake the current view by pressing the 'shake' button, add this code to a controller:


The 'pre:compile' task executes at this point if it is defined.

Model-View-Controller and


widget generation

The model files are processed. The compiler creates a JavaScript file per model and copies them to the Resources/<platform>/alloy/models folder.