Implementing AJAX Components in the JWL Framework
- Open ajaxExternalRequestExample.jsp in Source mode.
- In Pane "Palette", click "Enhanced Faces Components" (make sure you are in a Web perspective).
- 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 the <hx:ajaxExternalRequest> tag that was added in Step 7 and click Properties. Type "externalPage.faces" in the URL field.
- Run this page on the server (make sure you are running under Websphere 6.1 or higher).
- Test your code.
Figure 18: View of the "Palette" Pane
Click here for a larger image.
Figure 19: View of AJAX Properties
Click here for a larger image.
Figure 20: AjaxExternalRequest Properties
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
Reference
About the Author
Page 6 of 6
This article was originally published on April 17, 2008