1. Creating Rich Internet (AJAX) Applications with WebSphere Portlet Factory

2. Agenda Introduction to WebSphere Portlet Factory Context of Web 2.0
WebSphere Portlet Factory and AJAX Overview
AJAX features deep dive
Demo of Rich Internet Application
Product Roadmap
Summary & Q&A
Mention that planned availability for Lotus Quickr is late 2Q. Therefore, some of the details in this presentation might change before then.

3. Introduction to WebSphere Portlet Factory Rapid Portlet Creation and Customization Tooling
IBM WebSphere Portlet Factory simplifies & accelerates the development, deployment, maintenance, and reuse of custom portlets and applications.
Plug-in to Eclipse & Rational Application Developer
Multi-page custom portlets/applications without coding
Integration capabilities (SAP, Domino, PeopleSoft, Siebel, Web Services, Databases, Portal Content Repository)
Service-oriented development
Support for Portal features such as portlet communication, business user configuration, auto-deploy, single sign-on
“Dynamic profiling” capability, to create multiple variations from a single set of source portlets
There are numerous features of Portlet Factory specifically intended to ensure the unsurpassed competitive differentiation of WebSphere Portal, as well as contributing to increased customer success and satisfaction.
With its tight WebSphere Portal integration and automation via Builders it dramatically simplifies the development of complex portlets – including multi-page transactional composite portlets via integrations to existing applications and systems like SAP and Domino, among others.
In addition, Portlet Factory’s patented Profiling technology generates multiple portlet variations from one code base. This feature enables developers to quickly vary portlets across any number of multiple user dimensions (roles, geography, brands) and greatly simplifies code maintenance, by automatically propagating changes. Finally, developers can target multiple computing environments (portal, web, rich-client, phone, PDA) from a single application, which means developers can repurpose applications with minimal development effort.
It is also important to understand that Portlet Factory extensible and not limited to the capabilities provided out of the box. For example, J2EE developers can capture an organization’s proprietary APIs as a custom function that they can then add to the tool’s palette so other developers may use it. In doing this, they can ensure all developers are accessing and using the API the same way, enforcing consistent design patterns and architecture.

4. Introduction to WebSphere Portlet Factory Key Concepts
Profile
A set of parameters that vary Builder inputs to dynamically generate unique versions of the portlet
Builder
An adaptive, reusable component that generates Java, XML and JSP for specific portlet functionality
Builder: Builders offer easy-to-use, wizard-like user interfaces, which make it both fast and easy to develop portlets. The Builder actually generates all of the application code including Java, XML Schemas, Variables, etc based on the inputs given. Builders are also used throughout the entire development process allowing developers to go back and change a Builder’s input values and have the entire portlet application update instantly.
Profile: A profile contains a set of parameters that vary the way an application behaves. A profile feeds values into Builders based on the user’s identity or other contextual information such as language, geography or group membership. Then, once the profile is automatically applied, the application regenerates itself to adapt to that specific user which may include changing the backend datasource, the underlying business logic, the amount of data accessed or even the presentation.
Model: A Model is simply the container that holds the ordered list of Builder calls. Typically, when a developer wants to create a new portlet, he will create a new Model and then add the appropriate Builders to the Model.
Model
A container of Builders

5. Introduction to WebSphere Portlet Factory Quick Demo

6. Context of Web 2.0 What defines a Rich Internet Application (RIA)?
Definition by Wikipedia, 30th July 2007
“Rich Internet applications (RIA) are Web applications that have the features and functionality of traditional desktop applications.
RIAs typically transfer the processing necessary for the user interface to the Web client but keep the bulk of the data (i.e., maintaining the state of the program, the data etc.) back on the application server.”

7. Context of Web 2.0 Technologies and Concepts
We do cover some techniques of Web 2.0
Asynchronous JavaScript and XML (AJAX)
The Dojo Toolkit
Consumption of Services via Representational State Transfer (REST) methods
We‘ll also cover
Usage of AJAX, Dojo, and REST techniques in WebSphere Portlet Factory
Practical tips when building RIAs with WebSphere Portlet Factory
We do not cover social aspects of Web 2.0, e.g.
Folksonomy
Mashups
Blogging
Social Bookmarking

8. Context of Web 2.0 What is the value-add?
Benefits of using Web 2.0 techniques in RIAs
Richer application UI
More responsive applications
Performance Implications
Client/Server balance
Asynchronous communication
Network and server utilization
User expectations and requirements will drive quasi-standard
WebSphere Portlet Factory shields users from technical deep-dive understanding of all Web 2.0 concepts by incorporating Web 2.0 functionality in proven way (via builders)
Benefits
Because RIAs employ a client engine to interact with the user, they are:
* Richer.
They can offer user-interface behaviors not obtainable using only the HTML widgets available to standard browser-based Web applications. This richer functionality may include anything that can be implemented in the technology being used on the client side, including drag and drop, using a slider to change data, calculations performed only by the client and which do not need to be sent back to the server, for example, a mortgage calculator.
* More responsive.
The interface behaviors are typically much more responsive than those of a standard Web browser that must always interact with a remote server.
The most sophisticated examples of RIAs exhibit a look and feel approaching that of a desktop environment. Using a client engine can also produce other performance benefits:
* Client/Server balance.
The demand for client and server computing resources is better balanced, so that the Web server need not be the workhorse that it is with a traditional Web application. This frees server resources, allowing the same server hardware to handle more client sessions concurrently.
* Asynchronous communication. The client engine can interact with the server asynchronously -- that is, without waiting for the user to perform an interface action like clicking on a button or
link. This option allows RIA designers to move data between the client and the server without making the user wait. Perhaps the most common application of this is prefetching, in which an application
anticipates a future need for certain data, and downloads it to the client before the user requests it, thereby speeding up a subsequent response. Google Maps uses this technique to move adjacent map segments to the client before the user scrolls their view.
* Network efficiency.
The network traffic may also be significantly reduced because an application-specific client engine can be more intelligent than a standard Web browser when deciding what data needs to be exchanged with servers. This can speed up individual requests or responses because less data is being transferred for each interaction, and overall network load is reduced. However, use of asynchronous prefetching techniques can neutralize or even reverse this potential benefit. Because the code cannot anticipate exactly what every user will do next, it is common for such techniques to download extra data, not all of which is actually needed, to many or all clients.
Of course, as a speaker be prepared and informed about Shortcomings/Restrictions of RIAs.
Shortcomings and restrictions associated with RIAs are:
* Sandbox
Because RIAs run within a sandbox, they have restricted access to system resources. If assumptions about access to resources are incorrect, RIAs may fail to operate correctly.
* Disabled scripting
JavaScript or another scripting language is often required. If the user has disabled active scripting in their browser, the RIA may not function properly, if at all.
* Client processing speed
To achieve platform independence, some RIAs use client-side scripts written in interpreted languages such as JavaScript, with a consequential loss of performance. This is not an issue with compiled client languages such as Java, where performance is comparable to that of traditional compiled languages, or with Flash movies, in which the bulk of the operations are performed by the native code of the Flash player.
* Script download time
Although it does not have to be installed, the additional client-side intelligence (or client engine) of RIA applications needs to be delivered by the server to the client. While much of this is usually automatically cached it needs to be transferred at least once. Depending on the size and type of delivery, script download time may be unpleasantly long. RIA developers can lessen the impact of this delay by compressing
the scripts, and by staging their delivery over multiple pages of an application.
* Loss of integrity
If the application-base is X/HTML, conflicts arise between the goal of an application (which naturally wants to be in control of its presentation and behaviour) and the goals of X/HTML (which naturally wants to give away control). The DOM interface for X/HTML makes it possible to create RIAs, but by doing so makes it impossible to guarantee correct function. Because an RIA client can modify the RIA's basic structure
and override presentation and behaviour, it can cause an irrecoverable client failure or crash. Eventually, this problem could be solved by new client-side mechanisms that granted an RIA client more limited permission to modify only those resources within the scope of its application. (Standard software running natively does not have this problem because by definition a program automatically possesses all rights to all its allocated resources).
* Loss of visibility to search engines
Search engines may not be able to index the text content of the application.
* Dependence on an Internet connection
While the ideal network-enabled replacement for a desktop application would allow users to be "occasionally connected" wandering in and out of hot-spots or from office to office, today (in 2007) the typical RIA requires network connectivity.

9. Portlet Factory and AJAX Overview Definitions of “AJAX”
AJAX stands for Asynchronous JavaScript And XML
AJAX is not a new programming language, but a new way to use existing standards and mechanisms
With AJAX you can create better, faster, and more user-friendly web applications
Looser interpretations
Using partial-page refresh to increase interactivity
Any “fancy” web UI, especially including DOM scripting / dynamic HTML

10. Portlet Factory and AJAX Overview Traditional web application
Client
User interaction with page
triggers HTTP request…
User interaction…
Client refreshes whole page
based on new HTML
HTTP request
HTTP response
Application Server
Request processed and HTML page generated
Time

11. Portlet Factory and AJAX Overview AJAX-based application
Client
User interaction with page
triggers AJAX action…
User interaction…
JavaScript invoked to
handle request
Client refreshes part of a page
based on new XML data or HTML
JavaScript
User actions in the browser cause JavaScript to execute
Script communicates directly with the server
XmlHttpRequest or hidden IFRAME
Server replies
Data: text, JSON, XML, etc.
HTML fragment
JavaScript in the page interprets this reply and uses it to update one or more page areas
Benefits
Faster response time
No “flicker”
Potentially higher throughput
Why is it popular?
Google helped popularize, and legitimize it in GMail
Increase Usability of Web Applications
Rich Internet Applications without Flash
Save Bandwidth
Download only data you need
Faster interfaces (sometimes)
Why is it bad?
Breaks back button support
URL's don't change as state changes
Cross Browser Issues can be a pain
JavaScript may tax older machines CPU
Can't access domains other than the calling domain
May be disabled (for security reasons) or not availiable on some
HTTP request
HTTP response
Application Server
Request processed and XML data or HTML page fragment generated
Time

12. Portlet Factory and AJAX Overview Goals of AJAX support in Portlet Factory
Enable creation of more interactive applications
Partial-page refresh
Rich widgets
Use Portlet Factory’s automation to make complex AJAX techniques simple
Builders can generate the necessary client-side and server-side elements
Work with existing Portlet Factory Builders and functionality
Leverage existing server platforms
WebSphere Portal (5.1, 6.0)
WebSphere Application Server (5.1, 6.0, 6.1)
Tomcat (for development)

13. Portlet Factory and AJAX Overview Web 2.0 and AJAX related features
Partial-page refresh, within or across portlets
Drag/drop
In-line editing
Tooltips
Type-ahead
Timed action
Hover highlighting
JSON (JavaScript Object Notation)
REST service support

14. Portlet Factory and AJAX Deep Dive Partial-page refresh
Partial-page refresh using regions
AJAX Region Builder causes all actions within a specified area to refresh only within that area (can also be used for entire page or entire model)
Developers can also specify which part of the page to refresh using the post-action behavior for Links, Buttons, HTML Event Actions, and Image Buttons.
Partial-page refresh using client events
Client Event support enables cross-portlet client-side interaction
Enables cross-portlet communication with partial-page refresh
Allows multiple locations to be updated from one event
Demo (using Employee List/Details model):
AJAX Region (on entire list/details)
Partial refresh in Link Builder (updates details area only)
Partial refresh in HTML Event, for update when moving mouse

15. Portlet Factory and AJAX Deep Dive Dojo Extension Features
Dojo Toolkit
Open source cross-browser JavaScript toolkit
Has industry backing, and is a strategic technology for IBM
Designed to ease the rapid development of JavaScript or AJAX-based applications
Includes:
UI Widgets
Drag and drop support
Asynchronous server communication
Client-side data storage
…and more
The Dojo Extension enables the following:
Drag and drop within and across portlets
In-line editing capabilities
Tooltips that a popup a text box or an entire page on mouse over
Creation of custom Dojo-based Builders
Includes Dojo Toolkit 0.4.1

16. Portlet Factory and AJAX Deep Dive Additional AJAX Behaviors
Type-Ahead
AJAX Type-Ahead Builder can be applied to any text input field
Timed Action
Enable periodic refresh. For example, every 30 seconds refresh only the chart displayed in the portlet
Hover Highlighting
Enables highlighting or color change of page elements on mouse-over events
These do not use Dojo –
Type-ahead
AJAX Type-Ahead Builder can be applied to any text input field
The list of choices for the drop-down can come from any XML in the model or from a Lookup Table

17. Portlet Factory and AJAX Deep Dive REST Services
Creating Rest Services
Easily create REST services that can be called by any client or server application
Any Portlet Factory method, such as a service that accesses back-end data from an integration builder, can be exposed as a REST service
Consuming Rest Services
For calling REST services, a REST Service Call Builder sample is available today
Supports RSS and ATOM
Complete Get, Put, Post and Delete Support coming in next release
Use Model Action Access Builder to create Rest Services.

18. Portlet Factory and AJAX Deep Dive Using JSON
JavaScript Object Notation
Data interchange format commonly used in AJAX applications
Can be directly evaluated as a JavaScript object
Convenient format for JavaScript code – no need to parse XML, etc.
XML / JavaScript Converter – generates JSON from any XML data in application

19. Demo of Rich Internet Application

20. Summing up Rich Internet Application (1)
Invoke functions when needed
Use type-ahead
Swap out stand-alone components
(4 models implement this portlet)

21. Summing up Rich Internet Application (2)
Invoke components via
hover-over in user‘s context

22. Summing up Rich Internet Application (3)
Highlighting / hover-over
Highlighting enabled
In-line editing enabled
Client-side drag&drop
for cart update
Client-side processing

23. Product Roadmap Portlet Factory 6.x Release Themes
Portlet Factory 6.x Themes
Ongoing Product Themes
Rich Internet Applications
Generate richer web applications using AJAX and other Web 2.0 techniques
Developer Success
Update Designer to enable visual editing, builder selection, navigation and debugging
WebSphere Portal Integration
Support new portal features and enhance existing
System Integration
Upgrade existing integrations to meet emerging requirements
Support additional data and content providers, solutions, and products
Platform Support
Keep current with existing software platforms

24. Product Roadmap WebSphere Portlet Factory 6.0.1 Features – March 2007
Enhanced Support for RIA (AJAX)
Drag and Drop
Partial-Page Refresh
In-line Editing
ToolTips
New Integration Builders
Portal Content Repository
Workplace Forms
Developer Enhancements
Re-factoring Support in Designer
Updated Project Creation & Deploy
Additional Samples and Tutorials
Posted on product documentation page (Oracle EBS, Process Server)
Updated Platform Support
RAD 7, Portal 6.0.1, and Portal Express

25. Product Roadmap Portlet Factory 6.0.2
Support creating Applications for Lotus Expeditor and Lotus Notes 8
One code-base deploys easily to a rich client, portal, or application server!
Easier “Out-of-Box” Experience
Include WAS CE as a simple development test server
Up and running in 15 minutes or less!

26. Product Roadmap Portlet Factory 6.0.2
New REST Service Call Builder that supports Read and Write from both ATOM and RSS feeds
Easily access services from Lotus Quickr and Lotus Connections to create custom portlets
Lotus Connections Portlet
that enables viewing and searching for bookmarks

27. Product Roadmap The Portal Solutions Catalog
Now shipping builders on the Portal Solutions Catalog
Portlet Factory and Dashboard Framework Builders
Plans to ship the following builders on the catalog
Information Server
Process Server
FileNet (Process and Content)
Enhanced Excel (Dashboard Framework builder)
…and more
Portlets Created with Portlet Factory now posted
SAP Portlets
Outlook Portlet
Plans to create custom builders to make these easy to customize & extend

28. Portlet Catalog Information Service Call Builder - Available Soon
New Portlet Factory builder
Builder allows for browsing information services and their metadata

29. Summary
Portlet Factory makes it easy to incorporate RIA concepts into a portal application
Rapidly create AJAX portlets that support features such as drag & drop across portlets, in-line editing, partial-page refresh
Leverage existing investments – Seamlessly deploy rich AJAX portlets on WebSphere Portal and WebSphere Application Server, versions 5.1 and above
Reusability by model-driven development possible
Versatility of WebSphere Portlet Factory and Lotus Portfolio
Create applications that deploy to Websphere Portal, WebSphere Application Server, Lotus Expeditor, andLotus Notes
Create custom portlets that integrate existing Lotus and IBM Content
Lotus Connections and Lotus Quickr Services
Lotus Web Content Management and Portal Document Repository
IBM Information Server and Process Server
...more to come
Developing this way is pure fun!

30. Complementary Sessions
WebSphere Portlet Factory
D01 Lotus Software Development Tools Strategy for Portal Tools, RAD, WebSphere Portlet Factory and Lotus Component Designer.
D05 Best Practices for Creating Portlets with WebSphere Portlet Factory
D06 Extending WebSphere Portlet Factory with Custom Builders
D16 Hands-On Lab: Creating Portlets with WebSphere Portlet Factory
G03 Birds of a Feather – WebSphere Portlet Factory Best Practices
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
Lotus Notes, Connections, and Expeditor
D10 Developing Offline Applications for WebSphere Portal with Lotus Expeditor – Technical Deep Dive
N04 IBM WebSphere Portal, Web 2.0, Collaboration and Social Networking
N05 Extending Portal based Composite Applications to Lotus Notes
N13 Building Rich Client support for WebSphere Portal with Lotus Expeditor
AJAX, REST, Web 2.0
N07 Web 2.0, AJAX and REST for WebSphere Portal Version 6.0.2

31. Additional Information and Resources
New -- Portlet Factory Zone on Developer Works
WebSphere Portal Business Solutions Catalog now includes Portlet Factory builders!
WebSphere Portal Product Information:
WebSphere Portal Information Center Documentation:

32. Your Q&As