The first article of JSF development practices (JSF development practices I) demonstrates how to build a simplest JSF application, in that example, we can see how the page components of JSF are bound to the background JavaBean, and the most basic use of JSF labels. In this article, we will demonstrate a more complex application, which contains more abundant JSF tags.
The example to be developed is a user management program. The Administrator enters the account and password to log on, then it can view the list of all users, and can modify or delete some of the data. Using the jsf-config.xml designer that comes with myeclipse, the page flow is as follows:
We can see that the business logic of this application is:
User Login, modification of user information, addition of new users, deletion of users
We use the Hibernate framework to assist development in background database operations. For technical details, refer to the documentation.
First, create the pojo file: User. Java, which contains several basic attributes:
Private int ID;
Private string name;
Private string password;
Private int power;
Complete the set/get method and compile the corresponding HBM. xml file.
One of our main tasks is to build a JavaBean for JSF page components and name it umdelegater. java. It calls usermanager to complete the business logic. Here is a proxy mode. The content of usermanager is a simple addition, deletion, query, and modification operation, which is not listed here. The content of umdelegater is:
Package org. bromon. JSF. Control;
Import java. util. List;
Import javax. Faces. model. datamodel;
Import javax. Faces. model. listdatamodel;
Import org. bromon. JSF. model. usermanager; // a self-built tool class for all hibernate operations
Import org. bromon. JSF. model. pojo. User; // pojo object
Public class umdeletager {
Private usermanager um = new usermanager (); // It is used to implement all specific methods.
Private user = new user ();
Private datamodel allusers = new listdatamodel (); // built-in JSF object, used to encapsulate table data in HTML
// ---------- Set/get method ---------------------
Public datamodel getallusers (){
Return allusers;
}
Public void setallusers (list ){
Allusers. setwrappeddata (list );
}
Public usermanager getum (){
Return um;
}
Public void setum (usermanager um ){
This. Um = Um;
}
Public user getuser (){
Return user;
}
Public void setuser (User user ){
This. User = user;
}
// ----- Function Method ---------
Public String login ()
{
String S = Um. login (this. getuser ());
If (S. Equals ("OK "))
{
This. setallusers (UM. loadall (); // If the login succeeds, all user information will be retrieved.
Return "login: OK ";
} Else
{
Swapper. setloginfailinfo (s );
Return "login: fail ";
}
}
Public string edit ()
{
This. User = (User) allusers. getrowdata (); // The table on the page automatically returns the user object containing the ID.
This. User = Um. loadbyid (user. GETID ());
If (user! = NULL)
{
Return "edit ";
} Else
{
Return "error ";
}
}
Public String Update ()
{
Um. Update (this. getuser ());
This. setallusers (UM. loadall (); // obtain the data again to update the cache.
Return "Update: OK ";
}
Public String addnew ()
{
This. setuser (new user (); // generates a new user object without any data. It is automatically mapped to a form without data.
Return "add ";
}
Public String add ()
{
Um. Add (this. getuser ());
This. setallusers (UM. loadall (); // obtain the data again to update the cache.
Return "Add: OK ";
}
}
Declare this bean in a jsf-config.xml:
<Managed-bean>
<Managed-bean-Name> umdelegater </managed-bean-Name>
<Managed-bean-class> org. bromon. JSF. Control. umdeletager </managed-bean-class>
<Managed-bean-scope> session </managed-bean-scope>
</Managed-bean>
The business logic is designed. Now you can write the JSF file, first of all index. jsp:
First, introduce the tag library and declare the page attribute:
<% @ Taglib uri = "http://java.sun.com/jsf/html" prefix = "H" %>
<% @ Taglib uri = "http://java.sun.com/jsf/core" prefix = "F" %>
<% @ Page Language = "Java" Import = "Java. util. *" pageencoding = "UTF-8" %>
Then the page is built:
<Body>
<F: View>
<H: Form>
<H: panelgrid columns = "3">
<H: outputlabel for = "name" value = "account:"/>
<H: inputtext id = "name" value = "# {umdelegater. User. name}" required = "true"/>
<H: Message for = "name"/>
<H: outputlabel for = "password" value = "Password:"/>
<H: inputsecret id = "password" value = "# {umdelegater. User. Password}" required = "true"/>
<H: Message for = "password"/>
</H: panelgrid>
<H: panelgroup>
<H: commandbutton value = "login" Action = "# {umdelegater. login}"/>
</H: panelgroup>
</H: Form>
</F: View>
</Body>
The page declares two text boxes that map the name attribute of the user object in the umdelegater object and the Password attribute of the user object in the umdelegater object respectively. Once the form is submitted, the values of the two text boxes will be automatically assigned to the user object. We only need to retrieve data from the user and do not need to execute the troublesome request. getparameter (""), encoding change, data type conversion, and other operations.
We also declare a button that is bound to the login method of the umdelegater object. Click this button and the system will execute umdelegater. login method, which extracts the name and password from the user object and compares them with the records in the database. If it is valid, retrieve all the data and put it in a datamodel object. The specific code is:
List userlist = usermanager. getalluser (); // obtain all user data and put it in a list.
Datamodel alluser = new listdatamodel (); // datamodel is an interface and listdatamodel is an implementation of it.
Allusers. setwrappeddata (userlist); // fill the data in the backup
What is the significance of using datamodel? In JSF, We can bind a table on an HTML page to a datamodel, and the data will be automatically filled into the table, so we do not have to write the loop by ourselves, generate several <tr> and <TD> to generate a table. In list. jsp, we can see how datamodel is used.
After the data is put in place, the successful login operation is completed, and a login: OK is returned to redirect to list. jsp. If the user fails to log on, login: fail will be returned and redirected to error. jsp. Its content will not be described. Next let's take a look at what is in list. jsp. below is its <body> code:
<Body>
<F: View>
<H: Form>
<H: datatable id = "users" value = "# {umdelegater. allusers}" Var = "U" border = "1" width = "80%">
<H: column>
<F: facet name = "Header">
<H: outputtext value = "ID"/>
</F: facet>
<H: outputtext value = "# {u. ID}"/>
</H: column>
<H: column>
<F: facet name = "Header">
<H: outputtext value = "Account"/>
</F: facet>
<H: commandlink action = "# {umdelegater. Edit}">
<H: outputtext value = "# {u. name}"/>
</H: commandlink>
</H: column>
<H: column>
<F: facet name = "Header">
<H: outputtext value = "password"/>
</F: facet>
<H: outputtext value = "# {u. Password}"/>
</H: column>
<H: column>
<F: facet name = "Header">
<H: outputtext value = "permission code"/>
</F: facet>
<H: outputtext value = "# {u. Power}"/>
</H: column>
</H: datatable>
<P>
<H: commandlink action = "# {umdelegater. addnew}" value = "Add User"/>
</P>
</H: Form>
</F: View>
</Body>
We use an H: datatable tag, which is unique to JSF and is translated into an HTML table by specifying the value of H: datatable = "# {umdelegater. allusers} "attribute, which is associated with the datamodel object we just generated and the data is automatically filled. We only need to declare the header of each column in The datatable, which field the data comes from, as shown below:
<H: column>
<F: facet name = "Header">
<H: outputtext value = "ID"/>
</F: facet>
<H: outputtext value = "# {u. ID}"/>
</H: column>
There is a "Add User" button at the end of the table, which is bound to umdelegater. addnew and redirects us to add. jsp.
Note that each user name is a hyperlink. After clicking it, You can redirect to edit. jsp, which allows you to modify user information. This is implemented through the following code:
