Developing Exceptional Mobile Application

Developing Exceptional Mobile Applications using Web Experience Factory

Vincent Perrin | Collaboration Architect | IBM

Agenda

Mobile web applications and Web Experience Factory

High-level tour of Web Experience Factory automation of mobile web applications

Deep dive into mobile-related features of Web Experience Factory

Building hybrid and offline applications

Downloads and additional resources

Mobile application development and web technology

Organizations are faced with a need to move applications rapidly to the exploding smartphone and mobile device market

Building native applications with multiple device SDKs is very costly and time-consuming

Modern smartphone and tablet browsers have very good support for a rich user experience that can have a native look and feelThis is done with web technologies: HTML/HTML5, CSS, and JavaScript

Web Experience Factory provides a set of highly-automated tools for developing mobile web applications using those web technologies

Mobile web applicationsAccessible over the internet without installing software

Use device browsers to provide native-looking applications

Built using standard web technologies (HTML5, CSS, JS)

Hybrid applications: leverage web technology and native device featuresInstalled applications that use the device browser to display web-based UI

Provide the ability to use native device features

Leverage standard web technologies (HTML5, CSS, JS)

Native applicationsInstalled applications that use all device features such as camera, accelerometer, calendar, contacts, etc.

Support the richest user experience (e.g., gaming applications)

Built using each phone's native SDK

Techniques for Creating Exceptional Mobile Experiences

Mobile web applicationsAccessible over the internet without installing software

Use device browsers to provide native-looking applications

Built using standard web technologies (HTML5, CSS, JS)

Hybrid applications: leverage web technology and native device featuresInstalled applications that use the device browser to display web-based UI

Provide the ability to use native device features

Leverage standard web technologies (HTML5, CSS, JS)

Native applicationsInstalled applications that use all device features such as camera, accelerometer, calendar, contacts, etc.

Support the richest user experience (e.g., gaming applications)

Built using each phone's native SDK

Techniques for Creating Exceptional Mobile Experiences

Use Web Experience Factory for rapid development of web and hybrid applications

Mobile Application Comparison

Web

Hybrid

Native

Performance

Development cost

Development time

Application portability

Native functionality

Application store distribution

Extensible

Reasonable

Reasonable

Expensive

Short

Short

Long

High

High

None

No

All

All

Fast

Native speed if needed

Very Fast

No

Yes

Yes

No

Yes

Yes

Decision Tree

Easily updated or hosted?

Support multiple devices?

Highest performance?

HTML/JS/CSS UI?

Native

Distribute via app store?

Native functionality?

Web

Hybrid

App

Y

N

Y

Y

N

N

N

Y

IBM Web Experience Factory key features

tool--transparentSupercharges Application DevelopmentAutomates and simplifies software creation for rapid solution delivery

Creates highly interactive, rich user interfaces that leverage Ajax techniques and Dojo widgets

Generates native-looking mobile web applications for smartphones and other devices

Provides a rich pre-built connector library and transformation capabilities (relational DB, Web and REST services, SAP, Siebel, PeopleSoft, Lotus Domino, Microsoft Excel, etc.)

Includes Dynamic Profiling capability, to generate multiple variations from a single source modelFor different devices, different roles, customers/partners, etc.

Runs on IBM WebSphere Portal or IBM WebSphere Application Server

Web Experience Factory automation of design patterns

Web Experience Factory features a model-driven development approach using builders

Each builder has a wizard-like UI and automates a design pattern, generating all the application code and artifacts

Builders are combined in a model and edited using the Web Experience Factory graphical Designer IDE

Librariesand code

Code generation engineApplicationModel Builder 1 Builder 2 Etc.

Why is Web Experience Factory a perfect fit for mobile web application development?

All the features that make Web Experience Factory a highly automated tool for quickly building web applications can be used for smartphone and tablet applications

Mobile web applications are built using the same HTML, CSS, and JavaScript technologies that Web Experience Factory natively generates

Web Experience Factory generates mobile-optimized UI patterns and styles in a highly automated way

Web Experience Factory's Dynamic Profiling feature enables the creation of multi-channel applications from a single source model

One tool multiple platforms and devices

Smartphones

TabletsDesktopBrowsers

Use one common set of tools, techniques, application code (models)...

...and generate applications for multiple clientdevices

Web Experience Factory

WebSphere PortalWebSphereApplication Server

...deploy to multiple platforms...

Agenda






Web Experience Factory for mobile devices

Create native-looking mobile applications using standard technologies (HTML, CSS, Javascript)

Automate the creation of mobile-optimized applications, eliminating coding and speeding time to market

Support your multi-channel strategy. Create once and run on multiple devices (iPhone, Blackberry, Android, iPad, etc.)

Leverage all the Experience Factory out-of-the-box features for quickly building exceptional web experiences

Leverage HTML5 for features such as geolocation and offline support

Build hybrid applications to support additional device features such as camera

Demo samples of mobile web applications built with Web Experience Factory

So, how do I build a mobile-enabled web application with Web Experience Factory?

Use all the high-level tools of Web Experience Factory to quickly build your data access and user interface pieces

Add mobile-enablement features such as the Data Layout builder and mobile UI themes

Optionally, use device type profiling to create different variants for different device types

Use the Mobile List & Detail Service Consumer wizard to get started quickly

Building mobile web applications using a service architecture

Presentation (consumer) modelService (provider)modelDB or otherback end datasource

Service Interface operations and schemas

Builders for mobile UIData Layout

Mobile UI theme

UI customization builders

DesktopSmartphonePresentation buildersService Consumer

View & Form or
Data Services UI

Data Field Settings

Provider buildersSQL Data Services, Web services, REST services, SAP, Domino, PeopleSoft, Siebel, etc.

Data transforms and schemas

References to Java classes/libraries

Agenda






Web Experience Factory tools for building mobile web applications

Mobile List & Detail Service Consumer wizard for creating great-looking mobile and multi-channel applications in minutes

Data Layout builder for scrolling lists with configurable options such as thumbnail images and multi-line text with multiple styles

Page Navigation builder for native-looking navigation tabs and lists

Geolocation builder for access to device geolocation without coding

Mobile UI themes for smartphone-optimized look and feel, including optional slide in effect

Mobile Rich Data Definition library for automatic support of mobile UI controls such as selectable lists, numeric keypad input, phone numbers, etc.

Mobile Device Type profile set for multi-channel support

Mobile List & Detail Service Consumer wizard

Builds a mobile-enabled model using View & Form builder

Optionally profile-enables the mobile features

Data Layout builder

The Data Layout builder morphs a table view into a variety of list layouts and patterns

Supports thumbnail images and multi-line text

A variety of layouts for both mobile and desktop devices are provided

You can easily create new reusable layouts, by providing a simple HTML fragment and some CSS

You can specify different layouts for different mobile device types

Page Navigation builder

Page Navigation builder creates navigation lists or tabs

Optionally adds back navigation to target pages

Choose from provided styles or apply your own CSS

Navigation lists with groupingNavigation listsTabs

Web Experience Factory mobile UI themes

UI themes provide central control of all the look and feel of applications:CSS styles, page layouts, table and form layout rules, paging controls, and more

Easily create new themes to automate your desired look and feel

Four mobile themes are provided: mobile, mobile_gray, mobile_slide (includes a slide in effect), mobile_basic (uses minimal-sized JS and CSS)

Desktop

Smartphones

Using profiling for multi-channel rendering from a single code base

Sales OrdersApplication Model

Smartphone

Tablet

With profiling, a single model can render differently based on the requesting device type

Builders can be enabled and disabled by profile, or builder input values can be profiled

Profiling for devices is easily extensible to support dynamic update of device information

The Geolocation builder provides access to location data without coding

Location data can be accessed in client Javascript or in server actions

Apply the Geolocation builder to a page, then add an event handler for GeoLocationClient or GeoLocation event

Using HTML5 geolocation

Agenda






What is PhoneGap?

Its a tool for building mobile apps using Web technologies

HTML For LayoutJavaScript to access device functionality navigator.notification.vibrate()CSS for rich look and feelStandards Based

August 24, 2011

PhoneGap

Write once, deploy natively everywhere

Open source framework for developing cross-platform, hybrid mobile apps with web technologies

Provides JavaScript interfaces to phone's native features

Builds small native wrapper around the appUses platform's browseri.e. In Android, wraps WebView

Since native, deployable to phone or app store

Android, iOS, Blackberry, Palm, Symbian and WebOS

PhoneGap How it's done

They have written a native app for each supported device

This native app is designed to run HTML/CSS/JavascriptIts essentially a web browser+

The + is their two libraries (per device)device native code library

Javascript library

Native library provides API to Javascript library for accessing the native device API

Javascript library provides two sets of APIOne for the Native library to use. i.e. JS function for the Native library to call whenever the compass heading changes

One for user code to use. i.e. JS function to register a listener for whenever the compass heading changes

PhoneGap API

Core APIsAccelerometer (W3C)

Compass

Camera

Contacts (W3C)

File (W3C)

File Transfer

Geolocation (HTML5)

Media (audio play/record)

Network

Notification

Storage (HTML5 Web SQL & Web Storage)

Consistent support across key platforms iOS, Android, Blackberry OS5/6

http://docs.phonegap.com

Sample hybrid application using device camera built with Phonegap

Hybrid applications can use Web Experience Factory out-of-the-box tools for building views and forms

Hybrid library such as Phonegap can provide Javascript access to device features such as camera

Sample and whitepaper on IBM developerWorks: Building hybrid mobile applications with PhoneGap and IBM WebSphere Portlet Factory

2.Tap Take Picture button from Web Experience Factory form

3. Point camera and tap to take picture

4. Review thumbnail and tap Submit to upload to Web Experience Factory server application

1. View list of properties and tap Create to add a property

PhoneGap Plug-ins

What if a native feature isnt available in Core APIs?Write a plug-in

Access native plug-in code using JavaScript

Support for new sensors (NCF, ...)

List of current plug-inshttp://github.com/phonegap/phonegap-plugins

Barcode scanner (Android, iOS)

Clipboard manager (Android, iOS)

Child browser (Android, iOS)

Contact viewer (Android)

iAd (iOS)

In app purchase manager (iOS)

Keychain manager (iOS)

Native controls (iOS)

PayPal (iOS)

Sample offline iPad application using HTML 5

HTML 5 can be used to build applications that can run connected or offline

Cache manifest and local storage features of HTML5 provide the offline support

Use Web Experience Factory out-of-the-box tools for building online and offline user interface

Support for HTML 5 offline features is in sample code which is applied using Web Experience Factory builders

Fill out and review forms while offline

Post saved forms to server when reconnected

Agenda






How do I get started with Web Experience Factory mobile web application development?

Go to the Web Experience Factory wiki for the latest links to downloads and resources

The Smart Phone and Mobile Device Development page on the wiki has links to mobile samples

Install the free trial download and the samples and try it out!

Web Experience Factory wikihttp://www-10.lotus.com/ldd/pfwiki.nsf

Includes numerous samples and articles, best practices documents, and links to other resources

Learning Roadmap from the Web Experience Factory wikihttp://www-10.lotus.com/ldd/pfwiki.nsf/dx/learning-websphere-portlet-factory

Covers topics from your first installation to advanced topics such as creating builders

Web Experience Factory forums on developerWorkshttp://www-01.ibm.com/support/docview.wss?rs=3044&uid=swg27011853

These are very active and are monitored closely by the Web Experience Factory team

Go here for specific questions or if you get stuck on anything

Key resources for developers

Summary

IBM Web Experience Factory has a very rich set of tools for the rapid development of great-looking mobile web applications

This mobile support is available now in 7.0.1

The dynamic profiling feature of Experience Factory makes it easy to create applications optimized for multiple device types, from a single source model

Desktop, smartphone, tablet, etc.

IBM Web Experience Factory is WebSphere Portlet Factory, so it's a mature and stable product, with a deep set of tools and a complete developer ecosystem

Questions?

Contact

Vincent PerrinIBM Collaboration Solutions Architect for Southwest Europe

Mobile: +33 6 77 02 03 54Email: [email protected]
Twitter : @vperrin

2011 IBM Corporation

Click to edit the notes format

Click to edit the title text format

Click to edit the outline text format

Second Outline Level

Third Outline Level

Fourth Outline Level

Fifth Outline Level

Sixth Outline Level

Seventh Outline Level

Eighth Outline Level

Ninth Outline Level



Click to edit the title text format

Click to edit the outline text format

Second Outline Level

Third Outline Level

Fourth Outline Level

Fifth Outline Level

Sixth Outline Level

Seventh Outline Level

Eighth Outline Level

Ninth Outline Level



IBM Corporation 2011

IBM Exceptional Web Experience Conference 2011 - Europe

IBM Corporation 2011

IBM Exceptional Web Experience Conference 2011 - Europe

Technology

Developing Exceptional Mobile Application