# Alloy

> Titanium's MVC framework: XML views, TSS styles, JavaScript controllers, and Backbone models.

- Source: https://titaniumsdk.com/docs/alloy
- Written for Titanium SDK 13.4.0 and later.
- This corpus documents Titanium SDK 13.4.1. Anything here that does not name a version describes 13.4.1.
- Titanium is maintained by TiDev. The Appcelerator toolchain is retired: there is no `appc` CLI, no Appcelerator Studio and no hosted build service. The supported CLI is `titanium` on npm, invoked as `ti`.

---

Alloy splits a screen into three files: an XML view for structure, a TSS file
for style, and a JavaScript controller for behaviour. It compiles all three
into ordinary Titanium code before the build, so it is a layer over the API
rather than a different runtime, and anything you can do in Classic you can do
here.

It is a separate install:

```sh
npm i -g alloy
```

`alloy new` converts an existing Classic project in place, which is why
choosing Classic first costs nothing. See
[your first app](https://titaniumsdk.com/docs/build/first-app.md) for that choice.

## What it gives you

**Separation.** A 400-line file that builds a screen becomes an XML file you
can read at a glance and a controller with only the behaviour in it.

**Styling by selector.** TSS applies properties by element type, class or id,
across the whole app or one screen, so a button style is written once.

**Compile-time platform code.** `OS_IOS` and `OS_ANDROID` are constants
replaced during compilation, so the branch not taken is removed from the build
rather than evaluated on the device.

**Data binding.** A Backbone collection can drive a `ListView` directly, so
adding a row is a model operation rather than a view operation.

## The pages

[Views](https://titaniumsdk.com/docs/alloy/views.md) is the XML: elements, ids, classes, and how an
element becomes a `Ti.UI.create*` call.

[Styles and themes](https://titaniumsdk.com/docs/alloy/styles.md) is TSS: selectors, precedence, platform
and form-factor queries, and themes.

[Controllers](https://titaniumsdk.com/docs/alloy/controllers.md) is the JavaScript: the `$` namespace,
arguments, opening and closing, and cleaning up.

[Models and collections](https://titaniumsdk.com/docs/alloy/models.md) is the data layer, its sync
adapters, and binding a collection to a list.

[Widgets](https://titaniumsdk.com/docs/alloy/widgets.md) is how to package a piece of UI for reuse across
projects.

[Configuration](https://titaniumsdk.com/docs/alloy/config.md) is `config.json`, `Alloy.CFG`, and the
compile-time constants.

## Where the files go

```
app/
  views/        index.xml
  styles/       app.tss, index.tss
  controllers/  index.js
  models/
  widgets/
  lib/          plain modules, required by path
  assets/       images, and semantic.colors.json
  themes/
  alloy.js      runs before the first controller
  config.json
```

`Resources/` is Alloy's output and is regenerated on every build. Do not edit
it, and do not commit it. See
[project structure](https://titaniumsdk.com/docs/build/project-structure.md).