Implementing AJAX Components in the JWL Framework

April 17, 2008
By Aleksey Shevchenko

Send Email »
More Articles »

Open ajaxExternalRequestExample.jsp in Source mode.
In Pane "Palette", click "Enhanced Faces Components" (make sure you are in a Web perspective).

Figure 18: View of the "Palette" Pane

Drag and drop the Panel Group component from the palette to the page.
Drag and drop the Text Output component from the palette to the panel that you added in Step 5. Set the value of the component to "External Page will be loaded here."
Select the Panel Group and click Properties → AJAX. Click on "Allow Ajax Updates" and set Ajax request to "External".

Click here for a larger image.

Figure 19: View of AJAX Properties

Click the <hx:ajaxExternalRequest> tag that was added in Step 7 and click Properties. Type "externalPage.faces" in the URL field.

Click here for a larger image.

Figure 20: AjaxExternalRequest Properties

Run this page on the server (make sure you are running under Websphere 6.1 or higher).
Test your code.

Figure 21: AjaxExternalRequest Example Output

Listing 8 is the full source code of what you have just gone through. You can find full source code as an attachment at the end of this article.

Listing 8: AjaxExternalRequest Full Source Code

<f:view>
   <body>
   <hx:scriptCollector id="scriptCollector1">
      <h:form id="form1" styleClass="form">

      <hx:commandExButton type="submit"
                          value="Submit"
                          id="button1"
                          styleClass="commandExButton">
         <hx:behavior event="onclick"
                      behaviorAction="get;stop"
                      targetAction="group1">
         </hx:behavior>
      </hx:commandExButton>
      <h:panelGroup id="group1" styleClass="panelGroup">
         <h:outputText id="text2"
                       styleClass="outputText"
                       value="External Page will be loaded here!">
         </h:outputText>
      </h:panelGroup>
         <hx:ajaxExternalRequest id="ajaxExternalRequest1"
                                 target="group1"
                                 href="externalPage.faces"
                                 source="group1">
         </hx:ajaxExternalRequest>
      </h:form>
   </hx:scriptCollector>
   </body>
</f:view>

Download Source Code Here

JWL.war

Reference

IBM: http://publib.boulder.ibm.com/infocenter/iadthelp/v7r0/index.jsp?topic=/ com.ibm.etools.jsf.doc/topics/rjsfcompAjax.html

About the Author

Aleksey Shevchenko has been working with object-oriented languages for eight years. For the past four years, he has served as a technical lead and a project manager. Aleksey has been implementing Enterprise IT solutions for Wall Street and the manufacturing and publishing industries.

Page 6 of 6

IT Solutions Builder TOP IT RESOURCES TO MOVE YOUR BUSINESS FORWARD

Which topic are you interested in?

Mobile

Security

Networks/IoT

Cloud

Data Storage

Applications

Development

IT Management

Other

What is your company size?

What is your job title?

What is your job function?

Searching our resource database to find your matches...

0 Comments (click to add your comment)

Comment and Contribute

Enterprise Development Update

Don't miss an article. Subscribe to our newsletter below.

By submitting your information, you agree that developer.com may send you developer offers via email, phone and text message, as well as email offers about other products and services that developer believes may be of interest to you. developer will process your information in accordance with the Quinstreet Privacy Policy.