UP | HOME

JSF Framework

Table of Contents

1 Building Web-Applications

Web-Applications follow the MVC architecture.

1.1 Download dependencies

  1. Download Jave EE and JSF libraries jsf-api.jar, jsf-impl.jar, primefaces.jar using ant/maven and define a User-Library.
    • To download the jars extend artifact:dependencies in /copybase/lib/build.xml with the text below and run ant in directory /copybase/lib. See Maven Repository Browser for dependency details. 
      <remoteRepository id="maven2-repository.dev.java.net" 
                         url="http://download.java.net/maven/2" />
<remoteRepository id="prime-repo" url="http://repository.prime.com.tr" />
<!-- -->
<dependency groupId="com.sun.faces" artifactId="jsf-api" version="2.0.2" />
<dependency groupId="com.sun.faces" artifactId="jsf-impl" version="2.0.2" />
<dependency groupId="org.primefaces" artifactId="primefaces" version="2.2.1"/>

1.2 Creating a Dynamic Web project

  1. Open eclipse, Choose Perspective Java EE.
  2. Create Dynamic Web-Project
    • Rightclick in Project Explorer and select New -> Dynamic Web Project.
    • Call the project BookCase
    • Select Tomcat 6 as Target Runtime
    • Select checkbox Generate web.xml deployment descriptor.
  3. Create user library
    • Select Preferences from the Window menue. Enter user library in the search field and select User Library.
    • Click button New to create new library JSFlib Select checkbox System Library.
    • Add the above jar-files (browse repository /copybase/lib) to library.
  4. Add Facelet code assist (to Dynamic Web Project).
    • Rightclick on project WebBookCase and select Properties.
    • Select Project Facets and check Java Server Faces with version 2.0.
    • Observe the error Further configuration required …, click on the link and select user libraray JSFlib.
    • Click buttons Apply and OK
  5. Add user library to deployment assembly. Rightclick on project, select Properties and select Deployment Assembly (or J2EE dependencies resp.) Click Add and select Java Build Path to add user libray.
  1. Add further jars to the deployment.
    • You could add the jars individually.
    • Extend build path. Rightclick on Project -> Build Path -> Configure Build Path. Select tab Libraries and click Add External Jar to add the jar.files from the local repository.
    • Add to deployment assembly. Rightclick on project, select Properties and select Deployment Assembly (or J2EE dependencies resp.) Click Add and select Java Build Path to add jar-files.
  1. Add further jars using the Eclipse Maven plugin.
    • Enable Maven dependency management.
    • Rightclick on project and select Maven -> Enable dependency management and give it a name.
    • Rightclick on project and select Maven -> Pom (or doublclick on file pom.xml in the Web-Content directoy of the project).
    • Add remote repositories. Use view pom.xml (rightmost tab on the bottom menue in the editor view) or click the icon Show Advanced Tabs (on the top menue in the editor view) and select the view Repositories. Use Create to add repository.
    • Select dependencis from bottom menue and add dependencies given above.
    • Add to deployment assembly.
    • Rightclick on project, select Properties and select Deployment Assembly. Click Add and select Java Build Path and add Maven dependencies to the .classpath.
  1. Customize deployment descritptor. Add the following to the web.xml file (in WebContent/WEB-INF). Remove other servlet, servlet-maping, context-param, and listener elements. 
    <!-- Session Configuration  -->
<session-config>
   <session-timeout>60</session-timeout>
</session-config>
<context-param>
   <param-name>javax.faces.STATE_SAVING_METHOD</param-name>
   <param-value>server</param-value>
</context-param>
<!-- Facelets configuration fragment -->
<context-param>
   <param-name>javax.faces.DEFAULT_SUFFIX</param-name>
   <param-value>.xhtml</param-value>
</context-param>
<servlet>
   <servlet-name>Faces Servlet</servlet-name>
   <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
</servlet>
<servlet-mapping>
   <servlet-name>Faces Servlet</servlet-name>
   <url-pattern>/.jsf</url-pattern>
</servlet-mapping>
<!-- Primefaces configuration fragment -->
<servlet>
   <servlet-name>Resource Servlet</servlet-name>
   <servlet-class>org.primefaces.resource.ResourceServlet</servlet-class>
</servlet>
<servlet-mapping>
   <servlet-name>Resource Servlet</servlet-name>
   <url-pattern>/primefaces_resource//</url-pattern>
</servlet-mapping>
<!-- Server Exceptions -->
<error-page>
   <exception-type>javax.faces.application.ViewExpiredException</exception-type>
   <location>/pages/errors.jsf</location>
</error-page>

1.3 Create Classes and Pages

  1. Create Package de.botzenhart.showcase.samples in src-folder (i.e. rightclick on src-folder and select New -> Package)
  2. Make sure src-folder appears in the Web Deployment Assembly Otherwise rightclick on src-folder, select Build Path -> Use as Source Folder.
  3. Create folder pages in folder WebContent.
  4. Create new file index.jsp (try selecting new jsp-file and choose a template) in folder WebContent and paste the following lines: 
    <html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>BMC</title>
  </head>
  <body>
     <jsp:forward page="/pages/primefacesCommandButton.jsf" />
  </body>
 </html>

    Create file primefacesCommandButton.xhtml in the pages folder and paste the following lines: 

    <f:view xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.prime.com.tr/ui">
  <h:head>
  </h:head>
  <h:body>
  </h:body>
</f:view>
  5. Visit page http://www.primefaces.org. In Online Demos select Show Case. Select the element Command Button.
  6. Copy from Source (use link view plain to avoid copying the line numbers) and paste it into the body-tag of file primefacesCommandButton.xhtml.
  7. Create new java-Class PrimefacesCommandButton.java in package de.botzenhart.showcase.samples and add properties: 
    private String firstname;
private String  surname;

    Create Getters and Setters, e.g. rightclick in editor, select source from menue, select Generate Getters and Setters. Add method 

    public void savePerson(ActionEvent actionEvent) {
    FacesContext.getCurrentInstance().addMessage(null, 
                        new FacesMessage("You've registered"));
}

    Use the code assist (Press Crtl+Space at the end of the classnames) to select import statements. (Choose from package javax.faces.) 

    import javax.faces.application.FacesMessage;
import javax.faces.context.FacesContext;
import javax.faces.event.ActionEvent;

    Add Class Annotations directly above class definition 

    @ManagedBean(name="pprBean")
@SessionScoped
public class PrimefacesCommandButton {
  8. Run Application on Server:
    • Rightclick on project and select Run As -> Run on Server
  9. You should see the CommandButton example. Enter some data, copy the url and load the page your favourite (other) Browser.
  10. Deploy on server. Rightclick on your project, select Export, choose Web -> .war File. Copy your file to server (WinSCP), stop server, drop war-file in $CATALINA_BASE/webapps and start server.

Author: Rainer Schuler

Date: 2011-02-11 Fr

HTML generated by org-mode 7.4 in emacs 22