Hello, dear friends. In this video, 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 ContentTemplate. Add body. Move. Actually, we don't need anything in here but let's add a label anyway. These will be overridden 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.

For header id will be header. Now, in this div, we will insert a HeaderTemplate. ui:insert name will be header, ui:include with SRC. We will set our HeaderTemplate path. My path is templates/HeaderTemplate.xhtml. Done. Let's add for content. Add div. 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 GeneralTemplate, template = templates/GeneralTemplate.xhtml. 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 override content template page. Now, add three labels with different texts.

Done. This page is ready. Let's add another page for input. 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. Done. Let's try. 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.