最近の更新

読込中...

2012年9月28日金曜日

PhoneGap2.1.0のダウンロード方法

【目的】
PhoneGap2.1.0をダウンロードし、インストールします。



【手順１】
１．「PhoneGapのサイト」にアクセス。
２．「Download PhoneGap」をクリック。




【手順２】
１．「Download」をクリック。




【手順３】
１．保存場所を選択。
２．「保存」ボタンをクリック。























以上です。

投稿者 0 コメント
ラベル:

2012年9月26日水曜日

(JavaServer Faces 1.2 TLD)panelGroup2

【目的】
JSF1.2のpanelGroupを実行します。



【手順】
１．「JSF1.2プロジェクトの作成方法」の手順で、「JSF12Sample037-PanelGroup2」といプロジェクトを作成。
※プロジェクトの設定は以下の通り。

動的
Web
プロジェクト		プロジェクト名JSF12Sample037-PanelGroup2

ターゲット・ランタイムApache Tomcat v6.0
動的 web モジュール　バージョン2.5
構成Apache Tomcat v6.0 デフォルト構成
EARメンバーシップチェックなし
ワーキング・セットチェックなし
Javaビルド・パス上のソース・フォルダーsrc
デフォルト出力フォルダーbuild\classes
Web
モジュール		コンテキスト・ルートJSF12Sample037-PanelGroup2

コンテンツ・ディレクトリーWebContent
web.xml デプロイメント記述子の作成チェックあり


２．「WebContent/WEB-INF/web.xml」を以下の様に入力。
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
    id="WebApp_ID" version="2.5">

    <display-name>JSF12Sample037-PanelGroup2</display-name>

    <context-param>
        <param-name>javax.faces.DEFAULT_SUFFIX</param-name>
        <param-value>.xhtml</param-value>
    </context-param>

    <welcome-file-list>
        <welcome-file>faces/index.xhtml</welcome-file>
    </welcome-file-list>

    <servlet>
        <servlet-name>Faces Servlet</servlet-name>
        <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
        <load-on-startup>1</load-on-startup>
    </servlet>

    <servlet-mapping>
        <servlet-name>Faces Servlet</servlet-name>
        <url-pattern>/faces/*</url-pattern>
    </servlet-mapping>
</web-app>

３．「Ctrl+Shift+F」を押し、ソースコードをフォーマッティング、「Ctrl+S」でファイルを保存。
４．「WebContent/WEB-INF/faces-config.xml」を以下の様に入力。
<?xml version="1.0" encoding="UTF-8"?>

<faces-config xmlns="http://java.sun.com/xml/ns/javaee"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-facesconfig_1_2.xsd"
    version="1.2">

    <application>
        <view-handler>com.sun.facelets.FaceletViewHandler</view-handler>
    </application>

</faces-config>

５．「Ctrl+Shift+F」を押し、ソースコードをフォーマッティング、「Ctrl+S」でファイルを保存。
６．「任意のファイルの作成方法」の手順で、「WebContent/」ディレクトリに「index.xhtml」というファイルを作成。
７．「index.xhtml」を以下の様に入力。
<html xmlns="http://www.w3c.org/1999/xhtml"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html">
<head>
</head>
<body>
    <h:panelGroup style="background-color:green;">
        <h:outputText value="あああ" />
        <h:outputText value="いいい" />
    </h:panelGroup>

    <h:panelGroup layout="block" style="background-color:yellow;">
        <h:outputText value="ううう" />
        <h:outputText value="えええ" />
    </h:panelGroup>
</body>
</html>

８．「Ctrl+Shift+F」を押し、ソースコードをフォーマッティング、「Ctrl+S」でファイルを保存。
９．「動的Webアプリケーションをサーバーに配置する方法」の手順で、作成したプロジェクトをサーバーに配置します。
１０．「サーバーをデバッグモードで起動する方法」の手順で、サーバーを起動します。
１１．ブラウザで以下のURLにアクセスします。
http://localhost:8080/JSF12Sample037-PanelGroup2/faces/index.xhtml

１２．以下の様に表示されれば成功です。

１３．以下の様なHTMLが出力されました。
<html xmlns="http://www.w3c.org/1999/xhtml">
<head>
</head>
<body>
    <span style="background-color:green;">
        あああいいい
    </span>
    <div style="background-color:yellow;">
        うううえええ
    </div>
</body>
</html>



以上です。
投稿者 0 コメント
ラベル:

コンポーネントに引数を渡す方法

【目的】
JSF1.2のFaceletでコンポーネントに引数を渡します。



【手順】
１．「JSF1.2プロジェクトの作成方法」の手順で、「JSF12Sample036-ComponentParameter」といプロジェクトを作成。
※プロジェクトの設定は以下の通り。

動的
Web
プロジェクト		プロジェクト名JSF12Sample036-ComponentParameter

ターゲット・ランタイムApache Tomcat v6.0
動的 web モジュール　バージョン2.5
構成Apache Tomcat v6.0 デフォルト構成
EARメンバーシップチェックなし
ワーキング・セットチェックなし
Javaビルド・パス上のソース・フォルダーsrc
デフォルト出力フォルダーbuild\classes
Web
モジュール		コンテキスト・ルートJSF12Sample036-ComponentParameter

コンテンツ・ディレクトリーWebContent
web.xml デプロイメント記述子の作成チェックあり


２．「WebContent/WEB-INF/web.xml」を以下の様に入力。
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
    id="WebApp_ID" version="2.5">

    <display-name>JSF12Sample036-ComponentParameter</display-name>

    <context-param>
        <param-name>javax.faces.DEFAULT_SUFFIX</param-name>
        <param-value>.xhtml</param-value>
    </context-param>

    <context-param>
        <param-name>facelets.LIBRARIES</param-name>
        <param-value>
            /WEB-INF/facelets/foolprogrammer-taglib.xml
       </param-value>
    </context-param>

    <welcome-file-list>
        <welcome-file>faces/index.xhtml</welcome-file>
    </welcome-file-list>

    <servlet>
        <servlet-name>Faces Servlet</servlet-name>
        <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
        <load-on-startup>1</load-on-startup>
    </servlet>

    <servlet-mapping>
        <servlet-name>Faces Servlet</servlet-name>
        <url-pattern>/faces/*</url-pattern>
    </servlet-mapping>
</web-app>

３．「Ctrl+Shift+F」を押し、ソースコードをフォーマッティング、「Ctrl+S」でファイルを保存。
４．「任意のディレクトリの作成方法」の手順で、「WebContent/WEB-INF」以下に「facelet」というフォルダを作成。
５．「任意のファイルの作成方法」の手順で、「WebContent/WEB-INF/facelet」以下に「foolprogrammer-taglib.xml」というファイルを作成。
６．「foolprogrammer-taglib.xml」を以下の様に入力。
<?xml version="1.0"?>
<!DOCTYPE facelet-taglib PUBLIC
  "-//Sun Microsystems, Inc.//DTD Facelet Taglib 1.0//EN"
  "facelet-taglib_1_0.dtd">
<facelet-taglib>
    <namespace>http://foolprogrammer.blogspot.jp/jsf</namespace>
    <tag>
        <tag-name>customInputText2</tag-name>
        <source>tags/customInputText2.xhtml</source>
    </tag>
</facelet-taglib>

７．「任意のディレクトリの作成方法」の手順で、「WebContent/WEB-INF/facelet」以下に「tags」というフォルダを作成。
８．「任意のファイルの作成方法」の手順で、「WebContent/WEB-INF/facelet/tags」以下に「customInputText1.xhtml」というファイルを作成。
９．「customInputText1.xhtml」を以下の様に入力。
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:c="http://java.sun.com/jstl/core"
    xmlns:fn="http://java.sun.com/jsp/jstl/functions">
    <h:inputText styleClass="inputText1">
        <c:if test="${not empty value}">
            <f:attribute name="value" value="${value}"/>
        </c:if>
        <c:if test="${not empty style}">
            <f:attribute name="style" value="${style}"/>
        </c:if>
    </h:inputText>
</ui:composition>

１０．「Ctrl+Shift+F」を押し、ソースコードをフォーマッティング、「Ctrl+S」でファイルを保存。
１１．「WebContent/WEB-INF/faces-config.xml」を以下の様に入力。
<?xml version="1.0" encoding="UTF-8"?>

<faces-config xmlns="http://java.sun.com/xml/ns/javaee"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-facesconfig_1_2.xsd"
    version="1.2">

    <application>
        <view-handler>com.sun.facelets.FaceletViewHandler</view-handler>
    </application>

</faces-config>

１２．「Ctrl+Shift+F」を押し、ソースコードをフォーマッティング、「Ctrl+S」でファイルを保存。
１３．「任意のファイルの作成方法」の手順で、「WebContent/」ディレクトリに「index.xhtml」というファイルを作成。
１４．「index.xhtml」を以下の様に入力。
<html xmlns="http://www.w3c.org/1999/xhtml"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:fp="http://foolprogrammer.blogspot.jp/jsf">
<head>
<style type="text/css">
<!--
.inputText1{
    background-color: yellow;
    width: 100px;
    height: 30px;
}
-->
</style>
</head>
<body>
    <fp:customInputText2 /><br />
    <fp:customInputText2 value="あいうえお" style="width:200px;" /><br />
    <fp:customInputText2 value="かきくけこ" /><br />
    <fp:customInputText2 style="width:200px;" /><br />
</body>
</html>

１５．「Ctrl+Shift+F」を押し、ソースコードをフォーマッティング、「Ctrl+S」でファイルを保存。
１６．「動的Webアプリケーションをサーバーに配置する方法」の手順で、作成したプロジェクトをサーバーに配置します。
１７．「サーバーをデバッグモードで起動する方法」の手順で、サーバーを起動します。
１８．ブラウザで以下のURLにアクセスします。
http://localhost:8080/JSF12Sample036-ComponentParameter/faces/index.xhtml

１９．以下の様に表示されれば成功です。





以上です。

投稿者 0 コメント
ラベル:

中身を持つコンポーネントの作成方法

【目的】
JSF1.2のFaceletで中身を持つコンポーネントを作成します。



【手順】
１．「JSF1.2プロジェクトの作成方法」の手順で、「JSF12Sample035-CompositeComponent」といプロジェクトを作成。
※プロジェクトの設定は以下の通り。

動的
Web
プロジェクト		プロジェクト名JSF12Sample035-CompositeComponent

ターゲット・ランタイムApache Tomcat v6.0
動的 web モジュール　バージョン2.5
構成Apache Tomcat v6.0 デフォルト構成
EARメンバーシップチェックなし
ワーキング・セットチェックなし
Javaビルド・パス上のソース・フォルダーsrc
デフォルト出力フォルダーbuild\classes
Web
モジュール		コンテキスト・ルートJSF12Sample035-CompositeComponent

コンテンツ・ディレクトリーWebContent
web.xml デプロイメント記述子の作成チェックあり


２．「WebContent/WEB-INF/web.xml」を以下の様に入力。
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
    id="WebApp_ID" version="2.5">

    <display-name>JSF12Sample035-CompositeComponent</display-name>

    <context-param>
        <param-name>javax.faces.DEFAULT_SUFFIX</param-name>
        <param-value>.xhtml</param-value>
    </context-param>

    <context-param>
        <param-name>facelets.LIBRARIES</param-name>
        <param-value>
            /WEB-INF/facelets/foolprogrammer-taglib.xml
       </param-value>
    </context-param>

    <welcome-file-list>
        <welcome-file>faces/index.xhtml</welcome-file>
    </welcome-file-list>

    <servlet>
        <servlet-name>Faces Servlet</servlet-name>
        <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
        <load-on-startup>1</load-on-startup>
    </servlet>

    <servlet-mapping>
        <servlet-name>Faces Servlet</servlet-name>
        <url-pattern>/faces/*</url-pattern>
    </servlet-mapping>
</web-app>

３．「Ctrl+Shift+F」を押し、ソースコードをフォーマッティング、「Ctrl+S」でファイルを保存。
４．「任意のディレクトリの作成方法」の手順で、「WebContent/WEB-INF」以下に「facelet」というフォルダを作成。
５．「任意のファイルの作成方法」の手順で、「WebContent/WEB-INF/facelet」以下に「foolprogrammer-taglib.xml」というファイルを作成。
６．「foolprogrammer-taglib.xml」を以下の様に入力。
<?xml version="1.0"?>
<!DOCTYPE facelet-taglib PUBLIC
  "-//Sun Microsystems, Inc.//DTD Facelet Taglib 1.0//EN"
  "facelet-taglib_1_0.dtd">
<facelet-taglib>
    <namespace>http://foolprogrammer.blogspot.jp/jsf</namespace>
    <tag>
        <tag-name>customDiv1</tag-name>
        <source>tags/customDiv1.xhtml</source>
    </tag>
</facelet-taglib>

７．「任意のディレクトリの作成方法」の手順で、「WebContent/WEB-INF/facelet」以下に「tags」というフォルダを作成。
８．「任意のファイルの作成方法」の手順で、「WebContent/WEB-INF/facelet/tags」以下に「customInputText1.xhtml」というファイルを作成。
９．「customInputText1.xhtml」を以下の様に入力。
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:c="http://java.sun.com/jstl/core"
    xmlns:fn="http://java.sun.com/jsp/jstl/functions">
    <div class="div1">
        <ui:insert />
    </div>
</ui:composition>

１０．「Ctrl+Shift+F」を押し、ソースコードをフォーマッティング、「Ctrl+S」でファイルを保存。
１１．「WebContent/WEB-INF/faces-config.xml」を以下の様に入力。
<?xml version="1.0" encoding="UTF-8"?>

<faces-config xmlns="http://java.sun.com/xml/ns/javaee"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-facesconfig_1_2.xsd"
    version="1.2">

    <application>
        <view-handler>com.sun.facelets.FaceletViewHandler</view-handler>
    </application>

</faces-config>

１２．「Ctrl+Shift+F」を押し、ソースコードをフォーマッティング、「Ctrl+S」でファイルを保存。
１３．「任意のファイルの作成方法」の手順で、「WebContent/」ディレクトリに「index.xhtml」というファイルを作成。
１４．「index.xhtml」を以下の様に入力。
<html xmlns="http://www.w3c.org/1999/xhtml"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:fp="http://foolprogrammer.blogspot.jp/jsf">
<head>
<style type="text/css">
<!--
.div1 {
    background-color: yellow;
    width: 100px;
    height: 30px;
}
-->
</style>
</head>
<body>
    <fp:customDiv1>あああ</fp:customDiv1><br />
    <fp:customDiv1>いいい</fp:customDiv1><br />
    <fp:customDiv1>ううう</fp:customDiv1><br />
    <fp:customDiv1>えええ</fp:customDiv1><br />
    <fp:customDiv1>おおお</fp:customDiv1><br />
</body>
</html>

１５．「Ctrl+Shift+F」を押し、ソースコードをフォーマッティング、「Ctrl+S」でファイルを保存。
１６．「動的Webアプリケーションをサーバーに配置する方法」の手順で、作成したプロジェクトをサーバーに配置します。
１７．「サーバーをデバッグモードで起動する方法」の手順で、サーバーを起動します。
１８．ブラウザで以下のURLにアクセスします。
http://localhost:8080/JSF12Sample035-CompositeComponent/faces/index.xhtml

１９．以下の様に表示されれば成功です。



































以上です。

投稿者 0 コメント
ラベル:

単純なコンポーネントの作成方法

【目的】
JSF1.2のFaceletで簡単なコンポーネントを作成します。



【手順】
１．「JSF1.2プロジェクトの作成方法」の手順で、「JSF12Sample034-SimpleComponent」といプロジェクトを作成。
※プロジェクトの設定は以下の通り。

動的
Web
プロジェクト		プロジェクト名JSF12Sample034-SimpleComponent

ターゲット・ランタイムApache Tomcat v6.0
動的 web モジュール　バージョン2.5
構成Apache Tomcat v6.0 デフォルト構成
EARメンバーシップチェックなし
ワーキング・セットチェックなし
Javaビルド・パス上のソース・フォルダーsrc
デフォルト出力フォルダーbuild\classes
Web
モジュール		コンテキスト・ルートJSF12Sample034-SimpleComponent

コンテンツ・ディレクトリーWebContent
web.xml デプロイメント記述子の作成チェックあり


２．「WebContent/WEB-INF/web.xml」を以下の様に入力。
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
    id="WebApp_ID" version="2.5">

    <display-name>JSF12Sample034-SimpleComponent</display-name>

    <context-param>
        <param-name>javax.faces.DEFAULT_SUFFIX</param-name>
        <param-value>.xhtml</param-value>
    </context-param>

    <context-param>
        <param-name>facelets.LIBRARIES</param-name>
        <param-value>
            /WEB-INF/facelets/foolprogrammer-taglib.xml
       </param-value>
    </context-param>

    <welcome-file-list>
        <welcome-file>faces/index.xhtml</welcome-file>
    </welcome-file-list>

    <servlet>
        <servlet-name>Faces Servlet</servlet-name>
        <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
        <load-on-startup>1</load-on-startup>
    </servlet>

    <servlet-mapping>
        <servlet-name>Faces Servlet</servlet-name>
        <url-pattern>/faces/*</url-pattern>
    </servlet-mapping>
</web-app>

３．「Ctrl+Shift+F」を押し、ソースコードをフォーマッティング、「Ctrl+S」でファイルを保存。
４．「任意のディレクトリの作成方法」の手順で、「WebContent/WEB-INF」以下に「facelet」というフォルダを作成。
５．「任意のファイルの作成方法」の手順で、「WebContent/WEB-INF/facelet」以下に「foolprogrammer-taglib.xml」というファイルを作成。
６．「foolprogrammer-taglib.xml」を以下の様に入力。
<?xml version="1.0"?>
<!DOCTYPE facelet-taglib PUBLIC
  "-//Sun Microsystems, Inc.//DTD Facelet Taglib 1.0//EN"
  "facelet-taglib_1_0.dtd">
<facelet-taglib>
    <namespace>http://foolprogrammer.blogspot.jp/jsf</namespace>
    <tag>
        <tag-name>customInputText1</tag-name>
        <source>tags/customInputText1.xhtml</source>
    </tag>
</facelet-taglib>

７．「任意のディレクトリの作成方法」の手順で、「WebContent/WEB-INF/facelet」以下に「tags」というフォルダを作成。
８．「任意のファイルの作成方法」の手順で、「WebContent/WEB-INF/facelet/tags」以下に「customInputText1.xhtml」というファイルを作成。
９．「customInputText1.xhtml」を以下の様に入力。
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:c="http://java.sun.com/jstl/core"
    xmlns:fn="http://java.sun.com/jsp/jstl/functions">
    <h:inputText styleClass="inputText1" />
</ui:composition>

１０．「Ctrl+Shift+F」を押し、ソースコードをフォーマッティング、「Ctrl+S」でファイルを保存。
１１．「WebContent/WEB-INF/faces-config.xml」を以下の様に入力。
<?xml version="1.0" encoding="UTF-8"?>

<faces-config xmlns="http://java.sun.com/xml/ns/javaee"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-facesconfig_1_2.xsd"
    version="1.2">

    <application>
        <view-handler>com.sun.facelets.FaceletViewHandler</view-handler>
    </application>

</faces-config>

１２．「Ctrl+Shift+F」を押し、ソースコードをフォーマッティング、「Ctrl+S」でファイルを保存。
１３．「任意のファイルの作成方法」の手順で、「WebContent/」ディレクトリに「index.xhtml」というファイルを作成。
１４．「index.xhtml」を以下の様に入力。
<html xmlns="http://www.w3c.org/1999/xhtml"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:fp="http://foolprogrammer.blogspot.jp/jsf">
<head>
<style type="text/css">
<!--
.inputText1{
    background-color: yellow;
    width: 100px;
    height: 30px;
}
-->
</style>
</head>
<body>
    <fp:customInputText1 /><br />
    <fp:customInputText1 /><br />
    <fp:customInputText1 /><br />
    <fp:customInputText1 /><br />
    <fp:customInputText1 /><br />
</body>
</html>

１５．「Ctrl+Shift+F」を押し、ソースコードをフォーマッティング、「Ctrl+S」でファイルを保存。
１６．「動的Webアプリケーションをサーバーに配置する方法」の手順で、作成したプロジェクトをサーバーに配置します。
１７．「サーバーをデバッグモードで起動する方法」の手順で、サーバーを起動します。
１８．ブラウザで以下のURLにアクセスします。
http://localhost:8080/JSF12Sample034-SimpleComponent/faces/index.xhtml

１９．以下の様に表示されれば成功です。







































以上です。

投稿者 0 コメント
ラベル:

2012年9月25日火曜日

RichFaces3が出力するデータテーブルのHTML⇔CSSのクラス⇔CSSの中身の対応表

■RichFaces3が出力するデータテーブルのHTML(id属性は削除)
<table class="rich-table" border="0" cellpadding="0" cellspacing="0">
    <colgroup span="2">
    </colgroup>
    <thead class="rich-table-thead">
        <tr class="rich-table-header">
            <th class="rich-table-headercell" colspan="2">
                参加者
            </th>
        </tr>
        <tr class="rich-table-header-continue">
            <th class="rich-table-headercell">
                名前
            </th>
            <th class="rich-table-headercell">
                年齢
            </th>
        </tr>
        <tr class="rich-table-subheader">
            <th class="rich-table-subheadercell" scope="col">
                <div>
                    Name
                </div>
            </th>
            <th class="rich-table-subheadercell" scope="col">
                <div>
                    Age
                </div>
            </th>
        </tr>
    </thead>
    <tfoot>
        <tr class="rich-table-subfooter">
            <td class="rich-table-subfootercell" scope="col">
                Name
            </td>
            <td class="rich-table-subfootercell" scope="col">
                Age
            </td>
        </tr>
        <tr class="rich-table-footer">
            <td class="rich-table-footercell">
                名前
            </td>
            <td class="rich-table-footercell">
                年齢
            </td>
        </tr>
        <tr class="rich-table-footer-continue">
            <td class="rich-table-footercell" colspan="2">
                参加者
            </td>
        </tr>
    </tfoot>
    <tbody>
        <tr class="rich-table-row rich-table-firstrow">
            <td class="rich-table-cell">
                あいうえお
            </td>
            <td class="rich-table-cell">
                20
            </td>
        </tr>
        <tr class="rich-table-row">
            <td class="rich-table-cell">
                かきくけこ
            </td>
            <td class="rich-table-cell">
                30
            </td>
        </tr>
    </tbody>
</table>



■対応表
グループHTMLCSSのクラスCSSの中身(デフォルト)
テーブル<talbe>rich-table.rich-table {
border-top: solid 1px silver;
border-left: solid 1px silver;
background-color: white;
empty-cells: show;
border-collapse: collapse;
}
テーブルヘッダ
(テーブル自体のヘッダ)		<thead>rich-table-thead.rich-table-thead {
border-bottom: solid 1px silver;
}
<thead><tr>rich-table-header.rich-table-header {
background-color: #BED6F8;
background-image: url(/RichFaces3Sample066-DataTableHeaderFooter2Row/faces/a4j/g/3_3_3.Finalorg.richfaces.renderkit.html.GradientA/DATB/eAH7!!3Tj2v7mAAZZAV3);
background-position: top left;
background-repeat: repeat-x;
}
<thead><tr><th>rich-table-headercell.rich-table-headercell {
border-right: solid 1px silver;
border-bottom: solid 1px silver;
padding: 4px 4px 4px 4px;
color: black;
text-align: center;
font-weight: bold;
font-size: 11px;
font-family: Arial,Verdana,sans-serif;
}
<thead><tr>
(2行目以降)		rich-table-header-continue.rich-table-header-continue {
background-color: #BED6F8;
}
テーブルサブヘッダ
(カラムに属するヘッダ)		<thead><tr>rich-table-subheader.rich-table-subheader {
background-color: #ECF4FE;
}
<thead><tr><th>rich-table-subheadercell.rich-table-subheadercell {
border-right: solid 1px silver;
padding: 4px 4px 4px 4px;
text-align: center;
font-size: 11px;
color: black;
font-family: Arial,Verdana,sans-serif;
white-space: nowrap;
}
テーブルフッタ
(テーブル自体のフッタ)		<tfoot><tr>rich-table-footer.rich-table-footer {
background-color: #CCC;
}
<tfoot><tr><td>rich-table-footercell.rich-table-footer-continue {
background-color: #CCC;
}
テーブルサブフッタ
(カラムに属するフッタ)		<tfoot><tr>rich-table-subfooter.rich-table-subfooter {
background-color: #F1F1F1;
}
<tfoot><tr><td>rich-table-subfootercell.rich-table-subfootercell {
border-right: solid 1px silver;
border-bottom: solid 1px silver;
padding: 4px 4px 4px 4px;
text-align: left;
font-size: 11px;
color: black;
font-family: Arial,Verdana,sans-serif;
}
テーブルボディー<tbody><tr>rich-table-rowなし
<tbody><td>rich-table-cell.rich-table-cell {
border-right: solid 1px silver;
border-bottom: solid 1px silver;
padding: 4px 4px 4px 4px;
font-size: 11px;
color: black;
font-family: Arial,Verdana,sans-serif;
}
<tbody><tr>
(1行目)		rich-table-firstrowなし
投稿者 0 コメント
ラベル:
登録: コメント (Atom)

関連記事

loading..