A Mobile App                Development Toolkit                Rebecca Murphey • BK.js • January 2012Tuesday, January 17, 12
Tuesday, January 17, 12
Tuesday, 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                applicat...
bit.ly/toura-mulberry                bit.ly/toura-mulberry-demosTuesday, January 17, 12
Storytime!Tuesday, January 17, 12
Tuesday, January 17, 12
$(#btn-co-complete).live(click, function() {             jobCompleted = true;             $.mobile.changePage(#page-clocko...
Tuesday, January 17, 12
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                appl...
Tuesday, January 17, 12
Tuesday, January 17, 12
routes manage high-level application state                components receive and render data,                and react to ...
routes manage high-level application stateTuesday, January 17, 12
$YOURAPP/javascript/routes.js        mulberry.page(/todos, {          name : Todos,          pageDef : todos        }, tru...
stores persist data on the device, make that                data query-able, and return model instancesTuesday, January 17...
$YOURAPP/javascript/stores/todos.js                mulberry.store(todos, {                  model : Todo,                 ...
page de nitions reusable groupings                of components and capabilitiesTuesday, January 17, 12
todos:                            capabilities:                            - name: PageTodos                            sc...
components receive and render data,                and react to user inputTuesday, January 17, 12
$YOURAPP/javascript/components/TodoForm.js           mulberry.component(TodoForm, {             componentTemplate : dojo.c...
$YOURAPP/javascript/components/TodoForm/TodoForm.haml                 %form.component.todo-form                   %input{ ...
$YOURAPP/javascript/components/TodoForm.js           mulberry.component(TodoForm, {             componentTemplate : dojo.c...
capabilities provide data to components,                and broker communications between themTuesday, January 17, 12
mulberry.capability(PageTodos, {            todos:                                              requirements : {          ...
mulberry.capability(PageTodos, {            todos:                                              requirements : {          ...
mulberry.capability(PageTodos, {            todos:                                              requirements : {          ...
Tuesday, January 17, 12
mulberry serveTuesday, January 17, 12
mulberry testTuesday, January 17, 12
linkage                              mulberry.toura.com                             bit.ly/toura-mulberry                 ...
@touradev @rmurpheyTuesday, January 17, 12
Upcoming SlideShare
Loading in...5
×

Mulberry: A Mobile App Development Toolkit

3,139

Published on

Published in: Technology
0 Comments
8 Likes
Statistics
Notes
  • Be the first to comment

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

No notes for slide

Mulberry: A Mobile App Development Toolkit

  1. 1. A Mobile App Development Toolkit Rebecca Murphey • BK.js • January 2012Tuesday, January 17, 12
  2. 2. Tuesday, January 17, 12
  3. 3. Tuesday, January 17, 12
  4. 4. Tuesday, January 17, 12
  5. 5. Callback CordovaTuesday, January 17, 12
  6. 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. 7. bit.ly/toura-mulberry bit.ly/toura-mulberry-demosTuesday, January 17, 12
  8. 8. Storytime!Tuesday, January 17, 12
  9. 9. Tuesday, January 17, 12
  10. 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. 11. Tuesday, January 17, 12
  12. 12. Mulberry apps are architected feels like We can write JavaScript thatfor change.this.Tuesday, January 17, 12
  13. 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. 14. Tuesday, January 17, 12
  15. 15. Tuesday, January 17, 12
  16. 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. 17. routes manage high-level application stateTuesday, January 17, 12
  18. 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. 19. stores persist data on the device, make that data query-able, and return model instancesTuesday, January 17, 12
  20. 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. 21. page de nitions reusable groupings of components and capabilitiesTuesday, January 17, 12
  22. 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. 23. components receive and render data, and react to user inputTuesday, January 17, 12
  24. 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. 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. 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. 27. capabilities provide data to components, and broker communications between themTuesday, January 17, 12
  28. 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. 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. 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. 31. Tuesday, January 17, 12
  32. 32. mulberry serveTuesday, January 17, 12
  33. 33. mulberry testTuesday, January 17, 12
  34. 34. linkage mulberry.toura.com bit.ly/toura-mulberry bit.ly/toura-mulberry-demos slidesha.re/yiErGKTuesday, January 17, 12
  35. 35. @touradev @rmurpheyTuesday, January 17, 12

×