java.net member

Rechercher dans ce site

PrimeFaces with JSF2 Fist Step

>> 27 September 2010


JSF2 is a very cool technology. With PrimeFaces, you can add lots of components, themes and goodies, with almost no efforts at all.

Welcome to PrimeFaces
"PrimeFaces is a lightweight open source component suite for Java Server Faces 2.0 featuring 100+ rich set of JSF components."

Getting started
1.Download the .jar (current is primefaces-2.2.M1.jar). Add it to  WEB-INF/lib

2.Add WEB-INF/lib/primefaces-2.2.M1.jar to YourProject/properties/Java Build Path

3.Import the namespace, by instruction in .xhtml page
"xmlns:p="http://primefaces.prime.com.tr/ui"

Web Site :
http://www.primefaces.org/

Will it play on GAEJ
Yes. Except for some special operations where other libraries are used. Some of these use dependencies that are not on the "The JRE Class White List" of Google, for instance Jcomponent when generating bar  code with "Barbecue".
Hello Calendar
To change a bit of the famous "Hello World", I'll try here a calendar (one of the components provided by PrimeFaces)

faces-config.xml
<?xml version="1.0" encoding="UTF-8"?>
<faces-config xmlns="http://java.sun.com/xml/ns/javaee"
 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-facesconfig_2_0.xsd"
 version="2.0">

 <navigation-rule>
 <from-view-id>/prime.xhtml</from-view-id>
 <navigation-case>
 <from-outcome>done</from-outcome>
 <to-view-id>/result.xhtml</to-view-id>

  </navigation-case>
 
  </navigation-rule>
 </faces-config>


PrimeTest.java (The bean)
package fr.iipt.ka.faces;


import java.util.Date;


import javax.faces.bean.*;

@ManagedBean(name="pTest")
@RequestScoped
public class PrimeTest {
  
    private Date date;
        /**
     * @return the date
     */
    public Date getDate() {
        return date;
    }

    /**
     * @param date the date to set
     */
    public void setDate(Date date) {
      
        this.date = date;
    }
  
    public String whatNext()
    {
        return "done";
    }
  

}

prime.xhtml
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.prime.com.tr/ui"
>
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Insert title here</title>
</h:head>
<h:body>
<h:form>
<h:panelGrid columns="2">
<p:calendar value="#{pTest.date}" mode="popup" showOn="button" pattern="dd/MM/yyyy"/>
<h:commandButton action="#{pTest.whatNext}" value="result"/>
</h:panelGrid>
</h:form>
</h:body>
</html>

result.xhtml
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
>
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>result.xhtml</title>
</h:head>
<h:body>

result.xhtml<br/>
<h:outputText value="#{pTest.date}">
<f:convertDateTime pattern="dd/MM/yyyy"/>
</h:outputText>

</h:body>
</html>








 

Using a customized theme
There are many themes, ready to use. Each is a zip file to download on PrimeFaces site. When unzipped, it creates one folder "images" and a css file "skin.css"

How to install
1.Disable default skin
in web.xml
<!-- Disable original theme in primefaces -->
   <context-param>
      <param-name>primefaces.skin</param-name>
        <param-value>none</param-value>
    </context-param>
<!--END Disable original theme in primefaces  -->

2.Unzip the downloaded theme file (zip) into a folder in your application (I Used in the example "ui-lightness" the full path  to the unzipped folder is "war/primeFacesThemes/ui-lightness/")
3.In any .xhtml put a link to the css file
 <link type="text/css" rel="stylesheet" href="primeFacesThemes/ui-lightness/skin.css" />

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" version="2.5">
  
  
    <context-param>
    <param-name>org.apache.myfaces.config.annotation.LifecycleProvider</param-name>
    <param-value>org.apache.myfaces.config.annotation.NoInjectionAnnotationLifecycleProvider</param-value>
  </context-param>
 
  <!-- for EL 2.2 -->
<context-param>
<param-name>com.sun.faces.expressionFactory</param-name>
<param-value>com.sun.el.ExpressionFactoryImpl</param-value>
</context-param>

 <!-- end EL 2.2 -->
  <servlet>
    <servlet-name>Faces Servlet</servlet-name>
    <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>Faces Servlet</servlet-name>
    <url-pattern>*.jsf</url-pattern>
    <url-pattern>/faces/*</url-pattern>
  </servlet-mapping>
<!--  end add -->




<context-param>
<param-name>javax.faces.DEFAULT_SUFFIX</param-name>
<param-value>.xhtml</param-value>
</context-param>

<!-- Disable original theme in primefaces -->
   <context-param>
      <param-name>primefaces.skin</param-name>
        <param-value>none</param-value>
    </context-param>
<!-- END Disable original theme in primefaces  -->
  
    <welcome-file-list>
        <welcome-file>index.html</welcome-file>
    </welcome-file-list>
</web-app>

prime.xhtml
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.prime.com.tr/ui"
>
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Calendar in PrimeFaces</title>
<link type="text/css" rel="stylesheet" href="primeFacesThemes/ui-lightness/skin.css" />
</h:head>
<h:body>
<h:form>
<h:panelGrid columns="2">
<p:calendar value="#{pTest.date}" mode="popup" showOn="button" pattern="dd/MM/yyyy"/>
<h:commandButton action="#{pTest.whatNext}" value="result"/>
</h:panelGrid>
</h:form>
</h:body>
</html>



1 comments:

Rajesh Kumar January 27, 2011 at 9:52 AM  

Thanks to this information, I was able to apply different themes to my Primefaces dataTable

Post a Comment

  © Blogger template Simple n' Sweet by Ourblogtemplates.com 2009

Back to TOP