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

Not logged in. Log in, Register

By use of this website, you agree to the NetBeans Policies and Terms of Use. © 2012, Oracle Corporation and/or its affiliates. Sponsored by Oracle logo