IBM Web Experience Factory · – IBM Web Content Management (WCM) authoring and data access – Custom builder samples, for UI and for automating cross-cutting concerns • Additional

| © 2012 IBM Corporation

©2012 IBM Corporation

IB M Web E xperienc e F ac tory

What 's new w i t h IBM Web Experience Factory V8.0

2 | © 2012 IBM Corporation© 2012 IBM Corporation

Sim ple m odel based developm ent for

c reat ing st andards based w eb

appl ic at ions/por t le t s

Ex t ensive out o f t he box c apabi l i t ies s im pl i fy and

speed developm ent

Mul t i -c hannel s i t es and appl ic at ions

A m odel based IDE developm ent t oo l making it easier and fast er than

traditional coding to develop ex c ept ional w eb ex per ienc es

Supported by an ex t ensive set o f sam ples and v ib rant developer

c om m uni t y

Includes 150+ out -o f -t he-box bu i lders that accelerate development time.

Including standards based backend (eg REST and WebServices, SQL...),

proprietary backends (eg SAP, Oracle CRM, Peoplesoft), Business logic and Web 2.0 front-end for building multi-

channel solutions..

Dynamic profiling allowing you to w ri t e onc e deploy on m any platforms

with minimal effort

What is Web Ex per ienc e Fac t ory?


Building multi-channel web experiences:

ONE efficient way to deploy to m ul t ip le p la t form s to be accessed by m ul t ip le dev ic es

Levering Web Experience Factory's dynamic Profiling and out of the box builders for capturing, transforming and presenting information, you can easily create t rue m ul t i -c hannel appl ic at ions that run on desktop

browsers, smartphone and tablets from a single source.

Dat a & Serv ic es..

.


New Mobile Features

New User experience with Dojo Mobile tooling for building engaging mobile experiences

Slide-in/out effects, scrollable panes, new mobile widgets

- Client Side Architecture reducing reliance on bandwidth and improving responsiveness of mobile applications

Models can optionally use a client-side web architecture based on HTML/JS/Dojo+REST

Client-side mode can provide performance and scalability benefits:

Reduced server processing and memory use

Improved caching on client

Reduced size of downloaded data – JSON data is downloaded instead of final HTML

New client-side wizards and builders generate all the supporting code


WEF 8.0 c l ient -s ide m obi le w eb appl ic at ion arc h i t ec t ure

Note: All the profiling features of WEF are supported – any number of variations can be generated from the same source model.

WEF server generates HTML markup templates (without data) and JS; all data is retrieved from client using REST/JSON services.


New c l ient -s ide m obi le w eb arc h i t ec t urew izards and V iew & Form bu i lder

Automatically generates view, input, details, and update screens from a Data Service

Use the same model-based automation approach you are familiar with to build client-side mobile web applications

New client-side bui lders

New client-sidew izards

7

Client-side applications with Dojo Mobile

• In client-side mode, you can enable Dojo Mobile support by selecting a Dojo Mobile UI theme and Rich Data Definition library

• Dojo Mobile provides a number of nice widgets and interactive elements to give a native look and feel– Slide-in/out effects, scrollable panes, new mobile widgets

Client Side Arch

itectu

re

8

Things to be aware of with client-side support• Client-side mode has a subset of builders available• At this point of time, client-side mode is tested and supported just for mobile

devices• Server-side provides complete functionality, for mobile or desktop applications

– Server-side mode is the primary recommendation for most customers

• Each model is either client-side or server-side (no mixed mode within a model)

Client Side Arch

itectu

re


Integration, Content & Developer productivity enhancements:

Enhancements to generated UI New out-of-the-box themes: generate a clean, modern look

easier to fit with customized Portal Themes and Skins

Enhanced support for custom HTML designs/layouts

— Integration of custom designs and layouts— Great-looking data displays using Data Layout builder

New CMIS builder for building applications that access CMIS sources from Filenet 5+ and Sharepoint 2010

For accessing and integrating Microsoft Sharepoint and Filenet content repositories into applications and sites

Cust om Design

Appl ic at ionCode

Ex c ept iona lUser

ex per ienc e


Super e f f ic ient building of ex c ept ional user ex per ienc es just got bet t er ...

Rapid data-driven development: from Data to Multi Channel applications in minutes

Easi ly c ust om ize designs Integration of custom designs and layouts Great-looking data displays using Data Layout builder

Centralized Control:

— Automatically control all the UI and behavior of data fields (formatting, validation, UI type, lookups, visibility...)

— Control and customize all your styles and layout patterns in one place

Enhanced!

Enhanced!

ONLY avai lab le w i t h MODEL

BASED DESIGN


UI theme enhancements: new out-of-the-box themes

New out-of-the-box themes: generate a clean, modern look easier to fit with customized Portal Themes

and Skins

Old out-of-the-box themes:

12

UI theme enhancements (continued): new tools for controlling CSS styles• Easily create a single CSS file containing all the styles for a model, then edit

styles as desired

Before: had to manually manage and merge 4 or 5 CSS style sheets

Now: managed via a single file making is easier to maintain and understand code.

13

UI theme enhancements (continued): Data Layout builder support for theme-controlled styling• UI themes can now control the CSS styling for Data Layout Templates• Result: easier (less effort) and more flexibility to manage look and feel of

applications

© 2011 IBM Corporation14

Easier to build applications Designed by Des igners

Input : Designed by designer using tools like Adobe® DreamweaverOngoing design updates/refreshes

Add: Applications built by developers using Web Experience Factory:

Mapping of services to UI

Business logic Screen flow Rich field behavior

The resul t : beautifully designed multichannel business appl ic at ions that are easy to use creating ex c ept ional w eb ex per ienc es

+ =

Note: Iterative design updates are pulled in and new code is generated without any manual developer work


IBM Web Experience V8 Technical Sales Training 2012

Enhanc em ent s for us ing c ust om UI des igns f rom ex t ernal t oo ls

Complete Page Export makes it easier for designers to customize all the HTML for a page

Enhancements for Imported Page builder make it easy to iteratively and automatically update custom HTML from design team

16 | © 2012 IBM Corporation

Working with customized UI designs from external tool1) Use the right-click command to Export HTML for Customization

– Select “Complete Page” (to customize the whole page including the location of buttons and other elements) or “Data Layout” (to customize the data area only)

– This will create an HTML file with named elements for all your data fields and controls such as buttons, and it will add a builder for importing the custom HTML file

2) Use your favorite HTML design tool to edit the layout to achieve the exact design you want

3) Whenever the model is generated (at design time or runtime), the latest HTML design will be incorporated with code generated from the model


View and control profiling from Design view in IDE

Makes it easy to see and change the selected profile right from design view, without going to Applied Profiles view

Reduced profiles selection list making it easier to select profiles


New Cont ent Managem ent In t eroperab i l i t y Serv ic es (CMIS) Bui lder

Easily access enterprise content in context of business applications made available as part of multi-channel web experiences

New CMIS builder for building applications that access CMIS sources from Filenet 5+ and Sharepoint 2010

More details: http://www-10.lotus.com/ldd/pfwiki.nsf/dx/IBM_Web_Experience_Factory_8.0_Beta_One_and_the_CMIS_builder


New Web Experience Factory developer community features

New IBM Web Experience Factory Community, including blog from the development team

New feeds in Designer let you easily see new and updated content on wiki, forum, and blog

20

New developer community features, continued

• Many new samples and “how to” articles on the Web Experience Factory wiki, including new samples for:– Lotus Connections integration, including mobile UI– “Responsive web design” techniques– IBM Web Content Management (WCM) authoring and data access– Custom builder samples, for UI and for automating cross-cutting concerns

• Additional samples are getting added all the time – keep an eye out for these

Portal 8 and platform updatesSupport for Portal 8 and updates for other platforms

• Support for Portal 8 deployment and for new Portal theme– Note: Portal 6.1.5 and Portal 7.0 are also supported

• Updates for RAD and Eclipse IDEs• Embedded ISA (support assistant)• WAS CE update


Sum m ary: The easiest w ay t o develop m ul t i -c hannel Soc ia l Bus iness so lu t ions Web Ex per ienc e Fac t ory 8.0

Superc harged m obi le c apabi l i t ies us ing a c l ient -s ide arc hi t ec t ure

Build superior mobile applications with Dojo Mobile and new UX widgets

Improve performance – reducing traffic and amount of data between browser-based “client” and server.

Enhanc em ent s t o generat ed UI

New out-of-the-box themes

Enhanced support for custom HTML designs/layouts New developer community features

New community, with feed in Designer IDE

New samples and best practices documents Suppor t o f t he la t est IBM sof t w are

including Portal 8, RAD & WAS

deve lopm ents im pl i f ied


Summary

IBM provides an extensive set of tools for creating exceptional multi-channel web experiences:

Strong for developing multi-channel web experiences Continued investment to help improve developer

productivity and support of latest development standards including HTML5 and CSS3

Many new features to help improve creating of exceptional Web Experiences eg. Dojo 1.7 support and support of client-side architectures.

Addi t ional In fo :

Web Ex per ienc e Fac t ory c om m uni t y : http://ibm.co/factorycommunityWeb Ex per ienc e Fac t ory Wik i : http://www-10.lotus.com/ldd/pfwiki.nsf

http://ibm.co/factorycommunity


Backup

Firstly, IBM Web Experience 7.0.1 was already an incredibly powerful, easy to use development tool:

Our customers have had significant benefits...

■ A model based IDE development tool making it easier and faster than traditional coding to develop exceptional web experiences

■ Includes 150+ pre-built builders the accelerate development time. Examples include:– Standard based Back-end connectors including Rest APIs, Web Services, Databases– Proprietary back-end connectors to systems like SAP, Peoplesoft and Siebel– Pre-built business logic builders for transformation and manipulation of content– Pre-built Front-end builders for building sophisticated mult-channel applications like Ajax and

Dojo Widgets– common user interface patterns for lists, tables, forms, etc.

■ Dynamic profiling allowing you to write once deploy on many platforms with minimal effort

Fast Simple development Write once deploy many

Examples of customers/partners who have benefitted:• Some examples from a partner:

– used to take 9 months to develop a solution, now a few days to develop a similar solution

– Web Experience Factory for building a number of apps for large financial services org in months vs 2 -3 yrs with traditional tool

– Created analytics tool that is multichannel, running on mobile devices for large supermarket chain. 4 weeks dev

• Large insurance organization: – created several applications with no portlet level API skills– Rapidly consume web services and relational data using

integration builders, without writing to an api such as the JDBC.

• Large automotive manufacturer: – created multi channel applications in weeks, optimized for

smartphone and tablets.– Minimal coding required – Handover to customer team, with minimal coding skills

required, took beta to production easily• Large Bank:

– Needed to customization integration between WebSphere Portal and IBM Connections using IBM Connections 3.0.1 Portlets Developer Pack

And we have just made it better?....

Documents

IBM Web Experience Factory · – IBM Web Content Management (WCM) authoring and data access – Custom builder samples, for UI and for automating cross-cutting concerns • Additional