1. Home
  2. Training Library
  3. Programming
  4. Programming Courses
  5. Building Web Applications with Java EE 6

JSF Form Elements

Contents

keyboard_tab

The course is part of this learning path

Start course
Difficulty
Beginner
Duration
1h 16m
Students
8
Description

This course explores the fundamentals of web applications, JavaServer Faces, and then walks you through a variety of projects that will give you a practical demonstration of how to create a web application and how to use various components of JavaServer Faces.

Learning Objectives

  • Understand the fundamentals of web applications
  • Learn about JavaServer Faces, and how they can be used in your applications

Intended Audience

This course is intended for anyone who already has basic knowledge of Java and now wants to learn about Java EE.

Prerequisites

Basic knowledge of Java programming.

Transcript

Hello dear friends. In this video, we will examine the form elements in JSF, let's begin. Open your project. In this project, we will show the most popular elements in JSF. In this video, we will look at elements. And in the following videos, we will create a small project with JSF. First, we will start with form, with age. Look, we can see all elements. There are many elements in h tag, and we will try to explain the most useful of these elements. Select form. You might ask yourself, why did we start with form?

The answer is simple, because input elements need a form in JSF. In HTML, you can add any input to your page without any form, but in JSF validations will give an error. So, form element is very important. There is no difference with the HTML form tag. With 'Control Space' shortcut, you can see all attributes of any element. In JSF, you can give a class or an ID to your form. Let's give a title to our form. Now let's go on with label output. This tag is a label tag that we can use to show some text to users.

We will give it the text value, first text area. Now it's important to remember for every change we make, we first have to save the file and then republish our server. Run, great, our text has appeared on the page. As you can see, there are many attributes in output label but we will use only value. Maybe in following videos, we can use forAttribute also, but for now we don't use this. Now, let's look output text also. Add an output text, it is used to render a plain text. You can think of output text like a label in HTML. The value property is the text area that we want to show with this element. Also, each element has an ID or class or style attribute. So, why don't say these attributes again and again? Let's see on the page. Look, our output text is here. If you want, let's add a br tag to see better. Try again, there is no difference between outputlabel and outputtext.

Let's now move on to panel grids. For panels, we can use panel grid. In this element, we can define columns. For example, I want to add two columns. Now let's move them into the grid. If you want, we can adjust border. Set one is the value and run again. And as you can see the better view, you could also give it a background color, try. Now let's move on to input text tags. H input text, as you know, the input tag allows us to take any data from the user. Just like the HTML input tag, it also has a lot of attributes. For example, we can give it an ID. The ID attribute is very important and we will assign an ID to each element for use in operations or class name. Let's set max length. Alt, as you know, alt is the alternate textual description of the element rendered by this component. We can obtain value from the user through the value attribute. To store data, we will use managed beans, like new managed name or let's change the name to Author. Done, we can use readonly to close ride options.

Required attribute provide us to make sure that input is filled. For required, we can also add a special message for any element. For example, this area must be filled. Now for this required message, we can use message tag. Message for now, we have to set element ID. Done, now we have to change column size with three because in name area we have three elements but for labels there are two, done. For CSS, you can also set style. I will add a button to show required message. We didn't learn yet, but in the next video we will examine the button. For now, I will only add. Now, let's try. Now run page, and look, our input is here and we cannot write anything. Let's delete read only and look again. Now we can use. Now click button, and look, we can see our message.

If you want, you can create a new CSS and use as class in this message, but I will use it in the project. In HTML, we have a hidden property but in JSF hidden is not a property. For hidden input, we have to use input hidden tag. All properties are same with input, only this input is not seen. Let's copy. Change with input hidden. Now run again. Look, we have two inputs in page, but we can see only one of them. Let's go on with input text area. This is like an input, but we can think that this is a big input. Set the value to the surname area in managed beans. The text area has all the attributes of the input. Except this, we can also resize our text area. Let's look, in JSF there is no table component. For table, we will use HTML table command when we need. Now, let's take a break here. Next video, we will go on examining the form elements. See you in the next video.

 

About the Author
Students
1230
Courses
64
Learning Paths
4

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