Más contenido relacionado Similar a Getting Started with Mulberry (20) Más de Rebecca Murphey (13) 1. A Mobile App
Development Toolkit
Rebecca Murphey & Dan Imal
Boston Front End Developer Meetup
January 2012
Tuesday, January 24, 12
2. Rebecca Murphey
Lead JavaScript Developer
@rmurphey
Dan Imal
Senior User Experience Developer
@mrdanimal
Tuesday, January 24, 12
4. linkage
mulberry.toura.com
bit.ly/toura-mulberry
bit.ly/toura-mulberry-demos
Tuesday, January 24, 12
7. command line tools
scaffold your app and
generate skeleton
les for the pieces
you’ll need
application code
harness a powerful
CSS and JavaScript
framework to develop
rich interfaces
app builder
generates production-
ready builds for
Android, iOS (mobile
web is on the way)
Tuesday, January 24, 12
8. Callback
Cordova
Tuesday, January 24, 12
26. 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 24, 12
27. $YOURAPP/javascript/routes.js
mulberry.page('/todos', {
name : 'Todos',
pageDef : 'todos'
}, true);
mulberry.page('/completed', {
name : 'Completed',
pageDef : 'completed'
});
#/todos #/completed
Tuesday, January 24, 12
28. $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 24, 12
30. $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 24, 12
31. $YOURAPP/javascript/models/Todo.js
mulberry.model('Todo', {
complete : false,
finish : function() {
this.set('complete', true);
},
unfinish : function() {
this.set('complete', false);
}
});
Tuesday, January 24, 12
34. 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 24, 12
36. $YOURAPP/javascript/routes.js
mulberry.page('/todos', {
name : 'Todos',
pageDef : 'todos'
}, true);
mulberry.page('/completed', {
name : 'Completed',
pageDef : 'completed'
});
#/todos #/completed
Tuesday, January 24, 12
37. stores persist data on the device, make that
data query-able, and return model instances
Tuesday, January 24, 12
38. $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 24, 12
39. page de nitions reusable groupings
of components and capabilities
Tuesday, January 24, 12
40. 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 24, 12
42. $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 24, 12
44. $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 24, 12
46. 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 24, 12 _complete : function(id) {
47. 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 24, 12 _complete : function(id) {
48. 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 24, 12 _complete : function(id) {
