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"
}
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'
},
"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',
font : { textStyle : Ti.UI.TEXT_STYLE_HEADLINE }
},
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
Creat a Properties Adapter based Model and Save
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();
}
Display Collections in a View
<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;');
};
Migrate Local Database (DOWNGRADE)
migration.down = function(migrator)
{
migrator.dropTable();
};
