Setting Up a Basic Alloy MVC Project in Appcelerator Titanium

Desired outcome

Create a new Appcelerator Titanium project that uses the Alloy MVC framework, add a simple controller, view, and model, and verify that changes to the model update the UI.

Prerequisites

• Titanium CLI installed (version ≥ 9.0.0).
• Node.js and npm available.
• Basic familiarity with command‑line tools.
• Write permission in the target workspace directory.

Procedure

1. Initialize the project
   Run the following command in your workspace:

   titanium create  --id com.example. --alloy

   Replace <project-name> with a lowercase identifier (e.g., todoapp). The --alloy flag tells the CLI to scaffold an Alloy‑based app.
2. Navigate into the project
   

   cd 

3. Verify the Alloy directory structure
   The command should have created:

   app/
   └── alloy/
       ├── controllers/
       ├── models/
       ├── styles/
       └── views/
   

   If any of these folders are missing, re‑run the create command with --alloy or check the CLI version.
4. Create a model
   Generate a model file named item.js:

   alloy generate model item

   This creates app/alloy/models/item.js and an empty app/alloy/models/item.xml (optional).
5. Create a controller and view
   Generate a controller called main:

   alloy generate controller main

   This yields app/alloy/controllers/main.js and app/alloy/views/main.xml.
6. Edit the view to bind a model attribute
   Open app/alloy/views/main.xml and replace its content with:

   <Alloy>
       <Window class='container'>
           <Label id='itemLabel' text='{item.title}' />
       </Window>
   </Alloy>
   

   The expression {item.title} binds the Label’s text to the title attribute of a model named item.
7. Wire the model in the controller
   Edit app/alloy/controllers/main.js:

   var Item = Alloy.createModel('item');
   Item.set({title: 'Initial value'});
   $.itemLabel.text = Item.get('title'); // initial sync
   // Expose the model for later updates
   exports.model = Item;
   

8. Set the controller as the entry point
   Open app/alloy/config.json (create if missing) and ensure:

   {
       "global": {}
   }
   

   Then edit app.js (generated by the CLI) to load the main controller:

   var main = Alloy.createController('main');
   main.getView().open();
   

9. Build and run
   For iOS simulator (requires macOS and Xcode):

   titanium build --platform ios --target simulator

   For Android emulator:

   titanium build --platform android --target emulator

   The CLI will compile the Alloy assets into native Titanium code and launch the app.
10. Check the result
    You should see a window displaying a label with the text “Initial value”. To verify data binding, change the model value at runtime (e.g., via the console):

    Alloy.Controllers.main.model.set({title: 'Updated value'});
    

    The label should update automatically without manual UI code.

Expected checks

• The app/alloy folder contains controllers, models, views, and styles subfolders.
• The build completes without errors; the simulator/emulator launches.
• The label’s text changes when the model’s title attribute is modified.

Recovery options (rollback)

If the generated files cause conflicts or you wish to start over:

1. Remove the project directory: rm -rf (ensure you have no unsaved work elsewhere).
2. Re‑run the titanium create command with the --alloy flag.

Because the operation only creates files, deleting the directory restores the previous state.