`
wangzl2222
  • 浏览: 151001 次
  • 性别: Icon_minigender_1
  • 来自: 苏州
社区版块
存档分类
最新评论

JSF Chapter07

阅读更多
1.      常用的 dataTable 类的控件有:
l            <rich:dataTable>

l            <rich:dataDefinitionList>

l            <rich:dataOrderedList>

l            <rich:dataList>

l            <rich:dataGrid>

 

 

2.      <rich:dataTable>

1)      <rich:dataTable> 具有 <h:dataTable> 的所有基本功能,此外还具有换肤、部分行刷新、合并行或列的功能。

2)      在其内部仍然可以使用 <h:column>.

 

 

3.      <rich:dataDefinitionList>

1)      <rich:dataDefinitionList> 可以创建一个 HTML 定义列表;

2)      可以使用 <f:facet name=”term”> 来设定特定的数据格式,例如:

<rich:dataDefinitionList value="#{airlinesBean.airlines}" var="air">

<f:facet name="term">

<h:outputText value=”#{air.code}” />

</f:facet>

<h:outputText value=”#{air.name}, #{air.code}” />

</rich:dataDefinitionList>

 

 

4.      <rich:dataOrderedList>

1)      <rich:dataOrderedList> 可以生成列表,并在每一行开头添加上行号,从 1 开始。

2)      例如:

<rich:dataOrderedList value="#{airlinesBean.airlines}" var="air">

<h:outputText value=”#{air.name}, #{air.code}” />

</rich:dataOrderedList>

 

 

5.      <rich:dataList>

1)      <rich:dataList > 可以生成列表,并在每一行开头添加一个圆点。

2)      例如:

<rich:dataList value="#{airlinesBean.airlines}" var="air">

<h:outputText value=”#{air.name}, #{air.code}” />

</rich:dataList>

 

 

6.      <rich:dataGrid>

1)      <rich:dataGrid> 是 <rich:dataTable> 和 <h:panelGrid> 的混合体。

2)      仍然遍历数据集合,但是通过 columns 属性控制每一行容纳多少条记录。例如:

<rich:dataGrid value="#{airlinesBean.airlines}" var="air" border="1" columns="2">

<h:outputText value=”#{air.name}, #{air.code}” />

</rich:dataGrid>

 

 

7.      除以上几种之外,还有之前讲过的 <a4j:repeat> ,它本身并不产生任何 HTML 标记
<a4j:repeat value="#{airlinesBean.airlines}" var="air" rowKeyVar="i">

#{air.name} -

#{air.code}

<h:outputText value="," rendered="#{i lt (airlinesBean.size-1)}"/>

</a4j:repeat>

 

 

8.      添加滚动条 <rich:datascroller>

1)      对于要使用 <rich:datascroller> 作为滚动条的 dataTable 类控件,应该将它们的 rows 属性设置好,设为每页需要显示的数据行数。

2)      对于 <rich:dataTable> 只需要将 <rich:datascroller> 置于 <f:facet name=”footer”> 中就可以了;

而对于其他 dataTable 类控件,则应该将 <rich:datascroller> 置于控件外,并将 <rich:datascroller> 的 for 属性设置为 dataTable 类控件的 ID 。

3)      <rich:datascroller> 需要在 form 中使用。

4)      <rich:datascroller> 的前后翻页等样式可以通过属性,任意定于。

5)      pageIndexVar 属性,指定代表当前页码的变量名称; pagesVar 属性,指定代表总页码数的变量名称。例如:

<rich:datascroller maxPages="4" selectedStyle="font-weight:bold"

pageIndexVar="currentPage" pagesVar="totalPages">

<f:facet name="pages">

<h:outputText value="#{currentPage}/#{totalPages}” />

</f:facet>

...

</rich:datascroller>

6)      maxPages 属性设定滚动条中,每次最多能同时显示的页码数。

 

 

9.      使用 JavaScript 事件
1)      <rich:dataTable> 等控件定义了许多 onXXXX 属性,对应 JavaScript 事件,以调用自定义 JavaScript 代码。如: onclick 、 ondblclick 、 onRowClick 、 onRowDblClick 等。

2)      可以与 <a4j:support> 和 <f:setPropertyActionListener> 等一起使用,用来触发 Ajax Request 。例如:

<rich:dataTable id="dtTabel" border="1" value="#{dataTableTestBean.xcvrList}" var="xcvr" rows="10" onRowContextMenu="#{rich:component('detail')}.show()" >

 

<a4j:support event="onRowDblClick" reRender="grid1" action="#{dataTableTestBean.rowDblClickedAction}" oncomplete="#{rich:component('detailModalPanel')}.show()" >

<f:setPropertyActionListener target="#{dataTableTestBean.selectedXcvr}" value="#{xcvr}" />

</a4j:support>

……

</rich:dataTable>

       【注意】

这段代码是希望通过双击或右键,弹出 modalPanel ,里面显示行的详细信息。但是 <rich:dataTable> 的 onRowContextMenu 所调用弹出的 modalPanel 里面一开始是不会有值的,因为页面从未提交 dataTableTestBean.selectedXcvr 里面还没有值;而 <a4j:support> 的 oncomplete 属性调用弹出的 modalPanel 里面就有值,因为 <a4j:support> 的 event 属性根据 <rich:dataTable> 的 onRowDblClick 事件引发了 Ajax Request ,这一切完成之后( oncomplete ),才调用弹出的 modalPanel ,自然就能找到值了。

 

 

10.  实现部分控件的数据刷新
1)      基本思路就是要确定哪一行 的哪一个控件 要刷新。

2)      联想到之前 <a4j:repeat> 里面的定位方法, ajaxKeys 用来定义哪些行需要被局部刷新。 ajaxKeys 属性接受 EL 表达式。

3)      至于哪些列(控件)需要局部更新,那就需要在将这些列(控件 ID )放在引发刷新的控件的 reRender 属性里面。

4)      具体例子如下:

<a4j:form>

<rich:dataTable id="dtTabel" border="1" value="#{dataTableTestBean.xcvrList}" var="xcvr" rows="10" ajaxKeys="#{dataTableTestBean.rowsToUpdate}" onRowContextMenu="#{rich:component('detail')}.show()">

 

<a4j:support event="onRowDblClick" reRender="grid1" action="#{dataTableTestBean.rowDblClickedAction}" oncomplete="#{rich:component('detail')}.show()">

<f:setPropertyActionListener target="#{dataTableTestBean.selectedXcvr}" value="#{xcvr}" />

</a4j:support>

 

<h:column id="column1">

<f:facet name="header">

<h:outputText value="Item Code"></h:outputText>

</f:facet>

<h:outputText id="out1" value="#{xcvr.itemCode}"></h:outputText>

</h:column>

 

<h:column id="column2">

<f:facet name="header">

<h:outputText value="Tech"></h:outputText>

</f:facet>

<h:outputText id="out2" value="#{xcvr.tech}"></h:outputText>

</h:column>

……

</rich:dataTable>

</a4j:form>

 

<rich:modalPanel id="detail">

<f:facet name="header">

<h:outputText value="Xcvr Detail"></h:outputText>

</f:facet>

<f:facet name="controls">

<h:panelGroup>

<a4j:commandLink id="closeLink" value="Close"></a4j:commandLink>

<rich:componentControl for="detail" attachTo="closeLink" event="onclick" operation="hide" />

</h:panelGroup>

</f:facet>

<a4j:form>

<h:panelGrid id="grid" columns="2">

<h:outputText value="Item Code"></h:outputText>

<h:inputText value="#{dataTableTestBean.selectedXcvr.itemCode}"></h:inputText>

<h:outputText value="Technology"></h:outputText>

<h:inputText value="#{dataTableTestBean.selectedXcvr.tech}"></h:inputText>

</h:panelGrid>

<h:panelGroup>

<a4j:commandButton value="Save" actionListener="#{dataTableTestBean.editXcvr}" onclick="#{rich:component('detail')}.hide()" reRender="out1,out2" />

<a4j:commandButton value="Cancel" immediate="true" onclick="#{rich:component('detail')}.hide()" />

</h:panelGroup>

</a4j:form>

</rich:modalPanel>

 

       【注意】

根据书上的代码, modalPanel 中用于保存修改的按钮的 reRender 属性,里面放的是, <rich:dataGrid> 的元素一个 <h:panelGrid> 的 ID ;于是我开始以为我的这个例子就应该放置 column1 和 column2 。但结果证明我错了,没有任何刷新。

于是我想,难道是防止整个 dataTable 的 ID ?试了一下,倒是刷新了。但我担心并不是 dataTable 局部刷新,而是整个表都刷新了。于是略一测试,果然是整个 dataTable 都被刷新了。

再次调整思路,我把需要刷新的两列的 <h:outputText> 的 ID out1 、 out2 放入按钮的 reRender 属性,测试结果成功,表格被局部刷新了。

现在反思一下,感觉因为 <h:column> 是被当作列来对待的,它并不像 <h:panelGrid> 那样充当一个纯粹的容器,因此将 <h:panelGrid> 的 ID 放入 reRender 时,其内部的内容都可以被刷新,而 <h:column> 就不行。

 

 

11.  创建行或列 span

1)      <rich:column> 属性与 <h:column> 基本功能相同,但提供了我行或列合并的功能。

2)      colspan 属性用于设定某一单元格实际占用多少列的值。

3)      <rich:columnGroup> 控件可以绑定多个列,并形成新的一行。

4)      <rich:column breakBefore="true"> 可以替代 <rich:columnGroup> 产生新的一行。

5)      rowspan 属性用于设定某一单元格实际占用多少行的值。

6)      要想知道具体结果是什么,最好亲自写一下试试看。

 

 

12.  <rich:columns>

1)      虽然这一章并没有讲到 <rich:columns> ,我还是查看了用户指南,简单学习了一下。感觉某些方面还是很有用的。

2)      整体思路就是 <rich:columns> 在 <rich:dataTable> 中,将 <rich:columns> 自己的 value 属性传进来的 Collection 进行遍历。为了帮助理解,可以这么认为:

l        通常, <rich:dataTable> 的 value 属性传进来的 Collection ,包含的是整个数据表,含有很多行;而 <rich:columns> 传进来的 Collection ,是对于每一行来说都相同的多个“列信息”。

l        <rich:dataTable> 是遍历每一行,但是需要逐列设置每一列现实的内容;而 <rich:columns> 则“更进一步”,将逐列设置每一列内容也省了,通过遍历每一列,设置列信息。

例如:

<rich:dataTable id="dtTabel" border="1" value="#{dataTableTestBean.xcvrList}" var="xcvr">

<rich:columns var="field" index="index" value="#{dataTableTestBean.fields}" >

<f:facet name="header">

<h:outputText value="#{field.fieldName}" />

</f:facet>

 

<h:outputText value="#{xcvr[field.fieldName]} " />

</rich:columns>

</rich:dataTable>

3)      value 属性,可以接受 List 类型的值, List 的元素可以是任意类型的。上面例子里, #{dataTableTestBean.fields} 是一个 Field 的 List ( Field 是一个自定义类,具有 fieldName 成员变量)。这个 Field List 里可以包括需要显示在表格里的 Xcvr 类的属性名。

在 <rich:columns> 的体里, #{xcvr[field.fieldName]} 就是要取每一行 xcvr 对象的名称为 field.fieldName 的值的属性。

4)      在 <rich:dataTable> 内 <rich:columns> 和 <rich:column> 、 <h:columns> 任然可以混合使用,互不干扰。

5)      columns 属性定义显示出来的列数;

begin 属性定义从哪一列开始显示;

end 属性定义到哪一列结束。

6)      还有一些关于 sort 、 filter 的属性,用户指南上也写得不太清楚,等到 Practical RichFaces 在第 10 章讲到 scrollableDataTable 的时候可能会涉及到。到时再仔细研究吧。
from:http://blog.csdn.net/gengv/archive/2009/06/12/4263633.aspx
分享到:
评论

相关推荐

    精通JSF—基于EJBHibernateSpring开发实践视频教程

    资源名称:精通JSF—基于EJBHibernateSpring开发实践视频教程资源目录:【】chapter13_code【】Jsf第七章【】JSF第二章【】Jsf第五章【】Jsf第八章【】Jsf第六章【】Jsf第十三章【】Jsf第十五章【】Jsf第十六章【】...

    jsf权威教程源码

    `chapter11.zip`、`chapter16.zip`、`chapter13.zip`、`chapter15.zip`、`chapter10.zip`、`chapter12.zip`和`chapter07.zip`这些文件都是后续章节的源码包。每个章节可能涉及不同的主题,如JSF生命周期、自定义组件...

    jsf完全参考手册源代码

    `chapter07` 文件名可能表示这是一个章节的代码,可能是关于JSF进阶话题,例如自定义组件、Ajax支持或者综合应用场景。通常,每一章的代码都会对应书中的一个或多个关键概念,通过实际运行这些代码,读者可以更直观...

    jsf完全参考手册中的源代码

    下面我们将详细探讨JSF的核心概念、关键组件以及`build.properties.sample`和`chapter05`可能包含的内容。 **JSF框架概述:** JSF是Java EE的一部分,旨在简化Web开发,通过提供UI组件、事件处理和数据绑定等功能来...

    精通JSF基于EJB HibernateSpring整合天发与项目实践 书本源码

    书本源码中的各个章节代码文件,如chapter3_code到chapter10_code,分别对应书中各章节的实例代码。这些代码实例通常会展示如何在实际项目中应用JSF、EJB、Hibernate和Spring进行整合,包括但不限于以下知识点: 1....

    Java.EE.7.Development.with.NetBeans.8

    Chapter 3: JSF Component Libraries Chapter 4: Interacting with Databases through the Java Persistence API Chapter 5: Implementing the Business Tier with Session Beans Chapter 6: Contexts and ...

    使用JSP开发Web应用系统(JSP) Chapter3

    在本章"使用JSP开发Web应用...在后续章节中,你还会接触到更多高级主题,如EL(Expression Language)、JSF(JavaServer Faces)以及现代Web框架如Spring MVC的使用。持续学习和实践,将使你成为一位熟练的Web开发者。

    seam 的eclipse工程例子3

    在这个"chapter3"的例子中,你可能会看到以下内容: - 一个简单的JSF页面,展示了Seam组件如何与JSF页面交互。 - 一个Seam组件类,可能包含一些业务逻辑或数据访问操作。 - 相关的配置文件,如`pom.xml`(如果使用...

Global site tag (gtag.js) - Google Analytics