Versions Compared

Key

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

...

Titanium SDK ComponentAlloy Component

Titanium.UI.* Objects
Titanium.Android.Menu
Titanium.Facebook.LoginButton
Titanium.Map
Titanium.Media.VideoPlayer 

Code Block
languagejavascript
Titanium.UI.createButton();
  • 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
    languagehtml/xml
    <!-- 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
    languagejavascript
    // Does not create a button.  Used to style all Button objects in the associated view.
    "Button":{
        // Button attributes
    }

Titanium Object properties

Code Block
languagejavascript
Titanium.UI.createButton({
    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
    languagehtml/xml
    <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
    languagejavascript
    "Button":{
        title: "Foobar",
        top: 0,
        width: Ti.UI.SIZE
    }

Titanium Object methods

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

Titanium Object events

Code Block
languagejavascript
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
languagehtml/xml
<!-- doClick needs to be declared in the associated controller -->
<Button onClick="doClick"/>

...

app

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

app/alloy.jmk

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

app/alloy.js

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

app/config.json

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

app/assets

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.

app/controllers

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

app/i18n
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.

app/lib

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

app/migrations

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

Alloy Sync Adapters and Migrations:Migrations

app/models

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. 

app/styles

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.

app/themes

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

app/views

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.

app/widgets

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

i18n

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.

Resources

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.

...

Builtins

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.

...