Facelet Project


Facelet Project
PREVIEW11m 15s

The course is part of this learning path

Facelet Project

In this course, we will learn the concepts of Java EE 7 with a focus on Facelets.

Learning Objectives

  • What JavaServer Facelets are

Intended Audience

  • Anyone looking to get Oracle Java Certification
  • Those who want to improve Java 7 EE knowledge
  • Java developers


  • Have at least 2 years of Java development experience 

Hello, dear friends. In this video, we will create a little Facelet project. Let's begin. Now, in this project, I will define three xhtml pages. In first page, we will use labels. In second page, we will use inputs. And in the third page, we will use buttons. We will use facelets to modify the header and footer areas on all three pages. Let's start. First, create a new project or open your old project. First, I want to add a new folder and name it templates. I want to save my templates in this folder. Now, let's start to add our templates. Add new xhtml file. Give a name as HeaderTemplate. Now, select 'Blank Facelet Page' and 'Finish'. Now, this is our first template. First, let's add a body. Now, move ui:composition into the body. Let's now add a form. Although you are not required to include a form, I prefer to work with form tags. Now, let's add command links to our pages.

First one will be labels and with faces-redirect=true, we will redirect to the labels xhtml page. As you may recall, in the previous videos, we used this to update the link area with the URL of the new page. Now, add another one for inputs. And the last one for buttons. Done. Let's add another template for footer. Name will be Footer. Add body. Move composition. Now, in this area, I'd like to add copyright text. Done. I don't need anything else for footer. Let's add a content template. Add body. Move. Actually, we don't need anything in here but let's add a label anyway. These will be overwritten for each page. So, if you want, you can leave it blank. Now, let's add a general template to merge these three templates. Name GeneralTemplate. First, let's add a head tag. In head, let's add a title. As you know, we have to change the title for every page. Therefore, we have to use the ui:insert tag. Let's give the title a name property. The title text is not important. Done. Now, let's add a body.

Now, I want to add a div. id will be page. Let's add another div. Header id will be header. Now, in this div, we will insert header template. ui:insert name will be header. ui:include with src. We will set our header template path. My path is templates/HeaderTemplate.xhtml. Done. Let's add for content. ui:insert content, ui:include. Path will be ContentTemplate. Add another div for footer. Path will be FooterTemplate. Done. Now, let's add our pages. Add new xhtml page. Add body. Move ui into the body. Now, in ui:composition, we have to define our general template. Let's modify the title for this page. This page will be our main page. ui:define name will be title. Now, let's add title text as Main page or Labels. Let's define content of our pages. ui:define name will be content. With this name, property, we will overwrite content template page. Now, add three labels with different texts. Done. This page is ready.

Let's add another page for inputs to speed things up. We could copy the contents of this page. Add page. Now, paste. Now, change title. Let's delete Labels. Add three inputs. Done. Add another page for buttons. Paste. Change title. Delete labels. Add buttons. Done. Now, we have finished our project. Let's try and look. Look, there are three labels, menu, and footer. Go to the inputs. Look, menu and footer are same. Only content changed. Go to the buttons and look. As you can see, there is no problem. Now, we have finished this project. In the next video, we will examine the composite components. See you in the next video.


About the Author
Learning Paths

OAK Academy is made up of tech experts who have been in the sector for years and years and are deeply rooted in the tech world. They specialize in critical areas like cybersecurity, coding, IT, game development, app monetization, and mobile development.

Covered Topics