Hello dear friends. In this video, we will make a little project with JSF. Let's begin. Now, in the previous video, we have learned the usage of form elements in JSF. Now, let's make a little employee detail page with JSF. First, create a new project. I will create new project quickly, name will be EmployeeDetail. First, add an index page with XHTML. Done. We will start with ManagedBean. Add new class name will be Employee. Now we will define properties. We need name, surname as string. Copy for username. For dropdown, I will add country. This will be string. For hobbies, we will define a list because we will have more than one hobby. Password, we will use this with inputSecret. For one checkbox, add isAdmin. Add position, we will use this with one radio. For number input, we will define age.

Now I think that's enough. Let's generate getter and setters. In Source menu, Generate Getters and Setters. Select all. Done. Now we can design our pages. Start with head and body. Now we need a form. To better view, I will use panel grid with three columns. Let's adjust border. Now we can start. outputText or outputLabel for name. Add an input. Value will be name. Now we will set an ID as name. This will be required. I will define requiredMessage also. Let's define message tag. Message color will be blue. Actually, if you want, let's define a CSS and using class. Style, color: blue. Now we can use this class in any message. Done. Another output and input for a surname. Adjust ID required in message. Another output and input for username. Add an output and inputSecret for password. Add an outputLabel and select one checkbox for isAdmin. Add an outputText and input for age. Now our type is integer. Let's add a one radio for gender. Set ID and value. In each component, I will add required.

Add genders with select list item. itemLabel, value will be male. Add female. Let's add another one radio for position. Add positions like gender. Add a selectOne menu for countries. Actually, let's add countries with a hash map. First, open employee ManagedBean. We will add a hash map with string object parameters named countries. Now, let's add some countries. This will be enough for us, and getter and setter. Turn back JSF page. Now, we will add a select items. This tag works like a loop, so we will define our data. var = 'country'. 

Now we will set our itemLabel and itemValue. itemLabel = country.key. itemValue will be country.value. This will be enough for us. If you want, let's take a look. And as you can see, our countries are here. Let's go on. Let's define hobbies. First, define a list. Generate getter and setter. Now, add hobbies in the hobbies list. Now, turn back to the JSF page. This will be same with countries. Add select items. var = 'hobby'. Done. Let's look at the result. Run. And as you can see, there are no differences between HashMap and list. Done. Now, let's take a break here. In the next video, we will continue creating our project. See you in the next video.