In this recipe, we will put into practice some of the goodies that JSF packs, and that NetBeans makes it easier for the developer to take advantage of.
In this recipe, we will create a JSF CRUD. To access the CRUD, the user is forced to pass through the login page, which we will develop using Managed Beans. On the top of all that, we will add templates to each and every page created, giving a more consistent look across the application.
It is also possible to use available sources from your own Java Web project. Java DB must be installed and configured. It is necessary to have a connection to the sample database. Refer to Chapter 04, JDBC and NetBeans, to learn how to do it if unsure.
We need to add a Login page with the success and failure flow.
- Right-click on
FirstJavaEE6Applicationand select New and JSF Page.... - Execute the following steps in the New JSF Page dialog:
- Name and Location: Under Files Name, type
login - Under Folder text field, type pages
- The selected Options must be Facelets
- Name and Location: Under Files Name, type
- And click Finish.
When the login.xhtml opens in the Editor, replace:
<h:head> <title>Facelet Title</title> </h:head> <h:body> Hello from Facelets </h:body>
with:
<h:head>
<title>Login</title>
<h:outputStylesheet name="css/jsfcrud.css"/>
</h:head>
<h:body>
<ui:composition template="/template.xhtml">
<ui:define name="body">
<h:form>
<h:panelGrid rowClasses="3" >
<h:outputText value
="user name: " />
<h:inputText id=
"loginname" value="#{Validator.username}" />
<h:outputText value=
"password: " />
<h:inputSecret id=
"password" value="#{Validator.password}" />
<h:commandButton value=
"submit" action="#{Validator.VerifyUsernameAndPassword}" />
</h:panelGrid>
</h:form>
</ui:define>
</ui:composition>
</h:body>
The editor will show some import errors, so let's click on the bulb icon and fix them:
Let's repeat the same process for the failure page:
- Right-click on
FirstJavaEE6Applicationand select New and JSF Page.... - Execute the following steps in the New JSF Page dialog:
- Name and Location: Under Files Name, type
failure - Under Folder text field, type
pages
- Name and Location: Under Files Name, type
- The selected Options must be Facelets.
- Click Finish.
When the failure.xhtml opens in the Editor, replace:
<h:head> <title>Facelet Title</title> </h:head> <h:body> Hello from Facelets </h:body>
with:
<h:head> <title>Error</title> </h:head> <h:body> <ui:composition template="/template.xhtml"> <ui:define name="body"> username/password incorrect. </ui:define> </ui:composition> </h:body>
Resolve the import problems again as above then save all the files.
Our next step is to create entities from our database. Check the following steps:
- Right-click on
FirstJavaEE6Applicationand select New and Entity Classes from Database.... - Under Database Tables: With the New Entity Classes from Database dialog open:
- Click on the drop-down in Data Source and select
jdbc/sample. - When the Available Tables finish being populated, select PRODUCT and click Add.
- Click on the drop-down in Data Source and select
- Click Next.
- Under Entity Classes: Leave Class Names, Project, Location, Generated Named Query Annotations for Persistence Fields, and Create Persistence Unit with the default values.
- Under Package, type
entities. - Click Finish.
Package and contents created by following the above steps is shown below:
After importing entities from the database, we will create the JSF CRUD from those newly imported Entities:
- Right-click on
FirstJavaEE6Applicationand select New and click on JSF Pages from Entity Classes.... - Entity Classes: Select all of the entity classes; this can be done by pressing Ctrl+A, and clicking Add >.
- Leave the Include Referenced Classes box ticked.
- Click Next >.
- Generate JSF Pages and Classes: Under JSF Pages folder, type pages and leave all the other fields with their default values.
- Click Finish.
You can see the following screenshot:
Open the template.xhtml and replace the code between to change the facelets template:
<h:head>
And:
</h:body>
Tags with:
<h:head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link href="http://./../../resources/css/default.css" rel="stylesheet" type="text/css" /> <link href="http://./../../resources/css/cssLayout.css" rel="stylesheet" type="text/css" /> <title>Facelets Template</title> <h:outputStylesheet name="css/jsfcrud.css"/> </h:head> <h:body> <div id="top" align="center"> <ui:insert name="top"><h1>The Killer App</h1></ui:insert> </div> <div id="content" class="center_content"> <ui:insert name="body">Content</ui:insert> </div> <div id="bottom" align="right"> <ui:insert name="bottom"><i><br/>NetBeans Cookbook</i></ui:insert> </div> </h:body>
Save the file.
Now let's tie those pages together by adding a managed bean and navigation rules.
Navigate to WEB-INF and expand the node, then open faces-config.xml in the Editor and replace the code before the<application> tag with the following:
<managed-bean>
<managed-bean-name>Validator</managed-bean-name>
<managed-bean-class>util.Validator</managed-bean-class>
<managed-bean-scope>request</managed-bean-scope>
</managed-bean>
<navigation-rule>
<from-view-id>/pages/login.xhtml</from-view-id>
<navigation-case>
<from-action>#{Validator.VerifyUsernameAndPassword}</from-action>
<from-outcome>success</from-outcome>
<to-view-id>index.xhtml</to-view-id>
</navigation-case>
<navigation-case>
<from-action>#{Validator.VerifyUsernameAndPassword}</from-action>
<from-outcome>failure</from-outcome>
<to-view-id>/pages/failure.xhtml</to-view-id>
</navigation-case>
</navigation-rule>
Save the file.
The next step is to create the managed bean:
- Right-click on
FirstJavaEE6Applicationand select New and Java Class.... - Under Name and Location: under Class Name, type
Validator. - Under Package, type
util. - Click Finish.
Now insert the following code snippet inside the Validator class:
String password;
String username;
public String getUsername(){
return username;
}
public void setUsername(String username){
this.username = username;
}
public String getPassword(){
return password;
}
public void setPassword(String password){
this.password = password;
}
public String VerifyUsernameAndPassword(){
if(username.equals("admin") && password.equals("admin"))
return "success";
else
return "failure";
}
A few things left to do:
Open index.xhtml and after the:
<h:body>
Add:
<ui:composition template="/template.xhtml"> <ui:define name="body">
And before:
</h:body>
Add:
</ui:define> </ui:composition>
Once we resolve the import errors, we are ready to deploy the application.
The application can be accessed by deploying it from the IDE and pointing your browser in the direction of:
http://localhost:8080/FirstJavaEE6Application/faces/pages/login.xhtml
We started with the basics, creating a normal login-success-fail case which is very common in web applications. Even though we did not check the password and user name validity from a database, which is the best case scenario, it would not take much more programming to achieve that goal.
For the facelets template, we created a directory under WEB-INF because we do not wish to make the templates page visible to the world. By creating a directory under WEB-INF, we ensure that nothing under that directory can be accessed externally.
The facelets template ensures that this template is applied to all the pages, to share the same common look. It also makes it easier to add different behavior if necessary.
Here is how to use NetBeans to conveniently create your own template.
Under the Projects window, expand the FirstJavaEE6Application node, and then the Web Pages node:
To create the Facelets Template:
- Right-click on the newly-created templates folder and select Facelets Template....
- In the New Facelets Template Dialog, Name and Location: Under File Name, type
internal-template. Leave the other settings with their default values. - Under Layout Style, select CSS and the following design:
- Click on Finish.
The New Facelets Template Dialog should look like the following screenshot:
Now you can choose to apply the new Template to your pages.