1. WebSphere Portal Technical Conference U.S. 2007 Creating Rich Internet (AJAX) Applications with WebSphere Portlet Factory

2. WebSphere Portal Technical Conference U.S. 2007 2 Agenda WebSphere Portlet Factory and AJAX Overview AJAX features deep dive Demo of Rich Internet Application Summary & Q&A

3. WebSphere Portal Technical Conference U.S. 2007 3 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

4. WebSphere Portal Technical Conference U.S. 2007 4 Portlet Factory and AJAX Overview Traditional web application Client Application Server User interaction with page triggers HTTP request… Request processed and HTML page generated Time Client refreshes whole page based on new HTML HTTP request HTTP response User interaction…

5. WebSphere Portal Technical Conference U.S. 2007 5 Portlet Factory and AJAX Overview AJAX-based application Client Application Server User interaction with page triggers AJAX action… Request processed and XML data or HTML page fragment generated Time Client refreshes part of a page based on new XML data or HTML JavaScript JavaScript invoked to handle request HTTP request HTTP response User interaction…

6. WebSphere Portal Technical Conference U.S. 2007 6 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)

7. WebSphere Portal Technical Conference U.S. 2007 7 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

8. WebSphere Portal Technical Conference U.S. 2007 8 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

9. WebSphere Portal Technical Conference U.S. 2007 9 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

10. WebSphere Portal Technical Conference U.S. 2007 10 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

11. WebSphere Portal Technical Conference U.S. 2007 11 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

12. WebSphere Portal Technical Conference U.S. 2007 12 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

13. WebSphere Portal Technical Conference U.S. 2007 13 Demo of Rich Internet Application Demo

14. WebSphere Portal Technical Conference U.S. 2007 14 Summing up Rich Internet Application (1) Swap out stand-alone components (4 models implement this portlet) Use type-ahead Invoke functions when needed

15. WebSphere Portal Technical Conference U.S. 2007 15 Summing up Rich Internet Application (2) Invoke components via hover-over in user‘s context

16. WebSphere Portal Technical Conference U.S. 2007 16 Summing up Rich Internet Application (3) Highlighting enabled In-line editing enabled Client-side processing Highlighting / hover-over Client-side drag&drop for cart update

17. WebSphere Portal Technical Conference U.S. 2007 17 Portlet Catalog Information Service Call Builder - Available Soon Builder allows for browsing information services and their metadata New Portlet Factory builder

18. WebSphere Portal Technical Conference U.S. 2007 18 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!

19. WebSphere Portal Technical Conference U.S. 2007 19 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

20. WebSphere Portal Technical Conference U.S. 2007 20 Additional Information and Resources New -- Portlet Factory Zone on Developer Works http://www.ibm.com/developerworks/websphere/zones/portal/portletfactory/ 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

21. WebSphere Portal Technical Conference U.S. 2007 21 Your Q&As