developing exceptional mobile application
TRANSCRIPT
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
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
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
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
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
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
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
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
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
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
2011 IBM Corporation
Click to edit the notes format
IBM Corporation 2011
IBM Exceptional Web Experience Conference 2011 - Europe
IBM Corporation 2011
IBM Exceptional Web Experience Conference 2011 - Europe