ひこぽんのーと

覚書と雑記です。

JavaEE 7をやってみよう。 Hello, world その3

その2からの続き。

○hello.xhtml
JSFを使ったViewの作成。
まず、ファイルの格納位置を決める。

先のHelloServlet.javaからのフォワード先を"faces/jsf/hello.xhtml"としていた。
だから単純にプロジェクトのWebContentの下にfaces/jsfとフォルダを作り、
そこにxhtmlファイルを配置してもうまくゆかない。
なぜか!?

詳しくJSFの仕様を調べるのは今後の課題だが、
試行錯誤の結果、web.xmlに答えがありそうとみた。

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" id="WebApp_ID" version="3.1">
  <display-name>HelloWeb</display-name>
  <welcome-file-list>
    <welcome-file>/html/index.html</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>

servlet-mappingのFaces ServletのURLパターンに/faces/*とある。
/facesはFaces Servletの呼び出しであり、
/faces以下のURLはどうやら、Faces Servletのパラメータになっていそうだ。
したがって、WebContentの下にjsfとフォルダを作りxhtmlファイルを格納した。
同様に、csscssフォルダを作って配置した。
以下にソースを並べる。

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" 
      xmlns:h="http://java.sun.com/jsf/html" 
      xmlns:c="http://java.sun.com/jsp/jstl/core"
      xmlns:f="http://java.sun.com/jsf/core">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" charset="UTF-8" href="css/default.css" />
<title>Hello</title>

</head>
<h:body>
    <h1>Hello, World</h1>
    <h3>List&lt;&lt;String, String&gt;&gt;の表示</h3>
    <h:dataTable var="item" value="#{dataList}" border="1">
        <h:column id="type">
            <h:outputText value="#{item.type}" />
        </h:column>
        <h:column id="name">
            <h:outputText value="#{item.name}" />
        </h:column>
    </h:dataTable>
    
    <h3>ListDataModelを使用したList&lt;&lt;String, String&gt;&gt;の表示</h3>
    <h:dataTable var="item" value="#{dataModel}" styleClass="table" headerClass="headerrow" rowClasses="oddrow,evenrow">
        <h:column id="no">
            <f:facet name="header">No.</f:facet>
            <h:outputText value="#{dataModel.rowIndex}" />
        </h:column>
        <h:column id="type">
            <f:facet name="header">Type</f:facet>
            <h:outputText value="#{item.type}" />
        </h:column>
        <h:column id="name">
            <f:facet name="header">Name</f:facet>
            <h:outputText value="#{item.name}" />
        </h:column>
    </h:dataTable>
</h:body>
</html>
@CHARSET "UTF-8";
.headerrow {
	background-color:#e6e6fa;
}
.oddrow {
    background-color:#ffffff;
}
.evenrow {
	background-color:#ffffcc;
}
.table {
	width: 300px;
	background-color: #b0c4de;
	border: 1px solid #boc4de;
}

これを起動するとこんな感じとなる。
f:id:nagamitsu1976:20150727143939p:plain

その4へつづく。