Thursday, April 14, 2011

How to use PrimeFaces with Grails

Here is a short example how to use PrimeFaces 2.2.1 with Grails 1.3.7.

The final result should look like this:



Install Grails

Download and install Grails 1.3.7

Create a grails application

Execute
grails create-app grails-primefaces

Install the JSF2 plugin

In order to use PrimeFaces in your grails application, you need to install the Grails JSF 2 plugin:

Enter the directory "grails-primefaces" created by the "create-app" command and execute
grails install-plugin jsf2

Integrate PrimeFaces dependencies

The PrimeFaces dependencies are added via the maven2 dependency resolution integrated in grails.

  1. Open the file
    grails-app/conf/BuildConfig.groovy
  2. Activate the normal maven repositories by uncommenting the lines "mavenLocal()" and "mavenCentral()"
  3. Add the PrimeFaces repository by adding the line
    mavenRepo "http://repository.prime.com.tr"
    to the "repositories" section
  4. Add the PrimeFaces dependencies by adding the line
    compile 'org.primefaces:primefaces:2.2.1'
    to the dependencies section
Your BuildConfig should now look something like that:
repositories {
        grailsPlugins()
        grailsHome()
        grailsCentral()

        // uncomment the below to enable remote dependency resolution
        // from public Maven repositories
        mavenLocal()
        mavenCentral()
        //mavenRepo "http://snapshots.repository.codehaus.org"
        //mavenRepo "http://repository.codehaus.org"
        //mavenRepo "http://download.java.net/maven/2/"
        //mavenRepo "http://repository.jboss.com/maven2/"
        mavenRepo "http://repository.prime.com.tr"
    }
    dependencies {
        // specify dependencies here under either 'build', 'compile', 'runtime', 'test' or 'provided' scopes eg.

        // runtime 'mysql:mysql-connector-java:5.1.13'
      compile 'org.primefaces:primefaces:2.2.1'
    }

Test the integration

  1. Create a JSF bean named "DummyBean" by executing the command
    grails create-bean Dummy
    .
  2. Open the created file grails-app/beans/DummyBean.groovy and add the following attributes and methods:
    • Attributes:
        def textHi = "hi"
        def textBy = "bye"
        def currentText = textHi
      
    • Methods:
        void change(javax.faces.event.ActionEvent ae) {
          if(currentText == textHi){
            currentText = textBy
          }
          else {
            currentText = textHi
          }
          FacesMessage message = new FacesMessage(FacesMessage.SEVERITY_INFO, "Changed text to $currentText", "");
          FacesContext.getCurrentInstance().addMessage(null, message);
        }
      
      The class should now look something like this:
      class DummyBean {
      
      //['view' (jsf2special request scope),'request','session','globalSession' (portlet),'conversation'(swf),'flow'(swf)]
      
        def textHi = "hi"
        def textBy = "bye"
        def currentText = textHi
      
        //def otherBean (autowired bean)
      
        void init() {
          //called when bean starts
        }
      
        void dispose() {
          //called when bean stop
        }
      
        /*String action() {
        }*/
      
        void change(javax.faces.event.ActionEvent ae) {
          if(currentText == textHi){
            currentText = textBy
          }
          else {
            currentText = textHi
          }
          FacesMessage message = new FacesMessage(FacesMessage.SEVERITY_INFO, "Changed text to $currentText", "");
          FacesContext.getCurrentInstance().addMessage(null, message);
        }
      }
      


  3. Create a new file
    dummy.xhtml
    in the folder
    grails-app/views/
    and add the following content:

    <html xmlns="http://www.w3.org/1999/xhtml"
          xmlns:h="http://java.sun.com/jsf/html"
          xmlns:p="http://primefaces.prime.com.tr/ui"
          xmlns:f="http://java.sun.com/jsf/core">
    
    <h:head>
    
    </h:head>
    <h:body>
        <f:view contentType="text/html">
            <h:form>
                <p:growl id="messages"/>
                <h:panelGroup id="prop">
                    <p:commandButton value="say #{dummyBean.currentText}" onclick="dlg.show();"/>
                    <p:commandButton value="Change text..." actionListener="#{dummyBean.change}" update="prop,dialogContent,messages"/>
                </h:panelGroup>
            </h:form>
            <p:dialog header="Saying something..." widgetVar="dlg" resizable="false" modal="true">
                <h:panelGroup id="dialogContent">
                <h:outputText value="#{dummyBean.currentText}!"/>
                </h:panelGroup>
            </p:dialog>
        </f:view>
    </h:body>
    </html>
    

  4. Now startup the application by using the command
    grails run-app
    and open the url http://localhost:8080/grails-primefaces/dummy.xhtml in your browser.