Alloy Model Binding A Random User Sample App

Alloy Model + Binding

Random User App ● App to demo Alloy Model Validation & Binding ● Using RandomUserMe API http://randomuser.me ● Login Form + Validation ● TableView Collection Binding ● ListView Collection Binding ● ScrollableView Collection Binding ● Filter collection to single user with details view

Alloy Model + Binding

Why Alloy Model Data Binding? ● Consistent approach to data across projects ● Allows for Separation of Concerns ● Less code ● Light Controllers ● Light Views ● Keep styling in TSS stylesheets ● Easier for ‘front-end’ designers to collaborate with developers to build out UI

Alloy Model + Binding

Alloy Models use Backbone ● Alloy relies on the Backbone API to sync model data to persistent storage ● Alloy Models inherit from the Backbone.Model class Backbone gives: ● Structure to apps by providing Models with key-value binding and custom events ● Collections with a rich API of enumerable functions ● Connects it all to your existing API over a RESTful JSON interface. Alloy Backbone Support: ● Alloy been stuck on 0.9.2 for a LONG time which been an issue for some advanced scenarios when needed full Backbone API ● Alloy 1.6.0 (Ti SDK 4.0.0) will introduce support for Backbone 1.1.2 ● However, due to breaking changes 0.9.2 is still default, need to change config.json to use http://docs.appcelerator.com/platform/latest/#!/guide/Alloy_Backbone_Migration

Alloy Model + Binding

Models need a Sync Adapter ● A sync adapter allows you to store and load your models to a persistent storage device, such as an on-device database or remote server Alloy has two in-build adapters: ● sql for a SQLite database on the Android and iOS platform ● properties for storing data locally in the Titanium SDK context You can also write your own adapter: ● Rest API Adapter by Mads Møller - https://github.com/viezel/napp.alloy.adapter.restapi ● Rest SQL Adapter by Mads Møller - https://github.com/viezel/napp.alloy.adapter.restsql ○ Offline Cache version of API in SQLite Database ● ACS Adapter by Aaron Saunders - https://github.com/aaronksaunders/Appcelerator-CloudServices-Sync-Adapter ● Windmill Adapter?

Alloy Model + Binding

Model Definition File Model File exports.definition = { config: { // table schema and adapter information

Model file has three objects: ● Config - defines table schema and adapter info ○ e.g. database columns, API endpoint, set headers

}, extendModel: function (Model) {

● Two functions can extend / override

_.extend(Model.prototype, { // Extended, override or implement Backbone.Model }); return Model; }, extendCollection: function (Collection) { _.extend(Collection.prototype, { // Extended, override or implement Backbone.Collection }); return Collection; } };

○ extendModel e.g. for local validation ○ extendCollection e.g. for sorting

Alloy Model + Binding

Using a Model for Local Validation loginValidation.js Model File (simplified) exports.definition = { extendModel: function (Model) { _.extend(Model.prototype, {

controller.js File ● Create model file for local validation var model = Alloy.createModel("loginValidation");

// extended functions and properties go here validate: function (attributes, options) { for (var key in attributes) { var value = attributes[key];

● When login button pressed use Backbone Events model.set({ email : $.txtEmail.value,

if (key === "email") { if (value.length > 0) { if (!validateEmail(value)) { return "Invalid email"; } } else { return "No email address entered"; } } } return; // return nothing for success } });

return Model; } };

password : $.txtPassword.value });

model.on("error", function(model, error) { alert(error); });

model.on("change", function(model){ loginUser(); });

Alloy Model + Binding

Using a Model Collection for Databinding randomuserme.json

randomuserme.js Model File (sqlrest adapter)

results: [ {

config : {

randomuserme.js Model File (sqlrest adapter) parentNode: function(data) {

"columns": {

user: { gender: "female", name: { title: "ms", first: "andrea", last: "moore" }, location: { street: "2394 park lane", city: "coventry", state: "durham", postcode: "YQ2 5WY" }, email: "[email protected]", username: "tinycat608", password: "nimbus", salt: "0Obk9i1e", md5: "3bcfe5d97cf834b0e8fd99bdea5070a1", sha1: "ab006d402cecc426015edc06547a51b6def14ba5", sha256: "73bbcc45cc71be415811f5a5ca41e7f2eaac51459d0507d802b38929f8d6c5d5", registered: "1276110521", dob: "481999452", phone: "013873 47234", cell: "0701-904-609", NINO: "SA 16 70 18 G", picture: { large: "http://api.randomuser.me/portraits/women/44.jpg", medium: "http://api.randomuser.me/portraits/med/women/44.jpg", thumbnail: "http://api.randomuser.me/portraits/thumb/women/44.jpg" }, version: "0.6", nationality: "GB"

var persons = [];

"id":"TEXT PRIMARY KEY",

_.each(data.results, function(_entry) {

"Title": "text",

var entry = {};

"Firstname":"text", "Lastname": "text",

entry.id = _entry.user.registered;

"ProfilePhoto": "text",

entry.Title = _entry.user.name.title;

"Email": "text",

entry.Firstname = _entry.user.name.first;

"Password": "text"

entry.Lastname = _entry.user.name.last;

}, "URL": "http://api.randomuser.me/?results=20",

entry.fullName = entry.Firstname +” “ +entry.Lastname;

"adapter" : { "type" : "sqlrest",

entry.ProfilePhoto = _entry.user.picture.large;

"collection_name" : "randomuserme",

entry.Email = _entry.user.email;

"idAttribute" : "id"

entry.Password = _entry.user.password;

} }

persons.push(entry); }); return persons;

}, seed: "dogfish" } ]

}

Alloy Model + Binding

Collection + Binding View





Controller // Backbone fetch on Model Alloy.Collections.randomuserme.fetch();

// Clean up when window closes to avoid memory issues function cleanup() { $.destroy(); }

Alloy Model + Binding

Filter a Collection TableView View XML Add Id to row via binding

TableView Controller Pass Id to new Window // get Id of row clicked, open a new window passing in Id function rowClicked(e) { var id = e.rowData.rowId; var winPerson = Alloy.createController("person", {modelId: id}).getView(); Alloy.Globals.tabTableView.open(winPerson); }

Person Controller Filter collection by Id // Filter collection by Id passed over using Backbone var person = Alloy.Collections.randomuserme.where({ id: args.modelId });

Alloy Model + Binding

Bonus Feature - Pull to Refresh TableView View XML Add Refresh Widget

TableView Controller Make onRelease function do Backbone Fetch // onRefresh make API call using Alloy Model via Backbone fetch function myRefresher(e) { Alloy.Collections.randomuserme.fetch({ success: e.hide, error: e.hide }); }

TableView Controller onOpen of Window refresh Widget to set intial set of data // onOpen of Window get API data by calling refresh function init() { $.ptr.refresh(); }

Alloy Model + Binding

Extra Stuff we didn’t cover Backbone Objects without Alloy ● You can use plain Backbone Collection and Model objects in place of Alloy versions Migrations ● Migration is a description of incremental changes to a database, which takes your database from version 1 to version x. ● e.g. offline cache, do need to take this into account Other UI Binding ● ButtonBar ● CoverFlow ● Map Annotations ● Picker ● TabbedBar ● Toolbar ● View DataTransform ● Filter outside of model file DataFunction ● Manually update View Prefix Naming for Multiple Models in a View

Alloy Model + Binding

Resources ● https://bitbucket.org/applification/alloymodelbinding ● http://docs.appcelerator.com/platform/latest/#!/guide/Alloy_Models ● https://github.com/appcelerator/alloy/tree/master/test/apps/models

A Random User Sample App - GitHub

Alloy has two in-build adapters: ○ sql for a SQLite database on the Android and iOS platform. ○ properties for storing data locally in the Titanium SDK context.

725KB Sizes 30 Downloads 308 Views

Recommend Documents

App-Bits README - GitHub
FREE TAB BAR ICONS. Thank you for downloading the APP-BITS tab bar icon set! This icon bundle ... Inside this pack you will find icons sized for iOS devices.

User Manual - GitHub
Page 1. User Manual. Project Odin. Kyle Erwin. Joshua Cilliers. Jason van Hattum. Dimpho Mahoko. Keegan Ferrett. Page 2. Contents. Contents. Section1 .

GWR4.09 User Manual - GitHub
Starting the program, Exiting the program, and Tab design ...................... 5 ..... GWR4 runs on Windows Vista, Windows 7, 8 and 10 environments with the .

user guide - GitHub
TOOLS AnD EVA ITEMS CAn BE FOUnD In A nEW TAB UnDER SCIEnCE CATEGORy. .... But THE greatest thing above all is KSP community. ... Of course, we still need hard work to improve our mods and we have many other ideas as.

SPSToolbox - User Manual - GitHub
May 15, 2013 - Contents. 1 Introduction .... booktitle = {Proceedings of the Automation and Applied Computer Science Workshop ..... System Sciences Series.

VFS User Manual - GitHub
wind turbines considering the non-linear effects of the free surface with a two-phase .... the nodes of the computational domain are classified depending on their location with ...... bcs.dat need to be set to any non-defined value such as 100.

User Guide - GitHub
Requires the query, phrase, or word on its right hand side to not be in the document. [ATTRIBUTE]:. Requires the value of the document attribute describe between the brackets [ ] to equal the value to the right of the colon. Multiword phrases are exp

User Guide - GitHub
2.2 Download and Installation via App Manager . .... Cytoscape/GEXF “app” that allows network diagrams described using the GEXF file format to be imported ...

OCEMR: User Manual - GitHub
In order to access the program, OCEMR, find the Firefox tab located to the left of the screen. .... click on the view option next to the patient record with the most ..... entered, the report will appear as a download at the bottom of the popup scree

The User Manual - GitHub
Defined Wireless Networking Experiments 2017 ..... 1.7.3 Encryption. Mininet-WiFi supports all the common wireless security protocols, such as WEP (Wired Equivalent. Privacy), WPA (Wi-Fi Protected Access) and WPA2. ..... mac80211_hwsim practical exam

micro-services sample project - GitHub
Netflix Zuul acts as the API Gateway for accessing the micro services behind the gateway. It also acts as the load balancer and the reverse proxy server which routes the request to the respective service. Microservice's stay behind reverse proxy serv

User Manual - GitHub
IIS-1. 0x01C2 2000---0x01C2 23FF. 1K. IIS-0. 0x01C2 2400---0x01C2 27FF. 1K ..... IIS 1 CLOCK REGISTER ...... NFC can monitor the status of R/B# signal line.

ZotPad User Manual - GitHub
Settings. 19. Troubleshooting and getting help. 24. Technical information. 27 .... These will be replaced with document previews for PDF files after the files have ...

Sample Statement of Work - GitHub
CONFIDENTIAL: The contents of this document are confidential and are intended exclusively for the designated recipients. The contents of this page is defined ...

When a Random Sample is Not Random. Bounds on ...
the absence of data on the initial population, no information is recorded on these all-move households. ...... this information gives a system of three equations, which we can solve to obtain the strata proportions: NV AM. 100 ..... (2013): “Accoun

Monitorless ATM mobile app - GitHub
Page 3. M. Kerem Tiryaki. 6/45 hours sleepless. Kerem fb.me/keremtiryaki bit.ly/hack-ing. Page 4. Prototype for iPhone&iPad. Experimental ATM. Mobile app. Augmented reality ATM gui. Augmented reality payment gui. Available on bit.ly/hack-ing fb.me/ke

WDS User Archetypes MASTER.indd - GitHub
government and early in their career. WHY THEY'RE USING THE STANDARDS ... technology stacks and work-flows. USER ARCHETYPE. The reviewer.

Hedgehog User Guide 2.4.0 - GitHub
Hedgehog can be installed to run on a single server with all the components local to that server. .... They are documented separately in the Hedgehog Tools PDF. ... RSSACD. In order to collect the zone-size and load-time statistics a dedicated.

Sequencer64 User Manual 0.94.4 - GitHub
Feb 3, 2018 - Doxygen output (including a PDF file) provides a developer's reference manual. – Debian packaging was ..... can play music. The items that appear in this tab depend on four things: • What MIDI devices are connected to the computer.

RFBee User Manual v1.1 - GitHub
Aug 27, 2010 - 2. 1.2. Specifications. ... 2. 1.3. Electrical Characteristics . ..... >>Datasheet: http://www.atmel.com/dyn/resources/prod_documents/doc2545.pdf. >>Arduino ... >>Datasheet: http://focus.ti.com/docs/prod/folders/print/cc1101.html.

Design module user manual - GitHub
In the design module objects like buildings can be selected. For each case, measures ... Figure 3, parts of the web application for control and visualizing data. 1.

Hello World This is just a sample PDF. - GitHub
Page 1. Hello World. This is just a sample PDF.

Sample Language for Reporting and Confidentially ... - GitHub
misconduct policy.1 Schools must also consult applicable state laws (such as .... order to provide a safe, non-discriminatory environment for all students. ... the College encourages victims to talk to someone, the College provides an online [or.

Image matting using comprehensive sample sets - GitHub
Mar 25, 2014 - If αz = 1 or 0, we call pixel z definite foreground or definite background, ..... In Proceedings of the 2013 IEEE Conference on Computer Vi-.