Liferay7开发文档_3.5.5创建用户界面

创建用户界面

是时候创建Guestbook Admin portlet的用户界面了。界面默认视图有一个按钮用来新添加留言簿，还得显示已有留言簿。

每个留言簿的名字对应一组Actions按钮。Action按钮用于编辑留言簿，配置权限及删除选项。

为GUESTBOOK ADMIN PORTLET 用户界面创建JSP

Guestbook Admin portlet的用户界面由三个JSP组成：the default view, the Actions button, and the form for adding or editing a guestbook 。

首先创建默认视图：

1. Create a folder for the Guestbook Admin portlet’s JSPs. In src/main/resources/META-INF/resources, create a folder called guestbookadminportlet.
2. Create a file in this folder called view.jsp and fill it with this code:

<%@include file="../init.jsp"%>

<liferay-ui:search-container
    total="<%= GuestbookLocalServiceUtil.getGuestbooksCount(scopeGroupId) %>">
    <liferay-ui:search-container-results
        results="<%= GuestbookLocalServiceUtil.getGuestbooks(scopeGroupId, 
            searchContainer.getStart(), searchContainer.getEnd()) %>" />

    <liferay-ui:search-container-row
        className="com.liferay.docs.guestbook.model.Guestbook" modelVar="guestbook">

        <liferay-ui:search-container-column-text property="name" />

        <liferay-ui:search-container-column-jsp
            align="right" 
            path="/guestbookadminportlet/guestbook_actions.jsp" />

    </liferay-ui:search-container-row>

    <liferay-ui:search-iterator />
</liferay-ui:search-container>

<aui:button-row cssClass="guestbook-admin-buttons">
    <portlet:renderURL var="addGuestbookURL">
        <portlet:param name="mvcPath"
            value="/guestbookadminportlet/edit_guestbook.jsp" />
        <portlet:param name="redirect" value="<%= "currentURL" %>" />
    </portlet:renderURL>

    <aui:button onClick="<%= addGuestbookURL.toString() %>"
        value="Add Guestbook" />
</aui:button-row>

First is the standard init.jsp include to gain access to the imports.

Next is a button row with a single button for adding new guestbooks: <aui:button-row cssClass="guestbook-admin-buttons">. The cssClass attribute lets you specify a custom CSS class for additional styling. The <portlet:renderURL> tag constructs a URL that points to the edit_guestbook.jsp. You haven’t created this JSP yet, but you’ll use it for adding a new guestbook and editing an existing one.

Finally, a Liferay search container is used to display the list of guestbooks. Three sub-tags define the search container:

• <liferay-ui:search-container-results>
• <liferay-ui:search-container-row>
• <liferay-ui:search-iterator>

<liferay-ui:search-container-results>标签的results属性调用服务在某个范围内检索留言簿。total属性调用另一个服务统计留言簿。

该<liferay-ui:search-container-row>标签定义了包含哪些行。此例中，className属性定义com.liferay.docs.guestbook.model.Guestbook"。modelVar属性定义guestbook为留言簿当前迭代变量。搜索容器行定义了两列。<liferay-ui:search-container-column-text property="name" />标签指定的第一列。这个标签显示文本。其property="name"属性指定要显示的文本是留言簿对象的name属性。标签<liferay-ui:search-container-column-jsppath="/guestbookadminportlet/guestbook_actions.jsp" align="right" />指定第二个（也是最后一个）列。此标记包含搜索容器列中的另一个JSP文件。它的path属性指定了应该显示的JSP文件的路径：guestbook_actions.jsp。

最后，<liferay-ui:search-iterator />标签迭代显示留言簿列表。使用Liferay的搜索容器使Guestbook Admin portlet看起来像本地Liferay Portal portlet。它还提供了内置分页功能，以便portlet可以显示大量的留言簿。

下一步是添加guestbook_actions.jsp，该文件负责显示每个guestbook可能的操作列表。

3. Create a new file called guestbook_actions.jsp in your project’s /guestbookadminportlet folder. Paste in this code:

<%@include file="../init.jsp"%>

<%
    String mvcPath = ParamUtil.getString(request, "mvcPath");

    ResultRow row = (ResultRow) request
                    .getAttribute("SEARCH_CONTAINER_RESULT_ROW");

    Guestbook guestbook = (Guestbook) row.getObject();
%>

<liferay-ui:icon-menu>

    <portlet:renderURL var="editURL">
        <portlet:param name="guestbookId"
            value="<%=String.valueOf(guestbook.getGuestbookId()) %>" />
        <portlet:param name="mvcPath"
            value="/guestbookadminportlet/edit_guestbook.jsp" />
    </portlet:renderURL>

    <liferay-ui:icon image="edit" message="Edit"
            url="<%=editURL.toString() %>" />

    <portlet:actionURL name="deleteGuestbook" var="deleteURL">
            <portlet:param name="guestbookId"
                value="<%= String.valueOf(guestbook.getGuestbookId()) %>" />
    </portlet:actionURL>

    <liferay-ui:icon-delete url="<%=deleteURL.toString() %>" />

</liferay-ui:icon-menu>

这个JSP包含弹出动作菜单，显示用户可以在guestbook上执行的操作:编辑或删除它。 首先, init.jsp 被included ，因为它包含所有的 JSP imports.   因为 guestbook_actions.jsp 包含在每个搜索容器行中，它在当前迭代中检索guestbook。scriptlet获取了guestbook，因此它的ID可以提供给菜单标签。

guestbook_actions.jsp主要包含<liferay-ui:icon-menu 标签. 它是一个菜单项的容器，目前只有两个菜单项(稍后您将添加更多)。编辑菜单项显示编辑图标和消息编辑:

<liferay-ui:icon image="edit" message="Edit"
        url="<%=editURL.toString() %>" />

editURL变量来自<portlet:renderURL var="editURL">带有两个参数的标签：guestbookId和mvcPath。guestbookId参数指定要编辑的留言簿（来自选定的搜索容器结果行中的一个），并且该参数指定留言簿编辑表单的路径。

删除菜单项显示删除图标和默认消息删除:

<liferay-ui:icon-delete url="<%=deleteURL.toString() %>" />

不同于editURL，它是链接到edit_guestbook.jsp的呈现URL。deleteURL是一个操作URL，它调用portlet的deleteGuestbook操作。标签<portlet:actionURL name="deleteGuestbook" var="deleteURL">创建此操作URL，它只接受一个参数:将被删除的guestbookId。

现在只剩下一个JSP文件了：edit_guestbook.jsp包含用于添加新留言簿和编辑现有留言簿的表单。

4. Create a new file called edit_guestbook.jsp in your project’s /guestbookadminportlet directory. Then add the following code to it:

<%@include file = "../init.jsp" %>

<%
        long guestbookId = ParamUtil.getLong(request, "guestbookId");

        Guestbook guestbook = null;

        if (guestbookId > 0) {
                guestbook = GuestbookLocalServiceUtil.getGuestbook(guestbookId);
        }
%>

<portlet:renderURL var="viewURL">
        <portlet:param name="mvcPath" value="/guestbookadminportlet/view.jsp" />
</portlet:renderURL>

<portlet:actionURL name='<%= guestbook == null ? "addGuestbook" : "updateGuestbook" %>' var="editGuestbookURL" />

<aui:form action="<%= editGuestbookURL %>" name="fm">

        <aui:model-context bean="<%= guestbook %>" model="<%= Guestbook.class %>" />

        <aui:input type="hidden" name="guestbookId"
            value='<%= guestbook == null ? "" : guestbook.getGuestbookId() %>' />

        <aui:fieldset>
             <aui:input name="name" />
        </aui:fieldset>

        <aui:button-row>
             <aui:button type="submit" />
             <aui:button onClick="<%= viewURL %>" type="cancel"  />
        </aui:button-row>
</aui:form>

在init.jspimport后，声明一个空的guestbook变量。如果请求中有一个guestbookId参数，那么就知道正在编辑一个现有的guestbook，并使用guestbookId通过一个服务调用检索相应的guestbook。否则，你就知道你在添加一个新的留言簿。

接下来是指向Guestbook管理portlet的默认视图的视图URL。如果用户单击“添加Guestbook”或“编辑Guestbook表单”，则会调用此URL。在此之后，您将创建一个操作URL，该操作URL将调用Guestbook管理portlet的addGuestbook方法或其updateGuestbook方法，这取决于Guestbook变量是否为空。

如果正在编辑guestbook，那么当前guestbook的名称应该出现在表单的名称字段中。可以使用下面的标签来定义AlloyUI表单中的guestbook模型:

<aui:model-context bean="<%= guestbook %>" model="<%= Guestbook.class %>" />

表单由以下标签创建：

<aui:form action="<%= editGuestbookURL %>" name="<portlet:namespace />fm">

当提交表单时，将调用editGuestbookURL，这将调用Guestbook Admin portlet的addGuestbook或updateGuestbook方法，如上所述。

guestbookId必须出现在表单上，以便提交。然而，用户不需要看到它。因此，您可以指定type="hidden"：

<aui:input type="hidden" name="guestbookId"
        value='<%= guestbook == null ? "" : guestbook.getGuestbookId() %>' />

当然，这个名字应该由用户编辑，所以它不会被隐藏。

表单上的最后一项是带有两个按钮的按钮行。提交按钮提交表单，调用editGuestbookURL，该url依次调用addGuestbook或updateGuestbook方法。取消按钮将调用显示默认视图的viewURL。

现在已经完成了Guestbook Admin portlet用户界面。应该与下图相符：

图1：Guestbook Admin portlet允许管理员添加或编辑留言簿，配置其权限或删除它们。

测试Guestbook Admin portlet！尝试添加，编辑和删除留言簿。