Another Random Developer Blog

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



Install the Facelets Support Modules and restart NetBeans.


Create a new Web Application

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



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.



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





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" onclick="javascript:pageTracker._trackPageview ('/outbound/www.netbeans.org');">NetBeans</a> |
<a href="https://glassfish.dev.java.net/" target="_blank" onclick="javascript:pageTracker._trackPageview ('/outbound/glassfish.dev.java.net');">GlassFish</a>
]

Add the footer file:



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.



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>

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

<!-- =========== 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:



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.



Create a Spring Configuration file:



and name it “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:



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.



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




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: Facelets, GlassFish, Java, MyFaces, NetBeans, Spring

Tags: Facelets, GlassFish, Java, MyFaces, NetBeans, Spring

Trackback URI | Comments RSS