What s New in IBM Web Experience Factory 8.5 2014 IBM Corporation
Recent history and roadmap Web Experience Factory 8.0 2012 Multi-channel Client-side mobile Aligned with Portal 8 Developer productivity tools Web Experience Factory 8 Feature Pack 1 Q1 2013 Mobile/RWD support Worklight Support and Camera builder Web Experience Factory 8 Feature Pack 2 Q3 2013 Client side multichannel support Mobile enhancements Developer productivity tools Web Experience Factory 8.5 Q2 2014 All capabilities from 2013 Feature Packs Aligned with Portal 8.5 Updated and new platforms Mobile and multi-channel enhancements Developer productivity Feature Pack capabilities merged into core product 2
Key themes for WEF 8.5 Mobile/multi-channel and client-side support Developer productivity Platform updates and additions Enablement resources and downloadable tools (samples, articles, reusable builders and tools) 3
1. Mobile/multi-channel and client-side applications Out-of-the-box support for multi-channel applications and Responsive Web Design (RWD) UI themes and Data Layout templates Including support for styling compatible with Content Template Catalog (CTC) IBM Worklight support, for including native device features such as camera in applications Worklight Camera builder and Worklight Enable builder Worklight 6.1 support New Worklight samples Enhanced client-side application support for desktop and multi-channel applications Desktop and multi-channel support for client-side applications Developer usability enhancements for client-side applications Device Class profile handler Easily tie WEF device profiling to device class definitions from Portal 4
Example of multi-channel banking site using client-side architecture and including hybrid app delivery Mobile Browser Desktop WebSphere Portal Web Experience Factory Portlet 5 Hybrid using Worklight (Web + Native)
Multi-channel applications and Responsive Web Design: Data Layout templates and UI themes New layout templates for the Data Layout builder, including responsive layouts and compatibility with CTC4 lists UI themes for desktop, tablet, and phone 6
Integration with IBM Worklight Go where your mobile web browser alone can t go Use native device and Worklight 6.1 features Camera, notifications, encrypted storage, etc. Access your whole web site from an installed Worklight application, with access to native device features when you want them Turn features of the site or portlet on/off based on whether running in mobile web browser or in Worklight app 7 Running in mobile web browser: no option for Deposit Check Running in Worklight app: additional native functionality
Worklight Camera builder Easily support camera with point and click development No coding required 8
Multi-channel site architecture including Worklight Desktop Web Browser Tablet Web Browser Smartphone Web Browser Worklight Hybrid Shell Installed App Firewall & Proxy HTML/JS/CSS, Ajax REST services Security check, notification registration, etc. WebSphere Portal Server Personalization, access control, customization, navigation, etc. Portlets Content Worklight Server Notifications, application authorization, app validity, update service, etc. Web Experience Factory portlets, RAD portlets, social portlets, etc. Enterprise applications and services 9 IBM Connections and social services
Worklight Enable builder Enables JavaScript access to Worklight and Cordova libraries Use Client JavaScript builder to add JS code snippets 10
Client-side support for desktop browsers & multi-channel delivery Client side architecture improves end-user responsiveness and performance by using client-side JavaScript with REST/JSON services This reduces the amount of data sent from server to client Client-side support in 8.0 only supported mobile devices New client-side support is extended to desktop browsers. Key Benefits: Desktop and multi-channel applications can now benefit from client-side capabilities 11
Client-side mobile web application architecture WEF server generates HTML markup templates (without data) and JS; all data is retrieved from client using REST/JSON services. 12
Client-side capabilities Reduces amount of traffic JSON vs HTML Improves performance, especially over slower connections Provides smooth UI interaction All interaction within a portlet is done by fetching JSON data and updating just that part of the screen All updates are done with JS/JSON/REST 13
New client-side tooling Getting started with client side is easy Start with one of the new wizards Use other builders to customize and enhance as usual 14
Device Class profile handler Easily tie Web Experience Factory device profiling to device class definitions from Portal Use profiling to generate different code and markup for different device classes such as desktop, tablet, smartphone Use Portal s tools to configure device classes and User-Agent patterns for each 15
2. Developer productivity New mobile/multi-channel wizards, for server-side and client-side Wizards for additional application types such as multi-page forms and tabbed Model Container Application Page builder for automating additional UI patterns Selected builders from WebSphere Dashboard Framework XSLT Transform builder Enhancements to existing builders Improved performance for creating projects and publishing 16
List & Detail wizard, List & Detail (Client-Side) wizard Just point-and-click through wizard for a complete responsive, multi-channel portlet 17
Multi-Page Form (Server or Client-Side) wizard Gets you started quickly on this 18 common application pattern Users can move through a series of forms, then confirm all data before submitting Leverages the new Application Page builder
Model Container Tabbed View wizard 19
Simplified structure of multi-channel applications using Imported Models Most wizards for building UI models now include multi-channel support: Model Container Tabbed View Multichannel List & Detail Client Multichannel List & Detail Data Services UI Multi-Page Form (Server or Client-side) Multi-Channel Starter (Server or Client-side) Generated multi-channel models have a simplified structure, using a common model from the Models/imported/factory folder Profiling of UI themes is done in those Imported Models, not duplicated in each UI model 20
Application Page builder Data View and Data Entry pages 21
Application Page builder Page Navigation and Model Container 22
Selected builders from WebSphere Dashboard Framework Status Indicator, Status Indicator Legend Summary Row Hierarchy Drilldown 23
Status Indicator, Status Indicator Legend Lets you style values in a table or list based on conditions For example, make all values greater than a certain value display in a different color, or using an icon image 24
Summary Row Performs calculations on columns in a table such as average or sum, and displays a row with the results 25
Hierarchy Drilldown Creates a series of pages, letting user drill down through multiple levels of hierarchical data 26
XSLT Transform builder Use this to specify an XSLT file that is used to transform from one schema to another XSLT can be generated using RAD tools or hand-edited 27
Enhancements to existing builders Data Layout builder enhancements: Dojo Title Pane Navigation Separate table input for selecting styles Four new Dojo-based layouts New Six Column Multi-Line List layout Variable builder enhancement: Generate schema directly from builder, for quick prototyping Dojo Mobile Icon Container 28 Dojo Mobile Swap View List Six Column Multi-Line List
3. New and updated platform support Portal 8.5 Mac support for Designer IDE Out-of-the-box WAS Liberty server for developer testing Eclipse 4.2.2, RAD 9.0.x Support for SOAP 1.2 web services 29
Mac support for Designer IDE Develop and test all your applications on Mac OS X 30
WAS Liberty Server for developer testing Lightweight server is installed automatically Manage server, start/stop, view console directly from IDE Ultra-quick server start 31
Deprecated and removed features in WEF 8.5 Deprecated JViews Chart builder (see wiki samples for using JS charting packages instead) Siebel and PeopleSoft builders (use web or REST services instead) Lotus Forms Launch and Lotus Forms Embed builders Imported Directory builder Profiled Service Call builder SAP BW Access and SAP BW Column Headers builders (other SAP builders such as SAP Function Call are not deprecated) JSP Tag and JSP Directive builders Removed WAS CE and Tomcat publishing from IDE for dev test (use WAS Liberty instead) Greenpoint Webcharts (previously deprecated) iwidget support (use portlets instead) JSR 168 option for portlets Portal Composite Application features that were removed in Portal 8.0 (in Portlet Adapter and profile selection handler) 32
4. Enablement resources and downloadable tools Samples and builder for using JQuery and other script libraries Dojo charting samples Multi-channel responsive application tutorial Application Page builder samples Worklight samples Client-side application samples XML Data Service builder LJO Base Class builder 33
New resources for using JQuery and other script libraries A new set of articles and samples shows how to use popular JS libraries with Experience Factory You can use these libraries with WEF in a number of ways, such as: 1. Build most UI using JS and HTML, using WEF s portlet support and data access builders Example: use an open-source or third-party charting library with data from WEF provider Example: build all the UI using JQuery UI and a JS MVC library, accessing data from a WEF data provider 2. Build most UI with WEF and Page Automation; enhance with JS libraries Example: use JQuery widget for calendar picker or other form input 3. Build some screens using WEF UI builders and some with hand-coded JS Example: build list and table display using WEF tools; combine with a chart from a JS library 34
Benefits of combining Web Experience Factory (WEF) with jquery or other script libraries Using script libraries in combination with WEF, you can: Build portlets and applications using the skills many developers already have, with jquery, Backbone.js, ExtJS, or other scripting libraries Easily use REST/JSON to access data and services using the full array of WEF's data integration and transformation builders Selectively enhance a WEF application's UI using any of the available script UI libraries Leverage all of WEF's support for Portal features such as portlet preferences and shared render parameters Leverage WEF's unique support for dynamic profiling, to generate different application variations for different target audiences or devices 35
Script Application Builder A Script Application builder is available on the WEF wiki that implements a common pattern for building script-based applications With a single builder you can implement a script-based portlet or a page within a WEF portlet The builder automatically generates code and variables for JSON/REST access to all the operations from a Data Service provider model 36
Script Application Builder downloadable builder for creating script-based portlets with access to Data Services Script-Based Portlets References to script libraries such as JQuery Application JS file $(document).ready( function() { // Get Accounts jqsample.displaychart(); }); Data Service Provider Model Data Access and Transformation Builders 37 JSON/REST Calls to server
New downloadable tools on the WEF wiki XML File Data Service builder For quick prototyping or UI-first development Resourced Text builder For automatically applying text from a resource bundle to locations on all pages in a model Multiple Visibility Setter builder For implementing conditional visibility on many fields at once LJO Base Class builder For improving LJO model references Session Memory Report model To see how much memory each model is keeping in user session 38
More new samples and articles Using the new Multi-Channel Responsive Data Layouts Client-side application samples Updated Camera builder sample Worklight Enable builder samples Building a multi-channel responsive application Customer Account Sample Using the Application Page Builder (includes multi-page form) Using the new responsive HTML template for responsive multi-column forms Developing social portlets by leveraging IBM Social Business Toolkit Includes Connections Files builder to easily access files from IBM Connections Componentizing an application using Model Container and Event builders Generating PDF files Text With Image custom builder Editable Table Sample 39
For more information Join or browse the Web Experience Factory community: http://ibm.co/factorycommunity Latest news/blog Links to forums, wiki, etc. The Web Experience Factory wiki: http://www-10.lotus.com/ldd/pfwiki.nsf/ Complete product documentation Directory of downloadable samples Learning Web Experience Factory page with key learning links 40