Mulberry: A Mobile App Development Toolkit

A Mobile App Development Toolkit Rebecca Murphey • BK.js • January 2012Tuesday, January 17, 12

Tuesday, January 17, 12

Callback CordovaTuesday, January 17, 12

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, iOSTuesday, January 17, 12

bit.ly/toura-mulberry bit.ly/toura-mulberry-demosTuesday, January 17, 12

Storytime!Tuesday, January 17, 12

$(#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:

Mulberry apps are architected feels like We can write JavaScript thatfor change.this.Tuesday, January 17, 12

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, iOSTuesday, January 17, 12

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 instancesTuesday, January 17, 12

routes manage high-level application stateTuesday, January 17, 12

$YOURAPP/javascript/routes.js mulberry.page(/todos, { name : Todos, pageDef : todos }, true); mulberry.page(/completed, { name : Completed, pageDef : completed }); #/todos #/completedTuesday, January 17, 12

stores persist data on the device, make that data query-able, and return model instancesTuesday, January 17, 12

$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

page de nitions reusable groupings of components and capabilitiesTuesday, January 17, 12

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

components receive and render data, and react to user inputTuesday, January 17, 12

$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

$YOURAPP/javascript/components/TodoForm/TodoForm.haml %form.component.todo-form %input{ placeholder : New todo, dojoAttachPoint : descriptionInput } %button{ dojoAttachPoint : saveButton } AddTuesday, January 17, 12

$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

capabilities provide data to components, and broker communications between themTuesday, January 17, 12

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) {

mulberry serveTuesday, January 17, 12

mulberry testTuesday, January 17, 12

linkage mulberry.toura.com bit.ly/toura-mulberry bit.ly/toura-mulberry-demos slidesha.re/yiErGKTuesday, January 17, 12

@touradev @rmurpheyTuesday, January 17, 12

http://coderwall.com	371
http://fnagai.ever.jp	20
http://a0.twimg.com	15
http://tweetedtimes.com	1

Mulberry: A Mobile App Development Toolkit

by Rebecca Murphey on Jan 14, 2012

Accessibility

Categories

Tags

Upload Details

Usage Rights

4 Embeds 407

Statistics

Mulberry: A Mobile App Development Toolkit — Presentation Transcript