Edit Note: This article describes the details of the underlying AJAX programming in WebLogic Portal 8.1. This is not related to the current beta version of the WebLogic Portal 9.2.
SummaryAjax is an asynchronous programming paradigm that enables developers to create highly interactive Web sites that reduce server load while increasing user efficiency. Ajax combines Web services, JavaScript, and Dynamic HTML programming techniques to create a rich client experience and increase the availability of local applications. The first article in this series describes these concepts and the architectural considerations involved in implementing an AJAX solution in the BEA WebLogic portal.
This article, the last of the series, provides a complex set of sample portlets, starting with some basic lookup portlets, to a high-level example using a dynamic table as a front-end database table, and ending with an interesting example, the last example of which is not using <object > or <iframe> label to embed some pages dynamically into another page.
All examples provide complete source code and include installation scripts and documentation.
About the sample PortletThis article gives a variety of AJAX-enabled Portlets, which are explained on a row-by-line basis for their source code (as found in the downloads section of this article). This article also includes a reusable Java servlet source code that can be used to reduce the level of security restrictions inherent in Mozilla Firefox and Microsoft Internet Explorer (IE). This servlet implements the proxy design pattern described in part 1th .
One thing to point out is that I use the simplest AJAX library in my code, because I want to explain what's going on in the whole process. There are also a large number of available libraries that greatly reduce the amount of code that needs to be written. I used the Sarissa library in some code, primarily to handle some cross-browser issues. See Ajax Introduction For more information about AJAX libraries, such as DWR. When designing and building your own production applications, I do not recommend that you use the underlying artifacts given here. The Ajax libraries used in this article deal well with cross-browser issues and Ajax bindings (wiring).
The remainder of this article describes each of the sample portlets individually. We encourage you to explore the source code to get a deeper understanding of how these portlets are implemented.
Zip Code LookupThe ZIP Code lookup Portlet describes two methods that can be used to invoke a remote Web service (for example, a Web service that is on a different computer than a Web server). These two methods (direct and proxy) are invoked by using two directly named Button Direct and proxy. The direct method invokes the Web service directly from the Web browser, which typically results in a violation of security rules in Internet Explorer and is not available in Firefox at all. The proxy method uses the Java proxy servlet that will be described later in this article.
Figure 1: The zip Code Lookup portlet that invokes the remote Web service
Note the input bar next to the ZIP code label. We get the input value in this column and pass it to the backend Web service. When we get information about cities and states from this Web service, we put this information in the appropriate position on the right side of the city and state labels.
To be able to reference elements in JavaScript code, we need to specify a unique ID for each element. The relevant HTML code for ZIPCODE.JSP is given below:
<body style= "FONT-FAMILY:HELVETICA;FONT-SIZE:10PT;" >
<p>type in a 5-digit zip code to get information on that zip code.</p>
<form name= "ZipCode" method= "POST" action= "" >
<table cellspacing= "0" cellpadding= "4" frame= "box" bordercolor= "#dcdcdc" rules= "None" style= "Border-collapse: Collapse; " >
<tr>
<td>zip code</td>
<td><input type= "Text" size= "5" name= "Zipcode_uszip" id= "Zipcode_uszip" ></td>
<td><input type= "button" onclick= "Zipcode_updatedirect ();" Value= "Direct"/></td>
<td><input type= "button" onclick= "Zipcode_updateproxy ();" Value= "Proxy"/></td>
</tr>
</table>
</form>
<table>
<tr>
<td>City</td>
<td><div id= "zipcode_city" style= "Color:blue;" ></div></td>
</tr>
<tr>
<td>State</td>
<td><div id= "Zipcode_state" style= "Color:blue;" ></div></td>
</tr>
<tr>
<TD colspan= "2" >
<form>
<button onclick= "Zipcode_showresults ();" >returned XML <span id= "Zipcode_status" style= "Color:blue;" ></span>
</button>
</form>
</td>
</tr>
</table>
</body>
Note that all ID tags use the portlet name as a prefix. This is a pretty good best practice and you have to put it deep into your coding style. Why is this important? Because when the BEA WebLogic portal renders a page, it copies and pastes all the portet HTML onto an aggregation page. So, if you have two portlets, and each portlet has an element with an ID of "MyLabel", then the rendered portal page will have two elements with the same unique ID. When you use the Javascript/dom function getElementById (' MyLabel '), the returned element will be the first instance of the "MyLabel" ID in the document, which is probably not the result you expected!
Also note the use of <div> tags as placeholders for dynamic content. This is a problem with style selection, but I find that the,<div> tag has great potential to be a container for any content, and that the <td> label is much more restrictive. More use of CSS would definitely help reduce the use of embedded style tags, but this would be an exercise for the reader. However, I would like to point out that the judicious use of CSS styles can greatly reduce the number of JavaScript that will eventually be written. Remember, CSS can be used to change the color, position, visibility, transparency, and many other visual features of an element. Simple style swapping can often make the graphical user interface more interactive. In the employee Listing portlet, I used this technique to inform the user when the changes were submitted to the database.
In this portlet, we'll get input from the text bar, call a Web service to find city and state information related to the area code, and then use the information returned by the Web service to dynamically update cities and states <div> elements. The page does not refresh-only the city and state elements are updated.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
