このチュートリアルでは、JSF 2のhttp://www.primefaces.org[PrimeFaces]プロジェクトを作成する方法を説明します。最終出力はPrimeFacesの `editor`コンポーネントに" hello world "文字列を表示します。
使用されるツール:
-
JSF 2.1.11
-
プライムフェイス3.3
-
Eclipse 4.2
-
Maven 3
-
Tomcat 7でテスト済み
1.プロジェクトディレクトリ
最終プロジェクトディレクトリ。
プロジェクトの依存関係
PrimeFacesを使用するには、単一の `primefaces- {version} .jar`だけが必要ですが、このjarはhttp://search.maven.org/[Maven central repository]では利用できません。したがって、PrimeFaces自身のリポジトリを宣言する必要があります:
ここを参照してください:http://www.primefaces.org/downloads.html[PrimeFacesダウンロードリファレンス]
<repository> <id>prime-repo</id> <name>Prime Repo</name> <url>http://repository.primefaces.org</url> </repository> <dependency> <groupId>org.primefaces</groupId> <artifactId>primefaces</artifactId> <version>3.3</version> </dependency>
ファイル:pom.xml - JSF 2とPrimefacesの依存関係を追加します。
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4__0__0.xsd"> <modelVersion>4.0.0</modelVersion> <groupId>com.mkyong.core</groupId> <artifactId>primefaces</artifactId> <packaging>war</packaging> <version>1.0-SNAPSHOT</version> <name>primefaces Maven Webapp</name> <url>http://maven.apache.org</url> <repositories> <repository> <id>prime-repo</id> <name>Prime Repo</name> <url>http://repository.primefaces.org</url> </repository> </repositories> <dependencies> <!-- PrimeFaces --> <dependency> <groupId>org.primefaces</groupId> <artifactId>primefaces</artifactId> <version>3.3</version> </dependency> <!-- JSF 2 --> <dependency> <groupId>com.sun.faces</groupId> <artifactId>jsf-api</artifactId> <version>2.1.11</version> </dependency> <dependency> <groupId>com.sun.faces</groupId> <artifactId>jsf-impl</artifactId> <version>2.1.11</version> </dependency> <dependency> <groupId>javax.servlet</groupId> <artifactId>jstl</artifactId> <version>1.2</version> </dependency> <dependency> <groupId>javax.servlet</groupId> <artifactId>servlet-api</artifactId> <version>2.5</version> </dependency> <dependency> <groupId>javax.servlet.jsp</groupId> <artifactId>jsp-api</artifactId> <version>2.1</version> </dependency> <!-- EL --> <dependency> <groupId>org.glassfish.web</groupId> <artifactId>el-impl</artifactId> <version>2.2</version> </dependency> <!-- Tomcat 6 need this <dependency> <groupId>com.sun.el</groupId> <artifactId>el-ri</artifactId> <version>1.0</version> </dependency> --> </dependencies> <build> <plugins> <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-compiler-plugin</artifactId> <version>2.3.2</version> <configuration> <source>1.6</source> <target>1.6</target> </configuration> </plugin> </plugins> </build> </project>
3.エディタBean
後でPrimeFacesエディタコンポーネントのデータを提供するために単純なBeanを作成します。
File:EditorBean.java
package com.mkyong.editor; import javax.faces.bean.ManagedBean; @ManagedBean(name = "editor") public class EditorBean { private String value = "This editor is provided by PrimeFaces"; public String getValue() { return value; } public void setValue(String value) { this.value = value; } }
4. Webページ
PrimeFacesコンポーネントを使用するには、この名前空間 `xmlns:p =" http://primefaces.org/ui "を宣言して、単純に使用してください。
File:index.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:f="http://java.sun.com/jsf/core" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:p="http://primefaces.org/ui"> <h:head> </h:head> <h:body> <h1>Hello World PrimeFaces</h1> <h:form> <p:editor value="#{editor.value}"/> </h:form> </h:body> </html>
5.設定
-
注意** PrimeFacesには必須の設定は必要ありません
以下の `web.xml`を参照してください。JSFの設定のみです。
ファイル: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>PrimeFaces Web Application</display-name> <!-- Change to "Production" when you are ready to deploy --> <context-param> <param-name>javax.faces.PROJECT__STAGE</param-name> <param-value>Development</param-value> </context-param> <!-- Welcome page --> <welcome-file-list> <welcome-file>faces/index.xhtml</welcome-file> </welcome-file-list> <!-- JSF mapping --> <servlet> <servlet-name>Faces Servlet</servlet-name> <servlet-class>javax.faces.webapp.FacesServlet</servlet-class> <load-on-startup>1</load-on-startup> </servlet> <!-- Map these files with JSF --> <servlet-mapping> <servlet-name>Faces Servlet</servlet-name> <url-pattern>/faces/** </url-pattern> </servlet-mapping> <servlet-mapping> <servlet-name>Faces Servlet</servlet-name> <url-pattern>** .jsf</url-pattern> </servlet-mapping> <servlet-mapping> <servlet-name>Faces Servlet</servlet-name> <url-pattern>** .faces</url-pattern> </servlet-mapping> <servlet-mapping> <servlet-name>Faces Servlet</servlet-name> <url-pattern>** .xhtml</url-pattern> </servlet-mapping> </web-app>
ソースコードをダウンロードする
ダウンロードする - リンク://wp-content/uploads/2012/08/primefaces-hello-world-example.zip[primefaces-hello-world-example.zip](8 kb)