getting to know alloy

part 1


by

David Plummer
for

Clearly Innovative, Inc.

what is alloy?



  • Alloy is a framework developed for the Titanium SDK
  • It was designed to speed up the development process
  • It's based on the MVC architecture which divides a Titanium project into more easily managed components


exercise


  1. Open Appcelerator Titanium.
  2. Create an alloy project.

Optional
  • Make your project cloud enabled
  • Create a user account using the appcelerator console

MVC

(Model-view-controller)

Architecture


WHAT IS mvc?


MVC is a software architecture pattern.
In Titanium, it's used to divide the project into three major components:

  • Models
  • Views
  • Controllers

MVC - Model




The model is the business data, logic, and rules.

A user profile would be a prime example of a model.

mvc - view


The view is the visual aspect or representation layer of the project. It is the graphical user interface (GUI) as far as the user is concerned.

  • Windows
  • Buttons
  • Text Fields
  • Checkboxes

mvc - controller


The controller is the programming logic that accepts the user's input (mouse clicks, screen taps, etc.) and processes it into a desired output. This can be achieved by sending commands to models and/or views instructing them to make adequate changes.

HOW do they communicate?


image provide courtesy of wikipedia (https://en.wikipedia.org/wiki/File:MVC-Process.png)

what's the benefit of MVC?



  • code can be reused more easily
  • separation of concern

Example: If the model, view, and controller for a particular module are separated, the programmer can work on the controller at the same time that the designer is working on the view without one compromising the work of the other. 

exercise


  1. Create a classic titanium project.

COde Comparison

Classic Code
  app.js






>>>

Code comparison

Alloy Code


view (index.xml)




style (index.tss)                   >>>




controller (index.js)


 

Folders & Purpose
assets: holds the media needed for  this project 
(images, songs, etc.)
controllers: holds the programming logic to make
the application perform tasks 
(functions, event handlers, objects, etc.)
models: holds the data structure definitions for the 
project's data store
styles: holds the stylesheet definitions for the views
views: holds the GUI definitions
plugins: holds some project dependencies (alloy is
included by default)

alloy project composition

how alloy works


When the project is built:
The code you wrote in the app directory is parsed into a classic titanium project.

During runtime:
  1. The alloy.js file is processed.
  2. The selected view is loaded (fileName.xml).
  3. The styles are applied (app.tss then fileName.tss).
  4. The controller is executed (fileName.js).

exercise

  1. Open or create a new alloy project.
  2. Open index.xml.
  3. Set the layout for the window tag to "vertical"
  4. Add four buttons to the window.
  5. Run the app.

Optional
  • Give the four buttons a backgroundGradient of your choosing.

Sample output


exercise


  1. Remove the layout property from the window.
  2. Style the four buttons to be labeled and repositioned as followed:

Optional
  • Add a view to the top or bottom of the window.
  • Draw a red circle or create a rounded view in the center of that view.

exercise


Objective:
Add an event listener to each button such that when a user clicks on the button, the message "going " + DIRECTION is outputted in an alert box. Make sure to use the same event listener for this process. Also, DIRECTION should be replaced with the applicable direction on the button label.


Optional:
If you've created the red ball or rounded view from the previous exercise, make it move up, down, left, or right 10dp or 10px based on the button the user taps.

acs

(appcelerator cloud services)

WHAT IS ACS?


Appcelerator Cloud Services is a back-end service offered by Appcelerator. This service can be utilized to manage the data which can be used to power your app, much like a database.

benefits (just a few)


  • You don't have to build a database every time you create an app.
  • You don't have to worry about hosting the database.
  • Titanium provides it's own API for communicating with the cloud.
  • The cloud can be accessed through mobile devices, Macs, and PCs.

exercise


  1. Make an alloy app in Titanium.
  2. Make the app Cloud-enabled.
  3. Log into your appcelerator account.
  4. Go to the ACS console of the alloy app you created.
  5. Create a user account.

Optional
  1. Upload a photo for your user account.
  2. Create an administrative account.

ACS CONSOLE

The ACS console is a control panel setup by Appcelerator to help you manage the cloud environment for your app.

What you can do in the ACS console:
  1. create, update, delete, view content
  2. register for and test push notifications
  3. check the usage statistics for your app
  4. check the activity logs
  5. export ACS content
  6. edit user permissions (Access Control List)

exercise


End Product:
You will create a user interface that can log into ACS.

ExercisE


Optional
Add the necessary window and logic to register an account. When an account is created successfully, redirect the user to the profile window.

summary

  • Alloy is a framework that uses the MVC architecture to make project development more manageable and organized
  • ACS is a free back-end service provided by Appcelerator to power your apps data-wise

resources


Appcelerator's Alloy Documentation

Appcelerator's Cloud Services Documentation

POP (Prototyping on Paper)

Balsamiq Mockups
(http://balsamiq.com/)

homework

DUE: SATURDAY 9/14 by 5:00pm

Required
Download balsamiq if you don't already have it. Review the 411 Eats app. Create the wireframes for the app in balsamiq. It can be exported as a PNG file. Email the PNG file to me (david@clearlyinnovative.com) with the following subject : homework1

Optional
See if you can figure out how to push your  ACS exercise  code to bitbucket and then share it with me. I should be able to download your project and run it it in Titanium Make sure to send me an email invitation. Name your bitbucket project homework1_#YOUR_FIRST_NAME#






;

getting to know alloy part 1

By David Plummer

Made with Slides.com

getting to know alloy part 1

  • 892

More from David Plummer