Introduction to Java Server Faces JSF using Jdeveloper:
If you’re new to JDeveloper and the use of Java Server Faces(JSF) this is a basic implementation of a JSF application using Jdev.
Step 1. Launch JDev. After launching JDev, in the application navigator right click and select New. Give the application a name, make sure that the Application Package Prefix is blank and the application template is set to No Template[All technologies] as seen on figure 1.
Figure 1
Step 2. The new Project window will launch. Give the new project a name.
Figure 2
You have just create a new application and a new project for your JSF.
Creating the Welcome Page.
Step 3. In the Application Navigator, right click on the newly create project and choose new. This launches the New Gallery Window. Expand Web Tier and choose JSF. Item->JSF JSP.
Figure 3
Step 4. This launches the Create JSF/JSP Wizard. Click on Next and choose Servelet 2.4 and click on Next.
Figure 4
Step 5. After clicking Next, give a new to the new page and make it a Type .JSP. Click Next.
Figure 5
Step 6. On step 3 select the Do Not Automatically Expose UI components in a Managed Bean option. Click Next.
Figure 6
Step 7. On the Tag Libraries Step Select: JSF Core&HTML and click Next
Figure 7
Step 8. Click Finish.
You have just created the first JSF page for the project.
Step 9. Navigate to the newly created jsp page. This can be done by expanding the JSF application->View->public_html and double clicking welcome.jsp. Once opened, you are now ready to add details to the page.
Step 10. once you have added details to the page, you’re ready to add a command button. This can be done by opening the Component Pane, select JSF HTML and then drag over command button.
Figure 8
Step 11. In the Property Inspector (View | Property Inspector) on the lower right, change the Value attribute of the CommandButton to Proceed to Login
Step 12. Change the Action attribute to login. When clicked at runtime, this will allow users to proceed to another page.
Designing Page Flow and Login Page.
Step 13. Locate the faces-config.xml file in the Application Navigator (Web Content | WEB-INF folder). Double-click the file to invoke the page flow editor.
Figure 9
Step 14. Drag and drop the welcome page from the Application Navigator.
Figure 10.
You have just created the part of the workflow.
Step 15. Now you will need to drag a JSF page from the Component palate onto the pane. Change the name of the new page to login.jsp.
Figure 11
Step 16. You will now need to create a case rule. In the Component pane, click on JSF case rule and drag onto face-config.xml page. Click on the welcome page and extend it to the login page.
Figure 12
Step 17. In the Property Inspector, change the default From Outcome value, success, to login, to match the value that you set for the Action attribute of the commandButton on the welcome.jsp page.
Step 18. Drag and drop another jsp page onto the pane and name it Hello.
Figure 13
Step 19. Create another navigation rule from the login page to the newly created hello page.
Step 20. In the Property Inspector, change the default From Outcome value, success, to hello
Step 21. Double click on login.jsp to create the page. This will launch the wizard. Click on Next
Figure 14
Step 22. Choose Automatically Expose UI Component in a New Managed Bean. Click on Next.
Figure 15
Step 23. Leave the same libraries as before. Click on Finish. The new login page opens in the design editor.
Figure 16
Step 24. Fill in the login page with details.
Step 25. You will now want to click on the component pane and select JSF HTML and drag and drop a Panel grid to the design pane. This will hold the text fields for login in. This will launch the wizard. Select 3 columns.
Figure 17
Step 26. From the Component pane, drap and drop an output field and input text field
Figure 18
Step 27. Change the Value of the output label to User name and for Input Text, set Required field to TRUE.
Step 28. From the component pane choose Message and drag and drop onto design pane.
Figure 19
Step 29. Using the Property Inspector, change the Output Label value attribute to Password, and set the Required value of the Input Secret field to True.
Step 30. Select the JSF Core library and, in the component palette, drag and drop the Validate Length component in the Input Secret field.
Step 31. From the component pane choose Message and drag and drop onto design pane.
Step 32. Drop a Command Button in the panelGrid.
Step 33. Change the Value attribute for the Command Button to Hello Me. Then click within the value of the Action attribute and using the down arrow icon, select the success value from the drop down list. Now we’re ready to build the Hello Page
Step 34. Double click on the hello.jsp page in the faces-config.xml. This will launch the page wizard again.
Figure 20
Step 35. Leave all the default settings and click Next and the finish.
Figure 21.
You now have created the empty Hello.jsp page. Add text to the black design page.
Step 35. Next to the Hello text, add a space and drag and drop an Output Text component from the JSF HTML library
Step 36. For the OutputText, delete the value for the Value attribute in the Property Inspector, then click the Binding to Data icon. Expand the JSF Managed Beans | backing_login | inputText1, the select value
Figure 22
Move over the value attribute by right clicking on the right arrow and click OK.
Figure 23
You will be returned to the design pane and now add “You have completed your first JSF Project”
Figure 24
You’re now ready to run the welcome.jsp page. Double the faces-config.xml, right click on the welcome.jsp and select run
Figure 25
Click on Proceed to login and click on Hello Me. Notice that if you do not add any information to the fields you get a validation error. That is because we have set it to be a required field
Figure 26
After adding information and clicking on Hello Me you will see the welcome page with the username.
Figure 27
As part of future tutorials the conditional validity can be expanded to check the password entered with a pre defined password. If it does not make, then the user will be notified that it’s an invalid password.