UsingSpringAndFaceletsTogetherWithNetBeans61
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.
[[{TableOfContentsTitle=TableOfContents} | {TableOfContents title='Table of Contents'}]]
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.
glassfish
In the last step, activate the Facelets-Framework.
facelets
Open the Project Properties and remove all libraries.
project properties
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:
run the app
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:
add the footer
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 | 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 | type='button']], input[[Type=submit | 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>
overview1
Now we want to display some data. Create the Managed Bean “SimpleManagedBean.java“:
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
<?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 :-)“.
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.
launch the application
In your browser you should see the hardcoded message from the Spring-Bean.
browser
See Also
Have a lot of fun!
---
Siegfried Bolz
Another Random Developer Blog
