Question

我是JSF的新手。我们正在使用带有primefaces的JSF构建Web应用程序。我们有很多需要展示桌子的地方。该表应具有分页，列可调整大小，在某些地方我们需要右键单击上下文菜单等。

我可以使用primefaces提供的dataTable组件来实现它。但我想将其创建为更可定制的组件。有些东西，比如可重用的javascript / jquery（Jqgrid）插件，我们只设置了一些应该足够的属性值。

如果创建了一个可以在所有地方重用并设置参数的组件（例如：columnResizable ='true'，columnSortable ='），我也希望以类似的方式执行，而不是为所有功能编写整个代码。真的'），节省了开发时间。

我没有得到任何关于如何实现它的图片。如果有人可以指导这将是伟大的。我不期待整个代码，任何使用JSF实现它的想法都会非常感激。

Answer 1

您应该使用复合组件，您可以根据需要传递任意数量的参数，并使用#{cc.attrs.param1}语法对其进行相应的自定义。这是一个XHTML示例。

复合组件

<ui:component xmlns="http://www.w3.org/1999/xhtml" xmlns:c="http://java.sun.com/jsp/jstl/core" xmlns:u="http://java.sun.com/jsf/composite/ui" xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html" xmlns:s="http://jboss.org/seam/faces" xmlns:p="http://primefaces.org/ui" xmlns:cc="http://java.sun.com/jsf/composite">
    <cc:interface>
        <cc:attribute name="tableId" />
        <cc:attribute name="param1" />
        <cc:attribute name="param2" default="false" />
        <cc:attribute name="param3" required="true" />
    </cc:interface>
    <cc:implementation>
        <p:dataTable id="#{cc.attrs.tableId}" rendered="#{cc.attrs.param2}" value="#{cc.attrs.param1}" var="result" emptyMessage="#{messages['global.noItemsFound']}">
                            <ui:include src="#{cc.attrs.param3}" />
        </p:dataTable>
    </cc:implementation>
</ui:component>

使用<c:if test="#{not empty cc.attrs.param4}">或rendered属性，您可以进一步自定义组件

查看

让我们调用你的复合myList.xhtml，然后你可以调用它：

<u:myList param1="#{backingbean.results}" param2="true" id="list1" param3="/items/columns.xhtml" />

并且不要忘记在您的视图中添加标题：

xmlns:u="http://java.sun.com/jsf/composite/ui"

<强> columns.xhtml

<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:s="http://jboss.org/seam/faces" xmlns:u="http://java.sun.com/jsf/composite/ui" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html" xmlns:p="http://primefaces.org/ui"> <p:column headerText="Name"> <h:outputText value="#{result.name}" /> </p:column> <p:column headerText="Salary"> <h:outputText value="#{result.salary}" /> </p:column> <p:column headerText="Age"> <h:outputText value="#{result.age}" /> </p:column> </ui:composition>

包含单独的列视图的替代方法是在复合组件中使用<p:columns>，并将包含列数据的另一个列表作为参数传递。 Dynamic Columns

创建可自定义的组件

1 个答案: