Presentation 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.

Speakers


PDF: slides.pdf

Slides

Building Mobile Web Application with Open Web Standards and the Dojo Toolkit

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

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

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

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

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

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

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

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

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

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

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

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?

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?

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?

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?

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?

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

Dojo Mobile

What is 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

Mobile themes

Demonstration

Carousel (Dojo 1.7)

Carousel (Dojo 1.7) Swipe to browse or change views 16

Demonstration

Demonstration bit.ly/mobshowcase

Carousel (Dojo 1.7)

Carousel (Dojo 1.7) Swipe to browse or change views 16

Opener (Dojo 1.7)

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)

SpinWheel (Dojo 1.7) Predefined SpinWheel for Date and Time 18

Visualization components (Dojo 1.7)

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

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

Building a simple app

Demo: Building a simple app

Simple Devoxx sessions 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

Mobile Page Dojo mobile application is a set of HTML pages Hello Devoxx 23

Mobile Page

Mobile Page Dojo mobile application is a set of HTML pages Hello Devoxx Apple web app metadata 23

Mobile Page

Mobile Page Dojo mobile application is a set of HTML pages Hello Devoxx Apple web app metadata Dojo library 23

Mobile Page

Mobile Page Dojo mobile application is a set of HTML pages Hello Devoxx Apple web app metadata Dojo library To run on non WebKit browsers 23

Mobile Page

Mobile Page Dojo mobile application is a set of HTML pages Hello Devoxx Apple web app metadata Dojo library Dojo parser for markup To run on non WebKit browsers 23

Mobile Page

Mobile Page Dojo mobile application is a set of HTML pages Hello Devoxx Dojo parser for markup To run on non WebKit browsers 23

Mobile widgets

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

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: 24

Navigation & Transition Effects

Navigation & Transition Effects ViewA Item 1 Item 2 Item 3 ViewB Session Session Session Slide 25

Mobile Widgets

JAX-RS REST service

JSON produced

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",
28

Mobile widgets

Mobile widgets · Welcome view with an Icon Container

29

Next Steps

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

IBM WAS Web 2.0 and Mobile Feature Pack

New Web 2.0 & Mobile Feature Pack Update

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

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

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

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

Thank You 36