NetBeans Wiki: UsingSpringAndFaceletsTogetherWithNetBeans61

UsingSpringAndFaceletsTogetherWithNetBeans61

Your trail:

Page Info Plain View My Prefs Log in

This page (revision-17) last changed on 02:22 25-Jul-2008 by VarunNischal.

Using Spring 2 and Facelets together with NetBeans 6.1

netbeans logo glassfish logo spring logo facelets

Written by Siegfried Bolz
The original blog is available at Another Random Developer Blog
If you have comments, suggestions.. feel free to drop a line in my blog.

In this tutorial you can read how to create a Web Application with NetBeans 6.1 and the GlassFish 2 Application Server. This Web Application is using Facelets, MyFaces 1.2 and the Spring 2 technologies.

Prerequisites

First update your NetBeans 6.1 to the newest version (currently it is Build 200804211638). nb version

Install the Facelets Support Modules from my blog and restart NetBeans.

Create a new Web Application

Create a new Web Application, name it “Spring_and_Facelets“. create web app

Choose GlassFish v2 as Server and click next.

In the last step, activate the Facelets-Framework.

Open the Project Properties and remove all libraries.

Download and add my special MyFaces and Facelets Libraries Collection to the project. add libraries

Build and run the application. You should see this in your browser:

Adding some Facelets functionality

It is now time to add some specific Facelets functionality to this small Web Application. First we create a new facelets file, name it “header“. add new facelets file

add new facelets file part 2

Insert this HTML code into the file:

header.xhtml

<!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:ui="http://java.sun.com/jsf/facelets">
          
    <ui:composition>
        
        <div id="page-title">[
            <a target="_blank" href="http://blog.jdevelop.eu">Another Random Developer Blog</a> |
            <a target="_blank" href="http://www.netbeans.org">NetBeans</a> |
            <a target="_blank" href="https://glassfish.dev.java.net/">GlassFish</a>
        ]</div>
                 
    </ui:composition>   
    
</html>

Add the footer file:

and insert this code:

footer.xhtml

<!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:ui="http://java.sun.com/jsf/facelets">
          
    <ui:composition>
        
        <div id="page-footer">
            Copyright 2008 by <a href="http://blog.jdevelop.eu" target="_blank">Siegfried Bolz</a>
        </div>
                 
    </ui:composition>   
    
</html>

Next create the file “content_main.xhtml” for the content. add main content

and insert this code:

content_main.xhtml

<!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:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html">
    
    <ui:composition>
    
        <p>
            <h:outputText value="#{simpleJsfBean.helloWorld}"/>
        </p>
            
    </ui:composition>   
    
</html>

Replace the content of the file “default.css” with this code:

default.css

@CHARSET "ISO-8859-1";

body { margin:60px 40px 0px 40px; color:#666; line-height:1.3em;
  font-family:'Century Gothic', Helvetica, Arial, clean, sans-serif;
}

select, textarea, input[type='text'], input[type='password'] {
  font-family:'Century Gothic', Helvetica, Arial, clean, sans-serif;
  font-size:1em; padding:3px 3px; margin:2px; border:1px solid #999;
}

button, input[type='button'], input[type='submit'], input[type='cancel'] {
  font-family:'Century Gothic', Helvetica, Arial, clean, sans-serif;
  font-size:1em;
}

a { color:Blue; text-decoration:none; }
a:hover { background-color:#ffc; color:#fc6; }
a:active { color:#fc6; }

h1 { color:#000; font-weight:bold; font-size:130%; }
h2 { color:#000; font-size:110%; }
h3 { color:#000; font-size:100%; }
h4 { color:#000; font-size:90%; }

img { border:0; }

table { border-collapse:collapse; border-spacing:5px; }
table, td, th { border:1px solid #ccc; padding:5px; }
table.form th { text-align:right; font-weight:normal; }
table.grey th { background:#eee; font-weight:normal; }
table.plain { border:0; }
table.plain td { border:0; }
table.plain th { border:0; }


#page-title { background-color:#7272a2; border:1px solid #000000;
  border-top:0; padding:5px; font-size:80%; line-height:1.8em;
  position:absolute; top:0; left:0; width:100%; color:#ccc;
}
#page-title a { text-decoration:none; color:white; }
#page-title a:hover { background-color:#7272a2; color:#ff3; }
#page-title a:active { color:#fc6; }

#page-footer { background-color:#7272a2; border:1px solid #000000;
  border-top:0; padding:5px; font-size:80%; line-height:1.8em;
  position:absolute;left:0;width:100%;color:#ccc;
}

#page-footer a { text-decoration:none; color:white; }
#page-footer a:hover { background-color:#7272a2; color:#ff3; }
#page-footer a:active { color:#fc6; }

#headName { width:300px;}

Do the same with the file “template-client.xhtml“:

template-client.xhtml

<!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:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html">
    <body>
               
        <ui:composition template="/template.xhtml">
            
        <!--
            INSERT CONTENT
        -->
        <ui:param name="urlContentMiddle" value="/inc/content_main.xhtml"/> 
            
        </ui:composition>
        
    </body>
</html>

Now we want to display some data. Create the Managed Bean “SimpleManagedBean.java“:

Insert this java code:

SimpleManagedBean.java

package view;

/**
 * Managed Bean for JSF
 * 
 * @author Siegfried Bolz
 */
public class SimpleManagedBean {

    private String helloWorld = "Hello GlassFish :-)";

    /**
     * @return the Message
     */
    public String getHelloWorld() {
        return helloWorld;
    }
    
} // .EOF

The last step is to modify the file “faces-config.xml“. Insert this code:

faces-config.xml

<?xml version='1.0' encoding='UTF-8'?>

<!-- =========== FULL CONFIGURATION FILE ================================== -->

<faces-config version="1.2" 
    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_1_2.xsd">

    <application>
        <view-handler>
            com.sun.facelets.FaceletViewHandler
        </view-handler>        
    </application> 
    
    
    <!-- a normal Managed Bean -->    
    <managed-bean>
        <managed-bean-name>simpleJsfBean</managed-bean-name>
        <managed-bean-class>view.SimpleManagedBean</managed-bean-class>
        <managed-bean-scope>session</managed-bean-scope>
    </managed-bean>
  
</faces-config>

Your Project should now look like this: project overview 2

It is now time to build and launch this application. You can see the hardcoded message “Hello GlassFish :-)“.

Adding Spring 2 functionality

This Project is now able to show information from the previous created Managed Bean. To use Spring-Beans, we have to modify some parts of this application. Let’s go!

First, add the “Spring Framework 2.5” in the Project properties. This library is shipped with NetBeans 6.1.
add spring 2 support

Create a Spring Configuration file:
create spring config

and name it “applicationContext.xml“.
appcontext

This file is very simple, only one Spring-Bean is included. Replace the content with this code:

applicationContext.xml

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-2.5.xsd">
    
    
    <!-- Use this Spring-Bean as a Managed-Bean for JSF. -->
    <bean id="simpleSpringBean" class="view.SimpleSpringBean" scope="request"/>
    
</beans>

Create now the new Spring-Bean classfile:
create class file

Insert this code:

SimpleSpringBean.java

package view;

/**
 * This is a Spring Managed Bean
 * 
 * @author Siegfried Bolz
 */
public class SimpleSpringBean {

    private String springMessage="Hello from Spring!";

    /**
     * @return the spring message
     */
    public String getSpringMessage() {
        return springMessage;
    } 
    
} // .EOF

Modify the file “content_main.xhtml” and add this code:

content_main.xhtml

<p>
    <h:outputText value="#{simpleSpringBean.springMessage}"/>
</p>

Insert into “faces-config.xml” below the </view-handler> this code:

faces-config.xml

		...
    <application>

				...
				 
        <variable-resolver>
            org.springframework.web.jsf.DelegatingVariableResolver
        </variable-resolver>        
    </application> 

  	...

You need the DelegatingVariableResolver to recognize the Spring-Beans in the JSF-context.

The last file to modify is the “web.xml“. Here we have to add the “contextConfigLocation“, “ContextLoaderListener” and “RequestContextListener“. This is the full code:

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" 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-app_2_5.xsd">
    <context-param>
        <param-name>contextConfigLocation</param-name>
        <param-value>/WEB-INF/applicationContext.xml</param-value>
    </context-param>    
    <context-param>
        <param-name>com.sun.faces.verifyObjects</param-name>
        <param-value>true</param-value>
    </context-param>
    <context-param>
        <param-name>com.sun.faces.validateXml</param-name>
        <param-value>true</param-value>
    </context-param>
    <context-param>
        <param-name>javax.faces.DEFAULT_SUFFIX</param-name>
        <param-value>.xhtml</param-value>
    </context-param>
    <context-param>
        <param-name>facelets.DEVELOPMENT</param-name>
        <param-value>false</param-value>
    </context-param>
    <context-param>
        <param-name>facelets.SKIP_COMMENTS</param-name>
        <param-value>true</param-value>
    </context-param>
    <listener>
        <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
    </listener> 
    <listener>
        <listener-class>org.springframework.web.context.request.RequestContextListener</listener-class>
    </listener>     
    <servlet>
        <servlet-name>Faces Servlet</servlet-name>
        <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
        <load-on-startup>1</load-on-startup>
    </servlet>
    <servlet-mapping>
        <servlet-name>Faces Servlet</servlet-name>
        <url-pattern>*.jsf</url-pattern>
    </servlet-mapping>
    <session-config>
        <session-timeout>
            30
        </session-timeout>
    </session-config>
    <welcome-file-list>
        <welcome-file>forward.jsp</welcome-file>
        </welcome-file-list>
    </web-app>

You can now build and launch the application.

In your browser you should see the hardcoded message from the Spring-Bean.
browser

Using Spring 2 and Facelets together with NetBeans 6.1

Table of Contents

Prerequisites

Create a new Web Application

Adding some Facelets functionality

Adding Spring 2 functionality

See Also