Your SlideShare is downloading. ×
Using Ajax with IBM WebSphere Portlet Factory
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Using Ajax with IBM WebSphere Portlet Factory


Published on

1 Like
  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. Using Ajax with IBM WebSphere Portlet Factory 5/14/2007 © Copyright International Business Machines Corporation 2007. All rights reserved. This article with the accompanying sample shows you how to use the Ajax-related features of IBM® WebSphere® Portlet Factory Version 6.0.1 (hereafter called Portlet Factory.) This article is one in a collection of articles and samples that illustrate techniques for developing with Portlet Factory. See the Portlet Factory Product Documentation page for a complete list of these. For an introduction to developing with Portlet Factory, you may want look at the introductory tutorials that are available both in the product help and on the web site. Prerequisites You should have a basic familiarity with Portlet Factory and be able to create and run Portlet Factory models. In addition, a good understanding of HTML and JavaScript coding would be helpful. Ajax in Portlet Factory What do we mean by “Ajax” here? The term “Ajax” has a number of different meanings: • The strict definition: Asynchronous JavaScript and XML • A looser interpretation describing the use of partial-page refresh to increase interactivity • Any “fancy” web UI, especially including DOM scripting / dynamic HTML Portlet Factory’s use of Ajax is not limited to any of these three definitions, but the support described here clusters around the second of these. Note that this sample set and documentation do not cover the related Dojo feature set, which allows you to use the Dojo toolkit to create rich internet applications, including the use of Ajax technologies. The Dojo feature set is described in a separate set of samples and documentation. How Ajax Works in Portlet Factory In a traditional web application, the user interacts with the page and then triggers an action; this action causes the browser to transmit data to the server, which processes the request, generates HTML for the next page, and sends this markup back to the browser, replacing the previous page display. In an Ajax-based application, user actions in the browser cause JavaScript to execute, which communicates directly with the server; the server replies to this direct request with either data (text, JSON, XML, etc.) or an HTML fragment. JavaScript in the page interprets this reply and uses it to update one or more page areas. (See Figure 1 and 2) -1-
  • 2. Figure 1. Traditional Web Application Figure 2. Ajax-Based Web Application -2-
  • 3. Ajax in the Portal In a portal environment, Ajax-based partial-page refresh is especially appealing, since a traditional request from one portlet will trigger the portal to generate HTML not just for the portlet in question, but for the portal’s surrounding content and for all of the other portlets on the page. Limiting page refreshes to specific areas instead of the entire portal page can dramatically increase percieved responsiveness. In addition, the reduced amount of data transferred per request can improve overall system throughput in some cases. Portal-based Ajax does have some challenges, most notably due to the need to introduce a servlet into the picture. A servlet is required to serve up HTML fragments and raw data from a particular portlet. Portal URLs, in contrast, cause markup for the whole portal page to be returned. Figure 3. Portal and Ajax Servlet Servlet vs Portal The fact that the portal is bypassed for Ajax-style data access is important to note. The main impact of this design is that actions that run via Ajax access are run outside the portal proper, and therefore cannot make portal API calls. When designing your Ajax- -3-
  • 4. enabled Portlet Factory application, it is crucial to understand what portal API access you will require, and segregate these so that they are executed in portal context. An important Portal API feature that cannot be used in servlet-based requests is the creation of Portal URLs. A significant implication of this is that HTML loaded by partial- page refresh cannot contain URLs that address the Portal. This means that “normal” actions (i.e., those that do full-page reloads) cannot be directly encoded in HTML loaded via partial-page refresh. A related impact is that features like triggering Cooperative Cortlet / Property Broker events cannot be done from partial-page refreshed HTML. This can usually be managed by doing partial-page refresh on small areas in your portlet, e.g., updating individual pieces of text instead of reloading entire pages. Another approach to avoid this problem is to use partial-page refresh for all actions inside areas that are themselves loaded with partial-page refresh. The Ajax Region builder automates this design pattern, arranging for all actions in a specified refresh region to also use partial- page refresh; you can also use lower-level techniques to achieve this. Ajax-Related Builders There are three main categories of Ajax-related Portlet Factory builders: • Page action builders (e.g., Button, Link, HTML Event Action) implement optional fine-grained partial-page refresh, allowing the user to select a region to be refreshed after executing the associated action. • The Ajax Region builder operates at a higher level, arranging for partial-page refresh to be used on all actions in a specified region. • Builders that use Ajax to do their job: this includes the Ajax Type-Ahead and Dynamic Validation builders. Several of the builders in the optional Dojo Extension feature set also use Ajax; samples for these are provided separately. All three types of builders are demonstrated in the associated set of samples. Ajax Region vs Action Builder Partial-Page Refresh The Ajax Region builder and the page action builders both provide access to partial-page refresh features, but there are a number of considerations for when to use each: Figure 4. Partial-Page Refresh Builders Comparison Ajax Region Page Action Builders Efficiency medium to low high Flexibility low high Size of area to be larger good on smaller areas; can refreshed handle multiple regions Embedded actions automatically converted to need manual handling use partial-page refresh -4-
  • 5. Embedded scripts executed not executed Can contain the other? yes no Technology hidden IFRAME XmlHttpRequest Feedback? “click” in IE no click Back Button if different URLs no Sample description Here are some of the techniques illustrated in the sample code. Fine-grained partial-page refresh. The page action builders all have a consistent way to cause a specified region to be refreshed after the builder’s action is executed; the samples in this group demonstrate the use of this feature. Sample models showing this technique: BasicPartialPageRefresh, Calculator_RefreshLocation, Calculator_ReplaceLocation Client-side events. In 6.0.1, Portlet Factory events can now be delivered either on the server or the client or both. The new Client Event Handler builder allows you to catch client-delivered events and run an action and/or refresh a page location. Sample models showing this technique: Calculator_ClientEvent, ClientEvent_Arguments JSON. The JavaScript Object Notation is a data interchange format commonly used in Ajax applications. Portlet Factory’s XML / JavaScript Converter builder can simplify the generation of JSON based on XML data; this JSON data can be consumed by existing or custom UI elements on the client. Sample models showing this technique: Orders_SingleJSON, Calculator_RunScript Ajax Region. The Ajax Region Builder wraps a model, a page or a page location, causing all actions in the specified area to use partial-page refresh. Sample models showing this technique: WrappedWithAjaxRegion, Calculator_AjaxRegion Timed Action. The Timed Action builder allows periodic execution of a specified action; combined with its built-in fine-grained partial-page refresh capabilities, you can use this builder to update a specific page area with new data on a regular basis. -5-
  • 6. Sample model showing this technique: TimedAction_DynamicChart Dynamic Validation. This builder enables incremental client/server validation, using normal Portlet Factory server-side code to validate data as user moves around form, immediately showing failues. The builder will allow any HTML event as the trigger for validation; the "onchange", "onblur" and "onkeyup" are suggested. Sample model showing this technique: DynamicValidation Ajax Type-Ahead. This builder automates the creation of simple dynamic suggested choice lists, which pop up and modify their contents as the user enters text into an input field, suggesting alternatives based on the currently-typed input value. Sample models showing this technique: AjaxTypeahead_Orders, AjaxTypeahead_PI Standalone Access. Underlying all of the Ajax techniques in Portlet Factory is the ability to execute an action ouside the containing Portal context, fetching only the data retrieved by this action, not the surrounding portal markup and contents of other portlets. This ability can be used directly especially if you are writing your own Ajax-enabled UI components, or using client frameworks that can access their data directly from the server. Sample models showing this technique: CalculatedImage, Orders_PopupDetails Table 1. Sample package contents Filename and location Description Basic Partial-Page Refresh WEB-INF/models/samples/ajax/ Shows a button that causes a refresh of part BasicPartialPageRefresh.model of a page. WEB-INF/models/samples/ajax/ Simple calculator that uses HTML Event Calculator_RefreshLocation.model Action to refresh calculation results as you type. WEB-INF/models/samples/ajax/ Similar to above, but uses an action that Calculator_ReplaceLocation.model returns text data which is inserted into the page. Client Events WEB-INF/models/samples/ajax/ Example of using client-delivered events to Calculator_ClientEvent.model asynchronously refresh multiple page locations. WEB-INF/models/samples/ajax/ Shows the use of an event which takes ClientEvent_Arguments.model arguments, including the use of event arguments in a client JavaScript event -6-
  • 7. handler. JSON WEB-INF/models/samples/ajax/ Example of using XML / JavaScript Orders_SingleJSON.model converter to populate a script tag with data displayed by the model. WEB-INF/models/samples/ajax/ Shows HTML Event Action triggering the Calculator_RunScript.model loading of a script which updates page data. Ajax Region WEB-INF/models/samples/ajax/ Imports the Orders Service Consumer sample WrappedWithAjaxRegion.model model, and uses Ajax Region to change it to use partial-page refresh on all pages. WEB-INF/models/samples/ajax/ Calculator variation which uses Ajax Region Calculator_AjaxRegion.model instead of fine-grained partial-page refresh. Timed Action WEB-INF/models/samples/ajax/ Displays a table and chart which update TimedAction_DynamicChart.model continuously via partial-page refresh. Dynamic Validation WEB-INF/models/samples/ajax/ Modifies the Rich Data Definition sample to DynamicValidation.model add dynamic client/server validation. WEB-INF/models/samples/ajax/ Displays choices from a pre-computed list. AjaxTypeahead_Orders.model WEB-INF/models/samples/ajax/ Example of using manual filtering of the list AjaxTypeahead_PI.model of choices. Standalone Data Access WEB-INF/models/samples/ajax/ Shows a model action that generates CalculatedImage.model computed image data, demonstrating use of a standalone action URL generated by Java code. WEB-INF/models/samples/ajax/ Example of a pop-up window launched by a Orders_PopupDetails.model builder. Supporting Models WEB-INF/models/samples/ajax/base Basic non-Ajax calculator; imported by all Calculator.model the calculator samples to provide basic functionality. WEB-INF/models/samples/ajax/base Used as a base by the Timed Action sample. SimpleChart.model WEB-INF/models/samples/ajax/data Service implementation that does simple CalculatorServiceProvider.model calculations; used by all the calculator-based samples Supporting Java WEB-INF/work/source/ Implementation class for calculator service com/bowstreet/samples/ajax/data/ model. -7-
  • 8. Figure 5. Client Event sample model running in a web browser Figure 6. Timed Action sample model running in a web browser -8-
  • 9. Figure 7. Calculated image sample model running in a web browser Instructions for running the samples To run the sample application: 1. Download the sample ZIP file and import it into a project using the File, Import, WebSphere Portlet Factory Archive command. 2. Add the Tutorials and Samples / Applications feature set to the project, if not already present. 3. Open any of the samples, and examine/run them. -9-
  • 10. Resources WebSphere Portlet Factory product documentation WebSphere Portlet Factory support developerWorks forums Trademarks • DB2, IBM, Lotus, Tivoli, Rational, and WebSphere are trademarks or registered trademarks of IBM Corporation in the United States, other countries, or both. • Windows and Windows NT are registered trademarks of Microsoft Corporation in the United States, other countries, or both. • Java and all Java-based trademarks and logos are trademarks or registered trademarks of Sun Microsystems, Inc. in the United States, other countries, or both. • Other company, product, and service names may be trademarks or service marks of others. - 10 -