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. jquery中json数据转换为字典

    首先在前台页面中的json数据为 var recipe = {}; recipe["name"] = $("#name").val(); recipe[&quo ...

  2. <span> <div> 局部 keydown ，keyup事件。页面部分div $(document) 无效，可能焦点，添加焦点。

    前天改一个bug, js 实现的一个 面板拖拉,左右各两个列表,中间面板画线连接,页面左侧列表选中后,key 事件无效.右侧选中确有效,很奇怪,查看源码,左侧选中后,$(document).on(&q ...

  3. 几款国产开源的Windows界面库

    上次介绍的几款图形界面库http://blog.okbase.net/vchelp/archive/23.html都是国外的开源项目,今天介绍的几款都是国人的开源项目,大部分是采用DirectUI设计 ...

  4. Eclipse插件—Easy Explorer

    如何使用Eclipse插件—Easy Explorer Easy Explorer是一个Eclipse插件,主要用于快速浏览项目文件的目录,实用性比较强. 使用方法如下:  1.下载Easy Expl ...

  5. nginx知识点

    nginx 安装与配置文件 #cat /etc/nginx/nginx.conf #运行用户user www-data;    #启动进程,通常设置成和cpu的数量相等worker_processes ...

  6. Qt: 把内容写进字符串中与C++很相似（使用QTextStream包装QString）

    #include <iostream>#include <QChar>#include <QFile>#include <QTextStream>#in ...

  7. 1350. Canteen(map)

    1350 这题没什么  就考一下map的用法吧 #include <iostream> #include<cstdio> #include<cstring> #in ...

  8. vijosP1026毒药？解药？

    hash. 怎么感觉叫状态压缩bfs比较合适呢? #include<cstdio> #include<algorithm> #include<cstring> us ...

  9. apache开源项目--Mahout

    Apache Mahout 是 Apache Software Foundation (ASF) 开发的一个全新的开源项目,其主要目标是创建一些可伸缩的机器学习算法,供开发人员在 Apache 在许可 ...

  10. 服务器上的iptables

    服务器上的iptables 防火墙设置脚本规则 完整脚本如下: 复制代码代码示例: #!/bin/bash# by www.jbxue.comiptab="/sbin/iptables&qu ...