Overview
This guide provides basic instructions on installing the Alloy command-line interface (CLI) and creating a quick project.
Command-Line Interface Installation
The Alloy command-line interface and plugin should be automatically installed by the studio updater. Refer to the Titanium Studio Quick Start Guide for instructions.
If there were installation problems or if you wish to install the Alloy CLI independent of the Titanium Studio installation, refer to the manual installation instructions below.
Manual Installation
- Download and install Node.js from http://nodejs.org/#download, which includes the npm package manager needed to install Alloy.
- From a console window, run the following command to install Alloy:
By default, these installation directions will install the latest Alloy release. To install a specific released version, use the same directions, except after 'alloy', add the at symbol ('@') with the version number. For instance, executing sudo npm install -g alloy@1.0.0
will install version 1.0.0.
Create a Project
Using Titanium Studio
To create a new Alloy project, start Titanium Studio, then
- From the menu, select File > New > Titanium Project. The New Titanium Project wizard appears.
- Select Alloy in the Available Templates box, choose a template, then click the Next button.
- Complete all of the fields, then click the Finish button.
A new skeleton Alloy project will be generated. Note that the Resources
folder is hidden from the App and Project Explorer.
Using the CLI
To create a new Alloy project, run the following commands:
A new skeleton Alloy project will be generated in the appname
directory.
Simple Example
The following example converts the image_view_file.js
file from the Titanium KitchenSink sample application to an Alloy project.
To see the example in the KitchenSink application, click on the Base UI
tab, then navigate to Views > Images Views > Image File.
View
The view file declares the structure of the GUI. For example, the file below defines a window with an image and label.
Replace the contents of app/views/index.xml
with the following:
Style
The style file formats and styles the components in the view file. For example, the style below defines the background color of the window; position, dimensions and color of the label; and position, dimensions and location of the image.
Replace the contents of app/styles/index.tss
with the following:
Controller
The controller file contains the presentation logic, which responds to input from the user. For example, the controller code below creates an alert dialog when the user clicks on the image and opens the window when the application starts.
Replace the contents of app/controllers/index.js
with the following:
Asset
Create a folder called app/assets/images
and copy the apple_logo.jpg
file from the KitchenSink project. This file will be copied to Resources/images/apple_logo.jpg
by Alloy during the build process.
Compile and Run
Using Titanium Studio
In the App Explorer view, click the Run button and select the device to launch the application. Alloy will generate the Titanium files from the Alloy project files, which will then be compiled by Titanium Studio and launched on the device simulator.
Using the CLI
From a console window, go to the root directory of the project, then
More Examples
For more simple usage examples of Alloy, go to the alloy/test/app directory on the Alloy github project.