JSF 2.0 Templating


In this small tutorial we’ll create a simple JSF template.


  • NetBeans
  • Glassfish (4.x)
  • JSF (2.x)
  • Maven (3.x)

Table of contents:

  1. Creating and Configuring the Project
  2. Creating the Basic Template

1- Creating and Configuring the Project

Open NetBeans and select New Project  > Maven  >   Web Application

new project > maven > web application

Enter the Project Name  and  Group Id


Choose your server and Java EE 7 Web


Click Finish.

The project structure should look like this

Create  web.xml



Open web.xml  inside WEB-INF  and add the following



2- Creating the Basic Template

Create a resources  folder inside the webapp  one with the following folder hierarchy

For more info on the resources folder, refer to this article.

Create a templates  folder inside  webapp , with a subfolder named after the theme name let’s call it  default

Create  main.xhtml file inside the default  folder, this file is the main template


Define the main header sections inside  main.xhtml

Skeleton Pages

Usually when you have a website, a header a footer and maybe a left/right menu is needed.
In that case you would create different files, header.xhml  footer.xhtml , leftMenu.xhtml .


Now you would include it in you main template file


Create Welcome page

Create index.xhtml  inside  webapp and point to our template


Where to go from here ?

You need to work more on the layout and how to divide your pages, consider using some cool frameworks like Twitter Bootstrap, here’s how to integrate this template with Twitter Bootstrap


If you think something is wrong please feel free to comment :)
  1. Adem says:


    short …

    straight forward.

  2. Franco says:

    excelente great!

  3. Ahmed says:

    Hatemalimam, this is just too great!

  4. Docx says:

    Wohw why weren’t my varsity lectures all like this. Thanks buddy

  5. Brilliant, worked like a charm.

  6. In the Submit button action method, retrieve the SQL query input in the JSF input text field and run the SQL query to generate a result set. Column headers are added by creating HtmlOutputText header components and setting the headers on the UIColumn components with the setHeader method.