WP8.5 - P07 - Web Experience Factory 8.5

Web Experience Factory 8.
IBM WebSphere Portal 8.5 Workshop
IBM Ecosystem Development

Duration: 45 min
Agenda
 Development trends and WEF evolution
 WEF Overview
 Features and Concepts
 Multi-channel development
 Client-side development
 Worklight support
 What's New in v8.5
— Platform updates
— Deprecated and Unsupported Features
— Multi-channel and client-side enhancements
— Developer productivity
 Learning resources
2
© 2014 IBM Corporation
Integration Tools/Methods
J2EE Development with Rational

Application Developer (Portal Toolkit) or
Adaptability / personalization
Eclipse IDE
Web Experience Factory /

WebSphere Dashboard
Framework
Web Application Bridge
Applications PHP / Web Application Integration
Google Gadgets – Feeds (RSS) - Mashups/Widgets
iFrame / Web Clipping / Static Page Integration

IBM Lotus and WebSphere Portal Business Solutions Catalog
Out of the box - Complexity of development +
3
Web Experience Factory (WEF) Recent History and
Roadmap
Web Web Web Web
Experience Experience Experience Experience
Factory 8.0 Factory 8 Factory 8 Factory 8.5
Feature Pack 1 Feature Pack 2
Q1 Q3 Q2
2012
2013 2013 2014
Feature Pack capabilities merged into core product
4
Digital Experience: Trends in Development
 Shift to the client-side development
— HTML5, JavaScript, CSS3
 Rise of the front end developer
— JavaScript skills are easy to find
 Popularity of JavaScript frameworks
 Use of RESTful services and JSON
— Cloud development model
 Mobile, Responsive Web Design and hybrid
5
Web Experience Factory (WEF)
Simple model based Ex tensive out- of- the- box Multi- channel sites and
development for creating capabilities simplify and speed applications
standards based web development
applications/ portlets
A m odel based IDE Includes 190+ out- of- the- box Dynamic profiling allowing
development tool making it builders that accelerate development you to writ e once deploy
easier and faster than time. on many platforms with
traditional coding to develop minimal effort
ex cept ional web ex periences Including standards based backend (eg
REST and Web Service, SQL...),
Supported by an ex tensive set proprietary backends (e.g. SAP, Siebel),
Business logic and Web 2.0 front-end for
of samples and vibrant
building multi-channel solutions..
developer community
6
Web Experience Factory High Level View
Develop once and render to multiple channels
Deliver applications including Desktop Browser, Smartphones,
as first class Tablets and Rich Internet Applications
Portlets
Easily build
applications from
multiple backends
whether
information is
accessible via
open APIs like
SQL, REST and Leverage a multitude
Web Services or of UX widgets for
proprietary data user friendly
sources/systems presenationion and
like SAP, Siebel data entry. Including
and Lotus Graphs, Light box,
Domino tables/grids etc...
7
WEF - Building Multi-channel Web Experiences
Data &
Services...
 ONE efficient way to deploy to multiple platforms to be accessed by

multiple devices
 Leveraging Web Experience Factory's dynamic Profiling and out-of-
the-box builders for capturing, transforming and presenting
information, you can easily create true multi-channel applications that
run on desktop browsers, smartphones, and tablets from a single
source.
8
Web Experience Factory is a full Ecosystem
Extensibility – ability to
customize and extend as
needed
Model Based
Development
Faster learning Extensive Samples/Library
●
+ and education modules:
curve
● Faster development Eg. IBM Connections,
cycles Unified Task List
Strong
development
190+ Builders including: community
REST APIs, Web Services,
CMIS, Databases, SAP,
Lotus Domino, Siebel
9
Main Components
 Developer tool – WEF Designer Applications folder
—
Plug-in for Eclipse or Rational
Application Developer
Factory application
 Server component – Automation components

Automation Engine
Builders
—
Runs as a WAR file on J2EE app
Models
server or Portal Server
Profile Sets *If necessary Request
—
Executed via Servlet or Portlet API
Traditional code
Factory
 Core WEF technology is used *If necessary
controller
by both the design environment
and the server. In the runtime, Response
the following pieces support Generated executables

dynamic profiling: JSP files
—
Regeneration engine Java classes
—
Models, Builders, and Profiling
10
WEF Designer (Eclipse based IDE)
 WEF Designer
— a tool for developing Java 2 Platform, Enterprise Edition (J2EE) Web
applications and portlets
— a plugin to Eclipse-based integrated development environment (IDE)
● also works in Rational Application Developer (RAD)
— supplies the Web Experience Factory perspective in Eclipse IDE that you
work with to create WEF projects
● this perspective provides special menus and other features to support developing
models consisting of builders, profile sets and constructing Web applications from
those models
11
WEF Designer Interface Fast access
Fast development of
Easy to palette
WYSIWYG screen
management Eclipse based IDE speeding up
elements for tweaking
of project development
of UX
based time
assets
Builder
list,
allowing
viewing
of
builders
Easy wizard based

creation of applications,
reducing development
time
12
Intuitive Navigation
 Click Link with Application tree icon and automatically display the design or code
view
Web
Application
Tree
Design view
Click to display
design view and
application tree
Tabs showing
available views
13
Visual Application Development
 View and edit user interface components visually
View pages
Edit pages
visually
Provide
suggested
builders
intelligently
based on
context
14
Building Blocks: Builders, Profiles, and Models
Builder
An adaptive, reusable
component that
generates Java, XML
and JSP for specific
portlet functionality
Profile
A set of parameters
that vary Builder
inputs to dynamically
generate unique
versions of the portlet
Model
A container
of Builders
15
Model Editor
 Main interface in the Editor area of the WEF perspective to work with
Model related resources
 Consists of several panels supporting developing models
— Builder Call Editor for editing/configuring builders (a primary panel used by developers)
— Model XML
— Source
— Design
— Application Tree
16
WEF Software Automation
 Generates applications without writing code
 Uses a model-based development paradigm based on automation of
design patterns
 Is continually updated with new standards and technology, while preserving
compatibility for existing customer assets
– As new technologies such as Dojo are added, you don’t have to learn new tools and libraries – WEF
generates the code for you
 Has been proven in the market for several years and deployed in critical
applications by many customers
Application
Builders
Model
Libraries
and code
17
Software Automation
WebSphere Portlet Factory is a system for software automation
Builders Model Profiles Applications

Users
P1 P2 P3
App 1
P1 P5 App 2
Model 1 App 3
Model 1
Development Regeneration
Solution
Rapid development of web and portal applications & dashboards
18
WEF Key Concepts: Builder
Builder
An adaptive, reusable component that generates Java, XML and JSP code for
specific application functionality.
Implements an application design pattern
Code:
Code: Java, XML, JSP
Java, HTML
Button SQL
Artifacts: Call Artifacts: Methods,
builder Variables, XML Schema
Methods, Variables builder
Output: B utton Output: XML Data
Code:
Java, XML, JSP
Report Artifacts:
Methods, Variables, XML
builder Schema
20% Division Results
20%
Output: 20% IT 200,000
20%
20% Sales 300,000
Finance 200,000
Ops 450,000
19
WEF Key Concepts: Model
Model
A container of builder calls.
My Model
My Application
My Sales Report
Button Report
20%
builder builder 20% IT 200,000

20%
20% Sales 300,000
Finance 200,000
Ops 450,000
Data Service
Access Call
OK
builder builder
20
WEF Key Concepts: Profile
Profile
A set of parameters that vary Builder inputs to dynamically generate unique
versions of the application.
My Application
My Report
20%
20% IT 200,000
20%
20% Sales 300,000
Finance 200,000
Model Ops 450,000
P1 My Application
My Report
P2
Division Results
IT 200,000
Sales 300,000
Finance 200,000
Ops 450,000
P3
My Application
My Report
Division Results
IT 200,000
Sales 300,000
Finance 200,000
Ops 450,000
21
Models and Builders
 Model XML file contains a list of calls to Builders

—
with all the Builder inputs specified at design time
—
Typically, a model is used to develop a portlet or a service.
 Builders generate the entire application
— assembled in models
 Each Builder can:

—
Introspect the application elements
—
Create new elements in application
—
Modify any existing elements in application
—
Invoke any other Builders in the system
22
Data Services Layer
The Data Services Layer provides full support for the service provider & service consumer
paradigm required in the SOA environment. It enables the definition of clean, well defined service
interfaces that separate the user interface from back end data.
Use one data

Reuse service to drive
existing display of multiple
assets portlets
Reuse same UI
with different
data services
23
Data Services Layer
 Service Provider Model (back-end data access)
— Defines a service within an application providing one or more operations. The service can then
be referenced by Service Consumer models.
— Easily create services from SQL, REST, SAP, Domino, Siebel, Java methods, etc.
— Optionally created WSDL description for services
—
Generates complete test pages, dramatically reducing time needed to QA services
—
Enables developers to work disconnected by creating a “stub” service with sample data
— Automatically documents the service operations, inputs, and outputs
 Service Consumer Model (front-end presentation)

—
Uses Service Consumer (UI) builders to invoke service operations made available by Service
Provider models
— Supports quick creation of dynamic presentation layer with builders capable of creation complex
UI elements using data obtained via the service provider.
24
Builders
 Capture design
intelligence and
automate the creation of
code
 Perform specific
automation tasks based
on inputs or parameters
specified by users
 Can be easily created to
automate any type of
software development
 Have automatically
generated, easy to use,
wizard-like interfaces
 Increase developer
productivity, decrease
coding errors, and
enforce company coding
conventions or
standards
25
Faster creation of applications
Add application functionality using Builder Picker
Search for
builders
Display
builders by
categories
Builders
Display documentation
dynamically based on
Create and
builder selection
manage
favorite builder
list
26
Extensible Builder Library automates
top tasks
Builder Picker
showing available
builders in
alphabetic order
 Over 190 out-of-the-box

builders provided
– Generate user
interfaces
– Support SOA
– Simplify portal
integration
– Demonstrate AJAX
techniques
– Provide Data
Integration
– Provide Application
Integration
– Java Support
– Custom Builder
creation support
– Dojo
27
Data Integration builders: REST Service Call builder
 One of the many data integration
builders
 Used to call a Representational
State Transfer (REST) style
service. It supports GET, POST,
PUT, and DELETE HTTP
operations.
28
Data Integration builders: CMIS Document Access builder
Content Management Interoperability Services (CMIS) support
 One of the many data integration

builders
 Creates a data service that
accesses documents and folders
in a repository that supports the
OASIS Content Management
Interoperability Services (CMIS)
V1.0 standard.
 Easily access enterprise content
in context of business
applications made available as
part of multi-channel web
experiences
 CMIS builder for building
applications that access CMIS
sources from Filenet 5+ and
Sharepoint
29
Dynamic Profiling
 Create unique, role-based portals and dashboards with WEF's
patented automation and dynamic profiling technology.
 Portals can adapt unique:
—
Roles
—
Preferences
—
Structure
—
Presentation
—
Flow
—
Data views
—
Access rights
30
Profiles
 Profiles can be used to generate multiple applications

from a single source Model
—
Using profiles, you can automatically generate different variations of a portlet
(from the same model) for different users, customers or situations.
 During regeneration, values from the selected profile

are used for specified builder inputs
— The values are fed into a builder based on user identity or other contextual
information, such as language.
 Because the entire application is created by Builders,

and any Builder inputs can be profiled:
—
There are no limits on what can be modified by profile
—
Presentation, workflow, logic, services, etc., can all be varied by profile as much
as you want
31
Profiles
 A profile contains a set of parameters
(name/value pairs) that are used to
dynamically generate customized
software.
 Enable business users to design, create,
and change the applications – without
requiring additional coding by developers
 Enable changes to propagate to all
application instances
 Eliminate hand-coding of variations
32
Application instances
Application Instance Creation
Profiles
Products Sale VP Profile sets
Profiles
Sales Manager
Regions Sale VP
Sales Rep
Sales Manager
Profiles
Sales Rep
Sale VP
Roles
Sales Manager
Sales Rep
Regeneration
Models with
Builders
When a model is regenerated, each builder in

the model executes in sequence and creates
pieces of the portlet, such as JSPs or Java
methods.
During regeneration, profiles can feed different
inputs to builders based on the user or situation,
automatically creating custom portlets on the fly.
33
Seamless Integration into Portal Infrastructure
 WebSphere Portal integration support
(builders)
— Collaboration
● People Awareness builder
● Adding a presence function or Sametime chat capabilities to a
portlet
— Directory Search builder
● Searching for people and groups in IBM Websphere Portal
— Single Sign On/Credential Vault
● Websphere Portal Credential builder
● Accessing credentials stored in Portal credential vault to support
SSO
— Active Site Analytics
● WebSphere Portal Analytics builder
● Annotating portlet screen displayed in Portal
— Portlet to Portlet Communication (Click-to-Action
& Portlet Wiring support)
● Cooperative Portlet Source/Target builders
— WebSphere Portal Modes
● Portlet Customizer and Portlet Adapter builders
● Enabling WEF model tob used as a portlet
● supporting configure/edit portlet modes
— Automated deployment
34
Custom UI designs from External tools
 Complete Page Export makes it easier for designers to customize all the HTML for a page
 Imported Page builder make it easy to iteratively and automatically update custom HTML from
design team
35
Working with custom UI designs from External tools
1) 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
36
Multi-Channel Development
iPhone Android
 Automation components that help developers rapidly
construct great-looking mobile applications with a
native mobile (smartphone and/or tablet) look &
feel:
— Scrolling lists with configurable display options: thumbnail
images, multi-line text with multiple styles
— Native-looking navigation tabs and lists, buttons and controls
— Access to smartphone features such as HTML 5, geo-location,
and orientation
— Complete CRUD (create, read, update, delete) applications
tailored for smartphone display BlackBerry iPad
— Input UI patterns suitable for smartphones such as selectable
lists and checkbox lists
 IBM Worklight support for accessing native device
features such as camera
 Sample applications
Build once, deploy anywhere

Portal, Web App Server, Mobile Device,
Kiosk, WebTV
37
Client-side support for 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
— in 8.5, new client-side support is
extended to desktop browsers
 Key Benefits:
— Desktop and multi-channel
applications can now benefit from
client-side capabilities
38
Client-Side Applications Capabilities
 Reduces amount of traffic – JSON data vs
HTML data
 Improves performance, especially over
slower connections
 Provides smooth UI interaction JSON
 All interaction within a portlet is done by Data
fetching JSON data and updating just that
part of the screen
All updates are done with JS/JSON/REST
39
Dedicated Mobile Features
 Special 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/JSON/Ajax+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
 Client-side wizards and builders generate all the
supporting code
40
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
41
Example of Multi-channel site including Hybrid app delivery
Mobile Browser
Desktop
Websphere Portal
Web
Experience
Factory
42
Example of Hybrid Mobile application
 Hybrid application built using Worklight displays Portal navigation, content, and portlets,
including portlets that access device features such as camera
 Web Experience Factory model-based tools are used to rapidly build views and forms for the
portlet application
 Hybrid functions are added using JavaScript that calls Worklight libraries
 Sample application shows real estate listings, with “take picture” for new listings
1. View list of 2. Fill out form and 3. Point camera 4. Review 5. Picture is uploaded
properties and tap tap “Take Picture” and take picture thumbnail and tap to server along with form
“Create” to add a to invoke camera “Submit” values
property
43
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.
44
IBM Worklight Integration
Running in mobile web
browser: no option for Running in Worklight app:
 Go where your mobile web “Deposit Check“ additional native functionality
browser alone can’t go
— Hybrid (Web + Native)
 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
45
Web Experience Factory tooling and Worklight
Use Web Experience Factory's model-
based, data-driven tools for ultra-rapid
development of applications and user
interfaces
Use the multi-channel support for
Rapid data-driven development: from data to
multiple device renderings from a single multi-channel applications in minutes
model
Combine Web Experience Factory

applications with Worklight to include
hybrid functions such as camera and
notifications Use Worklight to create shell application and to
provide application access to device features
Any Web Experience Factory application

(pure web app or hybrid) can run in
WebSphere Portal or standalone on
WebSphere
© 2012 IBM Corporation Application Server (WAS) Applications in Portal Applications standalone on WAS
46
Worklight Camera Builder
 Easily support camera with

point and click development
 No coding required
47
WEF 8.5 What's New: Key Themes
 Platform updates and additions
 Mobile/multi-channel and client-side
support
 Developer productivity
 Enablement resources and
downloadable tools (samples, articles,
reusable builders and tools)
sim plified developm ent
48
WEF 8.5 Updated Platform Support
 WebSphere Portal 8.5
 Mac support for Designer IDE
— develop and test on Mac OS X
 Out-of-the-box WAS Liberty Profile server for developer
testing
— lightweight server is installed automatically
— replaces WAS CE (and Tomcat) server environment used previously
 Eclipse 4.2.2, RAD 9.0.x
 Support for SOAP 1.2 web services
49
Develop Applications on Windows, Linux (and other)
platforms – WEF 8.5 software requirements
 Operating Systems *
– Microsoft Windows 2008 and 2008 R2
– Microsoft Windows 2012 and 2012 R2
– Microsoft Windows 7 Enterprise and Professional
– Microsoft Windows 8 Professional
– Red Hat Enterprise Linux (RHEL) Server 6
– Red Hat Enterprise Linux (RHEL) 5 Avanced Upd 7
– SUSE Linux Enterprise SLES 11
– AIX 6.1 and 7.1
– HPUX 11iv3
– IBM i 7.1
– Solaris 10 and 11
– Mac OS X Mountain Lion 10.8
 Integrated Development Environments (IDEs)

– IBM Rational® Application Developer for WebSphere Software V9.0+
– Eclipse 4.2.2 bundled with WEF 8.5 installation package
– Eclipse 4.2.2
*See details http://www-01.ibm.com/support/docview.wss?uid=swg27013671

50
WEF 8.5 – Feature Sets
 Extensive list of supported Feature Sets

extending application functionality
—
Integration Extensions feature sets
—
User Interface feature sets
—
Tutorials and Samples
—
National Language Support
 Pick and choose your required Features
Sets while creating a WEF project
—
selections dependent on your Web application
requirements being created
—
Feature sets can be added/removed at any time
51
WEF 8.5 Deprecated and Removed Features
 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)
 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
52
WEF 8.5 Mobile/Multi-channel and Client-side support
 Mobile/Multi-channel and client-side support

enhancements
— Improved Client-side Application support for desktop and multichannel applications
— IBM Worklight support, with builders for including native device features, such as
camera, in applications
— Out-of-the-box multichannel layouts and styling, including support for Responsive
Web Design (RWD) and Content Template Catalog (CTC) 4 Wizards
● makes it easy to build applications that include the new multichannel and mobile
features
— Enhanced set of Model creating Wizards to build applications that include the new
multichannel and mobile features
53
WEF 8.5 Developer Productivity
 Developer productivity enhancements
— New builders
— New model wizards
— Additional Designer features
— Data layout enhancements
— Page navigation enhancements
54
Data Layout Templates
Multi-channel applications and Responsive Web Design
 New layout templates for the Data

Layout builder, including responsive
layouts and compatibility with CTC4
lists
 UI themes for desktop, tablet, and
phone
55
New Client-Side tooling (WEF 8.5)
 Getting started with client-side is

easy
 Start with one of the new wizards
 Use other builders to customize and
enhance as usual
“List and Detail (Client-side)”

model wizard builds a client-mode
model using the current themes and
builders suitable for displaying on a
desktop, smartphone, or other mobile
device.
It displays data from a data service

and it can create list and details
views of data. Behind the scenes it
uses the Client View and Form
builder with the Data Layout builder
to create a list display.
The Theme builder controls the look
and feel.
56
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
57
Model Wizards Enhancements
 New Model wizards
— List and Detail
— List and Detail (Client-side)
— Multi-Page Form (Server or Client-side)
— Model Container Tabbed View
— Multichannel Starter (Server or Client-side)
 Most wizards for building UI

(consumer) models now include
multi-channel support
58
List & Detail (Client-Side) Model Wizard
 Just point and click through wizard
for a complete responsive, multi-
channel portlet
59
Multi-Page Form Model Wizard
 Implements a common application
pattern
 Users can move through a series of
forms, then confirm all data before
submitting
 Leverages the new Application Page
builder
60
New Builders (WEF 8.5)
 Application Page builder
— Can be used to create simplified versions of pages that in the past were
created with the Data Page, Page Navigation or Model Container
builders.
— Provides flexibility of creating pages applicable in mobile and multi-
channel applications
 More builders previously available in the
WebSphere Dashboard Framework only
— Status Indicator builder
— Status Indicator Legend builder
— Summary Row builder
— Hierarchy Drilldown builder
 Script Application builder – separately
downloadable from IBM Digital Experience
Developer site
61
Application Page Builder in Action
 Data View and data Entry pages
62
Application Page Builder in Action
 Page Navigation and Model Container
63
Using jQuery and other JS Libraries with WEF
 A new set of articles and samples shows how to use popular JS
libraries with Web Experience Factory
 You can use these libraries with WEF in a number of ways, such
as:
— 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
— Build most UI with WEF and Page Automation; enhance with JS
libraries
● Example: use JQuery widget for calendar picker or other form input
— 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
64
Benefits
 Using JavaScript libraries/frameworks 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
65
Script Application Builder – new downloadable builder
 A Script Application builder and wizard are available on
the IBM Digital Experience Developer site
— also posted as open source on OpenNTF
— http://openntf.org/main.nsf/project.xsp?r=project/Script Application
Builder for IBM Web Experience Factory
 This builder implements a common pattern for building
JavaScript-based portlets/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 JavaScript
variables for JSON/REST access to all the operations
from a Data Service provider model
— this means that your script-based portlet can easily access data from
any of the back end data access and transformation builders that are
available with Web Experience Factory.
66
Script Application Builder in Action
 Designed for creating JavaScript-based portlets with access to Data
Services
References to
script
libraries
such as jQuery
Application JS file
$(document).ready(
function() {
// Get Accounts
jqSamp.displayChart();
});
Data Service
Provider Model
Data Access and
Transformation
Builders
JSON/REST calls to server
67
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
68
Client-side Mode Limitations
 Client-side mode has a subset of builders available
 At this point in 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)
69
WEF Developer Community Web site
 IBM Web Experience Factory Community,
including blog from the development team
70
WEF Designer “Feeds” View
 “Feeds” in Designer lets you easily
see new and updated content on
WEF wiki, WEF blog and more
 To see the feeds, navigate to
— Window → Show View → Feeds
— Click the displayed feed entry to see the
details
71
For More Information
 IBM Knowledge Center (Community Articles, Product Documentation, Learning Center)
— IBM WebSphere Portal & Web Content Manager 8.5:
http://www-01.ibm.com/support/knowledgecenter/SSHRKX_8.5.0/welcome/wp_welcome.html
— IBM Web Experience Factory 8.5:
http://www-01.ibm.com/support/knowledgecenter/SSRUWN_8.5.0/welcome_wef_850.html
 DigitalExperience Developer on IBM developerWorks
—
http://www.ibmdw.net/digexp/
 Web Experience Factory Wiki
—
http://www-10.lotus.com/ldd/pfwiki.nsf
 Roadmap to Learning IBM Web Experience Factory
—
http://www-10.lotus.com/ldd/pfwiki.nsf/dx/learning-websphere-portlet-factory
72
Thanks!
 Access FREE education on the IBM Collaboration Solutions portfolio of
products today!
1. Visit the IBM Greenhouse and create a free account.
Link → http://greenhouse.lotus.com/
2. Visit the IBM Collaboration Solutions Ecosystem Development Community
Link → https://greenhouse.lotus.com/communities/community/icsecod
3. Learn new skills and share these links with your friends and colleagues!
73
74

WP8.5 - P07 - Web Experience Factory 8.5

Uploaded by

Copyright:

Available Formats

You might also like

WP8.5 - P07 - Web Experience Factory 8.5

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

WP8.5 - P07 - Web Experience Factory 8.5

Uploaded by

Copyright:

Available Formats

Web Experience Factory 8.

IBM WebSphere Portal 8.5 Workshop

IBM Ecosystem Development

J2EE Development with Rational

Web Experience Factory /

Web Application Bridge

Applications PHP / Web Application Integration

Google Gadgets – Feeds (RSS) - Mashups/Widgets

iFrame / Web Clipping / Static Page Integration

Out of the box - Complexity of development +

Feature Pack capabilities merged into core product

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

 Server component – Automation components

the following pieces support Generated executables

Easy wizard based

WebSphere Portlet Factory is a system for software automation

Builders Model Profiles Applications

Rapid development of web and portal applications & dashboards

Output: B utton Output: XML Data

builder builder 20% IT 200,000

Model Ops 450,000

 Model XML file contains a list of calls to Builders

 Each Builder can:

Use one data

 Service Consumer Model (front-end presentation)

 Over 190 out-of-the-box

 One of the many data integration

 Profiles can be used to generate multiple applications

 During regeneration, values from the selected profile

 Because the entire application is created by Builders,

When a model is regenerated, each builder in

Build once, deploy anywhere

All updates are done with JS/JSON/REST

© 2012 IBM Corporation

Combine Web Experience Factory

Any Web Experience Factory application

 Easily support camera with

sim plified developm ent

 Integrated Development Environments (IDEs)

*See details http://www-01.ibm.com/support/docview.wss?uid=swg27013671

 Extensive list of supported Feature Sets

 Mobile/Multi-channel and client-side support

 New layout templates for the Data

 Getting started with client-side is

“List and Detail (Client-side)”

It displays data from a data service

 Most wizards for building UI

You might also like