Your SlideShare is downloading. ×
Mulberry: A Mobile App Development Toolkit
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Mulberry: A Mobile App Development Toolkit

2,999
views

Published on

Published in: Technology

0 Comments
8 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,999
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
8
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. A Mobile App Development Toolkit Rebecca Murphey • BK.js • January 2012Tuesday, January 17, 12
  • 2. Tuesday, January 17, 12
  • 3. Tuesday, January 17, 12
  • 4. Tuesday, January 17, 12
  • 5. Callback CordovaTuesday, 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, iOSTuesday, January 17, 12
  • 7. bit.ly/toura-mulberry bit.ly/toura-mulberry-demosTuesday, January 17, 12
  • 8. Storytime!Tuesday, January 17, 12
  • 9. 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:
  • 11. Tuesday, January 17, 12
  • 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, iOSTuesday, January 17, 12
  • 14. Tuesday, January 17, 12
  • 15. 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 instancesTuesday, January 17, 12
  • 17. routes manage high-level application stateTuesday, January 17, 12
  • 18. $YOURAPP/javascript/routes.js mulberry.page(/todos, { name : Todos, pageDef : todos }, true); mulberry.page(/completed, { name : Completed, pageDef : completed }); #/todos #/completedTuesday, January 17, 12
  • 19. stores persist data on the device, make that data query-able, and return model instancesTuesday, 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 capabilitiesTuesday, 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
  • 23. components receive and render data, and react to user inputTuesday, 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
  • 25. $YOURAPP/javascript/components/TodoForm/TodoForm.haml %form.component.todo-form %input{ placeholder : New todo, dojoAttachPoint : descriptionInput } %button{ dojoAttachPoint : saveButton } AddTuesday, 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
  • 27. capabilities provide data to components, and broker communications between themTuesday, 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) {
  • 31. Tuesday, January 17, 12
  • 32. mulberry serveTuesday, January 17, 12
  • 33. mulberry testTuesday, January 17, 12
  • 34. linkage mulberry.toura.com bit.ly/toura-mulberry bit.ly/toura-mulberry-demos slidesha.re/yiErGKTuesday, January 17, 12
  • 35. @touradev @rmurpheyTuesday, January 17, 12