Jerry

« Previous month (Feb 2008) | Main | Next month (Apr 2008) »

星期一三月 17, 2008

在 NetBeans IDE 6.0 中使用 JSF 创建多页眉表格

嗨！大家好！在我们开始进行以下步骤之前，先向大家介绍一些相关信息。

1) 目前，IDE 尚不支持通过设置一些属性（例如,表格组件）来创建多页眉/页脚（ Multiple Header/Footer Row )，也就是不能直观地完成此操作。IDE要求手动设计和调整页面的 JSP/JSF 代码。
2) 完成上述调整之后，表格不会显示在 IDE 的设计视图中。需要部署并运行应用程序才能查看调整后的结果。
3) 对于您能够创建的页眉类型以及能使用的标记属性，这些方面都有一定的限制。有关详细信息，请参见 http://webdev2.sun.com/woodstock-tlddocs/webuijsf/tableColumn.html。

创建多行页眉表格（ Multiple Row Header for a Table ）的步骤如下

要完成此项操作，您需要使用 “嵌套的 <webuijsf:tableColumn> 标记”。

步骤 1 ) 在 IDE 中创建一个 Visual Web 应用程序。

步骤 2 ) 在 Visual 设计器中打开 Page1.jsp（IDE 将自动完成此项操作）。

步骤 3 ) 切换到 Page1 的 jsp 视图。

步骤 4 ) 在 <webuijsf:form binding="#{Page1.form1}" id="form1"> & </webuijsf:form> 标记之间复制并粘贴下列代码（用于定义多行表头表格，也就是在 Form 的开始和结束标记之间复制并粘贴下列代码）。

第 5步 ) 编译和运行应用程序，以便在浏览器中查看所显示的表格。

我已经提供了 2 个示例表格代码演示这一过程。示例 1 将显示一个 2 行页眉的表格，示例 2 将显示一个 3 行页眉的表格。

表格 1 代码 :


<!-- JSF code to Create a MultiLine Header Table, The below code creates a Table with 2 row Header-->

<webuijsf:table augmentTitle="false" binding="#{Page1.table1}" id="table1"
                style="height: 317px; left: 144px; top: 120px; position: absolute" title="Table" width="308">
                <webuijsf:tableRowGroup binding="#{Page1.tableRowGroup1}" id="tableRowGroup1" rows="10"
                 sourceData="#{Page1.defaultTableDataProvider}" sourceVar="currentRow">
                                   

                  <!-- Top Level Nested Column Header - Creates 1st Header line spanning columns 1-5 -->
                              
                   <webuijsf:tableColumn headerText="Merged Columns-12345" id="tableColumn1">
                                   
                            <!--Second Level Nested Column Header - Creates 2nd Header Line spanning columns 1-3 -->
                            <webuijsf:tableColumn headerText="Merged Columns-123" id="tableColumn2">
                                       
                        <!-- Columns 1-3 defined -->
                        <webuijsf:tableColumn headerText="column1" id="Column1" sort="column1">
                                 <webuijsf:staticText id="staticText1" text="A"/>
                          </webuijsf:tableColumn>
                          <webuijsf:tableColumn headerText="column2" id="Column2" sort="column2">
                                    <webuijsf:staticText id="staticText2" text="B"/>
                          </webuijsf:tableColumn>
                          <webuijsf:tableColumn headerText="column3" id="Column3" sort="column3">
                                   <webuijsf:staticText id="staticText3" text="C"/>
                          </webuijsf:tableColumn>
                    </webuijsf:tableColumn>
                                   
                   <!-- Columns 4&5 outside the above 2nd Level Nested Columns -->
                  <webuijsf:tableColumn headerText="column4" id="Column4" sort="column4">
                                <webuijsf:staticText id="staticText4" text="D"/>
                 </webuijsf:tableColumn>
                <webuijsf:tableColumn headerText="column5" id="Column5" sort="column5">
                            <webuijsf:staticText id="staticText5" text="E"/>
                </webuijsf:tableColumn>
                                   
               </webuijsf:tableColumn>
                               
            </webuijsf:tableRowGroup>
        </webuijsf:table>

下面是由这段代码创建的表格的屏幕截图。

表格 2 代码 :

<!-- JSF code to Create a MultiLine Header Table, The below code creates a Table with 3 rows of Header-->

<webuijsf:table augmentTitle="false" binding="#{Page1.table1}" id="table1"
                   style="height: -125px; left: 144px; top: 120px; position: absolute" title="Table" width="-6">

                   <webuijsf:tableRowGroup binding="#{Page1.tableRowGroup1}" id="tableRowGroup1" rows="10"
                            sourceData="#{Page1.defaultTableDataProvider}" sourceVar="currentRow">


                          <!-- TOp Level Nested Column Header - Creates 1st Header line spanning columns 1-5 -->

                          <webuijsf:tableColumn headerText="Merged Columns-12345" id="tableColumn1">

                               <!-- SEcond Level Nested Column Header - Creates 2nd Header line spanning columns 1-3 -->

                               <webuijsf:tableColumn headerText="Merged Columns-123" id="tableColumn2">

                                     <webuijsf:tableColumn headerText="column1" id="Column1" sort="column1">
                                            <webuijsf:staticText id="staticText1" text="A"/>
                                     </webuijsf:tableColumn>

                                     <!-- THird Level Nested Column Header - Creates 3rd Header line spanning columns 2-3 -->
                                       
                                      <webuijsf:tableColumn headerText="Merged Columns-23" id="tableColumn3">
                                           
                                      <webuijsf:tableColumn headerText="column2" id="Column2" sort="column2">
                                          <webuijsf:staticText id="staticText2" text="B"/>

                                      </webuijsf:tableColumn>

                                      <webuijsf:tableColumn headerText="column3" id="Column3" sort="column3">
                                            <webuijsf:staticText id="staticText3" text="C"/>
                                      </webuijsf:tableColumn>
                                       
                                      </webuijsf:tableColumn>

                                    </webuijsf:tableColumn>

                                     <!-- 2nd Second  Level Nested Column Header - Creates 2nd Header line spanning columns 4-5 -->
                                   
                                     <webuijsf:tableColumn headerText="Merged Columns-45" id="tableColumn4">

                                    <webuijsf:tableColumn headerText="column4" id="Column4" sort="column4">
                                        <webuijsf:staticText id="staticText4" text="D"/>
                                    </webuijsf:tableColumn>
                                   
                                     <!-- 3rd Level Nested Column Header - Creates 3rd Header line for column 5 -->

                                    <webuijsf:tableColumn headerText="Special Header Columns-5" id="tableColumn5">

                                    <webuijsf:tableColumn headerText="column5" id="Column5" sort="column5">
                                        <webuijsf:staticText id="staticText5" text="E"/>
                                    </webuijsf:tableColumn>
                                    </webuijsf:tableColumn>
                                    </webuijsf:tableColumn>

                                </webuijsf:tableColumn>

                            </webuijsf:tableRowGroup>
                        </webuijsf:table>