Implement an AJAX Portal

Preface

This article is intended for developers with BEA WebLogic Portal experience. Help them apply AJAX technology to the BEA WebLogic Portal, so that users can have a better experience. I hope that my experience in Portal will be helpful and enlightening to you. It is limited to length and themes, so it does not go deep into technical details. If you are interested, please refer to the following documents or write a letter to study with me. This article is not Portal, Portlet, JSR168, AJAX entry development articles, these chapter please refer to: http://dev2dev.bea.com.cn

The technology and concept are not very detailed, because there are too many materials on the Internet, and they will not be explained in detail. However, we will give a brief explanation to avoid affecting reading. There is no special description in the text. The Portal is based on BEA WebLogic Portal 8.1 SP4.

What is an AJAX Portal?

For customers, most of the AJAX-style Portal operations do not refresh the page, including the most basic operations such as maximizing, minimizing, and deleting the Portlet. The interaction between the browser and the server is not through the url, or form post is completed through XMLHttpRequest.

Let's take a look at the real example: in fact, we have seen a lot of actually supported AJAX-style portals,

For example, Microsoft and google portals:

Http://my.msn.com

Http://google.com

Apply for an account, and then enter the operation, such as adding, deleting, maximizing, and minimizing the Portlet. The page will not refresh the page as the traditional Portal does, and the entire operation is very smooth.

Advantages of AJAX Portal

Improve Efficiency:There are multiple applications in the portal. If you just refresh the page to update a separate page, the whole portal page will be refreshed, resulting in the simultaneous refresh of multiple applications, reduced access speed and increased hardware and software overhead. We believe that as a user access portal, users do not frequently switch and refresh pages. Therefore, we hope that the client page data will be automatically updated after the server data is changed, instead of refreshing the page at any time. Because of the classic web model request-refresh. Every interaction of users will lead to refreshing of browsers. for traditional web applications, this is not a big problem, but for portals, one interaction of each porltet will lead to the re-rendering of other portlet. If there are many portlet on the portal, and some portlet calls some consumption time and server resource operations, this is terrible. In this case, you often encounter the following problems: you can click a button on the portlet at will, and the portal response time = the maximum portelt response time. This is one of the reasons why Portal developers often complain that the Portal is too slow. Of course, you can also use some caching technology, but this is only a temporary cure, and there is no fundamental change. We want to change the response time of the portal to the time when the server runs this operation.

To do this, you have to mention AJAX.

Better User Experience:

Portal is a new experience for our customers. We must try our best to make them have a perfect experience. After all, a Portal platform is very expensive and must make the customer feel like: Well, yes, it's totally different from what we saw before. It's so interesting. Oh, it would be interesting if you had such a result with the customer for the first time. You can continue to introduce your portal-based products with advanced ideas, ..

Otherwise, "Oh, it's no different from our previous products. It doesn't mean we have to spend so much money if we have to maximize or close a few buttons ." That's terrible.

AJAX framework Why AJAX framework

To use AJAX, you must have a good understanding of various front-end technologies, including javascript and DHTML. For common Java programmers, this requirement is too much, how to enable normal java programmers to develop AJAX quickly requires us to use some AJAX frameworks to shield various front-end technologies.

Why DWR?

The DWR (Direct Web Remote Control) project is an open-source solution with Apache license. It provides developers who want to use Ajax and XMLHttpRequest in a simple way. It has a set of Javascript Functions, which simplifies the method for calling Java objects on the application server from HTML pages. It controls different types of parameters and keeps the HTML code readable.

DWR does not insert a design, nor forces an object to use any type of inheritance structure. It works well with applications in the servlet framework. For developers who lack DHTML programming experience, DWR also provides a JavaScript library that contains frequently used DHTML tasks, such as assembling tables, filling the select drop-down box with items, and changing the content of HTML elements, example and

The DWR website is detailed and has a large number of documents, which is also the basis of this article. Some examples are used to demonstrate how DWR can use and use its library to complete the work.

Simple Example

There is already a lot of information on the Internet, please refer to: http://searchwebservices.techtarget.com.cn/tips/261/2183761.shtml

Enterprise Desktop Functions

Portlet is the basic unit of the Portal. It provides three basic window functions: Minimize, maximize, and close to simulate traditional desktop programs.

The following uses the Chinese version of BEA WebLogic Portal 8.1 SP4 as an example:

Is this similar to traditional desktop programs ?)

In addition to implementing the functions required by these three desktop programs, Portal products of various vendors often provide functions such as editing and floating forms to facilitate users and Expand functions.

You will find that many operations on the Portal, such as maximizing and minimizing the Portlet, are implemented through AJAX technology and do not need to refresh the page.

Basic AJAX Portal implementation

I personally think that BEA should greatly enhance its support for AJAX in the next version of the product. Linyuan Xiaoyu is better off connecting to the Internet. We can create a new AJAX appearance and feeling, or implement functions similar to Microsoft and google portals.

Let's create a new look and feel,

Then, create a new skeleton, and then write the js Code of these functions into the corresponding skeleton file. You can see that in the skeletons folder, that is, the skeleton file mentioned in BEA, the whole Portal is generated by these skeleton files.

Each module is named by name, and you can determine their functions by name. For example:

In the corresponding portal of header. jsp

Label.

Body. jsp is used for content between portals.

The title of the portlet in the portal corresponding to Titlebar. jsp.

Implement basic portal Functions

First, we use AJAX-style Portlet to maximize, minimize, and delete operations.

Maximize and minimize operations:

The minimal operation can be achieved by hiding the portlet content. In the bea portal, the content of the Portlet is placed in the following div. Open windows. jsp: You can use javascript to hide the div: Var div = document. getDocumentById ("<% = window. getPresentationId () %> "); // Display Div. style. displayed = ""; // Hide Div. style. displayed = "none ";

The maximization operation can be achieved by enlarging the div of the portlet and hiding all the other divs on the page.

Delete operation

You can delete the div containing the portlet. The Code is as follows:

Var div = document. getDocumentById ("<% = window. getPresentationId () %> "); // Delete Document. removeChild (div );

On the server side, you can call this EJB:PortalCustomizationManagerThe method is as follows:

RemovePlaceable(CustomizationContext customizationContext, inclutopdefinitionid, PlaceableInstance placeableInstance)

The specified topdefinitionid is the desktop-defined ID. placeableInstance is the instance ID of the portlet.

Note:PortalCustomizationManagerIt also contains a lot of useful operations, such as moving the position of the Portlet and adding the Portlet to the Page.

Implement more functions

I believe that users who have used msn and google portal will be very useful for their ability to locate the portlet directly through pages and freely adjust the portlet size. In the same way as above, AJAX can be used to complete all functions in Bea Portal.

We have implemented these functions in the actual Portal Project and found that these functions are very practical. Customers can adjust the size and positioning of the portlet directly on the page.

However, it involves a lot of javascript knowledge, so it is not described here. Interested readers can send me an email to discuss it.

Interaction and communication between Portlet

Next I will use a detailed example to demonstrate how to apply AJAX technology to Portlet interaction and communication.

In this example, there are three Portlet components:

1. Add the RSS Portlet.
2. The Portlet used to manage the RSS list.
3. RSS preview Portlet.

As shown in:

You can click the Add button to add a Portlet. an RSS record is added to the second Portlet RSS management. If you click the preview button, the RSS information is displayed in the third Portlet RSS preview.

With these three Porltet, you can easily preview and manage the RSS subscribed to by the user.

This small example not only demonstrates the communication and interaction between AJAX applications on the Portlet, but also allows you to use the modification in your portal project.

Sample program

Click here to download the sample file.

Postscript

Thanks to Liu Bin, Senior Consultant of BEA's Beijing PS department, for providing our technical support in the implementation of the Portal project.

Author Profile

Pi Zhenhua is the technical manager of Beijing nengbo Technology
We are happy to share with you various experiences in using and managing WebLogic. Often in BEA Dev2Dev, IBM developerWorks technical articles, welcome to mail exchange Pi_zh@emarkets.cn.

(