Want to dive even deeper?

Take the course Building Web Applications with Clojure by Tomek Lipski and become an expert!
Building Web Applications with Clojure
by Tomek Lipski

Check it out!
You're watching a preview of this video, click the button on the left to puchase the full version from Devoxx'09.

Building Mobile Web application with Open Web standards and the Dojo Toolkit

As sales for smart phones, tablets and other connected devices have eclipsed the sales of laptops and traditional PCs, Mobile has become the primary method by which people access networks and computing. In this session we will guide you through technologies available to developers for building Mobile Web applications in the latest Dojo Toolkit 1.7, with a particular focus on the new Mobile web capabilities. The session will then dive into more technical details and demonstrate step by step how to build a Dojo Toolkit based Web Application connecting to a Java back-end. Finally, we will see what IBM offers for building Web 2.0 and Mobile applications as part of WebSphere Application Server and Rational developer tools.

Published on
  • 484
  • 20
  • 0
  • 0
  • 0
  • Building Mobile Web Application with Open Web Standards and the Dojo Toolkit Emmanuel Tissandier Dojo Committer / Senior Technical Staff Member IBM France
  • Mobile Development Options · Native Development, through proprietary environment · Mobile Web Development: Web app running on Mobile Devices · Hybrid: Mobile Web + Native Device Capabilities + App Store + 2
  • Native Development Option · Technologies · SDK of the target device · iOS: Objective-C, Android, RIM : Java .. · Advantages · Best performances · Native look and feel · Deploys to an app store · Can leverage all device capabilities (Camera, GPS..) · Disadvantages · Must write app for each device supported · Most costly development model (dev + maintenance) · Specific skills needed for development 3
  • Mobile Web Option · Technologies · HTML / CSS / JavaScript · Advantages · Standard based (HTML5 , CSS 3) · Use same development model as Web 2.0 applications (reuse techniques and skills) · Quick and easy development iteration (browser reload) · No Need to deploy to an app store · Easy update / upgrade path · Code only one application, deploy to many phones · HTML5 becoming the common denominator on mobile devices · Near term - JavaScript frameworks evolving to access hardware specific function · Disadvantages · Slower than native or hybrid ­ app loaded over network and run in web container · Can only do what the browser supports on that platform 4
  • Hybrid Option · Technologies · HTML / CSS / JavaScript · PhoneGap · Advantages · Easy migration from web model to hybrid model (superset of web model) · Reuse of web programming skills · Quick and easy development iteration (browser reload) · Easy application update/rebranding (change web server content) · Enables access to native functionality from browser (Camera , GPS, etc..) · Wrapper goes away as browser gains capabilities (hybrid becomes web) · Revenue via purchase through app stores · Disadvantages · Slower than native (app run in web container) 5
  • Dojo Toolkit in a nutshell ·Open Source JavaScript framework · A complete framework for developing Web applications · From simple use cases to professional Web applications · Can be downloaded at http:// dojotoolkit.org · Current version is 1.6.1, 1.7 is imminent 6
  • Dojo Toolkit in a nutshell ·Nano core · Introduces the concept of classes and inheritance · Lightweight independent modules DOM Query/ Manipulation Event & Aspect Color utilities Effects and Animation JSON read/write Cookies management Feature detection HTTP IO I18n Drag/Dop Accessibility ARIA More... Ex: DOM Manipulation Ex: Class declaration 7
  • Dojo Toolkit in a nutshell ·Nano core · Introduces the concept of classes and inheritance · Lightweight independent modules DOM Query/ Manipulation Event & Aspect Color utilities Effects and Animation JSON read/write Cookies management Feature detection HTTP IO I18n Drag/Dop Accessibility ARIA More... Ex: DOM Manipulation dojo.query("div#myitem").addClass("highlighted"); dojo.query(".highlighted").forEach(func=on(node){...}); var div = dojo.create("div"); dojo.place(div, anotherdiv, "aDer"); dojo.style(div, { height: "100px", witdth: "100px" }); Ex: Class declaration 7
  • Dojo Toolkit in a nutshell ·Nano core · Introduces the concept of classes and inheritance · Lightweight independent modules DOM Query/ Manipulation Event & Aspect Color utilities Effects and Animation JSON read/write Cookies management Feature detection HTTP IO I18n Drag/Dop Accessibility ARIA More... Ex: DOM Manipulation dojo.query("div#myitem").addClass("highlighted"); dojo.query(".highlighted").forEach(func=on(node){...}); var div = dojo.create("div"); dojo.place(div, anotherdiv, "aDer"); dojo.style(div, { height: "100px", witdth: "100px" }); Ex: Class declaration dojo.declare("myclass", mysuperclass, { contructor : func=on(args){ ... }, myfunc=on : func=on() { ... } }) ; 7
  • Dojo Toolkit 1.7 in a nutshell ·Dojox is Dojo and Dijit extensions for mature and experimental packages ­ dojox.gfx: 2d graphics API working cross-browser (VML, SVG, Canvas) ­ dojox.charting: charting API based on dojox.gfx & dijit ­ dojox.data/dojox.store: Xml, Amazon S3, Atom, CSV, Google Search, Flickr implementations of data source API ­ dojox.grid: Data Grid ­ dojox.geo: Simple & OpenLayer based maps ­ dojox.gauges: Gauges ­ Dojox.mobile: library for building mobile web application 9
  • Dojo Toolkit in a nutshell ·Rich Web Apps with Dijit · A set of predefined widgets from basic buttons, checkboxes etc.. to advanced controls like date chooser and container layouts (border, tab...) · Various themes and the ability to create new ones in CSS · Deals with accessibility issues (keyboard, screenreader...) 8
  • Dojo Toolkit 1.7 in a nutshell ·Dojox is Dojo and Dijit extensions for mature and experimental packages ­ dojox.gfx: 2d graphics API working cross-browser (VML, SVG, Canvas) ­ dojox.charting: charting API based on dojox.gfx & dijit ­ dojox.data/dojox.store: Xml, Amazon S3, Atom, CSV, Google Search, Flickr implementations of data source API ­ dojox.grid: Data Grid ­ dojox.geo: Simple & OpenLayer based maps ­ dojox.gauges: Gauges ­ Dojox.mobile: library for building mobile web application 9
  • Dojo Toolkit 1.7, what's new? · AMD format & loader for more concise & faster application loading: ­ smaller & relocatable modules ­ asynchronous script loading ­ common syntax for all JavaScript libraries 10
  • Dojo Toolkit 1.7, what's new? · AMD format & loader for more concise & faster application loading: ­ smaller & relocatable modules ­ asynchronous script loading ­ common syntax for all JavaScript libraries dojo.provide("mypackage.myclass"); dojo.declare("mypackage.myclass", null, { ... }); dojo.require("mypackage.myclass"); var instance = new mypackage.myclass(); 10
  • Dojo Toolkit 1.7, what's new? · AMD format & loader for more concise & faster application loading: ­ smaller & relocatable modules ­ asynchronous script loading ­ common syntax for all JavaScript libraries dojo.provide("mypackage.myclass"); dojo.declare("mypackage.myclass", null, { ... }); dojo.require("mypackage.myclass"); var instance = new mypackage.myclass(); 10
  • Dojo Toolkit 1.7, what's new? · AMD format & loader for more concise & faster application loading: ­ smaller & relocatable modules ­ asynchronous script loading ­ common syntax for all JavaScript libraries dojo.provide("mypackage.myclass"); dojo.declare("mypackage.myclass", null, { ... }); dojo.require("mypackage.myclass"); var instance = new mypackage.myclass(); define(["dojo/_base/declare"], func=on(declare){ return declare(null, { ... }); }); require(["mypackage/myclass"], func=on(myclass){ var instance = new myclass(); }); 10
  • Dojo Toolkit 1.7, what's new? · Improved Dojo Mobile · Various new APIs: ­"has" API for feature detection ex: has("touch") ­dojo/on to replace dojo.connect ­alternate selector engines for dojo.query ­and more 11
  • Dojo Mobile
  • What is Dojo Mobile? · A Dojo-based widget set for creating mobile web applications ­ Available since Dojo-1.5 in open source ­ Lots of new widgets in upcoming Dojo1.7 · Provides lightweight UI widgets for mobile scenarios ­ Native device access or coding is not in the scope of Dojo Mobile · Allows developing device-specific or device-neutral look & feel applications ­ iPhone, Android, Blackberry or create your own custom themes · Server technology agnostic · Reuse application code across devices with a simple stylesheet change! 13
  • Mobile themes
  • Carousel (Dojo 1.7) Swipe to browse or change views 16
  • Demonstration bit.ly/mobshowcase
  • Carousel (Dojo 1.7) Swipe to browse or change views 16
  • Opener (Dojo 1.7) 1 Opens secondary views/dialogs in different ways based on screen dimensions Touching date input, slides in dialog view with calendar 2 Phone Touching date input opens secondary view with calendar in tooltip dialog Tablet 17
  • SpinWheel (Dojo 1.7) Predefined SpinWheel for Date and Time 18
  • Visualization components (Dojo 1.7) Charting · · · Web and Mobile Dozens of chart types Touch support for zoom, pan and chart indicator OpenLayers Maps · · · Uses OpenLayers Maps data source Overlay graphics on top of map Touch support Gauges · · · Web and Mobile High quality gauge styles Touch support Geo-Charting · · · Vector map that connects to Dojo data store for coloring map elements Touch support Legend 19
  • Leveraging HTML5 Dojo Mobile leverages the capabilities of HTML5/CSS3 · Button gradients .mblButton { -webkit-border-radius: 5px; background-image: -webkit-gradient(linear, left top, left bottom, from (#fdfdfd), to(#cecece), color-stop(0.5, #f8f8f8), color-stop(0.5, #eeeeee)); } · Switch Animation mblSwitchAnimation { -webkit-transition-property: left; -webkit-transition-duration: .3s; } .mblSwitchOn { left: 0px; } .mblSwitchOff { · Compatibility mode for non Web-kit browser left: -53px; 20
  • Building a simple app
  • Simple Devoxx sessions app · Sample application to display Devoxx sessions on a mobile ­Learn the basics of Dojo mobile ­Java REST service and Dojo mobile 22
  • Mobile Page Dojo mobile application is a set of HTML pages <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Hello Devoxx</title> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> <meta name="apple-mobile-web-app-capable" content="yes"> <link rel="apple-touch-icon" href="images/AppIcon.png"/> <script type="text/javascript" src="dojo/dojo.js" data-dojo-config="parseOnLoad: 1" ></script> <script type="text/javascript"> dojo.requireIf(!dojo.isWebKit, "dojox.mobile.compat"); dojo.require("dojox.mobile.parser"); dojo.require("dojox.mobile.deviceTheme"); </script> 23
  • Mobile Page Dojo mobile application is a set of HTML pages <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Hello Devoxx</title> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> <meta name="apple-mobile-web-app-capable" content="yes"> <link rel="apple-touch-icon" href="images/AppIcon.png"/> <script type="text/javascript" src="dojo/dojo.js" data-dojo-config="parseOnLoad: 1" ></script> <script type="text/javascript"> dojo.requireIf(!dojo.isWebKit, "dojox.mobile.compat"); dojo.require("dojox.mobile.parser"); dojo.require("dojox.mobile.deviceTheme"); </script> Apple web app metadata 23
  • Mobile Page Dojo mobile application is a set of HTML pages <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Hello Devoxx</title> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> <meta name="apple-mobile-web-app-capable" content="yes"> <link rel="apple-touch-icon" href="images/AppIcon.png"/> <script type="text/javascript" src="dojo/dojo.js" data-dojo-config="parseOnLoad: 1" ></script> <script type="text/javascript"> dojo.requireIf(!dojo.isWebKit, "dojox.mobile.compat"); dojo.require("dojox.mobile.parser"); dojo.require("dojox.mobile.deviceTheme"); </script> Apple web app metadata Dojo library 23
  • Mobile Page Dojo mobile application is a set of HTML pages <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Hello Devoxx</title> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> <meta name="apple-mobile-web-app-capable" content="yes"> <link rel="apple-touch-icon" href="images/AppIcon.png"/> <script type="text/javascript" src="dojo/dojo.js" data-dojo-config="parseOnLoad: 1" ></script> <script type="text/javascript"> dojo.requireIf(!dojo.isWebKit, "dojox.mobile.compat"); dojo.require("dojox.mobile.parser"); dojo.require("dojox.mobile.deviceTheme"); </script> Apple web app metadata Dojo library To run on non WebKit browsers 23
  • Mobile Page Dojo mobile application is a set of HTML pages <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Hello Devoxx</title> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> <meta name="apple-mobile-web-app-capable" content="yes"> <link rel="apple-touch-icon" href="images/AppIcon.png"/> <script type="text/javascript" src="dojo/dojo.js" data-dojo-config="parseOnLoad: 1" ></script> <script type="text/javascript"> dojo.requireIf(!dojo.isWebKit, "dojox.mobile.compat"); dojo.require("dojox.mobile.parser"); dojo.require("dojox.mobile.deviceTheme"); </script> Apple web app metadata Dojo library Dojo parser for markup To run on non WebKit browsers 23
  • Mobile Page Dojo mobile application is a set of HTML pages <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Hello Devoxx</title> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> <meta name="apple-mobile-web-app-capable" content="yes"> <link rel="apple-touch-icon" href="images/AppIcon.png"/> <script type="text/javascript" src="dojo/dojo.js" data-dojo-config="parseOnLoad: 1" ></script> <script type="text/javascript"> dojo.requireIf(!dojo.isWebKit, "dojox.mobile.compat"); Apple web app metadata Dojo library Automatic CSS / dojo.require("dojox.mobile.parser"); theme detection dojo.require("dojox.mobile.deviceTheme"); </script> Dojo parser for markup To run on non WebKit browsers 23
  • Mobile widgets · Widgets can either be instantiated and configured in JavaScript: var b = new dojox.mobile.View({ selected:true }); b.placeAt(dojo.body()); 24
  • Mobile widgets · Widgets can either be instantiated and configured in JavaScript: var b = new dojox.mobile.View({ selected:true }); b.placeAt(dojo.body()); · Or in HTML markup: <body> <input data-dojo-type="dojox.mobile.View" data-dojo-props="selected:true"> </input> </body> 24
  • Navigation & Transition Effects <body> <View id=ViewA> <Heading>ViewA</Heading> <IconContainer> <IconItem moveTo=ViewB>Item 1</IconItem> <IconItem moveTo=ViewB>Item 2</IconItem> <IconItem moveTo=ViewB>Item 3</IconItem> <View id=ViewB> <Heading moveTo="ViewA">ViewB</Heading> <RoundRectList> <ListItem>Session</ListItem> <ListItem>Session</ListItem> <ListItem>Session</ListItem> Slide 25
  • JSON produced · Resulting JSON, adapted to Dojo ItemFileReadStore Resulting JSON format Dojo ItemFileReadStore calling the REST service { "label":"title, "items":[{"title":"Moving to the Client-JavaFx HTML5", "presenter":"Patrick Chanezon", "date":"11\/17\/2011"}, {"title":"JavaFX under the Hood", "presenter":"Richard Bair", "date":"11\/17\/2011"}, {"title":"Animation Bringing your User Interface to Life", "presenter":"Michael Heinrichs", <div data-dojo-type="dojo.data.ItemFileReadStore" jsId="sessionsStore" url="./rest/sessions"> </div> 28
  • Mobile widgets · Welcome view with an Icon Container <div data-dojo-type="dojox.mobile.View" id="welcome" data-dojo-props="selected:true"> <h1 data-dojo-type="dojox.mobile.Heading" data-dojo-props="label:'Welcome Devoxx'"></h1> <div data-dojo-type="dojox.mobile.IconContainer"> <div data-dojo-type="dojox.mobile.IconItem" data-dojo-props="icon:'icon1.png', label:'Schedule', transition:'slide`; moveTo:'sessions'"</div> <div data-dojo-type="dojox.mobile.IconItem" data-dojo-props="icon:'icon2.png', label:'Speakers', transition:'slide`, moveTo:'speakers`"></div> <div data-dojo-type="dojox.mobile.IconItem" data-dojo-props="icon:'icon3.png', label:'Map', transition:'slide`, moveTo='map`"></div> </div> </div> <div data-dojo-type="dojo.data.ItemFileReadStore" jsId="sessionsStore" url="./rest/sessions"></div> <div data-dojo-type="dojox.mobile.View" id="sessions"> 29
  • Next Steps · Use Dojo build tools to compile the app ­Load a simple compressed .js file. · Use HTML5 app cache ­Cache the application resource, the javascript code 30
  • IBM WAS Web 2.0 and Mobile Feature Pack
  • New Web 2.0 & Mobile Feature Pack Update Web 2.0 to SOA connectivity For enabling connectivity from Ajax clients to SOA services and other JEE assets. Extends enterprise data to customers and partners through Web feeds. Includes connecting web clients to real-time updated data like stock quotes Application Services Building Blocks Common service implementations, patterns and samples for connecting web application UI's to backend data, such as uploading files and importing and exporting graphics. WebSphere Application Server External Web Services Connectivity Event-Driven Data IBM $125.25 +$2.50... MSFT $43.75 -$1.50 ... Development Tools Web2.0 feature pack works In conjunction with Rational Application Developer 8 to provide enterprisequality desktop and mobile web application development and test and optimization tools, including visual development. RIA & Mobile development toolkit Best-in-class RIA & Mobile Web development toolkit for WebSphere Application Server based on Dojo, an Open Source JavaScript runtime. Build desktop and mobile web applications using a consistent programming model across multiple platforms and operating systems. Includes advanced data visualization capabilities and frameworks. 32
  • Mobile support in IBM Rational · Rational Application Developer ­Support for HTML5, CSS, Dojo Mobile · Rational Quality Manager ­Integration with DeviceAnywhere · Rational AppScan ­HTML5 & JavaScript Security Analyzer 33
  • Rational Application Developer WYSIWYG editor showing target device form factor Dojo widgets, including mobile, automatically detected and shown in the palette Simulator enables device-testing inside browsers Properties view to configure the focused widget
  • References · JSON: http://www.json.org · Dojo Toolkit (http://dojotoolkit.org) · Rational Application Developer Trial http://www.ibm.com/ developerworks/downloads/r/rad/ · Ajax Technical library http://www.ibm.com/developerworks/ views/web/libraryview.jsp?search_by=Mastering+Ajax · The WebSphere Application Server Feature Pack for Web 2.0 service page: http://www-01.ibm.com/software/webservers/ appserv/was/featurepacks/web20/ · Maqetta: http://www.maqetta.org 35 35
  • Thank You 36

Comments

Be the first one to add a comment

No Data Found