Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Made a minor formatting change

Table of Contents
maxLevel4
minLevel2

Overview

This guide provides basic instructions on installing the Alloy command-line interface (CLI) and creating a quick Alloy project.  Alloy is an MVC framework to help you quickly build Titanium applications.

Command-

...

line interface installation

To create and manage Alloy applications, you need the Alloy command-line interface and plugin should .  If you already installed Appcelerator Studio or the Appcelerator CLI, the Alloy CLI will be automatically installed by the studio updater. See Titanium SDK Quick Start for instructions. If there were installation problems or if you wish to install the Alloy CLI independent of the Studio installation, refer to the manual installation instructions below.

Manual Installation

The following steps install the latest released version of Alloy.

...

for you.  If you need to install Appcelerator Studio, see the Titanium SDK Getting Started or if you need to manually install the Appcelerator CLI:

  1. Download and install Node.js from from http://nodejs.org/#download, which includes the npm package manager needed to install Alloythe Appcelerator CLI.
  2. From a

    console window

    terminal, run the following command to install

    Alloy

    the CLI: 

    Code Block

...

langnone
  1. [sudo] npm install appcelerator -g

...

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.

Bleeding Edge Installation

To install the latest development version of Alloy, after installing  Node.js , clone the Alloy GitHub repository and perform an npm install from the Alloy project's root directory:

Code Block
langnone
git clone https://github.com/appcelerator/alloy.git
cd alloy
[sudo] npm install -g .

...

  1. After installation, run the setup command to install required components: 

    Code Block
    appc setup

    After the CLI downloads and installs the required components, you will be prompted to login and authorize your computer.  The CLI will ask to send an authorization token to your e-mail account or as a text to your mobile phone.  Enter the authorization token once you receive it to complete the registration process.

Create a project

Using Studio

To create a new Alloy project, start Titanium Appcelerator Studio, then

  1. From the menu, select File > New > Mobile App Project. The New Mobile App Project wizard appears.
  2. Select Alloy in the Available Templates box, choose a template, then click the Next button.
  3. Complete all of the fields, then click the Finish button.

A new skeleton Alloy project will be generated. If you are familiar with classic Titanium development, the Resources folder is hidden from the App and Project Explorer.  All work for an Alloy project is done in the app directory.

Using the CLI

To create a new Alloy project, use the Titanium Appcelerator CLI to create a new Titanium project, then use the Alloy CLI to generate the Alloy framework componentsAlloy project. Run the following command in a terminal:

Code Block
langnone
titaniumappc createnew --name=appname --id=com.domain.appname --platforms=android,ipad,iphone,mobileweb
cd appname
alloy new
t titanium

You will be prompted to enter an application name and application ID.

A new skeleton Alloy project will be generated in the appname directorythe directory named after the application name.

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.

...

Code Block
langxml
<Alloy>
	<Window>
		<ImageView id="imageView" onClick="clickImage"/>
		<Label id="l">Click Image of Apple Logo</Label>
	</Window>
</Alloy>

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.

...

Code Block
langcss
"Window": {
	backgroundColor:"white"
},
"#l":{
	bottom:20,
	width: Ti.UI.SIZE,
	height: Ti.UI.SIZE,
	color:'#999'
},
"#imageView":{
	image:"/images/apple_logo.jpg",
	width:24,
	height:24,
	top:100
}

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.

...

Code Block
langjavascript
function clickImage(e) {
	Titanium.UI.createAlertDialog({title:'Image View', message:'You clicked me!'}).show();
}

$.index.open();

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

The Alloy CLI converts the view, style and controller in to a Titanium project, which can be built and ran by Studio or the Titanium Appcelerator CLI.

Using Studio

In the Project Explorer view, select your project, then from the global tool bar, select Run from the Launch Mode drop-down and select the device to launch the application on in the Target drop-down. Alloy will generate the Titanium files from the Alloy project files, which will then be compiled by Studio and launched on the device simulator.

Note

For the Mobile Web platform, compile the application using the CLI, then run it with Studio. Run the following command from a console to compile the application:

alloy compile --config platform=mobileweb

Using the CLI

From a console window, go to the root directory of the project, then

Code Block
langnone
titaniumappc buildrun [-p platform]

The Titanium Appcelerator CLI contains hooks to the Alloy CLI, so you do not need to run any Alloy commands.

Refer to the Titanium the Appcelerator Command-Line Interface Reference for  for more information about using the titanium buildappc run command.

Note

For the Mobile Web platform, run the application from Studio after compiling it.

...

More examples

For more examples of Alloy, see see Alloy Samples.

Next

...

steps

Review Alloy Concepts to learn more about Alloy and how to structure your project.  From there, visit the links on Alloy ViewsAlloy Controllers, and Alloy Models to learn how to write views, controllers and models, respectively.

...