what's new in ibm web experience factory 7.0.1 (formerly ... · • goal: provide multichannel...

© IBM Corporation 2011

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


Web Experience FactoryBusiness Value

Fast,Simple Development of

Enterprise Multi-Channel Applications


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 Improved end-user experiences Improving the development experience Summary

4

5 © 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 Multi-channel and Mobile samplesNew learning materials,including videos to help you get started

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

12new

builders

New capabilities out of the box●New builders for mobile/multichannel development●New builders for creating an exceptional end-user experience●New builder for use with 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).

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


14


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

WebSphere Portal

WebSphereApplication Server

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

Tablets

Smartphones

DesktopBrowsers


Web Experience Factory for mobile/multi-channel development

Automate the creation of mobile-optimized applications, eliminating coding and speeding time to market

Create native-looking mobile applications using standard technologies (HTML, CSS, Javascript)

Support your multi-channel strategy. Create once and run on multiple devices (iPhone, Blackberry, Android, iPad, Xoom, etc.)

Leverage all the Portlet Factory out-of-the-box features for quickly building exceptional web experiences

Leverage HTML5 for features such as geolocation and offline support


New mobile and multi-channel features in Web Experience Factory

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

HTML5 Geolocation builder

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


Agenda


28


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


30


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.


Agenda


38


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 for building more types of service provider models

Benefit: 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

Benefit: very quick to test new portlets, without having to create Portal pages and place portlets..


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.


Summary

• Our new name

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

• Key new features include:

– New mobile/multi channel builders

– New IBM Web Content Management builder for effective content integration

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

– 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

Fast,Simple Development of

Enterprise Multi-Channel

Applications

what's new in ibm web experience factory 7.0.1 (formerly ... · • goal: provide multichannel...

Documents