• Save
Mulberry: A Mobile App Development Toolkit
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Mulberry: A Mobile App Development Toolkit

  • 3,473 views
Uploaded on

 

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
3,473
On Slideshare
3,040
From Embeds
433
Number of Embeds
4

Actions

Shares
Downloads
0
Comments
0
Likes
8

Embeds 433

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

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