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.