getting started with mulberry

A Mobile App Development ToolkitRebecca Murphey & Dan Imal

Boston Front End Developer Meetup

January 2012

Tuesday, January 24, 12

Rebecca MurpheyLead JavaScript Developer@rmurphey

Dan ImalSenior User Experience Developer@mrdanimal


linkage

mulberry.toura.com

bit.ly/toura-mulberry

bit.ly/toura-mulberry-demos


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)


CallbackCordova


$ mulberry scaffold recipes


$ mulberry generate


dramatic pause.


create content with yaml, markdown & html


create functionality with javascript


create styles with css & sass


$ mulberry serve


ohai sane development tools.


$ mulberry test


$ mulberry deploy


it’s just javascript.

(ok, and some haml, yaml, & sass.)


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’, { ... }).


mulberry.page('/todos', { name : 'Todos', pageDef : 'todos'}, true);

mulberry.page('/completed', { name : 'Completed', pageDef : 'completed'});

$YOURAPP/javascript/routes.js

#/todos #/completed


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

$YOURAPP/javascript/components/TodoForm.js


%form.component.todo-form %input{ placeholder : 'New todo', dojoAttachPoint : 'descriptionInput' } %button{ dojoAttachPoint : 'saveButton' } Add

$YOURAPP/javascript/components/TodoForm/TodoForm.haml


mulberry.store('todos', { model : 'Todo',

finish : function(id) { this.invoke(id, 'finish'); },

unfinish : function(id) { this.invoke(id, 'unfinish'); }});

$YOURAPP/javascript/stores/todos.js


mulberry.model('Todo', { complete : false,

finish : function() { this.set('complete', true); },

unfinish : function() { this.set('complete', false); }});

$YOURAPP/javascript/models/Todo.js


@touradev @rmurphey @mrdanimal

mulberry.toura.com

bit.ly/toura-mulberry

bit.ly/toura-mulberry-demos


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


routes manage high-level application state


mulberry.page('/todos', { name : 'Todos', pageDef : 'todos'}, true);

mulberry.page('/completed', { name : 'Completed', pageDef : 'completed'});

$YOURAPP/javascript/routes.js

#/todos #/completed


stores persist data on the device, make that data query-able, and return model instances


mulberry.store('todos', { model : 'Todo',

finish : function(id) { this.invoke(id, 'finish'); },

unfinish : function(id) { this.invoke(id, 'unfinish'); }});

$YOURAPP/javascript/stores/todos.js


page de!nitions reusable groupings of components and capabilities



NB: You can define this with JavaScript, too, using toura.pageDef(‘todos’, { ... }).


components receive and render data, and react to user input


%form.component.todo-form %input{ placeholder : 'New todo', dojoAttachPoint : 'descriptionInput' } %button{ dojoAttachPoint : 'saveButton' } Add

$YOURAPP/javascript/components/TodoForm/TodoForm.haml


capabilities provide data to components, and broker communications between them



mulberry.capability('PageTodos', { requirements : { todoList : 'custom.TodoList', todoForm : 'custom.TodoForm', todoTools : 'custom.TodoTools' },

connects : [ [ 'todoForm', 'onAdd', '_add' ], [ 'todoList', 'onComplete', '_complete' ], [ 'todoList', 'onDelete', '_delete' ], [ 'todoTools', 'onCompleteAll', '_completeAll' ] ],

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(); },

_complete : function(id) { this.todos.finish(id); this._updateList(); },

_updateList : function() { var items = this.todos.query(function(item) { return !item.complete; });

this.todoList.set('todos', items); },

_completeAll : function() { this.todos.query(function(item) { return !item.complete; }).forEach(dojo.hitch(this, function(t) { t.finish(); this.todos.put(t); }));

this._updateList(); }});


getting started with mulberry

Technology

todolist components

preventdefaultvar description

new todo

mulberry generatetuesday

mulberry servetuesday

mulberry testtuesday

mulberry deploytuesday

model instancestuesday