JSF1.2のpanelGridを実行します。
【手順】
1.「JSF1.2プロジェクトの作成方法」の手順で、「JSF12Sample020-PanelGrid」といプロジェクトを作成。
※プロジェクトの設定は以下の通り。
2.「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>JSF12Sample020-PanelGrid</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>
3.「Ctrl+Shift+F」を押し、ソースコードをフォーマッティング、「Ctrl+S」でファイルを保存。
4.「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>
5.「Ctrl+Shift+F」を押し、ソースコードをフォーマッティング、「Ctrl+S」でファイルを保存。
6.「任意のファイルの作成方法」の手順で、「WebContent/」ディレクトリに「index.xhtml」というファイルを作成。
7.「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:panelGrid columns="2" border="1"> <f:facet name="header"> <h:outputText value="ヘッダー" /> </f:facet> <h:outputText value="セル1-1" /> <h:outputText value="セル1-2" /> <h:outputText value="セル2-1" /> <h:outputText value="セル2-2" /> <f:facet name="footer"> <h:outputText value="フッター" /> </f:facet> </h:panelGrid> </body> </html>
8.「Ctrl+Shift+F」を押し、ソースコードをフォーマッティング、「Ctrl+S」でファイルを保存。
9.「動的Webアプリケーションをサーバーに配置する方法」の手順で、作成したプロジェクトをサーバーに配置します。
10.「サーバーをデバッグモードで起動する方法」の手順で、サーバーを起動します。
11.ブラウザで以下のURLにアクセスします。
http://localhost:8080/JSF12Sample020-PanelGrid/faces/index.xhtml
12.以下の様に表示されれば成功です。
13.以下の様なHTMLが出力されました。
<html xmlns="http://www.w3c.org/1999/xhtml"> <head> </head> <body> <table border="1"> <thead> <tr> <th colspan="2" scope="colgroup">ヘッダー</th> </tr> </thead> <tfoot> <tr> <td colspan="2">フッター</td> </tr> </tfoot> <tbody> <tr> <td>セル1-1</td> <td>セル1-2</td> </tr> <tr> <td>セル2-1</td> <td>セル2-2</td> </tr> </tbody> </table> </body> </html>
以上です。
0 件のコメント:
コメントを投稿
注: コメントを投稿できるのは、このブログのメンバーだけです。