Jul 22 2008

Using Spring and Facelets together with NetBeans 6.1



In this blog 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.


Please note:
I have contributed this blog to the NetBeans Community.


Prerequisites

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

NetBeans Version 6.1 Build 200804211638

Install the Facelets Support Modules and restart NetBeans.


Create a new Web Application

Create a new Web Application, name it “Spring_and_Facelets“.

create a new Web Application

Choose GlassFish v2 as Server and click next.

choose GlassFish 2 as Server

In the last step, activate the Facelets-Framework.

choose the Facelets Framework

Open the Project Properties and remove all libraries.

remove libraries

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

special facelets and myfaces collection

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

running facelets application


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

create a new facelets file

the header.xhtml file

Insert this HTML code into the file:

header.xhtml



xmlns:ui="http://java.sun.com/jsf/facelets">

<ui:composition></ui:composition>

<p id="page-title">[
<a href="http://blog.jdevelop.eu" target="_blank">Another Random Developer Blog</a> |
<a href="http://www.netbeans.org" target="_blank">NetBeans</a> |
<a href="https://glassfish.dev.java.net/" target="_blank">GlassFish</a>
]


Add the footer file:

the footer.xhtml

and insert this code:

footer.xhtml



xmlns:ui="http://java.sun.com/jsf/facelets">

<ui:composition></ui:composition>
<p id="page-footer">             Copyright 2008 by <a href="http://blog.jdevelop.eu" target="_blank">Siegfried Bolz</a></p>


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

the content file

and insert this code:

content_main.xhtml



xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html">

<ui:composition></ui:composition>

<h:outputtext value="#{simpleJsfBean.helloWorld}">         </h:outputtext>


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




xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html">
<ui:composition template="/template.xhtml"></ui:composition>

<!--
&nbsp;           INSERT CONTENT
&nbsp;       -->
<ui:param name="urlContentMiddle" value="/inc/content_main.xhtml"></ui:param>


template-client.xhtml

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

add the managed bean

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

<!-- =========== 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"></faces-config>

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


Your Project should now look like this:

current project view

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

running facelets application


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.

adding spring framework 2.5 libraries

Create a Spring Configuration file:

create a new spring configuration file in netbeans 6.1

and name it “applicationContext.xml“.

applicationContext.xml

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


applicationContext.xml


<beans xmlns="http://www.springframework.org/schema/beans">
</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"></bean>


Create now the new Spring-Bean classfile:

the spring bean

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


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


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

faces-config.xml

...
<application></application>

...

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


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


<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></context-param></web-app>

<param-name>contextConfigLocation</param-name>
<param-value>/WEB-INF/applicationContext.xml</param-value>
<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>


You can now build and launch the application.

finished project

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

running facelets application


Additional informations

Access the Spring-ApplicationContext from everywhere in your Application
Facelets Support Modules for NetBeans 6.1
Installing GlassFish v2 with PHP5 on Port 80

Technorati Tags: , , , , ,

3 responses so far

3 Responses to “Using Spring and Facelets together with NetBeans 6.1”

  1. Alex sagt:

    Hello Siegfried,
    amazing post for using this greate combination of a lightweight Framework and ViewHandler Facelets.
    I look forward to reading further posts!!!
    Greetings
    alex

  2. Ben Addi Asma sagt:

    Hi, I am a student in software engineering.
    I am interested in developping a web Application using Netbeans 6.1, JSF and spring(IOC.AOP)
    i tried some tutorials but no result.
    Please if it’s possible to guive me tutorial that shows me all steps to build my web site.
    Greetings
    Asma