Menu

Liferay 6.2: How to use liferay-ui:form-navigator tag

liferay-ui:form-navigator tag is a great graphics component. If your entity has much relative information, liferay-ui:form-navigator tag will be the best choose to show them in a browser. In this post, I will show you how to use liferay-ui:form-navigator tag.
Assume I had some entities. They contain some information about students. This information is divided into three big parts and second level in each.
  1. Basic information
    • Name, age, gender, ...
    • Address, telephone, home phone
  2. Educations
    • University
    • High school
  3. Hobbies
    • Sports
    • Entertainments
Before explaining anything, lets me show you an example.

Now, rebuild your portlet and deploy on the portal. As you see, the interface of your portlet same with the following image
GUI of form-navigator tag
Lets me explaining some lines in my code:
  • Line 12-19th: this form wraps all information fields of Student entity.
  • Line 14-18th: we put a liferay-ui:form-navigator tag at here to divide the student information into some categories. This tag contains some attributes:
    • Line 15th: The value of categoryNames attribute is a String array. They are the name of the first level.
    • Line 16th: The value of categorySections attribute is a two-dimension String array. The are the name of the second level. ith element of this array is the subtitle of ith element in categoryNames. Note, do not using "-" for any name of the second level, using "_" (underscore) is the best choose.
    • Line 17th: The value of jspPath is a String (a relatively path, it starts and ends by slash character "/"). It's full path to folder which contains the jsp files. Each element in categorySections correspond with a jsp file in above folder. So, in /html/formnavi/subjsp/ folder containts profile.jspcontacts.jspuniversity.jsphigh-school.jspsports.jsp and entertaimens.jsp.
The next step, we will add the information fields in jsp files which are contained by subjsp folder. Click here to see the full code. liferay-ui:form-navigator tag wrapped all components of student entity and each second level element correspond with a part of information. On each item in the second level, let's fill out or edit information in graphics components. After all, press on "Save" button to transfer entered information to the controller class.
In controller class, let's create a method named updateStudent to get information which was sent from GUI. In this method, you can add or update the information of student entity.

Summary

  • In this post, I showed you the simplest case of liferay-ui:form-navigator tag. If you want to organize information of an entity by professional, it will help you.
  • Next posts, I will show you some deep research about this tag.  I hope that this post useful for you.
  • You can download full code at here.

Không có nhận xét nào:

Đăng nhận xét