JSF Quickstart: Outline
JSF Quickstart: Outline
Outline
1. Preface 2. Introduction 3. Requirements 4. New Project Setup & Structure 5. Creating the Message Bundle 6. Creating the Managed Bean 7. Creating the JSP Pages 8. Running the Application 9. Summary 10.User Feedback
1. Preface
This document was written using Sun JDK 1.5.0, Eclipse 3.1 and MyEclipse 4.0. If you notice discrepancies between this document and the version of Eclipse/MyEclipse you are using to perform the install that make it difficult or impossible to follow this guide, please see the User Feedback section on how to report the issue. Back to Top
2. Introduction
In this tutorial we will be walking through a small JSF demo application using MyEclipse Enterprise Workbench. Previous knowledge of JSF and/or MyEclipse is not necessary, but would be helpful. Since Struts is such a prevalent web application framework, similarities between JSF and Struts will be noted, where appropriate, to help the reader with previous Struts experience. However, if you have no prior experience with Struts, you may feel free to skip these sections . Back to Top
3. Requirements
Below is a list of software used by this guide:
Eclipse 3.1 SDK http://www.eclipse.org/downloads/index.php MyEclipse 4.1 http://www.myeclipseide.com/ContentExpress-display-ceid-10.html Tomcat 5.x (5.5.9 Preferred, or other compliant Servlet/EJB container) http://jakarta.apache.org/tomcat/index.html For this demo the User Name is "myeclipse" and the Password is "myeclipse" as well.
Note: After installing the JDK and restarting your computer, be sure to install Eclipse then MyEclipse next followed by Tomcat. After all the software have been installed, be sure to setup the Tomcat 5 connector in MyEclipse accordingly; using the correct Tomcat Home directory and valid JDK that you just installed. You may refer to the Using Application Servers Quickstart guide if you don't know how to setup Tomcat in MyEclipse. Back to Top
Now that the project has been created, we can start editing and creating our application. Back to Top
user_password_label=Passwor d: login_button_label=Login
Figure 6.2: Launch the ManagedBean wizard from the Outline View
You will then be presented with the new Managed Bean wizard; Fill out the values as shown in Figures 6.3 and 6.4 below:
return "failure";
Add an h:inputText component for the user name Add an h:inputSecret component for the password Add an h:outputLabel for the user name inputText Add an h:outputLabel for the password
NOTE: In version 4.0 the JSF designer does not support rendering the MessageBundle values for outputLabel, so in order to see our outputLabels in the designer, we are going to manually change them in the code to wrap outputText components that have their values bound to our MessageBundle. This will be fixed in MyEclipse 4.1 release. First thing we need to do is remove the default template text as well as type in our bundle basename so our page can use our MessageBundle. We will end up with JSP that looks like Figure 7.5:
Figure 7.5: Remove template text and add our MessageBundle to the JSP page
Now that our userLogin.jsp page is done, let's quickly do our userLoginSuccess.jsp page which is much simpler. Open that file up and edit it, simply adding a line to print out the name of the user that logged in as shown in Figure 7.16:
Figure 7.16: Making userLoginSuccess.jsp page print out the user's name
Now that we have created our two pages, the only thing left for us to do is hook them together with proper Navigation Cases, that is done by visual editing our faces-config.xml file, so open that file. After the file is open for editing, perform the following steps to create the navigation case: 1. 2. 3. 4. Click the Navigation Case tool Click your userLogin.jsp file Then click on your userLoginSuccess.jsp file You will be prompted with a wizard to create the navigation case.
Follow Figures 7.17 and 7.18 for creating the success navigation case. In order to create the failure navigation case, we simply do the same steps as before but click twice on the userLogin.jsp file, in order to create a circular navigation case.
9. Summary
In this demo we took a look at developing a simple JSF application using MyEclipse Enterprise Workbench. If you would like to download a zipped up version of the MyEclipse project used to create this demo, click here . This concludes your introduction to JSF. Additional Quickstart documents are available that introduce working with Web Projects, editing, application server configuration, enterprise application projects and database development. For more information visit the MyEclipse Quickstart library . Back to Top