Window popup is a utility which was built-in Liferay Framework. Liferay itself also used this utility in many parts. For examples: Window popup appears in permission interface or portlet configurations (if you click on gear icon at top left portlet, the windows will appear which allows changing the configurations).
In general, window popup is useful in the UI design process. So, how to use it. This post will help you
The example in this post was tested on Liferay 6.2. In this version, Liferay had simplified openning window popup than the previous ones. I will show you two ways to open window popup. They are the built-in utilities and using AUI (AlloyUI).
The built-in utilities
Liferay has provided <aui:button />, <aui:nav-item /> và <liferay-ui:icon />, tag for us. You can open window popup if the value of its useDialog attribute is "true". Now, we will consider the way how it work.
Assume, we have view.jsp file which contains three above tags and detail.jsp file will be showed in window popup. Following is the container of the detail.jsp file.
As you can see, the container of detail.jsp is very easy to understand. We only get a value with parameter key from the request (line 3rd) and show it on screen (line 6th).
AUI Button Tag
The <aui:button /> tag is an useful tag to create the nice buttons. Its importance attributes are:
- href: its value is a URL. If you click on a button, the browser will redirect by this URL. If the value of userDialog is true (userDialog="true"), a window popup will be opened and the redirected page will be showed on it.
- icon: show an icon within it.
- name: the name of the button.
- type: the type of button, the acceptable value are button, submit, cancel and reset.
- useDialog: Whether we open a window popup to load a new page?
- value: the lable of the button and it is the title of window popup too.
Let see the following example:
Now, let deploy your created portlet. You will see a button and click on it. A window popup will appear. The content of this window is the same the opener one. But, the content of the portlet is different. Because the opener window (window contains the button) is showing the content of view.jsp file, but the window popup is presenting the content of detail.jsp file.
If the window popup contains the whole page, it is difficult to see. The window popup only contains the content of the portlet. The following snippet will resolve the above request:
If the window popup contains the whole page, it is difficult to see. The window popup only contains the content of the portlet. The following snippet will resolve the above request:
The diffirence of the two snippet is at line 4th. I have added windowState attribute (windowState="<%= LiferayWindowState.POP_UP.toString() %>"). In fact, I have added a parameter (windowState) into link address (URL) to tell system that I want to show the page in the popup style. Liferay automatically load the fit templates with this style (I will discuss this in the future posts which relate theme).
Redeploy and click on the button. A window popup will appear, it only contains the content of portlet.
AUI Nav-item Tag
The <aui:nav-item> tag is also <aui:button /> tag. Following is the nessesary attributes:
- href: its value is a URL. When you click on it,, browser will redirect to this link. If the value of useDialog is true (useDialog="true"), a window popup will show and include the redirected page.
- label: the label of link
- title: the title of window popup
- useDialog: whether we open a window popup to load a new page?
Following is the example which uses <aui:nav-item> tag:
UI Icon Tag
The last tag is <liferay-ui:icon>, this tag is very useful and frequently used. For examples: I have used this tag in post named "Liferay: Actions on a row in Search Container". Besides, we can use it in many situations. The frequency attributes are:
- label: whether show the label of link?
- message: the label of link and the title of window popup
- url: its value is a URL, browser will navigate to the corresponding page when you click on it
- useDialog: whether we open a window popup
Similar to two above tags, <liferay-ui:icon> tag allows opening a window popup as well. Let see the following example:
Using Alloy UI
(to be continued)
Your source code is here
Your source code is here
Không có nhận xét nào:
Đăng nhận xét