JSF の HTML (UIComponent) 系タグにはテーブルを作成するタグが２種類用意されています。
これらのタグと固有機能系タグを組み合わせることでテーブルを使用した画面を作成可能です。

6. テーブル関連タグ

(*) HTML 系タグの詳細はこちらをご参照ください。
(*) JSF 固有機能系タグの詳細はこちらをご参照ください。

6.1. h:panelGrid

HTML の <table> タグに対応しています。

sample6_1.xhtml

<h:body>
    <h:panelGrid columns="3" border="1">
        <h:outputText value="コード"/>
        <h:outputText value="分類"/>
        <h:outputText value="備考"/>
        <h:outputText value="book_001"/>
        <h:outputText value="小説"/>
        <h:outputText value="散文で作成された虚構の物語として定義される。"/>
        <h:outputText value="book_002"/>
        <h:outputText value="技術本"/>
        <h:outputText value="各分野において目的を達成するために用いられる手段・手法をまとめた書物。"/>
        <h:outputText value="book_003"/>
        <h:outputText value="雑誌"/>
        <h:outputText value="逐次刊行物であり定期刊行物である出版物の一種。"/>
    </h:panelGrid>
</h:body>

画面

HTML

<body>
<table border="1">
    <tbody>
    <tr>
        <td>コード</td>
        <td>分類</td>
        <td>備考</td>
    </tr>
    <tr>
        <td>book_001</td>
        <td>小説</td>
        <td>散文で作成された虚構の物語として定義される。</td>
    </tr>
    <tr>
        <td>book_002</td>
        <td>技術本</td>
        <td>各分野において目的を達成するために用いられる手段・手法をまとめた書物。</td>
    </tr>
    <tr>
        <td>book_003</td>
        <td>雑誌</td>
        <td>逐次刊行物であり定期刊行物である出版物の一種。</td>
    </tr>
    </tbody>
</table>
</body>

(*) 一部改行を追加しています。

h:panelGrid は <table><tbody> ... </tbody></table> に変換されます。
上記例では columns 属性と border 属性を指定していますが、いずれも必須ではありません。columns 属性を指定しなかった場合は列が１列に、border 属性を指定しなかった場合は枠線がなくなります。

<tr></tr> タグと <td></td> タグは <h:panelGrid> と </h:panelGrid> の間で宣言したタグの内容を元に自動的に生成されます。
今回は 12個の <h:outputText/> を宣言しており、列数 (columns 属性) に「3」を指定していますので
４行×３列のテーブルとして出力されています。

他にも数多くの属性を指定可能ですが、ここでは一部を紹介するにとどめます。
(*) h:panelGrid に指定可能な属性の詳細はこちらをご参照ください。

HTML の <table>タグと同様、cellpadding 属性や cellspacing 属性を指定可能です。

ex.) <h:panelGrid ～略～ cellpadding="0" cellspacing="0"/> での HTML と画面

<table border="1" cellpadding="0" cellspacing="0">
    ～ 略 ～
</table>

また、行毎、列毎に CSS を指定可能です。

rowClasses 属性で行毎のクラスを、columnClasses属性で列毎のクラスを指定します。いずれも「, (カンマ)」で区切ることで必要数指定します。

ex.) <h:panelGrid ～略～ rowClasses="title,data,data,data" columnClasses="center,center"> での HTML/CSS と画面

<table border="1" cellpadding="0" cellspacing="0">
<tbody>
<tr class="title">
    <td class="center">コード</td>
    <td class="center">分類</td>
    <td>備考</td>
</tr>
<tr class="data">
    <td class="center">book_001</td>
    <td class="center">小説</td>
    <td>散文で作成された虚構の物語として定義される。</td>
</tr>
<tr class="data">
    <td class="center">book_002</td>
    <td class="center">技術本</td>
    <td>各分野において目的を達成するために用いられる手段・手法をまとめた書物。</td>
</tr>
<tr class="data">
    <td class="center">book_003</td>
    <td class="center">雑誌</td>
    <td>逐次刊行物であり定期刊行物である出版物の一種。</td>
</tr>
</tbody>
</table>
<style type="text/css">
.title {
    font-weight: bold;

    text-align: center;
}
.center {
    text-align: center;
}
.data {
}
</style>

[ END ]

JSF2.0 タグ一覧 (h:panelGrid) 編的更多相关文章

  1. jsf2.0视频

    jsf2.0 入门视频 教程   需要的看下.初次录视频.还有很多需要完善. JSF交流QQ群84376982 JSF入门视频下载地址  http://pan.baidu.com/s/1jG3y4T4 ...

  2. tomcat 6 不支持jsf2.2，仅支持jsf2.0及以下版本

    tomcat 6 不支持jsf2.2,仅支持jsf2.0及以下版本 安装tomcat8即可.

  3. /usr/include/glib-2.0/glib/gtypes.h:34:24: fatal error: glibconfig.h: No such file or directory

    cc -DDEBUG -mtune=core2 -O2 \ -onvideo nvideo.c \ -I/usr/include/atk-1.0 \ -I/usr/include/cairo \ -I ...

  4. jsf2.0 tomcat 修改页面后无法立马看到页面修改效果

    转载于  http://stackoverflow.com/questions/12203657/jsf2-myfaces-xhtml-modifications-do-not-affect-unti ...

  5. 第二次作业#include <stdio.h> int main() { int a,b,c,d,e; printf("请输入一个不多于五位的整数：\n"); scanf("%d",&a); if(a>=100000||a<=0) { printf("输入格式错误！ \n"); } else { if(

    1 判断成绩等级 给定一百分制成绩,要求输出成绩的等级.90以上为A,80-89为B,70-79为C,60-69为D,60分以下为E,输入大于100或小于0时输出"输入数据错误". ...

  6. termios.h(FreeBSD 12.0)

    一.文件位置 /usr/include/termios.h 二.文件内容 /*- * SPDX-License-Identifier: BSD-3-Clause * * Copyright (c) 1 ...

  7. apiCloud中aui获取不到高度，pos.h为0，offsetHeight为0问题

    apiCloud中aui获取不到高度,pos.h为0,offsetHeight为0问题 原HTML <div class="row aui-text-center"> ...

  8. primefaces4.0基本教程以及增删改查

    最近试着用了用primefaces4.0,准备写一个基本的增删改查以及分页程序,但在写的过程中发现了很多问题,本想通过百度.谷歌解决,但无奈中文资料非常少,笔者在坑中不停的打滚,终于完成了一个有着基本 ...

  9. JSF 2 panelGrid example

    In JSF , "h:panelGrid" tag is used to generate HTML table tags to place JSF components in ...

随机推荐

  1. 斯坦福数据挖掘Introduction

    感谢敖山.薛霄老师把我引进了统计学和现代服务业的大门.......至少是长见识了. 查相似项检索时发现的. 中间一部分资料来自厦门大学数据库实验室,感谢大牛们的传道授业,爱你们. 查资料时发现很多计算 ...

  2. DLL远程注入与卸载

    以下提供两个函数,分别用于向其它进程注入和卸载指定DLL模块.支持Unicode编码. #include <windows.h>#include <tchar.h>#inclu ...

  3. 如何在WINDOWS下编译BOOST C++库 .

    如何在WINDOWS下编译BOOST C++库 cheungmine 2008-6-25   写出来,怕自己以后忘记了,也为初学者参考.使用VC8.0和boost1.35.0.   1)下载boost ...

  4. 关于DJANGO和JAVASCRIPT的时间

    最近,实际一些简单统计时,要到库里去检索数据出来用HIGHCHARTS画图, 作一个简单的回照.. DJANGO用TEMPLATEVIEW来作.专业,正规:) class SAView(Templat ...

  5. HDU4647+贪心

    /* 贪心. 题意:给定一些点 一些边 点和边都有价值.现在A B 选点.求A-B的maxVal 思路:分割边.边的1/2分给两个端点. 如果这两个点被同一个人取,则ok:否则 做减法也行,对题意无影 ...

  6. WAMP 80端口被Microsoft-HTTPAPI/2.0占用的解决办法

    WAMP 80端口被Microsoft-HTTPAPI/2.0占用的解决办法 - likebeta - 博客园 http://www.cnblogs.com/likebeta/archive/2012 ...

  7. 面试大总结：Java搞定面试中的链表题目总结

    package LinkedListSummary; import java.util.HashMap; import java.util.Stack; /** * http://blog.csdn. ...

  8. uva 993 Product of digits (贪心 + 分解因子)

      Product of digits  For a given non-negative integer number N , find the minimal natural Q such tha ...

  9. C#中string.Format()和ToString()格式化方法

    C#数字格式化输出是我们在编程中经常需要处理的事情,那么这里向你介绍了一些C#数字格式化输出的例子,这样就会方便你来选择和比较,什么方式是比较适合自己项目的. int a = 12345678; C# ...

  10. Ubuntu12.04下arm交叉编译环境的建立

    http://blog.csdn.net/heyangya2009/article/details/5424376 备注:ubuntu12.04+Android+Real6410 在主机上用来编译其他 ...