Developing Exceptional Mobile and Multi-Channel Applications using IBM Web Experience Factory

Developing Exceptional Mobile and Multi-Channel Applications using IBM Web Experience Factory IBM Corporation 2011

Web Experience Factory formerly known as WebSphere Portlet Factory Note we are currently going through a transition/name-change from: IBM WebSphere Portlet Factory to: IBM Web Experience Factory. The complete transition will take some time to complete. Based on this you will probably see a mix of the old name and the new name used in various media and software. One of the key reasons for the name change is that WebSphere Portlet Factory currently provides much more than just creating portlets. Developers can create portlets, widgets, web applications and rich internet applications to deliver exceptional web experiences. Based on this we felt that IBM Web Experience Factory was a better descriptor for the product.

Agenda Mobile web applications and Web Experience Factory Tour of Web Experience Factory automation of mobile web applications Deep dive into mobile and multi-channel features of Web Experience Factory Building hybrid 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 feel This 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

Techniques for Creating Exceptional Mobile Experiences Mobile web applications Accessible 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 features Installed 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 applications Installed 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 Mobile web applications Factory for Accessible over the internet without installing software rapid Use device browsers to provide native-looking applications development of web and hybrid Built using standard web technologies (HTML5, CSS, JS) applications Hybrid applications: leverage web technology and native device features Installed 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 applications Installed 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

IBM Web Experience Factory key features Automates 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 model For different devices, different roles, customers/partners, etc. Runs on IBM WebSphere Portal or IBM WebSphere Application Server Supercharges Application Development

Web Experience Factory automation of design patterns Web Experience Factory features a model-based development approach using builders A builder is a tool with a wizard-like UI that automates a design pattern, generating all the necessary application code and artifacts Builders are combined in a model and edited using the Web Experience Factory graphical Designer IDE Application code Web Experience Factory code generation engine Model Builder 1 Builder 2 Etc. Libraries and templates

It's a full eco-system: Extensibility ability to customize and extend as needed Model Based Development Faster learning curve Faster development cycles + Extensive Samples/Library and education modules: Eg. Lotus Connections Strong development community 150+ Builders including: Rest APIs, Web Services, Databases, SAP, Peoplesoft, Lotus Domino, Siebel, rich user interface patterns

Let's take a quick look at the tool itself: Eclipse based IDE Easy manage ment of project based assets Builder list, allowing viewing of builders Easy wizard based creation of applications, reducing development time Fast development of WSYWIG screen elements for tweaking of UX Fast access to palette speeding up development time

One tool multiple platforms and devices Use one common set of tools, techniques, application code (models)... Web Experience Factory...and generate applications for multiple client devices Desktop Browsers Smartphones Tablets...deploy to multiple platforms... WebSphere Portal WebSphere Application Server

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 Web Experience Factory DB or other back end data source Provider builders SQL Data Services, Web services, REST services, SAP, Domino, PeopleSoft, Siebel, etc. Data transforms and schemas References to Java classes/libraries Service Interface operations and schemas Service (provider) model Presentation (consumer) model Presentation builders Service Consumer View & Form or Data Services UI Data Field Settings Builders for mobile UI Data Layout Mobile UI theme UI customization builders Desktop Smartphone

Demo build a mobile-enabled web application using a database or web service

Mobile Portal Theme - Control look and feel of mobile web site experience along with site and portlet navigation Look and feel of the mobile experience Site navigation using common mobile interactions such as carousel, drill down and scrolling tabs Page layout for presentation of page portlet navigation

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 Navigation lists with grouping Tabs

Using HTML5 geolocation 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

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) Note: These themes control the look and feel within portlets; different than the Portal mobile themes that control navigation and UI of the containing Portal and web site

Using device type profiling for multi-channel rendering from a single code base With profiling, a single model Desktop can render differently based on the requesting device type Sales Orders Builders can be enabled and Application disabled by profile, or builder Model input values can be profiled Profiling for devices is easily extensible to support dynamic update of device information Smartphones Smartphone Tablet

Sample hybrid application using device camera built with Phonegap Hybrid applications can use Web Experience Factory tools for building views and forms for the application Phonegap can enable Javascript access to device features such as camera A sample and whitepaper is available on IBM developerworks: Building hybrid mobile applications with PhoneGap and IBM WebSphere Portlet Factory 1. View list of properties and tap Create to add a property 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

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!

Key resources for developers Web Experience Factory wiki http://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 wiki http://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 developerworks http://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 IBM Customer Experience Suite, WebSphere Portal and Web Content Manager Software and Solutions http://www-01.ibm.com/software/info/customerexperience/ http://www-3.ibm.com/software/genservers/portal/

Summary 1) IBM Web Experience Factory has a very rich set of tools for the rapid development of great-looking mobile web applications 2) This mobile support is available now in 7.0.1 3) 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. 4) 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?