Building JSF application with Exadel IDE

View: JSP’s edition.

In this section we will focus on the presentation’s component of the application. The main presentation component of this application is the login.jsp page, which we bring into picture by double-clicking in the Navegator View on the login.jsp file. This immediately produces the Visual Editor to be displayed (Figure 6).

Figure 6.

Exadel provides a WYSIWYG Editor for the view components of a JSF application. That means, that we can drag and drop almost any JSF component to our view and configure each of them using wizards. This facility reduces enormously TTM (Time To Market) of our projects because it reduces the coding time and the probability of syntax errors.

In our example, we are going to construct the Login Page display for the login.jsp. We can accomplish this by doing the following:

1. Insert a JSF form component to our view . Click on the form item of the JSF HTML panel shown in the Figure 6, and drop it inside the editor. When the wizard of the form appears (Figure 7), change the id attribute of the form with the loginForm value.

Figure 7.

1. Introduce the Name label in the form . We are going to implement this label with an outputText component from the JSF HTML panel , which can be done by means of the drag and drop feature. Enter the text ‘Login’ as the value of the outputText component when the wizard of the component shows up.

1. Insert an inputText component for the login . This can be done in an analogous way as step 2, the slightly difference is that we drag and drop an inputText instead of an outputText. We change the id attribute of the component with the ‘inputLogin’ value, we can do that by selecting the Attribute ‘s tab of the Wizard. It is important to associate the value attribute to the login property of the managed bean we defined earlier, by doing this we would be able to use this value in any page of the application for the time the request lives. To define this correlation we select the button on the right of the value’s attribute name with label ‘ … ‘. This would bring up the Wizard illustrated in the Figure 8. In this wizard we select the login item that is a sub-element of the Managed Bean called ‘user’. As you might expect we can associate any Bean property using this dialog with the selected outputText, as well as any JSF Variable (like cookies, session attributes, etc.).

Figure 8.

1. Introduce the Password label in the form . This component can be inserted in an analogous way as step 2. Enter the text ‘Password’ as the value of the outputText component.

1. Introduce an inputSecret component from the JSF HTML panel . When we have to handle some kind of secret input from the user, usually a user’s password, we got to use the inputSecret component. To include such a component into the view, we drag it to the editor in the same way we did for the previous components. We change the id attribute of the component with this value: ‘inputPassword’.

1. Using commandButton component . At this point the only thing that is left is some kind of button that enable us to either validate or not the login action of a given user. The commandButton is the JSF component that we are requiring for this functionality, so we drag it into the editor as we did in the previous steps. This time, we set the value of the component to ‘Log in!’. Remember, that we implement the business logic for the user’s login action in the checkLogin method of the user managed bean, so we can bind it to the button by setting the action attribute with the following value: #{user.checkLogin}.

1

At the end of the day, the final jsp code should look like this:

1

1

This is it for our main page!. Now, we got to modify the success.jsp and error.jsp. In this article we will show the implementation of the former of those pages, the latter is almost identical from a technical point of view so we leave it to you for give your own implementation .

Follow these steps to implement the success.jsp page, which is displayed after the user successfully logs in:

1. First of all we double-click the success.jsp file.
2. Then we drag and drop an outputText as we had been doing, and set the value attribute to ‘#{user.login}‘. As we explained above, this associates the outputText component to the login property of the user’s managed bean.

Then, the finished implementation of this view should look like this:

1

	<code>are successfully logged in!!</code>

Comments

comments