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

(1)

Developing Exceptional Mobile and

Multi-Channel Applications using IBM

Web Experience Factory

(2)

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

(3)

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}

(4)

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

(5)

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)

(6)

Techniques for Creating Exceptional Mobile Experiences

Use Web Experience Factory for rapid development of web and hybrid

applications

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)

(7)

IBM Web Experience Factory key features

Supercharges Application Development

 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

(8)

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

Libraries and templates

Web Experience Factory code generation engine

Model

Builder 1 Builder 2 Etc.

(9)

It's a full eco-system:

Extensibility – ability to customize and extend as needed

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

+

Model Based Development

● Faster learning curve

(10)

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 Fast access to palette speeding up development time Fast development of WSYWIG screen

elements for tweaking of UX

Easy wizard based creation of applications, reducing development time

(11)

One tool – multiple platforms and devices

Smartphones Tablets Desktop Browsers Use one common set of tools, techniques, application code (models)... ...and generate applications for multiple client devices

Web Experience Factory

WebSphere Portal WebSphere Application Server ...deploy to multiple platforms...

(12)

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

(13)

Demo – samples of mobile web applications built with Web

Experience Factory

(14)

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

(15)

Building mobile web applications using a service architecture

Presentation (consumer) model Service (provider) model DB or other back end data

source S er vi ce I n te rf ac e o p er at io n s a n d s ch em as

Builders for mobile UI

●Data Layout ●Mobile UI theme UI customization builders Desktop Smartphone Presentation builders ●Service Consumer ●View & Form or

Data Services UI

●Data Field Settings

Provider builders

●SQL Data Services,

Web services, REST services, SAP, Domino, PeopleSoft, Siebel, etc.

●Data transforms and

schemas

●References to Java

classes/libraries

(16)

Demo – build a mobile-enabled web application

using a database or web service

(17)

Mobile Portal Theme -

Control look and feel of mobile web site experience along with site and portlet navigation

Site navigation using common mobile interactions such as carousel, drill down and scrolling tabs Look and feel

of the mobile experience

Page layout for

presentation of page portlet navigation

(18)

Agenda

applications

• _{Deep dive into mobile and multi-channel features of Web}

Experience Factory

(19)

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.

(20)

Mobile List & Detail Service Consumer wizard

• _{Builds a mobile-enabled model using View & Form builder} • _{Optionally profile-enables the mobile features}

(21)

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}

(22)

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 grouping Navigation

(23)

• _{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

(24)

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

(25)

Desktop

Smartphones

Using device type profiling for multi-channel rendering from a

single code base

Sales Orders Application

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

(26)

Agenda

applications

Experience Factory

• _{Building hybrid applications}

(27)

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”

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

(28)

Agenda

applications

Experience Factory

(29)

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!

(30)

• _{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/

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