2012年2月2日星期四

NetBeans_009：开发JavaEE 6 应用之九：定义并使用复合组件

JSF2允许定义一个composite组件，该组件由多个JSF组件构成。

1. 把index.xhtml中的h:dataTable转换为复合组件
选中h:dataTable整个范围，点击黄色灯泡，选择转换为复合组件。

接下来会提示你输入复合组件的名称、位置以及前缀。

out.xhtml位于目录resouces\ezcomp下，前缀是ez，其内容如下：
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:cc="http://java.sun.com/jsf/composite"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core">

    <!-- INTERFACE -->
    <cc:interface>
    </cc:interface>

    <!-- IMPLEMENTATION -->
    <cc:implementation>
        <h:dataTable value="#{customerSessionBean.customers}" var="c">
            <f:facet name="header">
                <h:outputText value="Customer Table" />
            </f:facet>
            <h:column>
                <f:facet name="header">Customer Name</f:facet>
                #{c.name}
            </h:column>
            <h:column>
                <f:facet name="header">Customer ID</f:facet>
                #{c.customerId}
            </h:column>
        </h:dataTable>
    </cc:implementation>
</html>

其中，cc:interface定义组件的接口，cc:implementation定义组件的实现。

2. 修改index.xhtml，使用复合组件替代原来内容
修改后的index.xhtml内容如下：
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ez="http://java.sun.com/jsf/composite/ezcomp">

    <body>

        <ui:composition template="./WEB-INF/template.xhtml">
            <ui:define name="content">
                <ez:out/>
            </ui:define>
        </ui:composition>
    </body>
</html>

注意，xmlns:ez="http://java.sun.com/jsf/composite/ezcomp"这一行非常重要。
其中，ez是复合组件的前缀名称；ezcomp是保留目录resources下的一个目录。

3. 运行index.xhtml，应该显示和上一个实验一样的结果
标签：

没有评论:

发表评论

订阅： 博文评论 (Atom)