Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Building Multi-Channel Data-Aware Applications


Published on

How to Build Multi-Channel Data-Aware Applications with Dojo Application Framework

Published in: Technology, Education

Building Multi-Channel Data-Aware Applications

  1. 1. © 2013 IBM CorporationBuilding Multi-Channel Data-Aware ApplicationsChristophe JolifSenior Software EngineerIBMTAD-1081
  2. 2. 22 © 2013 IBM CorporationPlease NoteIBM’s statements regarding its plans, directions, and intent are subject to changeor withdrawal without notice at IBM’s sole discretion.Information regarding potential future products is intended to outline our generalproduct direction and it should not be relied on in making a purchasing decision.The information mentioned regarding potential future products is not acommitment, promise, or legal obligation to deliver any material, code orfunctionality. Information about potential future products may not be incorporatedinto any contract. The development, release, and timing of any future features orfunctionality described for our products remains at our sole discretion.Performance is based on measurements and projections using standard IBMbenchmarks in a controlled environment. The actual throughput or performancethat any user will experience will vary depending upon many factors, includingconsiderations such as the amount of multiprogramming in the user’s job stream,the I/O configuration, the storage configuration, and the workload processed.Therefore, no assurance can be given that an individual user will achieve resultssimilar to those stated here.
  3. 3. 33 © 2013 IBM CorporationAgendaMulti-Channel, Data-Aware Concepts & ChallengesIntroduction to Dojo & Application FrameworkBuilding an Application with Dojo Mobile & Dojo App FrameworkUsing Alternate UI Frameworks like jQuery MobileConclusion
  4. 4. 44 © 2013 IBM CorporationIntroducing the concepts4
  5. 5. 55 © 2013 IBM CorporationMulti-Channel Concepts & Challenges• Definition in Software: Ability to deploy a single application to severaldevices and automatically deal with the underlying issues• Common deployment targets: phones, tablets & desktop‒ Web or standalone applications‒ could imagine more targets like TVs, Cars…• The following challenges need to be overcome for those type ofapplications:‒ The various platforms require specific skills and different programminglanguages.‒ The application layout might differ from one channel to another. The followingcases need to be taken into account: screen size form-factor portrait vs landscape screen density‒ Interactions & display might differ depending on the channel (e.g. touch ormouse-based) The code base will have differences anyway
  6. 6. 66 © 2013 IBM CorporationMulti-Channel Concepts & ChallengesFor client-side applications, JavaScript-based toolkits are a good solution:• They allow both Web & native (hybrid) so you can re-use skills & codeacross platforms (thanks to IBM Worklight, Apache Cordova)• They work practically identically on mobile & desktop devices• They integrate well with CSS3 for advanced layout and transitions thatcan be based on device characteristics thanks to media queries• They integrate well with JSON for easy application configuration, anapplication framework that deals with that here is a plus• They usually provide abstraction layers to deal with interactions (e.g.dojo/touch)
  7. 7. 77 © 2013 IBM CorporationData-Aware Concepts & Challenges• Data-Aware Applications:‒ Client-side applications bound to data coming from the server‒ Automatically refresh when new data comes in‒ Allow to update the server-based data from client input with possible validation• Data-Aware in Multi-Channel brings additional challenges:‒ Depending on the target loading data must be made smarter than in theregular case to save battery/memory/network‒ Data presentation might be different from one device to another (icons insteadof text, simple texts instead of paragraphs…)• The framework you will be using must ease connection to data byproviding a data abstraction layer (e.g. dojo/store)
  8. 8. 88 © 2013 IBM CorporationDojo & Dojo App Framework8
  9. 9. 99 © 2013 IBM CorporationIntroduction to Dojo• An open source JavaScript toolkit to build Web and Mobile applications• Provided & supported part of WebSphere Application Server or IBMWorklight for you to build your own applications• Latest release: 1.9 (RC)• UI is built client-side, the code is totally server-side (PHP, Java…) anddata-format (JSON, XML…) agnostic• Well suited for professional applications development with globalization,accessibility, data stores, object oriented programming support
  10. 10. 1010 © 2013 IBM CorporationIntroduction to DojoThree main packages:• Dojo‒ Script module (AMD) loader and build tool‒ DOM query & manipulation‒ JavaScript, Promises, XHR etc… utilities‒ Data access abstraction (dojo/store)‒ Touch/Mouse interaction abstraction (dojo/touch)• Dijit‒ UI Framework‒ Basic & Advanced Web-oriented components (button, tree…)‒ Layout (accordion, tabs…)• Dojox extensions to Dojo & Dijit‒ Dojo Mobile (dojox/mobile)‒ Dojo Application Framework (dojox/app)‒ A lot more (including advanced charting, calendaring and gauges systems)
  11. 11. 1111 © 2013 IBM CorporationIntroduction to Dojo Application Framework• dojox/app is a Dojo-based application framework that increasesmaintainability and reduces coding effort by providing:‒ A predefined JSON-based (possibly external) configuration file‒ A typical application structure‒ A notion of views, view templates, controllers and a transition system betweenthe views‒ A set of controllers that the application can leverage including layout andtransition controllers‒ A build system to bundle your application in a limited set of files to bedownloaded or installed onto the system• Even if built on top of Dojo, dojox/app is UI Toolkit agnostic, and theapplication views can be developed with:‒ Dijit‒ Dojo Mobile‒ Any other JavaScript/HTML5 toolkit like jQuery Mobile
  12. 12. 1212 © 2013 IBM Corporation12Demo - TodoApp
  13. 13. 1313 © 2013 IBM CorporationIntroduction to Dojo Application FrameworkThe JSON configuration contains:• An application ID• A set of application controllers• A set of views with:‒ Templates (View rendering)‒ Controllers (View controllers)‒ View Translation Files‒ Possibly custom parameters• A set of data stores that can beshared at application level orspecific to a viewThe configuration can leveragedojo/has module to branch basedon the targeted platform{"id": “myApp","controllers": ["dojox/app/controllers/Transition","dojox/app/controllers/History"],“stores": {“myStore”: {“type”: “myApp/MyStore”}}"views": {“list": {"template": “myApp/list.html“,“nls”: “myApp/nls/list”},“detail": {"controller" : “myApp/detail","template": "myApp/list",“nls”: “myApp/nls/detail”}}
  14. 14. 1414 © 2013 IBM CorporationBuilding a Contacts App14
  15. 15. 1515 © 2013 IBM CorporationBuilding an Application• The aim is to build a simple « contacts » application using the mainfeatures of dojox/app and allowing to:‒ Search & display your contacts‒ Edit an existing contact including delete‒ Add a new contact• The code is based on Dojo Mobile & Application Framework 1.9• We will see later how a given view (or all views) can be written in jQueryMobile instead of Dojo Mobile while still relying on the same applicationstructureTablet/Desktop LayoutPhoneLayout
  16. 16. 1616 © 2013 IBM CorporationDemo - ContactsApp16
  17. 17. 1717 © 2013 IBM CorporationBuilding an ApplicationCreate the main HTML file for your application• This file must load Dojo (< 4ko)<script type="text/javascript"src="path-to-dojo/dojo/dojo.js"data-dojo-config= "async: true " ></script>• The Dojo mobile CSS (if using Dojo Mobile):<script type="text/javascript"src="path-to-dojo/dojox/mobile/deviceTheme.js"></script>• Your application CSS file<link rel="stylesheet" href="contacts.css">• As well as your main application (AMD) module:<script type="text/javascript">require(["contactsApp/contacts "]);</script>
  18. 18. 1818 © 2013 IBM CorporationBuilding an Application• Create the configuration file, contacts.json – it can be pretty minimal atfirst, just the controllers, the stores, no views:"id": "contactsApp","dependencies": ["dojo/store/Memory",],"controllers": ["dojox/app/controllers/Load","dojox/app/controllers/Transition","dojox/app/controllers/Layout","dojox/app/controllers/History"],"stores": {"contacts": {"type": "dojo/store/Memory","has": {" cordova" : { "type" : "dcordova/ContactsStore" } },"observable": true}}
  19. 19. 1919 © 2013 IBM CorporationBuilding an Application• Add views definition, layout & possible transitions to the JSON:"views": {"list": {"controller": "contactsApp/list","template": "contactsApp/list.html","nls": "contactsApp/nls/list","has": {"!phone": {"constraint": "left"}},"detail": {"controller": "contactsApp/detail","template": "contactsApp/detail.html","nls": "contactsApp/nls/detail"}}
  20. 20. 2020 © 2013 IBM CorporationBuilding an Application• Add initial view declaration:"defaultView": "list",• Create the main module for your application, make sure:‒ it defines the configuration flags needed by the configuration file‒ loads the configuration file to instantiate the applicationdefine(["dojox/app/main", "dojo/sniff", "dojo/json","dojo/text!./contacts.json“],function(Application, has, json, config, common){has.add("phone", (window.innerWidth <= 500));Application(json.parse(config));});
  21. 21. 2121 © 2013 IBM CorporationBuilding an Application• Now the structure of the application is ready, you need to work on theviews, their templates, their controllers and translations files (not shownhere).• “list” view template:<div class="leftpanel mblBackground"><script type="dojo/require">has: "dojo/has"</script><div data-dojo-type="dojox/mobile/Heading" data-dojo-props="fixed: top">${nls.contacts}<button data-dojo-type="dojox/mobile/ToolBarButton"style="position: absolute; right: 0“data-dojo-props="target: detail, transitionOptions: { params: { edit: true } }"data-dojo-attach-point="add">${nls.add}</button></div><div data-dojo-type="dojox/mobile/EdgeToEdgeStoreList"data-dojo-mixins="dojox/mobile/FilteredListMixin“data-dojo-attach-point="contacts"data-dojo-props="store: this.loadedStores.contacts,labelProperty: displayName,itemRenderer: this.ContactListItem, placeHolder: ${},stateful: !has(phone)"></div></div>
  22. 22. 2222 © 2013 IBM CorporationBuilding an Application• “detail” view template “header” section:<div data-dojo-type="dojox/mobile/Heading" data-dojo-props="fixed: top"><button data-dojo-type="dojox/mobile/ToolBarButton"data-dojo-attach-point="backButton"data-dojo-props="arrow: left, back: true"style="position: absolute; left: 0"class="backButton"></button><button data-dojo-type="dojox/mobile/ToolBarButton"data-dojo-attach-point="cancelButton"style="position: absolute; left: 0; display: none"data-dojo-props="target: detail,transitionOptions: { params: { edit: false } }">${nls.cancel}</button>${nls.details}<button data-dojo-type="dojox/mobile/ToolBarButton"data-dojo-attach-point="editButton"style="position: absolute; right: 0"data-dojo-props="target: detail,transitionOptions: { params: {} }"></button></div>
  23. 23. 2323 © 2013 IBM CorporationBuilding an Application• “detail” view template, “form” section:<div data-dojo-type="dojox/mobile/FormLayout"><div><label for="company">${}</label><fieldset><input id="firstname" name="firstname"data-dojo-type="dojox/mobile/TextArea"data-dojo-props="readOnly: true, placeHolder: ${nls.first}"data-dojo-attach-point="firstname"><input id="lastname" name="lastname"data-dojo-type="dojox/mobile/TextArea"data-dojo-props="readOnly: true, placeHolder: ${nls.last}"data-dojo-attach-point="lastname"></fieldset></div><!-- other fields --></div>• These two sections of the “detail” view could maybe broken into twosub-views for more flexibility. In which case the header part would havetwo versions, an editable one and a view one.
  24. 24. 2424 © 2013 IBM CorporationBuilding an Application• Create the application CSS file that will provide the CSS for the views:@media screen and (min-width: 501px) {.leftpanel {width: 250px;border-right:1px solid black;z-index:100;}.backButton {display: none;}}
  25. 25. 2525 © 2013 IBM CorporationBuilding an Application• The “list” controller returns a specific ListItem subclass that deals inparticular with multi-channel (hiding the arrow on phones):define(["dojo/_base/declare", "dojo/_base/array", "dojo/aspect", "dojo/has","dojox/mobile/ListItem"], function(declare, array, has, ListItem){var ContactListItem = declare(ListItem, {target: "detail",clickable: true,// we dont get an arrow if we are on a two panes layout (tablet)noArrow: !has("phone"),postMixInProperties: function(){this.inherited(arguments);this.transitionOptions = { params: { "id" : } };}});return {ContactListItem: ContactListItem};});
  26. 26. 2626 © 2013 IBM CorporationBuilding an Application• The “detail” view controller is in charge of both adjusting the displaybased on the channel as well as binding the data from the configurationstore to the form, for it is using the loadedStores property:return {beforeActivate: function(previousView){// get the id of the displayed contact from the paramsvar id =;this._onHandler = this.editButton.on("click", lang.hitch(this, this._saveForm));// lets fill the form with the currently selected contact// if nothing selected skip that partvar view = this;if(typeof id !== "undefined"){id = id.toString();// get the contact on the storepromise = this.loadedStores.contacts.get(id);}when(promise, function(contact){this._fillForm();});},_fillForm: function(){},_saveForm: function(){// see next page}}
  27. 27. 2727 © 2013 IBM CorporationBuilding an Application_saveForm: function(){var id =, view = this;// get the contact on the storevar promise = this.loadedStores.contacts.get(id);when(promise, function(contact){// if there is no contact create oneif(!contact){view._createContact();}else{// otherwise update itview._saveContact(contact);// save the updated item into the storeview.loadedStores.contacts.put(contact);}});},_createContact: function(){var contact = { };this._saveContact(contact);this.loadedStores.contacts.add(contact);},_saveContact: function(contact){// get the data from the HTML fields and put it in "contact“}
  28. 28. 2828 © 2013 IBM CorporationBuilding an Application• Leverage the View lifecycle methods to perform actions at the rightmoment in your View controller:‒ init, beforeActivate, afterActivate,…, destroy• Each view can access the data through the loadedStores property.Stores can either be shared or specific to a view.• Each view can access its translation through the nls property. NLS caneither be shared or specific to a view, they are inherited.• Easier to build for small size (phone) first and extend to larger screens• In order to get a responsive design and the best performance, leverageCSS and CSS media queries where possible to layout/display/hideelements based on the destination channel characteristics• Define « has » flags that corresponds to your different channels• Leverage the flags both in the configuration file to configure the layout ofthe application and in the view templates & controllers to possiblychange the behavior of the application based on the channel
  29. 29. 2929 © 2013 IBM CorporationBuilding an ApplicationThanks to dojox/app flexibility you can go a lot further:• You can build the application for smarter deployment:./ --profile ../../contactsApp/build/build.profile.js--appConfigFile ../../contactsApp/contacts.json--appConfigLayer=contactsApp/contacts• Once built instead of running the application through a Web interfaceyou can leverage IBM Worklight or Apache Cordova to bundle it as anative/hybrid application. Doing that you can just switch your contactsstore by an implementation that wraps Cordova contacts API.• For advanced needs you can change the default dojox/app viewmechanism or replace/customization/add to any of the availablecontrollers.• This is particularly useful for the LayoutController. If you want a totallydifferent layout, in particular if you want it to be totally CSS-based youcan replace it by your own layout controller (see examples indojox/app/tests)
  30. 30. 3030 © 2013 IBM CorporationUsing Alternate UI Frameworks30
  31. 31. 3131 © 2013 IBM CorporationUsing Alternate UI Frameworks like jQuery Mobile• The template of a view can easily be written in any UI Framework.jQuery Mobile version of “list” view would be:<div class="leftpanel"><div data-role="page"><div data-role="header"><h1>Contacts</h1><button class="ui-btn-right">Add</button></div><div data-role="content"><ul data-role="listview" data-filter="true"><li><a>Ed Chatelain</a></li><li><a>Christophe Jolif</a></li></ul></div></div></div>
  32. 32. 3232 © 2013 IBM CorporationUsing Alternate UI Frameworks like jQuery Mobile• Obviously the controller must be adjusted accordingly to:‒ Load jQuery & jQuery Mobile (using AMD)‒ Adjust data binding to use jQuery Mobile APIsdefine.amd.jQuery = true;define(["jquery", "dojo/when"], function ($, when){$(document).bind( "mobileinit", function(){$.mobile.hashListeningEnabled = false;$.mobile.pushStateEnabled = false;});return {beforeActivate: function(){var view = this;require(["jquerym"], function (){var html = "";when(view.loadedStores.contacts.query(), function(contacts){var i;for(i = 0; i < contacts.length; i++){html += <li id="+contacts[i].id+"> + contacts[i].displayName + </li>;}$(view.list).append($(html));$(view.list).listview("refresh");});});}};});
  33. 33. 3333 © 2013 IBM CorporationUsing Alternate UI Frameworks like jQuery Mobile• Finally the application itself must be configure to use jQuery by:‒ Providing the jQuery mobile CSS‒ Configuring the AMD loader to find jQuery JavaScript libraries<link rel="stylesheet"href="" /><script type="text/javascript" src="../dojo/dojo.js"data-dojo-config="async: true,packages: [{ name: jquery, location:,main: jquery-1.9.1 },{ name: jquerym, location:,main: }]"></script>
  34. 34. 3434 © 2013 IBM CorporationConclusion• Dojo Application Framework allows you to more easily build Data-Aware Multi-Channel Applications using the UI Framework of choice• dojox/app gives you access to your data through Dojo storemechanism, you can go one step further and generalize the bindingbetween the store and your form using binding libraries. Dojo has anexperimental library for that (“dojox/mvc”) but it is not finalized yet.• The entire code of the application we’ve worked on today is availableon github, so feel free to give it a try!• You might as well be interested in:TMD-1079: Building Mobile Applications withthe Dojo Toolkit and jQueryDate/Time: Tue, 30/Apr, 05:15 PM - 06:15 PMRoom: Venetian - Palazzo L
  35. 35. 3535 © 2013 IBM CorporationApplication Infrastructure Hands-on Proctored LabsGet hands-on experience via the following scheduled lab sessions:Session # Title Schedule1628Learn to Accelerate Your Web App Development with the LibertyProfileTue, 30/Apr, 08:30 AM - 11:15 AMVenetian - Murano 3205Thu, 2/May, 02:15 PM - 04:45 PMVenetian - Murano 33031681Building EJB 3.1 and JPA 2.0 Applications with RAD andWebSphereTue, 30/Apr, 04:00 PM - 06:15 PMVenetian - Murano 3301B1729 HTML5 + CSS3 + JavaScript + Dojo Practical ExercisesTue, 30/Apr, 08:30 AM - 11:15 AMVenetian - Murano 3301BWed, 1/May, 01:00 PM - 03:15 PMVenetian - Murano 33033024 CICS Emerging TechnologiesTue, 30/Apr, 01:00 PM - 03:30 PMVenetian - Murano 32051217Diagnostic and Performance Tools for WebSphere ApplicationServerTue, 30/Apr, 01:00 PM - 03:30 PMVenetian - Murano 3301BThu, 2/May, 01:00 PM - 03:15 PMVenetian - Murano 3301B1548 Deploy a Lightweight Scalable Mobile InfrastructureWed, 1/May, 01:00 PM - 03:15 PMVenetian - Murano 3301B1626 IBM WebSphere Application Server Migration ToolsWed, 1/May, 03:45 PM - 06:00 PMVenetian - Murano 3301B1637Build and Administer Your Own Liberty Application Cluster, Newin WAS 8.5.5Wed, 1/May, 08:30 AM - 11:15 AMVenetian - Murano 3301B
  36. 36. 3636 © 2013 IBM CorporationThank You! Any question?
  37. 37. 3737 © 2013 IBM CorporationWe love your Feedback!Don’t forget to submit your Impact session and speaker feedback!•Your feedback is very important to us – we use it to improve next year’sconference•Go to the Impact 2013 SmartSite (http://impactsmartsite/com):‒ Use the session ID number to locate the session‒ Click the “Take Survey” link‒ Submit your feedback
  38. 38. 3838 © 2013 IBM Corporation
  39. 39. 3939 © 2013 IBM CorporationLegal Disclaimer• © IBM Corporation 2013. All Rights Reserved.• The information contained in this publication is provided for informational purposes only. While efforts were made to verify the completeness and accuracy of the information containedin this publication, it is provided AS IS without warranty of any kind, express or implied. In addition, this information is based on IBM’s current product plans and strategy, which aresubject to change by IBM without notice. IBM shall not be responsible for any damages arising out of the use of, or otherwise related to, this publication or any other materials. Nothingcontained in this publication is intended to, nor shall have the effect of, creating any warranties or representations from IBM or its suppliers or licensors, or altering the terms andconditions of the applicable license agreement governing the use of IBM software.• References in this presentation to IBM products, programs, or services do not imply that they will be available in all countries in which IBM operates. Product release dates and/orcapabilities referenced in this presentation may change at any time at IBM’s sole discretion based on market opportunities or other factors, and are not intended to be a commitment tofuture product or feature availability in any way. Nothing contained in these materials is intended to, nor shall have the effect of, stating or implying that any activities undertaken by youwill result in any specific sales, revenue growth or other results.• If the text contains performance statistics or references to benchmarks, insert the following language; otherwise delete:Performance is based on measurements and projections using standard IBM benchmarks in a controlled environment. The actual throughput or performance that any user willexperience will vary depending upon many factors, including considerations such as the amount of multiprogramming in the users job stream, the I/O configuration, the storageconfiguration, and the workload processed. Therefore, no assurance can be given that an individual user will achieve results similar to those stated here.• If the text includes any customer examples, please confirm we have prior written approval from such customer and insert the following language; otherwise delete:All customer examples described are presented as illustrations of how those customers have used IBM products and the results they may have achieved. Actual environmental costsand performance characteristics may vary by customer.• Please review text for proper trademark attribution of IBM products. At first use, each product name must be the full name and include appropriate trademark symbols (e.g., IBMLotus® Sametime® Unyte™). Subsequent references can drop “IBM” but should include the proper branding (e.g., Lotus Sametime Gateway, or WebSphere Application Server).Please refer to for guidance on which trademarks require the ® or ™ symbol. Do not use abbreviations for IBM product names in yourpresentation. All product names must be used as adjectives rather than nouns. Please list all of the trademarks that you use in your presentation as follows; delete any not included inyour presentation. IBM, the IBM logo, Lotus, Lotus Notes, Notes, Domino, Quickr, Sametime, WebSphere, UC2, PartnerWorld and Lotusphere are trademarks of InternationalBusiness Machines Corporation in the United States, other countries, or both. Unyte is a trademark of WebDialogs, Inc., in the United States, other countries, or both.• If you reference Adobe® in the text, please mark the first use and include the following; otherwise delete:Adobe, the Adobe logo, PostScript, and the PostScript logo are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States, and/or other countries.• If you reference Java™ in the text, please mark the first use and include the following; otherwise delete:Java and all Java-based trademarks are trademarks of Sun Microsystems, Inc. in the United States, other countries, or both.• If you reference Microsoft® and/or Windows® in the text, please mark the first use and include the following, as applicable; otherwise delete:Microsoft and Windows are trademarks of Microsoft Corporation in the United States, other countries, or both.• If you reference Intel® and/or any of the following Intel products in the text, please mark the first use and include those that you use as follows; otherwise delete:Intel, Intel Centrino, Celeron, Intel Xeon, Intel SpeedStep, Itanium, and Pentium are trademarks or registered trademarks of Intel Corporation or its subsidiaries in the United States andother countries.• If you reference UNIX® in the text, please mark the first use and include the following; otherwise delete:UNIX is a registered trademark of The Open Group in the United States and other countries.• If you reference Linux® in your presentation, please mark the first use and include the following; otherwise delete:Linux is a registered trademark of Linus Torvalds in the United States, other countries, or both. Other company, product, or service names may be trademarks or service marks ofothers.• If the text/graphics include screenshots, no actual IBM employee names may be used (even your own), if your screenshots include fictitious company names (e.g., Renovations, ZetaBank, Acme) please update and insert the following; otherwise delete: All references to [insert fictitious company name] refer to a fictitious company and are used for illustrationpurposes only.