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

32 

Full text

(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 softwareUse device browsers to provide native-looking applicationsBuilt 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 softwareUse device browsers to provide native-looking applicationsBuilt 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

Building hybrid applications

(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

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

(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 builderOptionally 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 tabsOptionally 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

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

(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 cameraA 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

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

(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/

(31)

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

(32)

Figure

Updating...

Related subjects :