JSF Quickstart With MyEclipse---3
天下维客，你可以修改的网络知识库
|
JSF编辑 相关文档:
其他资源： |
Creating the JSP Pages
In this section we are going to focus on creating the JSP pages for our example JSF application, which will mimic a simple website login screen. As a result, we will only need 2 JSP pages, one to prompt the user to login and the other to indicate that login was successful. We will call these pages loginUser.jsp and loginUserSuccess.jsp, respectively. For simplicity, if there is an authorization error during the login attempt, we will redirect the user back to the loginUser.jsp page and display an error message.
To create the userLogin.jsp page using the JSP wizard located on the File Menu in the MyEclipse Perspective at File > New > JSP page. We'll specify that the page is named userLogin.jsp, and ensure that it will be placed in the project's WebRoot directory. In order to simply our customization work, we'll also specify that we'd like to use the Default JSF template, as shown in Figure 6.
Figure 6 - Creating the userLogin.jsp page as a JSF Page
Similarly, we'll go ahead and create the userLoginSuccess.jsp page next, as shown in Figure 7.
Figure 7 - Creating the userLoginSuccess.jsp page.
Initially, our pages will be filled with the default JSF template content, but we need to edit the page in order to add the following JSF items:
- A Message Resource Bundle: This is a typical message resource file in the format of a properties file (key=value format). The JSP pages will use JSF tags as keys to lookup the corresponding messages to display them on the page. Struts uses this approach with the ApplicationResources.properties file.
- A Form: We must define a form in our page. A form is an entity that wraps all of the fields and buttons related to this login process. Just like Struts a page, a JSF page can have zero or more forms on it. For each form, all associated controls within it are processed together upon submission of the form.
- Error Messages: If there is an authorization problem when the user tries to login, we need an appropriate error message to display. This is identical to the <html:errors /> or <html:messages /> tags in Struts.
- UI Components: These include the labels, input text field, password field and "Login" button that will be on our interface. We'll also configure the page to perform some basic validation on the values typed into these fields. In Struts, these controls are very similar to the <html:text /> and <html:submit /> controls
After editing our userLogin.jsp page to contain these necessary items, we will end up with the JSP page shown in Figure 8.
Note: For the purposes of making this guide easier to follow (and the code snippets shorter) the JSP page below does not resemble the default JSP template you will have once you open the file for the first time, you are free to exactly copy the code we have here or adopt it to the default JSP template code that you have after creating the new JSP file.
userLogin.jsp
<%@ page language="java" %> <%@ taglib uri="<a href="http://java.sun.com/jsf/html" class="external free" target="_blank" title="http://java.sun.com/jsf/html" rel="nofollow">http://java.sun.com/jsf/html</a>" prefix="h" %> <%@ taglib uri="<a href="http://java.sun.com/jsf/core" class="external free" target="_blank" title="http://java.sun.com/jsf/core" rel="nofollow">http://java.sun.com/jsf/core</a>" prefix="f" %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>My JSF 'userLogin.jsp' starting page</title> </head> <body> <f:view> <f:loadBundle basename="com.jsfdemo.MessageBundle" var="bundle"/> <h:form id="loginForm">
| <h:outputText value="#{bundle.user_name_label}" /> |
<h:inputText id="userName" value="#{UserBean.userName}" required="true">
<f:validateLength minimum="1" />
</h:inputText>
|
| <h:outputText value="#{bundle.user_password_label}" /> |
<h:inputSecret id="password" value="#{UserBean.password}" required="true">
<f:validateLength minimum="3" />
</h:inputSecret>
|
<h:messages style="font-weight: bold; color: #FF0000;" />
| |
<h:commandButton id="submit" action="#{UserBean.loginUser}" value="#{bundle.login_button_label}" />
</tbody> | |
</h:form> </f:view> </body> </html>
Figure 8 - userLogin.jsp
The userLoginSuccess.jsp page is built similarly, but it will be quite a bit less complex. In our success page we are simply going to show the name value that was typed into the login field on the page, along with a friendly "success" message. Making those necessary changes, our userLoginSuccess.jsp will look like Figure 9.
Note: For the purposes of making this guide easier to follow (and the code snippets shorter) the JSP page below does not resemble the default JSP template you will have once you open the file for the first time, you are free to exactly copy the code we have here or adopt it to the default JSP template code that you have after creating the new JSP file.
userLoginSuccess.jsp
<%@ page language="java" %>
<%@ taglib uri="<a href="http://java.sun.com/jsf/html" class="external free" target="_blank" title="http://java.sun.com/jsf/html" rel="nofollow">http://java.sun.com/jsf/html</a>" prefix="h" %>
<%@ taglib uri="<a href="http://java.sun.com/jsf/core" class="external free" target="_blank" title="http://java.sun.com/jsf/core" rel="nofollow">http://java.sun.com/jsf/core</a>" prefix="f" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSF 'userLoginSuccess.jsp' ending page</title>
</head>
<body>
<f:view>
Hello <h:outputText value="#{UserBean.userName}" />, you successfully logged in!
</f:view>
</body>
</html>
Figure 9 - userLoginSuccess.jsp
In both of our JSP pages, you'll notice segments of code that look like: value="#{UserBean.userName}" The UserBean in JSF is a backing bean to the JSP page that will provide the functionality we need to login the user. We'll build that functionality in the next section.
