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.

9 comments:

Anonymous said...

Neat !

Unknown said...
This comment has been removed by the author.
Anonymous said...

Man,

I have to delete the .gsp pages?

Anonymous said...

have to add the repository mavenRepo "https://repository.jboss.org/nexus/content/repositories/thirdparty-releases/"

http://repository.jboss.com/maven2/ repository is failing

Andreas N said...

Why would you marry something as pretty as Grails with something as ugly as JSF ;-) Good article though!

Mattias Olofsson said...

You want to mary it because you want to be clever not to reevent the wheel of creating you own UI components.

ganji said...

Hi, any tips on creating best blog using prime faces

Rafael said...

=======Pt- BR
Olá, esse repositório não está ativo, consegui usar o http://repository.primefaces.org/.

Desculpe pelo meu modo de escrever, não domino o ingles
=============

Hello, this repository is not active, I could use the http://repository.primefaces.org/.

Sorry for my writing, not mastered the English

Unknown said...

Does Primefaces 4 work with Grails 2 ? Or which version combinations is recommended?

Post a Comment