适用于对jsf有基本了解的朋友:关于dataTable
介绍一下jsf的dataTable
1 标准的h:dataTable
<h:dataTable value="#{studentBean.names}" var="name" id="names">
<h:column>
<h:outputText value="#{name.first}"/>
</h:column>
<h:column>
<h:outputText value="#{name.last}"/>
</h:column>
</h:dataTable>
效果如下,其中FX代表firstname,LX代表lastName
firstName lastName
F1 L1
F2 L2
F3 L3
这个例子很简单,在jsf核心编程中能够找到实现的源码,我就不耍大刀了:)
2 myfaces的t:dataTable
myfaces是apache的一种jsf实现,使用t:dataTable,除了标准jsf的jar包外,需要使用tomahawk-1.1.3.jar,myfaces-api-1.1.5.jar和myfaces-impl-1.1.5.jar3个包(版本没什么关系),另外web.xml中需要有
<listener>
<listener-class>org.apache.myfaces.webapp.StartupServletContextListener</listener-class>
</listener>
语句。页面中引用标签方式<%@ taglib uri="http://myfaces.apache.org/tomahawk " prefix="t" %>
<t:dataTable value="#{studentBean.names}" var="name" newspaperColumns="3" id="names"
border="0" cellspacing="0" cellpadding="0" >
<h:column>
<h:outputText value="#{name.first}"/>
</h:column>
<h:column>
<h:outputText value="#{name.last}"/>
</h:column>
</t:dataTable>
效果如下
firstName | F1 | F2 |
F3 | F4 | |
lastName | L1 | L2 |
L3 | L4 |
newspaperColumns="3" 表示,每行只有3列,其他的属性可以到apache的官方网站查阅。
----------------------------------------------打完收工分割线--------------------------------------------------------------------------
各位看官,是不是迷糊了,这不伦不类的介绍有啥用啊?好吧,自己看图2,仔细看看,估计
谁都不想要这样的结果----------名和姓完全分离了!这是什么?是不是应该这样:
firstName | F1 | F2 |
lastName | L1 | L2 |
F3 | F4 | |
L3 | L4 |
糟糕。。没有这种实现啊。。。。。md得自己改代码了!由于t:dataTable的效果和我想的效果比较贴近,
所以我选择修改myfaces的代码。经过我的分析,问题出现在HtmlTableRendererBase类(在
tomahawk-1.1.3.jar中)的encodeInnerHtml方法中,具体地说,就是这段
// walk through the newspaper rows
for(int nr = 0; nr < newspaperRows; nr++)
{
// walk through the newspaper columns
for(int nc = 0; nc < newspaperColumns; nc++) {
...
for (int j = 0, size = getChildCount(component); j < size; j++)
{
...
}
...
}
}
.....
}
我们修改一下:
// walk through the newspaper rows
for(int nr = 0; nr < newspaperRows; nr++)
{
for (int j = 0, size = getChildCount(component); j < size; j++) {
// walk through the newspaper columns
for (int nc = 0; nc < newspaperColumns; nc++) {
// the current row in the 'real' table
int currentRow;
// if (newspaperHorizontalOrientation)
if (true)
currentRow = nr * newspaperColumns + nc + first;
else
currentRow = nc * newspaperRows + nr + first;
// if this row is not to be rendered
if (currentRow >= last)
continue;
// bail if any row does not exist
uiData.setRowIndex(currentRow);
if (!uiData.isRowAvailable()) {
log.error("Row is not available. Rowindex = "
+ currentRow);
break;
}
if (nc == 0) {
// first column in table, start new row
beforeRow(facesContext, uiData);
HtmlRendererUtils
.writePrettyLineSeparator(facesContext);
renderRowStart(facesContext, writer, uiData, styles, nr);
}
List children = getChildren(component);
UIComponent child = (UIComponent) children.get(j);
if (child.isRendered()) {
boolean columnRendering = child instanceof UIColumn;
if (columnRendering)
beforeColumn(facesContext, uiData, j);
encodeColumnChild(facesContext, writer, uiData, child,
styles, nc * uiData.getChildCount() + j);
if (columnRendering)
afterColumn(facesContext, uiData, j);
}
if (hasNewspaperTableSpacer(uiData)) {
// draw the spacer facet
if (nc < newspaperColumns - 1)
renderSpacerCell(facesContext, writer, uiData);
}
}
renderRowEnd(facesContext, writer, uiData);
afterRow(facesContext, uiData);
}
}(其实就是把循环2和循环3的嵌套关系换一下)
好了,大功告成!页面的代码不用改,就可以得到我们想要的效果了!
抛个砖头引块玉。直接修改jar的代码不是好注意,还是继承复写比较好,另外我也没注意css,主要是分析
问题和提出解决办法吧,具体的细节需要各位自己处理了:)请大家多批评指正谢谢
ps:初学jsf。。。感觉这个东西不是很好:(