PrimeFaces hello world exemple

Dans ce didacticiel, nous allons vous montrer comment créer un projet de JSF 2 PrimeFaces , le résultat final affiche une chaîne «hello world» dans le composant editor de PrimeFaces.

Les outils utilisés :

JSF 2.1.11
Primefaces 3.3
Eclipse 4.2
Maven 3
Testé sur Tomcat 7

1. Répertoire du projet

Répertoire du projet final.

répertoire du projet

2. Dépendance du projet

Pour utiliser PrimeFaces, vous avez besoin uniquement de primefaces- {version} .jar , mais ce fichier jar n’est pas disponible sur Maven référentiel central . Vous devez donc déclarer le référentiel propre à PrimeFaces. :

Reportez-vous ici: PrimeFaces download reference

    <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>

File: pom.xml - Ajoute des dépendances JSF 2 et 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 Editeur

Créez un bean simple pour fournir ultérieurement des données au composant d’édition PrimeFaces.

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. Page Web

Pour utiliser les composants PrimeFaces, il suffit de déclarer cet espace de noms xmlns: p =" http://primefaces.org/ui " , et de commencer à l’utiliser, en toute simplicité.

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. Configuration

Remarque ** PrimeFaces ne nécessite aucune configuration obligatoire

Voir web.xml ci-dessous, uniquement pour la configuration JSF.

Fichier: 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. Démo

Voir le résultat final. http://localhost : 8080/primefaces/

bonjour monde résultat

Télécharger le code source

Téléchargez-le - lien://wp-content/uploads/2012/08/primefaces-hello-world-example.zip[primefaces-hello-world-example.zip](8 Ko)

Références

Site officiel dePrimeFaces
lien://jsf2/jsf-2-0-bonjour-exemple-monde/[exemple bonjour JSF 2]

lien://tag/hello-world/[hello world]lien://tag/jsf2/[jsf2] primefaces

TOC