PrimeFacesこんにちは世界の例

投稿日: 2019-11-05 2019-11-05
タグ: hello world, jsf2, primefaces

このチュートリアルでは、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.プロジェクトディレクトリ

最終プロジェクトディレクトリ。

プロジェクトディレクトリ、タイトル= "プロジェクトディレクトリの新規"、幅= 490、高さ= 329

プロジェクトの依存関係

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>

6.デモ

最終出力を参照してください。

http://localhost:8080/primefaces/

hello world result、title = "primefaces-hello-world-new"、width = 640、height = 414

ソースコードをダウンロードする

ダウンロードする – リンク://wp-content/uploads/2012/08/primefaces-hello-world-example.zip[primefaces-hello-world-example.zip]（8 kb）

参考文献

hello world

jsf2

primefaces

getdocs

13036