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. c#保留小数点后两位

    double d = 23423.24234234d; Response.Write(d.ToString("0.00"));

  2. hdu 4403

    水水的dfs #include <cstdio> #include <cstring> #include <cstdlib> #include <cmath& ...

  3. Java Web开发 之JavaBean整理

    JavaBean是一种Java组件技术,就其本质就是一个类,具有如下特点:1:实现可序列化2:有一个public的无参的构造方法3:所有实例变量都是private的4:为每一个属性提供getter和s ...

  4. nginx配置负载均衡与反向代理

    #给文件夹授权   1 chown -R www:www /usr/local/nginx #修改配置文件vim nginx.conf   1 2 3 4 5 6 7 8 9 10 11 12 13 ...

  5. inflate方法与findViewById的区别

    LayoutInflater作用是将layout的xml布局文件实例化为View类对象. 对于一个没有被载入或者想要动态载入的界面,都需要使用LayoutInflater.inflate()来找 re ...

  6. Java web 项目搭建

    Java web 项目搭建 简介 在上一节java web环境搭建中,我们配置了开发java web项目最基本的环境,现在我们将采用Spring MVC+Spring+Hibernate的架构搭建一个 ...

  7. Android ImageView（纯java）

    import android.app.Activity; import android.graphics.*; import android.graphics.drawable.*; import a ...

  8. TSharding：用于蘑菇街交易平台的分库分表组件

    tsharding TSharding is the simple sharding component used in mogujie trade platform. 分库分表业界方案 分库分表TS ...

  9. Android Framework------之Input子系统

    下面这是基于Android4.2代码的关于Input子系统的笔记.在这篇笔记中,只涉及Android相关的东西,关于Linux内核中对各种输入设备的统一,在本文中不作说明.此外,由于才疏学浅,文中难免 ...

  10. Go语言Revel框架 环境搭建

    1.首先参考连个链接 http://blog.csdn.net/creak_phone/article/details/12620969 http://www.geek521.com/?p=616 2 ...