More Related Content Similar to Mulberry: A Mobile App Development Toolkit Similar to Mulberry: A Mobile App Development Toolkit (20) 1. A Mobile App
Development Toolkit
Rebecca Murphey • BK.js • January 2012
Tuesday, January 17, 12
5. Callback
Cordova
Tuesday, January 17, 12
6. command line tools create the structure for an
app, plus all the pieces you’ll need
application framework javascript, html
templates, css via sass
builder generates production-ready builds for
Android, iOS
Tuesday, January 17, 12
10. $('#btn-co-complete').live('click', function() {
jobCompleted = true;
$.mobile.changePage('#page-clockout-deficiency', {changeHash: false});
});
$('#btn-co-nocomplete').live('click', function() {
jobCompleted = false;
$.mobile.changePage('#page-clockout-deficiency', {changeHash: false});
});
$('#btn-co-nodef').live('click', function() {
clockOut(activeJob, { completed:jobCompleted }, DW_JOB_COMPLETED);
});
$('#btn-co-otherdef').live('click', function() {
$.mobile.changePage('#page-clockout-redtag', {changeHash: false});
});
$('#btn-co-redtag').live('click', function() {
clockOut(activeJob, { completed:jobCompleted, redTag:true }, DW_JOB_FOLLOWUP);
});
$('#btn-co-noredtag').live('click', function() {
$('#page-clockout-resolve').page();
$.mobile.changePage('#page-clockout-resolve', {changeHash: false});
});
$('#btn-clockout-resolve').live('click', function() {
switch ($('#page-clockout-resolve :checked').val()) {
Tuesday, January 17, 12
case 'return':
12. Mulberry apps are architected feels like
We can write JavaScript thatfor change.this.
Tuesday, January 17, 12
13. command line interface create the structure
for an app, plus all the pieces you’ll need
application framework javascript, html
templates, css via sass
builder generates production-ready builds for
Android, iOS
Tuesday, January 17, 12
16. routes manage high-level application state
components receive and render data,
and react to user input
capabilities provide data to components,
and broker communications between them
page de nitions reusable groupings
of components and capabilities
stores persist data on the device, make that
data query-able, and return model instances
Tuesday, January 17, 12
18. $YOURAPP/javascript/routes.js
mulberry.page('/todos', {
name : 'Todos',
pageDef : 'todos'
}, true);
mulberry.page('/completed', {
name : 'Completed',
pageDef : 'completed'
});
#/todos #/completed
Tuesday, January 17, 12
19. stores persist data on the device, make that
data query-able, and return model instances
Tuesday, January 17, 12
20. $YOURAPP/javascript/stores/todos.js
mulberry.store('todos', {
model : 'Todo',
finish : function(id) {
this.invoke(id, 'finish');
},
unfinish : function(id) {
this.invoke(id, 'unfinish');
}
});
Tuesday, January 17, 12
21. page de nitions reusable groupings
of components and capabilities
Tuesday, January 17, 12
22. todos:
capabilities:
- name: PageTodos
screens:
- name: index
regions:
- components:
- custom.TodoForm
- className: list
scrollable: true
components:
- custom.TodoList
- components:
- custom.TodoTools
NB: You can define this with JavaScript, too,
using toura.pageDef(‘todos’, { ... }).
Tuesday, January 17, 12
24. $YOURAPP/javascript/components/TodoForm.js
mulberry.component('TodoForm', {
componentTemplate : dojo.cache('client.components', 'TodoForm/TodoForm.haml'),
init : function() {
this.connect(this.domNode, 'submit', function(e) {
e.preventDefault();
var description = dojo.trim(this.descriptionInput.value),
item;
if (!description) { return; }
item = { description : description };
this.domNode.reset();
this.onAdd(item);
});
},
onAdd : function(item) { }
});
Tuesday, January 17, 12
26. $YOURAPP/javascript/components/TodoForm.js
mulberry.component('TodoForm', {
componentTemplate : dojo.cache('client.components', 'TodoForm/TodoForm.haml'),
init : function() {
this.connect(this.domNode, 'submit', function(e) {
e.preventDefault();
var description = dojo.trim(this.descriptionInput.value),
item;
if (!description) { return; }
item = { description : description };
this.domNode.reset();
this.onAdd(item);
});
},
onAdd : function(item) { }
});
Tuesday, January 17, 12
28. mulberry.capability('PageTodos', {
todos:
requirements : {
capabilities:
todoList : 'custom.TodoList',
- name: PageTodos
todoForm : 'custom.TodoForm',
screens:
todoTools : 'custom.TodoTools'
- name: index
},
regions:
- components:
connects : [
- custom.TodoForm
[ 'todoForm', 'onAdd', '_add' ],
- className: list
[ 'todoList', 'onComplete', '_complete' ],
scrollable: true
[ 'todoList', 'onDelete', '_delete' ],
components:
[ 'todoTools', 'onCompleteAll', '_completeAll' ]
- custom.TodoList
],
- components:
- custom.TodoTools
init : function() {
this.todos = client.stores.todos;
this._updateList();
},
_add : function(item) {
this.todos.add(item);
this._updateList();
},
_delete : function(id) {
this.todos.remove(id);
this._updateList();
},
Tuesday, January 17, 12 _complete : function(id) {
29. mulberry.capability('PageTodos', {
todos:
requirements : {
capabilities:
todoList : 'custom.TodoList',
- name: PageTodos
todoForm : 'custom.TodoForm',
screens:
todoTools : 'custom.TodoTools'
- name: index
},
regions:
- components:
connects : [
- custom.TodoForm
[ 'todoForm', 'onAdd', '_add' ],
- className: list
[ 'todoList', 'onComplete', '_complete' ],
scrollable: true
[ 'todoList', 'onDelete', '_delete' ],
components:
[ 'todoTools', 'onCompleteAll', '_completeAll' ]
- custom.TodoList
],
- components:
- custom.TodoTools
init : function() {
this.todos = client.stores.todos;
this._updateList();
},
_add : function(item) {
this.todos.add(item);
this._updateList();
},
_delete : function(id) {
this.todos.remove(id);
this._updateList();
},
Tuesday, January 17, 12 _complete : function(id) {
30. mulberry.capability('PageTodos', {
todos:
requirements : {
capabilities:
todoList : 'custom.TodoList',
- name: PageTodos
todoForm : 'custom.TodoForm',
screens:
todoTools : 'custom.TodoTools'
- name: index
},
regions:
- components:
connects : [
- custom.TodoForm
[ 'todoForm', 'onAdd', '_add' ],
- className: list
[ 'todoList', 'onComplete', '_complete' ],
scrollable: true
[ 'todoList', 'onDelete', '_delete' ],
components:
[ 'todoTools', 'onCompleteAll', '_completeAll' ]
- custom.TodoList
],
- components:
- custom.TodoTools
init : function() {
this.todos = client.stores.todos;
this._updateList();
},
_add : function(item) {
this.todos.add(item);
this._updateList();
},
_delete : function(id) {
this.todos.remove(id);
this._updateList();
},
Tuesday, January 17, 12 _complete : function(id) {
34. linkage
mulberry.toura.com
bit.ly/toura-mulberry
bit.ly/toura-mulberry-demos
slidesha.re/yiErGK
Tuesday, January 17, 12
