Skip to content

Starting with Facelets (part 1)

January 9, 2010

Today, JSF is the most popular Java web technology. You can find bunch of tutorials about how to start with JSF and most of these is useful for the lowest beginer level. If you want to make web app using some template or want to reuse template for several apps, You have to use Facelets. One of the main benefits of using Facelets is templating.

The best way to start with Facelets is to install appropriate tools. First, download Eclipse Galileo(for JEE developers) and after that extract archive everywhere you want. Fire up your eclipse and go to Help/Install new Software to install JBoss tools. Update site is https://www.jboss.org/tools/download.html and install it. You can also use Facelets without Elipse and JBoss Tools if you prefer harder way to learn something.

To start new Facelet project go to File/New/JSF project. This is very simple weblog application.

Fill the form like in picture below.

Form for creating new Facelet project in Eclipse Galileo

Form for creating runtime for Facelets project in Eclipse

I choose JBoos app server to deploy my demo app. To install JBoos AS read this post. You can also choose web container like Jetty or Tomcat.

Now you create Facelets project with this diretory structure.

Folder structure for Facelet project

Open web.xml and change Servlet mapping to:

<servlet-mapping>

<servlet-name>Faces Servlet</servlet-name>

<url-pattern>*.xhtml</url-pattern>

</servlet-mapping>

You can use other mapping but I prefer this sufix mapping.

Now you are ready to get into JSF world. Create template folder in WebContent folder where you place your template(s). Create index.xhtml file(Facelets aren’t dependent on XHTML syntax, they only needs to be proper XML) and place following code in it:

<!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”>

<head>

<meta content=”text/html; charset=ISO-8859-1″ http-equiv=”content-type”/>

<title>index</title>

<meta content=”ivan doskovic” name=”author”/>

<link rel=”stylesheet” type=”text/css” href=”#{facesContext.externalContext.requestContextPath}/css/style.css”/>

</head>

<body>

<div id=”menu”>

<!–Main menu for navigation–>

<ul>

<li><a href=”main.xhtml”>Home</a></li>

<li><a href=”#”>Categories</a></li>

<li><a href=”#”>My posts</a></li>

<li><a href=”#”>Log in</a></li>

<li><a href=”#”>About</a>

</li>

</ul>

</div>

<div id=”content”>

<!–Here goes dynamic content–>

<ui:insert name=”content”/>

</div>

<div id=”status”>

<!–This block You can use for additional information which you want to add (Links, site statistic, user status)–>

<ui:insert name=”status”/>

</div>

</body>

</html>

In this index.xhtml file we have 2  <ui:insert> tags for area which we want to overwrite. Frist area is for content for each page and second we can use for some useful information about curent user or site statistics.

Also you have to create css folder for CSS files. In that folder place style.css  file.

h1 {

font-weight: bold;

font-style: normal;

text-transform: uppercase;

text-align: center;

font-family: “Times New Roman”,Times,serif;

line-height: 0mm;

}

#menu {

border-left: medium groove white;

border-bottom: 1px solid #336600;

font-size: larger;

font-family: AlYarmook;

position: absolute;

top: 0px;

left: 0px;

background-color: #558800;

width: 100%;

}

#menu ul {

padding: 1em 4.5em;

list-style-type: none;

list-style-image: none;

list-style-position: outside;

}

#menu li {

display: inline;

padding-right: 2.5em;

font-size: 0.8em;

}

#menu li a {

color: #ffffff;

background-color: inherit;

}

#content {

font-family: AlMothnna;

color: black;

font-size: medium;

visibility: visible;

position: absolute;

width: 25cm;

background-color: #cccccc;

opacity: 0.279;

}

#status {

background-color: silver;

opacity: 0.385;

color: black;

font-style: oblique;

margin-left: 25cm;

margin-top: 130px;

width: 290px;

}

And this is final look of template:

Template index.xhtml

Now we can create pages. First, create main page main.xhtml. Go to New/XHTML file. For template choose FaceletBlank.xhtm and click Finish.

You can see Facelet tag <ui:composition> and its attribute template and you use  for to reference the template you want to use for the page (in our case, the index.xhtml document). Tag <ui:define> is for editing overwritten area which I define in index.xhtml template document. Attribute name is must be the same like attribute name of <ui:insert> tag in template document(in this case value is content). This is a content of main.xhtml file:

[sourceocode language=”html”]

Wellcome to my blog

This is the main page of myBlog app

[/sourcecode]
To set main.xhtml page like your wellcome page(or home page) just add this in web.xml

<welcome-file-list>

<welcome-file>main.xhtml</welcome-file>

</welcome-file-list>

Start JBoss AS server and go to  http://localhost:8080/DemoFaclets/ . You  see main.xhtml page with template.

main.xhtml page with template

This post  is starting point only for creating template using Facelets for JSF app.  In my next posts, I’ll try to add some managed beans and basic functionality.

Advertisements

From → Java

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: