WebSphere Portal Technical Conference U.S. 2007
Best Practices for Creating Portlets
with WebSphere Portlet Factory
WebSphere Portlet Factory and Software
Automation
WebSphere Portlet Factory is a system for software automation
Portlet Factory’s model-based development paradigm – using Builders – is
different than other development tools
You specify the inputs that control code generation, instead of manipulating code and
application artifacts directly
The benefit of this approach is a high degree of automation
Techniques and best practices have been evolving over the last several years of
experience with this paradigm
2
WebSphere Portal Technical Conference U.S. 2007
Best Practices Topics
Creating a portlet using a service architecture
Controlling and customizing the user interface
Choosing the right builder
Creating multi-language applications
Debugging techniques
Performance
Top 10 model development best practices
3
WebSphere Portal Technical Conference U.S. 2007
Creating a Portlet Using a Service Architecture
SOA builders in Portlet Factory make it easy to create separate service provider
and consumer layers
These builders work in a consistent way with any back end data source
4
WebSphere Portal Technical Conference U.S. 2007
Service Provider and Consumer Models
5
SQL Call
SQL Call
Service Operation
Service Operation
SQL Provider Model
Service Definition
Service Consumer
Portlet (Consumer) Model
WebSphere Portal Technical Conference U.S. 2007
RDB
Benefits of Using a Service Oriented
Architecture
Separate back end and presentation development
Automatic support for service testing
Develop consumer (presentation) model without any back end access, using stub
service model
Reuse services in multiple presentation models
Easily transform data between back end schema and some other schema
Switch between multiple implementations of a service interface without changing
consumer model.
6
WebSphere Portal Technical Conference U.S. 2007
Creating a Portlet Using a Service Architecture
Steps for creating a portlet:
1. Create service for data access:
Use data access builder (SQL, SAP, Domino, etc.) for back end access
Use Service Definition and Service Operation builders to create service
Can include multiple operations, data transformation, and custom processing
Note that this service can be reused across any number of portlets
2. Use high-level builder to create initial presentation based on service inputs and results:
Use builder such as View & Form
Forms and views are automatically generated from the schema
Fields are automatically laid out using customizable rules
Forms and views adapts automatically to schema or service changes
3. Customize application iteratively:
Add builders to create new application elements and to modify existing elements
Change builder inputs, for example to select different styles or layout pages
Modify elements that control automation, such as page templates and Rich Data Definitions
SOA Samples:
http://www.ibm.com/developerworks/websphere/zones/portal/portletfactory/samples/datas
vc.html
7
WebSphere Portal Technical Conference U.S. 2007
Creating a Portlet Using a Service Architecture
DEMO
8
WebSphere Portal Technical Conference U.S. 2007
Back End Data Support
Portlet Factory data access builders can be used to easily create services
These data access builders create common elements:
Schemas
Data Service metadata that identifies the variables and methods for operations
Code for executing back end functions
You can easily create your own custom builders to access back ends which are
not supported out of the box. See a sample at
http://www.ibm.com/developerworks/websphere/zones/portal/portletfactory/sam
ples/createbldrs.html for more information
9
WebSphere Portal Technical Conference U.S. 2007
10
Service Operation
SAP Function Call
SAP Function Call
Stub Service Model
Service Operation
Service
Mapping
Registry
Service Definition
Service Consumer
Service Consumer Model
Service Operation
Service Definition
Service and Stub Models
Service Operation
SAP Service Model
Schemas
Variables with
captured stub
data
Service Operation
methods
WebSphere Portal Technical Conference U.S. 2007
SAP
Best Practices Topics
Creating a portlet using a service architecture
Controlling and customizing the user interface
Choosing the right builder
Creating multi-language applications
Debugging techniques
Performance
Top 10 model development best practices
11
WebSphere Portal Technical Conference U.S. 2007
Controlling and Customizing the User Interface
Overall layout and look and feel
Forms and data display
Ajax and rich UI
12
WebSphere Portal Technical Conference U.S. 2007
Controlling the User Interface: Overall Layout and Look
and Feel
Overall page layout is controlled with imported HTML pages
These pages include placeholders (named tags) where content will be inserted
These pages can be used to include common visual elements (such as branding)
and styles
CSS style sheets are used to control the look and feel of HTML
13
WebSphere Portal Technical Conference U.S. 2007
Controlling the User Interface: Forms and Data Display
Portlet Factory has a rich set of builders for customizing data-driven page
elements such as forms and views
Some builders target a whole set of page elements, for maximum automation
Example: Rich Data Definition applies UI characteristics (validation, formatting, UI type,
labels, etc.) to all the fields on all the pages that are generated from a schema
Other builders target a specific page element
Example: Data Field Modifier targets individual fields and sets UI characteristics
Example: Attribute Setter sets HTML attributes on specific tags
The overall goal is to allow maximum automation whenever possible, while
allowing detailed individual customization when needed
14
WebSphere Portal Technical Conference U.S. 2007
Rich Data Definition Example
Schema
Rich Data
Definition for
schema
ORDER_ID
<xsd:schema xmlns:xsd="http://www.w3.org/2001/XMLSchema"
xmlns:tns="http://bowstreet.com/2002/10/generatedschema1"
targetNamespace="http://bowstreet.com/2002/10/generatedschema1">
<xsd:element name="ORDER_ID" type="xsd:string" />
<xsd:element name="DATE_ORDERED" type="xsd:string" />
<xsd:element name="STATUS" type="xsd:string" />
DATE_ORDERED
<xsd:element name="DATE_SHIPPED" type="xsd:string" />
STATUS
<xsd:element name="QUANTITY" type="xsd:string" />
STATE
<xsd:element name="AMOUNT" type="xsd:string" />
<xsd:element name="BILLING" type="xsd:string" />
<xsd:element name="SHIPPED" type="xsd:string" />
<xsd:element name="STATE" type="xsd:string" />
</xsd:schema>
Rich Data Definition Shared Library
base_Date
base_Currency
base_US_State
15
WebSphere Portal Technical Conference U.S. 2007
Controlling the User Interface: Ajax and Rich UI
Portlet Factory version 6.0.1 added builder support for Ajax-related functionality
Builders generate all the necessary client-side and server-side code
Features include:
Partial page rendering
Type-ahead
Drag and drop
Popup “tooltip” windows
Mouse-over highlighting
Client-side events
Dojo widget support
Support for REST-style services and JSON (JavaScript Object Notation)
16
WebSphere Portal Technical Conference U.S. 2007
Ajax and Rich UI Example
Type Ahead Search
17
Partial page refreshes
independently of portal
WebSphere Portal Technical Conference U.S. 2007
Ajax and Rich UI Example
Drag-and-Drop
Support for Inline Editing
18
Pop-up detail page using
Ajax
WebSphere Portal Technical Conference U.S. 2007
Best Practices Topics
Creating a portlet using a service architecture
Controlling and customizing the user interface
Choosing the right builder
Creating multi-language applications
Debugging techniques
Performance
Top 10 model development best practices
19
WebSphere Portal Technical Conference U.S. 2007
Choosing the Right Builder
This section is derived from the “Getting Started Guide” located at
http://www.ibm.com/developerworks/websphere/zones/portal/portletfactory/prod
doc.html
20
WebSphere Portal Technical Conference U.S. 2007
Choosing Builders – Creating Services
Task
Builder
Get access to data store
•Use data access builder from following slide
Define the overall service settings
•Service Definition
Add an operation to a service
•Service Operation
Generate a test harness for testing a
•Use the “testing support” inputs of Service Definition builder
service
21
Create a stub service model
•In Service Definition builder, use the “Generate Stub” button
Create a WSDL/SOAP service
•In Service Definition builder, use the “Generate WSDL” checkbox
WebSphere Portal Technical Conference U.S. 2007
Choosing Builders – Data Access Builders
22
System or Data Source
Builder
Databases
SQL Call
Lotus Domino
Domino Data Access
Microsoft® Excel
Excel Import
Java class
Linked Java Object
PeopleSoft
Peoplesoft Component Interface
SAP
SAP Function Call
Siebel
Siebel Business Component
WebSphere Portal Document Management
Content Model Access
Web Service
Web Service Call
XML Data
Variable or Import to XML
WebSphere Portal Technical Conference U.S. 2007
Choosing Builders – Using Schemas and Variables
Task
Builder
Create an XML variable
•Variable
Use an existing schema
•Use Schema builder to reference an existing XSD file
•Use Variable builder to create a variable based on the schema
Create a simple schema
•Use Variable builder to create an XML variable with the desired
structure
•Use Simple Schema Generator to make a schema from Variable
Use an existing Java Bean
•Linked Java Object
•Java/XML Converter can be used to convert to XML
Transform data between schemas
•Use Service Operation builder for simple mapping
•For more complex XML manipulation, use Java code that
manipulates IXml
23
WebSphere Portal Technical Conference U.S. 2007
Choosing Builders – Creating the Initial Portlet UI
Task
Builder
Access a service model
•Service Consumer
Create initial portlet pages based on
•View & Form
service data
•Input Form
Create initial portlet pages, using
•Domino View & Form
back end-specific builder
•SAP View & Form
•PeopleSoft View & Form
•Siebel View & Form
Create a page with a graphical chart
•Imported Page and Web Charts
of data
24
Make a model available as a portlet
•Portlet Adapter
Add some structured data to a page
•Data Page
WebSphere Portal Technical Conference U.S. 2007
Choosing Builders – Working With Columns and Data Layout
Task
Builder
Hide columns in a table
•Data Column Modifier
•Rich Data Definition
Add sorting capabilities
•Data Column Modifier
Reorder the columns in a table or add
•Data Column Modifier
new columns
Add grouping to fields on a page
•Data Hierarchy Modifier
Create newspaper-style columns for
•Form Layout
form data
Add buttons to expand and collapse
•Category View
data by category
25
WebSphere Portal Technical Conference U.S. 2007
Choosing Builders – Validation, Formatting, and Field UI
Task
Builder
Format and validate data in fields
•Rich Data Definition – for maximum automation and centralized
control
•Data Field Modifier – for individual fields in a model
Change the UI behavior for a field
•Rich Data Definition
(e.g., change to checkbox, make read-
•Data Field Modifier
only, or create a link)
Create user-friendly labels for fields
•Data Column Modifier
•Rich Data Definition
26
Translate a set of internal values into
•Lookup Table
a meaningful names; for example,
•Rich Data Definition (create Lookup from RDD XML file)
display a Department Name instead of
•Apply a lookup table to pages with Data Field Modifier, Select, Text,
the Department Code
or Radio Button Group
WebSphere Portal Technical Conference U.S. 2007
Choosing Builders – Actions and Events
Task
Builder
Create a list of processing actions
•Action List
Assign a value to a variable
•Action List (select Assignment under “special” actions)
Use some Java code
•Linked Java Object
•Method
Add portlet-to-portlet communication
•Event Declaration and Event Handler (for simple events)
•Cooperative Portlet Source and Cooperative Porlet Target (for
Property Broker Events or Wired Portlets)
Add error handling to a portlet
•Error Handler
Add caching to improve performance
•Cache Control
•Service Operation builder has an option to add caching
27
WebSphere Portal Technical Conference U.S. 2007
Choosing Builders – Navigation and Page Actions
Task
Builder
Add action controls to a page
•Button
•Image Button
•Link
Run an action when a form is
•Form Submit Action
submitted
Run an action when a user clicks or
•HTML Event Action
types on a page
Put pages onto separate tabs with
•Page Tabs
navigation between tabs
Add paging controls to a portlet
•Use the paging options in View & Form builder
•Data Column Modifier with Paging Buttons or Paging Links
Link to another Portal page
28
•WebSphere Portal Link
WebSphere Portal Technical Conference U.S. 2007
Choosing Builders – Controlling Page Elements
29
Task
Builder
Show/hide an element based on a
condition
•Visibility Setter
Set an HTML attribute for a specified
page element
•HTML Attribute
Localize the text strings for a portlet
•Localized Resource
•Use Data Page Localizer or the Resource Bundle input of high-level
builders to use resources text
•Apply resourced text to other elements by referencing the
LocaleData variable
Insert one page in another
•Inserted Page
Display some read-only text on a page
•Text
Add some client-side JavaScript to a
page
•Client JavaScript™
WebSphere Portal Technical Conference U.S. 2007
Choosing Builders – Portal Integration Features
Task
Builder
Integrate ‘people awareness’ or Sametime
•People Awareness
chat capabilities
Link to another Portal page
•WebSphere Portal Link
Create a customizer for a business
•Use Portlet Customizer in a customizer model
user or administrator
•Specify your customizer as a “custom model” choice in the Portlet
Adapter builder of your portlet
Make a model available as a portlet
•Portlet Adapter
Retrieve user credentials from
•WPS Credential
Credential Vault, to support single
sign-on with external back end
applications
Wire your portlets together and
•Cooperative Portlet Source and Cooperative Porlet Target
communicate between them
30
WebSphere Portal Technical Conference U.S. 2007
Choosing Builders – Using Ajax Techniques
Task
Builder
Partial page refresh for a specific action in
your application
•Use a builder which causes an action back to the model such as:
•Form Submit Action Builder
•Link Builder
•Button Builder
•Set the “Post Action Behavior” to “Refresh specified page location after running
action”
31
Partial page refresh for a region of your
portlet
•Ajax Region Builder
Create a REST-style service that can be
called by client-side JavaScript
•Call the method
webAppAccess.getBackchannelActionURL(actionName, false)
to create a URL to any model action that returns XML
•That URL can be used by client code as a REST-style service
Use client side events
•Event Declaration Builder
•Client Event Handler Builder
Enable Drag and Drop on your page
•Dojo Drag Source
•Dojo Drop Target
Incremental client/server validation as the
user interacts with a form
•Dynamic Validation Builder
Other Ajax related builders to explore
•Ajax Type-Ahead, Dojo Enable, Dojo Inline Edit, Dojo Tooltip, Timed Action,
Highlighter, Global Ajax Enablement, XML/JavaScript Converter
WebSphere Portal Technical Conference U.S. 2007
Choosing Builders – Sharing Model Functionality
32
Task
Builder
Use some common builders in a number of
models
•Imported Model
Reuse the actions or methods of another
Model
•Linked Model
Include another model visually on a page,
with support for navigation in the
contained model
•Model Container
WebSphere Portal Technical Conference U.S. 2007
Best Practices Topics
Creating a portlet using a service architecture
Controlling and customizing the user interface
Choosing the right builder
Creating multi-language applications
Debugging techniques
Performance
Top 10 model development best practices
33
WebSphere Portal Technical Conference U.S. 2007
Creating Multi-Language Applications
Models can support multiple languages/locales through the use of:
Locale-specific resource bundles containing text or formatting information (standard
Java localization)
Locale-specific imported HTML layout pages
• This is only needed if layout pages contain locale-specific elements such as static
text
Language and country are controlled using a profile set that gets values from
HTTP request or Portal
34
WebSphere Portal Technical Conference U.S. 2007
Creating Multi-Language Models
Use a Localized Resource builder at start of each model
Profile-enable the Language and Country inputs
Select the com.bowstreet.profileset.SimpleLocaleValues profile set
Use the LanguageCode and CountryCode inputs of that profile set
This makes the correct country and language values automatically available to
other builders
Any builders that bring in a resource bundle
Any builders that import HTML layout pages, such as Imported Page
Localization sample: http://www.ibm.com/developerworks/websphere/
zones/portal/portletfactory/samples/misc.html
35
WebSphere Portal Technical Conference U.S. 2007
Best Practices Topics
Creating a portlet using a service architecture
Controlling and customizing the user interface
Choosing the right builder
Creating multi-language applications
Debugging techniques
Performance
Top 10 model development best practices
36
WebSphere Portal Technical Conference U.S. 2007
Debugging Techniques
Look for builder errors and warning messages in Designer
Disable builders to simplify a model and isolate the problem
Use System.out.println in Action List or Java code
Use Java-level debugging
Can single-step and set breakpoints in generated or other code
Uses the remote Java debugging capabilities of Eclipse
See product help for details of how to set this up
Run with system tracing to see exactly what actions get executed
Look at generated code/pages in WebApp Tree view
37
WebSphere Portal Technical Conference U.S. 2007
Best Practices Topics
Creating a portlet using a service architecture
Controlling and customizing the user interface
Choosing the right builder
Creating multi-language applications
Debugging techniques
Performance
Top 10 model development best practices
38
WebSphere Portal Technical Conference U.S. 2007
Some Common Causes of Performance Issues
Poor performance of back end systems or services
Memory use and session data
Minimize use of large XML variables and session data
Lack of caching
Regen Profiling for Edit mode in Portal
For Edit mode in Portal, try to use execution profiling (specified in Profile Set Entry).
This avoids generating many different WebApps based on personalization values
Underutilization of external systems
Using a Method / LJO to categorize, sort, compute, sum data from an external source,
instead of relying on the external data storage system to do the work for you.
Usually sources such as databases are much better equipped to handle such tasks.
39
WebSphere Portal Technical Conference U.S. 2007
Built-in Performance Diagnostic Tools
System Tracing
Usually the quickest way to find the cause of a performance problem
Easily used when running from Designer
First column shows time (ms) spent in an action without children; second column shows
action with children
Server stats
A log file that periodically captures statistics about usage and performance on a running
server
See the WEB-INF/logs/serverStats.txt file in deployed WAR
Captures numerous statistics, such as request actions and their latency and requests to
external systems
40
WebSphere Portal Technical Conference U.S. 2007
Best Practices Topics
Creating a portlet using a service architecture
Controlling and customizing the user interface
Choosing the right builder
Creating multi-language applications
Debugging techniques
Performance
Top 10 model development best practices
41
WebSphere Portal Technical Conference U.S. 2007
Top 10 Model Development Best Practices
1. Use a service provider/consumer model architecture
2. Use the highest-level builder available for the job
3. Keep model size under 50 builders
4. Don't write lots of code in Method builder - use Linked Java Object instead
5. Use Rich Data Definition to simplify and centralize field formatting, validation,
and UI
42
WebSphere Portal Technical Conference U.S. 2007
Top 10 Model Development Best Practices
6. Use Model Container to visually include another model on a page
7. Use the Comment builder to mark and describe sections of a model
8. Use Imported Model to include common elements needed by multiple models,
such as event declarations
9. Use Localized Resource to get automatic localization of resource bundles and
imported pages
10. Use “Run with system tracing” option to examine program flow and to look for
performance issues
43
WebSphere Portal Technical Conference U.S. 2007
Complementary Sessions
WebSphere Portlet Factory
D01 Lotus Software Development Tools Strategy for Portal Tools, RAD, WebSphere Portlet Factory
and Lotus Component Designer.
D06 Extending WebSphere Portlet Factory with Custom Builders
D08 Creating Rich Internet (AJAX) Applications with WebSphere Portlet Factory
D16 Hands-On Lab – Creating Portlets with WebSphere Portlet Factory
G03 Birds of a Feather – WebSphere Portlet Factory Best Practices
N05 Extending Portal based Composite Applications to Lotus Notes
Portal Accelerators built with Portlet Factory
N03 Speed Deployments with Powerful IBM Accelerators for WebSphere Portal
N09 Improve Decision Making and Productivity with Lotus ActiveInsight and Real-time Dashboards
N10 Introduction to Lotus Workforce Management
Customer case studies
S03 Zero to Portal in 14 Weeks – The Duke Medicine Patient Portal Experience
S05 Improving Customer Service: The TransMontaigne Business Portal solution
S08 Herman Miller's SupplyChain Portal Extreme Makeover
44
WebSphere Portal Technical Conference U.S. 2007
Additional Information and Resources
Portlet Factory Getting Started Guide
http://www-128.ibm.com/developerworks/websphere/library/techarticles/0701_wpf/0701_wpf.html
Portlet Factory Samples, Documentation, & Supported Platforms
http://www-128.ibm.com/developerworks/websphere/zones/portal/portletfactory/proddoc.html
Portal Factory Discussion Forums:
http://www-128.ibm.com/developerworks/forums/wsdd_forums.jsp
WebSphere Portal Business Solutions Catalog – now includes Portlet Factory builders!
http://catalog.lotus.com/wps/portal/portal
WebSphere Portal Product Information:
http://www-306.ibm.com/software/genservers/portal
WebSphere Portal Information Center Documentation:
http://www.ibm.com/developerworks/websphere/zones/portal/proddoc.html
45
WebSphere Portal Technical Conference U.S. 2007