Alloy

 Describe the role and proper syntax of Alloy Views, Styles, Controllers, Model, and Collections

b.    Implement the Titanium components that comprise an app's UI by using Alloy

c.    Handle user interaction and app-level events in your controllers

d.    Implement media/device queries to target Alloy styles to a specific platform or form factor 

e.    Represent your app's data in Models and Collections

f.     Bind Models and Collections to Views

g.    Save data locally via sync adapters

h.    Create an Alloy Migration and manage database versioning

Exercise - 1

Create a  GREEN (100,100)  View inside RED (50, 50) which is inside BLUE (25,25). Apply styles only using style sheet

Solution

"Label": {

width: 25,

height: 25,

color: "#000"

}, 

"#label": {

color: "#999" /* gray */

}

Exercise - 2

Apply styles using value from Global

Solution

"#label": {

color: Alloy.Globals.viewColor

}

Exercise - 3

Create three views.All views should inherit the BACKGROUNDCOLOR from global styles

Solution

"#label": {

color: Alloy.Globals.viewColor

}




Exercise - 4

Make background color as GREEN for mobileweb and RED for Android

Solution

"Label[platform=android]": {

backgroundColor: "#00f",

text: 'Android'

},




// Any Mobile Web platform

"Label[platform=mobileweb]": {

backgroundColor: "#f0f",

text: 'Mobile Web'

}




Exercise - 5

Using custom properties, assign style




Solution

"#label[if=$.args.fooBar]" : {

'text' : 'Foobar',

'color' : 'blue'

}







Exercise - 6

Use conditional statement as assign styles




Solution

Alloy.Globals.androidTall = (OS_ANDROID && Ti.Platform.displayCaps.platformHeight >= 500); 







#title[if=Alloy.Globals.androidTall]" : {

top: '25dp', // compensate for the status bar on iOS 7

font : { textStyle : Ti.UI.TEXT_STYLE_HEADLINE }

},




Models

Exercise - 7

Creat a SQL Adapter based Model and Save




Solution

function createSQLModel(){

var title = $.book.getValue();

var author = $.author.getValue();

var isbn = $.isbn.getValue();

Ti.API.info (title+'-'+author+'-'+isbn);

var book = Alloy.createModel('library', {Title:title, Author:author,ISBN:isbn}); 

book.save(); 

}

Find the DB and query from Shell

Prasads-MacBook-Pro:~ prasadkatankot$ adb shell

root@vbox86tp:/ # cd /data/data

root@vbox86tp:/data/data # ls

training.vmware.com

root@vbox86tp:/data/data # cd training.vmware.com/                             

root@vbox86tp:/data/data/training.vmware.com # ls

cache

databases

lib

shared_prefs

d databases/                                                                  <

root@vbox86tp:/data/data/training.vmware.com/databases # ls

Titanium

Titanium-journal

appcAnalytics.db

appcAnalytics.db-journal

root@vbox86tp:/data/data/training.vmware.com/databases # sqlite3

SQLite version 3.8.6 2014-08-15 11:46:33

Enter ".help" for usage hints.

Connected to a transient in-memory database.

Use ".open FILENAME" to reopen on a persistent database.

sqlite> .open Titanium

sqlite> .tables

android_metadata  platform        

sqlite> select * from platform;

unique_machine_id|6d4312a1f3f1b78e

hardware_machine_id|6d4312a1f3f1b78e

previous_machine_id|

sqlite> 

/Users/prasadkatankot/Library/Developer/CoreSimulator/Devices/<ID>/data/Containers/Data/Application/<ID>/Library/Private\ Documents/

Prasads-MacBook-Pro:D4BE9353-828D-4EC7-8E36-B48B7E7ED4E6 prasadkatankot$ cd Library/Private\ Documents/

Prasads-MacBook-Pro:Private Documents prasadkatankot$ ls

_alloy_.sql

Prasads-MacBook-Pro:Private Documents prasadkatankot$ sqlite3

SQLite version 3.8.5 2014-08-15 22:37:57

Enter ".help" for usage hints.

Connected to a transient in-memory database.

Use ".open FILENAME" to reopen on a persistent database.

sqlite> .open _alloy_.sql 

sqlite> .tables

Exercise - 8

Creat a Properties Adapter based Model and Save




Solution

DEFINE PROPERTY ADAPTER MODEL

exports.definition = {

config: {

 columns: {

            "Title" : "text",

            "Author" : "text",

            "ISBN":"int",

            "id":"int"

        },

       defaults : {

             "Title" : "Market",

            "Author" : "Bull",

            "ISBN":345,

            "id":1

        },

adapter: {

type: "properties",

collection_name: "schools"

}

},

extendModel: function(Model) {

_.extend(Model.prototype, {

// extended functions and properties go here

});

return Model;

},

extendCollection: function(Collection) {

_.extend(Collection.prototype, {

// extended functions and properties go here

// For Backbone v1.1.2, uncomment the following to override the

// fetch method to account for a breaking change in Backbone.

/*

fetch: function(options) {

options = options ? _.clone(options) : {};

options.reset = true;

return Backbone.Collection.prototype.fetch.call(this, options);

}

*/

});

return Collection;

}

};






function assignProperties(){

var title = $.book.getValue();

var author = $.author.getValue();

var isbn = $.isbn.getValue();

Ti.API.info (title+'-'+author+'-'+isbn);




var book = Alloy.createModel('schools', {Title:title, Author:author,ISBN:isbn}); 




book.save();

}

Exercise - 9

Display Collections in a View




Solution

<Alloy>

<Collection src="library"/>

<View layout="vertical">

<TableView dataCollection="library"  id="leaves98" >

<TableViewRow height="50">

<View  layout="horizontal" backgroundColor="grey" height="50">

<Label text="{ISBN}" valsel="{ISBN}" onClick="editLeave" height="Titanium.UI.SIZE" />

<Label text="{Title}" valsel="{Title}"  onClick="editLeave" height="Titanium.UI.SIZE"  />

<Label text="{Author}"  valsel="{Author}" onClick="editLeave" height="Titanium.UI.SIZE" />

</View>

</TableViewRow>

</TableView>

</View>

</Alloy>


In corresponding controller add following

Alloy.Collections.library.fetch();

Exercise - 10

Migrate Local Database (UPGRADE)




Solution

migration.up = function(migrator)

{

 migrator.db.execute('ALTER TABLE ' + migrator.table + ' ADD COLUMN Age INT;');

};

Exercise - 11

Migrate Local Database (DOWNGRADE)




Solution

migration.down = function(migrator)

{

    migrator.dropTable();

};