Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

Facelets in Java: Understanding the Tags System

Check out this article Facelets, a subproject of the JSF for templates via tags management.

The Facelets is a subproject of the JSF created by former Sun Microsystems and currently maintained by Oracle, easily integrated with Java technology and that changed the whole way to implement views on web pages to stop supporting JSPs default files for this purpose.

In the early days of the JSF, the integrations between the pages of the applications were always hampered by the large amount of configuration XML files as well as use of JSP directives () that smote the fundamental principle of JSF: abstract any Java code directly in view layer through the use of tailored tags.

The Facelets emerged as an option to solve this problem not only eliminate all explicit code pages, as well as providing the creation of reusable and downloadable templates; and providing resources for basic operations of programming logic as repetitions, conditions and data manipulation by EL (Expression Language) JSF itself.



Among the main features of Facelets are the following:

  • Allows integration between different versions of the JSF 1.2 (the most famous) and 2.2 (the latest), and meet completely the Oracle specification and Apache MyFaces.
  • Intuitive creation of templates (for example, you can create a Facelets page to represent the application header, the other for the footer, and can import them easily on all other pages without needing to use the of include directly).
  • Has an attribute called "JSFC" that allows you to include snippets of code in the JSF HTML tags (see later).
  • Eliminates the system "JSP Compiler to Servlet" which is used to compile the JSPs Servlets pages before returning the response to the browser. This essentially increases by 30% to 50% system performance.
  • Easy to create reusable components, use of third parties or create your own.
  • Uses XHTML (Extensible HTML) as the technology for the JSF views, which in turn, is much more rigid than the JSPs and basic HTML to not allow tags closure errors or lack of required attributes, for example.
  • Precision to report errors, that is, the system Facelets error messages is similar to Java, based on stack traces (exceptions message batteries). So we can track down and understand exactly where the problem is in the code.

Installing the Facelets

Installing the Facelets is simple, but so that we can run a real example, we need to download some tools (for the download URLs are available in the Links section), namely:

  • JDK 6 or higher;
  • Eclipse for JEE developers;
  • Tomcat 7 or higher.

To start, open Eclipse, select a directory for the workspace and so the welcome window appears select the "Java EE" perspective on the top right of the IDE. Let's now add the Tomcat Eclipse so that we have all the JEE libs available when we create the project. Then, go to the "Servers" tab on the bottom bar, click the right button and select the "New> Server" option. Select the "Apache> Tomcat v7.0 Server" server, click Next, enter the directory where you unzipped the zip server and click Finish. After that it will be installed.

Now create a new project: Click "File> New> Dynamic Web Project", give the name "facelets-mrbool" and mark the window of options, as shown in Figure 1.



Figure 1. Creating new web project in Eclipse.

Special attention to the "Configuration" section that displays the type of project configuration to be used. The Eclipse JEE provides a specific option for JSF 2.2, which is the latest version and it brings with it the already Facelets libraries, then we need not use any tool to manage the dependencies such as Maven and Gradle.

Click Next twice, and the setting screen of "Web Module" mark the checkbox "Generate web.xml ...". Next once more and the next screen will bring the specific settings of the JSF. In the Type combo select the "User Library" and after click the icon button "Download library ...". The window of Figure 2 will appear, so choose the JSF Mojarra, click Next, accept the terms of condition and click Finish. When the Eclipse has finished downloading, click again on Finish and the project will be created.



Figure 2. JSF 2.2 Mojarra Screen.

This will be enough to configure Facelets and JSF 2.2 in your project. Navigate to the directory "WebContent> WEB-INF" and open the faces-config files and web.xml. See the Eclipse already own sets all JSF XML tags so we can start using it in the project.

Creating Templates with Facelets

The basis of Facelets, as we have seen, is the possibility of building templates and customize them in implementing pages. To better understand how this works we implement a simple example of the login screen, which will have a header and footer common to all pages (including welcome when he successfully log in). Only the body of the page and the header title will be specific and each page will overwrite their contents via template.

Let's begin with the template pages to three: header.xhtml, footer.xhtml and template.xhtml. Create a new folder in the WEB-INF directory called "template". Then click right on it and select the "New> HTML File" option, give the name "template.xhtml" and click Finish. In the end, open the page and add the contents of Listing 1 to it.

Listing 1. Code of XHTML template page.
  01 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  02           "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  03 <html xmlns="http://www.w3.org/1999/xhtml"
  04       xmlns:ui="http://java.sun.com/jsf/facelets">
  05    <head>
  06          <title><ui:insert name="title">Facelets MrBool</ui:insert></title>
  07          <style type="text/css">
  08                body, input {
  09                      font-family: Segoe UI;
  10                      font-size: 12pt;
  11                }
  12                input {
  13                      padding: 2px;
  14                      margin-top: 5px;
  15                }
  16                input[type='submit'] {
  17                      width: 235px;
  18                }
  19          </style>
  20    </head>
  21    
  22    <body>
  23          <div id="header">
  24              <ui:insert name="header">
  25                <!-- Header -->
  26                <ui:include src="header.xhtml"/>
  27              </ui:insert>
  28          </div>
  29    
  30          <div id="content">
  31            <ui:insert name="content">
  32            </ui:insert>
  33          </div>
  34    
  35          <div id="footer">
  36            <ui:insert name="footer">
  37                <!-- Footer -->
  38                      <ui:include src="footer.xhtml"/> 
  39            </ui:insert>
  40          </div>
  41    </body>
  42 </html>
At the beginning of the file we have been importing the Facelets library (line 4) directly on the html tag. The ui prefix is standard for this library, and therefore should be followed. The header, defined by the head tag is equal to the common HTML pages, but for the title is dynamically injected we use the configuring the attribute name the injectable component name there. The same goes for the the page body div (line 30).

In relation to the use of that tag in lines 24 and 36 instead of the name attribute, we are using src, which sets the location of the file to import in that region. In this case, using this attribute characterizes the contents of the files will always be static and equal for all pages that import the template and exactly what we want for the rest of the header and the footer.

Now we can create the two other files that complete the template: header.xhtml and footer.xhtml. See the Listings 2 and 3 content for them, respectively.

Listing 2. Code XHTML header template.

  01 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  02           "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  03 <html xmlns="http://www.w3.org/1999/xhtml">
  04    <style type="text/css">
  05          .header {
  06                width: 99%;
  07                background-color: #302f31;
  08                height: 52px;
  09                padding: 10px;
  10                margin: 10px 0;
  11                margin-right: 2%;
  12          }
  13          .header a {
  14            float: left;
  15            margin-bottom: -10px;
  16          }
  17    </style>
  18    <body>
  19          <div class="header">
  20                <a href="http://www.mrbool.com.br/" target="_blank">
  21                      <img src="http://mrbool.com/imagens/2014/logo-mrbool.png" alt="MrBool" title="MrBool" />
  22                </a>
  23          </div>
  24    </body>
  25 </html>
Listing 3. XHTML code footer template.
  01 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  02           "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  03 <html xmlns="http://www.w3.org/1999/xhtml">
  04    <style type="text/css">
  05          .footer {
  06                background-color: #49c5bf;
  07                width: 99%;
  08                color: white;
  09                height: 22px;
  10                padding: 5px;
  11                margin: 10px 0;
  12          }
  13    </style>
  14    <body>
  15          <div class="footer">
  16                All rights reserved.
  17          </div>
  18    </body>
  19 </html>
In both listings have simple HTML code just to provide basic style and structure paras divs header and footer. The player can perform the pages directly in a browser and see how they will be in the final model, along with the template.

Now we just need the login page we will use to implement this template. Create a new XHTML page directly in the "WebContent" and name it "login.xhtml". Add the contents of Listing 4.

Listing 4. XHTML code of the login page.
  01 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  02           "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  03 <html xmlns="http://www.w3.org/1999/xhtml"
  04       xmlns:ui="http://java.sun.com/jsf/facelets"
  05       xmlns:f="http://java.sun.com/jsf/core"
  06       xmlns:h="http://java.sun.com/jsf/html">
  07    <ui:composition template="/WEB-INF/template/template.xhtml">
  08          <ui:define name="content">
  09                <h:form>
  10                      <h:panelGrid columns="2">
  11                           <h:outputText value="Email"/>
  12                           <h:inputText id="email" />
  13                           
  14                           <h:outputText value="Password"/>
  15                           <h:inputSecret id="password" />
  16                      </h:panelGrid>
  17                      <h:commandButton value="Log In"/>
  18                </h:form>
  19          </ui:define>
  20    </ui:composition>
  21 </html>
To inform you that we are using a template include the with your atributotemplateque defines the directory relative path where the template is. Using the define what will fill the "space" of the template, if only the page body content. The value of the name attribute must be the same as defined in the template file, but the Facelets print a file not found error message. The rest of the list is just the rest of the basic form to login.

Okay, now just add the application to Tomcat, start the server and enter the following URL into your browser:

http://localhost:8080/facelets-mrbool/faces/login.xhtml
The result can be seen in Figure 3.



Figure 3. Final Screen application with Facelets.

The Attribute JSFC

The Facelets provides an attribute called JSFC that essentially can convert HTML to JSF code. For example, suppose you have a simple text field:

<input type="text" .../>
With JSFC you can easily convert this field into an equivalent JSF:

<input type="text" jsfc="h:inputText" .../>
Which is the same thing as creating the field using the JSF tags:

<h:inputText .../>
This attribute can also be used to "map" Facelets components. For example, if you want to remove a part of the HTML code dynamically using the the Facelets, can do something like:

<span jsfc="ui:remove"> This all will be removed: <h:outputText value="#{person.name}"/> </span>
Or iterate over the elements of a list to dynamically display them in an HTML table via tag , as demonstrated in Listing 5.

Listing 5. Iterating over a list of values with ui: repeat and JSFC.
<table>
      <tr jsfc="ui:repeat" value="#{persons}" var="p">
         <td>#{p.name}</td>
         <td>#{p.surname}</td>
      </tr>
</table>
The Facelets is a powerful and flexible technology to create JSFs pages and customizing components was selected as the default language to create any web page in JSF 2.2, be it component-based or not. The recess tags available is small and therefore makes learning faster absorption compared to the old method: based on JSPs. In addition, many frameworks and libraries of rich JSF components, such as Richfaces, Primefaces or JBoss Seam, implement the standard specification for Facelets the basis of its APIs, which did achieve such acceptance it has today.

In the Links section, the reader still finds references to the official website of the technology as well as the official tutorials page of Oracle filled with numerous examples and more profound concepts about Facelets and its various components.

Links

JDK download page
www.oracle.com/technetwork/java/javase/downloads/index.html

Download page Eclipse JEE
www.eclipse.org/downloads/

Tomcat 7 download page
https://tomcat.apache.org/download-70.cgi

Official website Facelets project
https://facelets.java.net/

Oracle tutorials page on the Facelets
https://docs.oracle.com/javaee/6/tutorial/doc/giepx.html


Web developer and passioned for web design, SEO and front end technologies.

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login