what's new in ibm web experience factory

© IBM Corporation 2011

What's New In IBM Web Experience Factory (formerly WebSphere Portlet Factory)


Web Experience FactoryBusiness Value

Fast,Simple Development of

Enterprise Multi-Channel Applications


The information on the new product is intended to outline our general product direction and it should not be relied on in making a purchasing decision. The information on the new product is for informational purposes only and may not be incorporated into any contract. The information on the new product is not a commitment, promise, or legal obligation to deliver any material, code or functionality. The development, release, and timing of any features or functionality described for our products remains at our sole discretion.

Legal Disclaimer


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.

• On 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

IBM Project Northstar and direction for IBM Web Experience Factory Multichannel/Mobile development Content integration Improving the development experience Improved end-user experiences Summary

5

6 © IBM Corporation 2011

Social

Web/ContentPlatform

Mobile

RichMedia

Search

UnifiedCommunications

Analytics

Commerce

People are at the center of an exceptional experience; Capabilities are employed as necessary to help achieve experiences that meet/exceed the expectations of the intended user(s)

Vision about the “art of the possible” for engaging Customers on the web

Multi-year IBM strategy to deliver the capabilities for our customer to excel at customer-facing experiences

Guide for IBM investment focus both organic and inorganic investments

Nimble to continually absorb and simplify emerging advances to help customers differentiate sites


● Deliver exceptional online experiences without having to stitch together multiple, disparate products from different vendors

● Create highly personalized customer interactions by analyzing and then adapting to the preferences, behaviours, location, products owned, device, and sentiments of each visitor

● Support conversations with and between users through online communities

● Empower business owners to manage the creation and delivery of content, rich media, campaigns, and surveys delivered through multiple channels

● Deliver rich and engaging experiences without sacrificing flexibility, scalability, or security

● Compose seamless Web experiences by connecting into the necessary back-end applications, commerce solutions, social media sites, and cloud-based services

IBM Customer Experience SuiteExceptional Web Experiences New


A couple of key things customers are looking for:

It's not just “mobile”, it's full multi-channel, access anywhere on any device

It's about the right information, in the

right context at the right time on the right platform


Delights your customers

Creates sustainable differentiation

Adapts to new opportunities

Leverages investments

Delivers in every situation

Key Elements of an Exceptional Web Experience that Drive Results


What is Web Experience Factory? • 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


IBM Web Experience Factory

is a key tool

to develop

Exceptional Web Experiences


It's not just a product, 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 7 Siebel

+

Model Based Development● Faster learning curve● Faster development

cycles


Snapshot: So what's getting better???

Many new samples, including, Offline iPad, Multi-channel/Mobile, CMIS (Sharepoint & Filenet), and WCM integration.

●IBM Web Experience Factory Next public beta

●Additional push to leverage social media to extend the community. For example, new youtube channel: http://www.youtube.com/factorygeeks as well as continues investment in Wiki as a community focused information/collaboration source.

13 new

builders

New capabilities out of the box●New builders for mobile/multichannel development●New builders for content integration (CMIS/Sharepoint/Filenet/ IBM Web Content Manager)●General usability enhancements

+

Helping to improve developer productivity, including: Developer UX improvements, New wizards...

6+ new

features

New IBM products being released with extendable code based on Web Experience Factory. Examples include:●IBM Connections portlets and developer kit●Unified Task Portlet●IBM Industry Toolboxes for WebSphere Portal). ●Access to CMIS standards based data sources

10+ New samples

Use social media to learn,

find experts and information

Source code provided

http://www.youtube.com/factorygeeks

http://www.youtube.com/factorygeeks


Agenda


15


Mobile Is Happening Now and Happening Fast

Source : : Morgan Stanley, Garnter, International Telecommunication Union, eMarketer; Internet Statistics

● The explosive growth of mobile computing will cause more internet traffic to be driven by mobile user than desktop users with in the next 5 years● Shipments of smartphones will out grow desktops within 2 years

● Over 85% of new handsets will have mobile Web access by 2011

● There will be ~4.6 billion mobile subscriptions by the end of 2010(that's almost 80% of the world population)

● Almost one in five global mobile subscribers have access to fast mobile Internet (3G or better) services


Techniques for Creating Exceptional Mobile Experiences

Mobile-optimized 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: leverage web technology and native 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● Make use of all device features such as camera,

accelerometer, calendar, contacts, etc.● Supports the richest of user experiences (e.g.,

gaming applications)● Built using each phone's native SDK

IBM Web Experience

Factoryrelevant

IBM Web Experience

Factoryrelevant


Mobile application development challenge and opportunity

• 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, CSS, and JavaScript

• Web Experience Factory's automated tools for web application development are uniquely suited for mobile application development


IBM Web Experience

Factory

Platforms

Enter... IBM Web Experience Factory:One tool – multiple platforms, multiple devices

Tablets

Smartphones

Lotus Mashups

DesktopBrowsers

WebSphere Portal

WebSphereApplication Server

ONE efficient way to deploy to multiple platforms to be accessed by multiple devices


Web Experience Factory Next beta mobile automation components

• 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

• Mobile 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 for mobile UI controls such as selectable lists, numeric keypad input, phone numbers, etc.

• Mobile Device Type profile set for multi-channel support

The information on the new product is intended to outline our general product direction and it should not be relied on in making a purchasing decision. The information on the new product is for informational purposes only and may not be incorporated into any contract. The information on the new product is not a commitment, promise, or legal obligation to deliver any material, code or functionality. The development, release, and timing of any features or functionality described for our products remains at our sole discretion


Mobile List & Detail Service Consumer wizard Benefit: simple steps to create a mobile application in minutes..

1)Choose provider2)choose fields3)define layout


Mobile-optimized UI – Data Layout builder

• Data Layout builder creates data lists in a variety of layouts and patterns

• Supports thumbnail images and multi-line text

• Layout templates are provided for a variety of UI patterns, for both mobile and desktop

• Build initial UI with any Page Automation builder such as View & Form, Data Services User Interface, or Data Page

• Apply Data Layout builder to page element– Select layout template

– Select from styles (CSS)

• Assign fields to placeholder locations in layouts



Mobile-optimized UI – using custom Data Layout templates

• The list of available layout templates for Data Layout builder is completely extensible

• Custom layouts can be reused across models, to provide standard implementation of custom UI patterns

• A layout consists of a simple HTML file with special tags to identify key locations such as placeholders and repeating elements


2-column custom layout

<meta data-template-name="Thumbnail Single-Line List" data-template-description="Thumbnail Single-Line List" Data-stylesheets= "/factory/data_layout_templates/thumbnail_singleline_list.css" />

<div name="layout_list" class="wpfListLayout"> <div class="wpfListItem" name="list_item" data-repeat-wrapper="default"> <div data-target="left_image" class="wpfLeft"></div> <div data-target="center_middle" class="wpfCenter"></div> <div data-target="right_middle" class="wpfRight"></div> </div></div>


Page Navigation builder, for building native-looking navigation tabs and lists

Benefit: required for making device friendly (eg “finger friendly”) smart device applications


Web Experience Factory mobile UI themes


• Web Experience Factory 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

• Mobile themes optimize those elements for mobile devices

• Four mobile themes are provided: mobile, mobile_gray, mobile_slide (includes a “slide in” effect), mobile_basic (uses minimal-sized JS and CSS)

• Custom themes can be easily created to implement a desired look and feel across a project, controlled from a single place


Mobile Device Type profile set, for multi-channel support

Benefit: easily define different presentation formats based on device type (profile).

Single model dynamically generates presentation format to device type/form factor

Extensible with additional profiles/device types as required.


• Geolocation builder provides access to location data without coding

• Location data can be accessed in client Javascript or in server actions

• Apply Geolocation builder to a page, then add an event handler for GeoLocationClient or GeoLocation event


Using HTML5 geolocation

Benefit: easy to integrate geolocation into WEB applications using point and click


WebSphere Portal Mobile Themes

• A WebSphere Portal mobile theme is used to provide mobile-optimized UI for navigation and display of Portal pages

• A sample Portal mobile theme is available on the Portal Catalog

• Note: the Portal theme controls Portal navigation and UI outside portlets; Web Experience Factory themes control look and feel within portlets

– CSS styles can be shared between Portal and portlets


Sample hybrid application using device camera built with Phonegap

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

• Hybrid applications can use Web Experience Factory out-of-the-box tools for building views and forms

• Phonegap provides Javascript access to device features such as camera

• Sample and whitepaper available on IBM developerWorks: “Building hybrid mobile applications with PhoneGap and IBM WebSphere Portlet Factory”


Agenda


30


I dream of being able to access ALL my applications and content, anywhere any

time

The challenge: How to unlock and combine data and data in multiple back ends into cohesive business applications.

Data and applications are often locked away in

disparate back-ends, making it difficult to

create cohesive business applications that are

easily accessible


IBM Web Experience Factory adds new Content Management Interoperability Services (CMIS) integration capabilities

• Goal: to allow developers to easily integrate with enterprise content management (ECM) sources when building exception web experience.

• Example: Ability to integrate with include content stored in ECM systems (like Sharepoint 2010 and Filenet) as part of a business application.

Content from CMIS compliant

store (eg Sharepoint/Filene

t)

Content from DB2 or other open standards

backend

Content from CMIS

compliant store (eg

Sharepoint/Filenet)

Content from DB2 or other open standards backend

Benefit: easily develop business solutions that need to access CMIS compliant ECM content repositories.

Concept App


IBM Web Experience Factory adds new Content Management Interoperability Services (CMIS) integration capabilities

• CMIS builder allows developers to easily integrate with enterprise content management (ECM) sources such as Sharepoint 2010 and Filenet

• Complete create, read, update, delete functionality is available

• Benefit: easily develop business solutions that need to access CMIS-compliant ECM content repositories


Create solutions that are tightly integrated with IBM Web Content Manager• Goal: Provide multichannel access to IBM Web Content Manager content to be included as part of

business applications

• Example: Easily allow PR/Marketing managers who are rarely at their desks to quickly approve and edit content from their smart phones (or desktop browsers).

• Example: Easily create custom authoring portlets using the full set of Web Experience Factory tools.


Agenda


35


Enhanced JavaScript editing with auto-complete

Benefit: Faster and easier to develop exception web experience solutions, with superior UX capabilities


New CSS style editor and property sheets

Benefit: Easy point-and-click interface for changing styles


WYSIWYG display of Inserted Page and Contained Model

Benefit: Developers can see what final application will look like, right from Designer tool


Predefined page layouts, for construction of common page layouts using drag and drop

Benefit: Making it even easier and faster to develop applications with common page layouts


Builder picker enhancements, to simplify and guide builder selection

Benefit: with so many builders (160+) is often hard for both novice and experienced Web Experience Factory developer to find the right builder.

The new features makes it much easier to find the right builder for the task at hand, making it much easier and faster to develop solutions.


New wizards, to provide guidance for building more types of service provider models

Benefit: much easier for both novice and experienced developers to start new projects, significantly reduce development time.

Development just got faster

and easier


Automatic support for creating/deploying Portal test page, for easy testing of portlets

Benefit: very quick and easy to develop. Massive time savings for developers.


Model Inspection and Reporting Tool, for static analysis of all the models in a project

Benefit: ability to aid development teams in managing large projects and implement best practices across multiple projects.


Agenda


44


Data Layout builder – includes both mobile and desktop layout templates

Benefit: use out of the box Data Layout templates for a number of attractive displays, for both mobile and desktop devices Much easier and faster to develop than having to hand code an exported page.

plus you can also create your own reusable Data Layout template


Lazy Load builder, for dynamic Ajax-based loading of page fragments

Data only loaded

when tab is selected

Benefit: faster performance providing option to partially load data based on what is either visible or an event.

This can have a dramatic improvement on performance, especially when using with applications that have large amounts of data as well as mobile applications, where bandwidth may be constrained.


Visibility Setter, Client Side builder, for easy show/hide functionality within the browser

Benefit: Making it easier and faster to develop flexible UX with dynamic “hide/when” formulas with minimal coding


Attribute Setter builder support for multiple tags, for easy control of multiple fields within a page

Benefit: Making it easier and faster to build applications that involve setting HTML attributes on multiple tags


Portal Analytics builder, to easily add portlet-specific information to analytics logging

Benefit: Analytics are critical to gaining feedback and optimizing sites to build the exceptional web experience.

This new builder makes it very easily to add analytics to applications to ensure maximum granularity is provided for tracking and analytics logging.


Transform Aggregate builder, for performing aggregation operations (sum, count, min, max, etc) on multiple rows of XML data

Benefit: Much easier to develop solutions that deal with complex data structures and financial statements.

Overall benefit is making it faster and easier to develop solutions.


Active Text builder, for implementing active links for phone, mailto, SMS, etc.


Summary

• Our new name

• Effective multi-channel application development → Write once, deploy many

• Key new features include:

– Mew mobile/multi channel builders

– New CMIS (Microsoft Sharepoint and IBM Filenet) and IWCM builders for effective content integration

– Leveraging latest and greatest including Web 2.0, Dojo, HTML5 and Offline Storage

– Many new improvements making it faster and easier to develop

– New samples making it quick and easy to learn

• It's more than just a product/tool, it's a full ecosystem

• New Beta available now

Fast,Simple Development of

Enterprise Multi-Channel

Applications


• Portlet 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 Portlet Factory wiki

– http://www-10.lotus.com/ldd/pfwiki.nsf/dx/learning-websphere-portlet-factory– This page provides a guide to the best samples and documents for learning the

various areas of Portlet Factory development– Covers topics from your first installation to advanced topics such as creating builders

• Portlet 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 Portlet 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/

Key resources for developers

http://www-10.lotus.com/ldd/pfwiki.nsf

http://www-10.lotus.com/ldd/pfwiki.nsf/dx/learning-websphere-portlet-factory

http://www-01.ibm.com/support/docview.wss?rs=3044&uid=swg27011853

what's new in ibm web experience factory

Technology

ibm web experience factoryis

device ibm corporation

many11 ibm corporation

web applications

new ibm products

web services

ibm websphere portlet

seamless web experiences