JavaEE 7をやってみよう。 Hello, world その3
その2からの続き。
○hello.xhtml
JSFを使ったViewの作成。
まず、ファイルの格納位置を決める。
先のHelloServlet.javaからのフォワード先を"faces/jsf/hello.xhtml"としていた。
だから単純にプロジェクトのWebContentの下にfaces/jsfとフォルダを作り、
そこにxhtmlファイルを配置してもうまくゆかない。
なぜか!?
詳しくJSFの仕様を調べるのは今後の課題だが、
試行錯誤の結果、web.xmlに答えがありそうとみた。
- 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ファイルを格納した。
同様に、cssもcssフォルダを作って配置した。
以下にソースを並べる。
- hello.xhtml
<?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<<String, String>>の表示</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<<String, String>>の表示</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>
- default.css
@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; }
これを起動するとこんな感じとなる。
その4へつづく。