Page navigation in JavaServer Faces
Author Budi Kurniawan10 / 29/2003
Page navigation is an important part of Web programming. The more complex the program, the more difficult the user page scheduling is. JavaServer Faces (JSF) solves this problem by configuring page navigation information in the configuration file, making JSF's first choice for web development. You can now now examples. These examples use JSF Early Access 4. Please refer to "How to Deploy your JSF application" in "Introducing JavaServer Faces" on the Onjava.com website, if you are not familiar with JSF, this article is your first choice.
All multi-page web programs need to be a navigation relationship between the user management page. If you are familiar with Servlet and JSP Model 1 and Model 2 development, you know how complicated page navigation in Model 1 mode, because users enter the next page of the link is all hardcoded, which causes Model 1 way not and medium Scale application development. This problem is mitigated because navigation information is defined in servlet control. However, to change the link to recompile the servlet. JSF provides rules for defining pages navigation in an application profile.
Page navigation is critical in JSF application development. All multi-page JSFs require users to page navigation for users, and users enter other pages by clicking on a component called UICommand, represented by a Command_Button tag or a Command_HyperLink label. Clicking this component will generate the time object of javax.faces.event.Avent. Usually, you need to capture an ActionEvent, you need to write an ActionListener. However, JSF provides a default Listener for page navigation. So you don't need to work on your hand. But this default Action Listener user enters which interface when clicking on UICOMMAND? The answer is the page navigation rule defined in the application configuration file. Because it is an XML file, you can edit it with any text, which means it is easy to modify.
This article tells the page navigation rules and how to apply them. A simple navigation will be accompanied by a simple navigation. Then, discuss the role played in the Action class in navigation. Then use a more complicated example to explain how to navigate the page of the existing condition. let's start!
Navigation rule
Click the UICommand component will send ActionEvent to a default handle, which is automatically registered to each group UICommand.
Each navigation rule defined in the application configuration file has a source page and one or more target pages. A page is represented by its tree identifier, and each possible target page represents a naviation code. You need to specify a navigation rule for each page, and users can jump to other pages from this page. "
For better understanding, it is thought to have a page called Login.jsp, which contains a logged form. When the user clicks to log in, the program will redirect to Welcome.jsp (such as multi-login success) or return to login.jsp (if the login failed), so that login.jsp has two navigation conditions, successful login success And login failed.
Navigation rules define in the application configuration file navigation-rule element, as follows
The "*" number indicates that there are more than 0 or more, so Description, Display-Name, Icon and Navigation-Case are optional and there are many times. Marked "?" Indicates that the element can appear 0 times, and the two sub-elements of Navigation-Rule are from-tree-id and navigation-case. The value of the from-Tree-ID child element is the tree identifier of the source page. To describe the navigation rules of Login.jsp, as shown below
login.jsp
The Navigation-Case child element represents a possible goal. Navigation-rule elements may have no or multiple Navigation-Case sub-elements, each element defines a result for from-Tree-ID, and the result can be obtained from the UICommand's action and an actionRef attribute.
The Navigation-Case element is described as follows:
(Description *, Display-name *, icon *, from-action-rel?, from-outcome ?, to-tre-id)>
Display-name and icon are rarely used, from-action-rt, from-outcome, the end of the to-Tree-ID is as follows:
TO-TREE-ID defines the target page of this navigation condition; from-Outcome defines the result of processing the from-tree-id. It is obtained from the action attribute value of the UICommand component that triggers an ActionEvent event.
From-action-ref elements, like from-outcome, it corresponds to an ActionRef of the UICommand component.
A simple example
The following example shows a simple page navigation rule, which consists of two pages: A.jsp and B.Jsp. From A.jsp, and users can click on the button to B.JSP vice versa, the following is their navigation rules:
/a.jsp
/b.jsp
/B.jsp
/a.jsp
The first navigation-rule defines the target for A.jsp, which contains a navigation-case element with a to-Tree-ID child element, no from-outcome, and from-action-ref child elements, no matter what results will be displayed. B.Jsp. The second is defined for B.Jsp, from B.JSP, and users will definitely jump to A.jsp.
Note: If there is an error handling, the source page is also displayed.
a. JSP and B.JSP use the valuebean below:
Package jsfarticle;
Public class valuebean {
PRIVATE STRING VALUE;
Public String getValue () {
Return Value;
Public void setValue (string value) {
THIS.VALUE = VALUE;
}
}
This bean definition must be given in the application configuration file:
valuebean
jsfarticle.valuebean
session
a. JSP contains a UIINPUT component and an forced user inputs more than 4 self-contained validators:
A.jsp
<% @ Taglib Uri = "http://java.sun.com/jsf/html" prefix = "h"%>
<% @ Taglib URI = "http://java.sun.com/jsf/core" prefix = "f"%>
first page </ title></p>
<p></ hEAD></p>
<p><body></p>
<p><f: USE_Faces></p>
<p><h: form formname = "myform"></p>
<p>Please enter your user ID (Your User ID Must Be at Least 4</p>
<p>Characters long):</p>
<p><h: input_text valuef = "valuebean.value"></p>
<p><f: validate_length minimum = "4" /></p>
<p></ h: Input_Text></p>
<p><br/></p>
<p><h: command_button commandname = "submit" label = "submit" /></p>
<p><br/></p>
<p><hr /></p>
<p><h: Output_ERRORS /></p>
<p></ h: form></p>
<p></ f: USE_FACES></p>
<p></ body></p>
<p></ html></p>
<p>The B.jsp page contains a UIOUTPUT component that is used to display the characters entered in the UIINPUT component in the A.jsp page, and B.JSP also has a command button to return A.jsp.</p>
<p>B.Jsp</p>
<p><% @ Taglib Uri = "http://java.sun.com/jsf/html" prefix = "h"%></p>
<p><% @ Taglib URI = "http://java.sun.com/jsf/core" prefix = "f"%></p>
<p><html></p>
<p><HEAD></p>
<p><title> second page </ title></p>
<p></ hEAD></p>
<p><body></p>
<p><f: USE_Faces></p>
<p><h: form formname = "myform"></p>
<p>The user ID you have entered is <h: Output_Text</p>
<p>VALUEREF = "ValueBean.value" /></p>
<p><h: command_button commandname = "back"</p>
<p>Label = "Back to Previous Page" /></p>
<p></ h: form></p>
<p></ f: USE_FACES></p>
<p></ body></p>
<p></ html></p>
<p>You can use this URL to access A.JSP (assuming your web container with 8080 port and running this program on this machine)</p>
<p>Http: // localhost: 8080 / jsfpagenav / faces / A.jsp</p>
<p>Now, enter and submit a string composed of more than four characters</p>
<p>If you click the button on B.JSP, it will return to A.jsp.</p>
<p>If you enter a string less than four strings, the verifier in A.JSP adds a message to the FacesContext instance, cancel the navigation. The results are as follows:</p>
<p>Action class</p>
<p>Action is an object that performs tasks. In JSF, it is defined as an abstract class javax.faces.Application.action.</p>
<p>The most important way is invoke () This is an abstract method, the return value is a String class</p>
<p>Public Abstract string infoke ();</p>
<p>You write code in this method, and the JSF implementation calls your method.</p>
<p>Action will be called by the UICommand by the ActionRef property of the Command_Button or Command_HyperLink tag. To illustrate how to use this class, please see the example "Conditional Page Navigation".</p>
<p>Conditional page navigation</p>
<p>This section introduces an example to come to see how many navigation conditions are defined by navigation rules. This example contains two pages: login.jsp and Welcome.jsp. Login.jsp page Packing two UIINPUT components Let users enter the username and password, click the Command button to log in. Login success will go to the Welcome.jsp page, otherwise the user will see the Login.jsp page with the error message.</p>
<p>Conditional navigation page rules:</p>
<p><navigation-rule></p>
<p><from-Tree-id> /Login.jsp </ from-tree-id></p>
<p><Navigation-Case></p>
<p><from-Outcome> Success </ from-outcome></p>
<p><to-tree-id> /welcome.jsp </ to-tree-id></p>
<p></ navigation-case></p>
<p><Navigation-Case></p>
<p><from-Outcome> Failed </ from-Outcome></p>
<p><to-tree-id> /login.jsp </ to-tree-id></p>
<p></ navigation-case></p>
<p></ navigation-rule></p>
<p>Navigation-rule defines the possible target of the login.jsp page, the from-outcome element value is SUCCESS (successful login), the Welcome.jsp page will be displayed, otherwise, if the value of the from-outcome element is failed, login.jsp page Will be redisplayed. Welcome.jsp does not define navigation rules, you can do it yourself.</p>
<p>Login.jsp</p>
<p><% @ Taglib Uri = "http://java.sun.com/jsf/html" prefix = "h"%></p>
<p><% @ Taglib Uri = "http://java.sun.com/jsf/core" prefix = "f"%> <html></p>
<p><HEAD></p>
<p><title> login </ title></p>
<p></ hEAD></p>
<p><body></p>
<p><f: USE_Faces></p>
<p><h: form formname = "loginform"></p>
<p><H2> please enter your user name and password </ h2></p>
<p><br> User Name: <H: Input_Text</p>
<p>VALUEREF = "loginbean.username" /></p>
<p><br> Password: <h: input_secret</p>
<p>VALUEREF = "loginbean.password" /></p>
<p><br> <h: command_button commandname = "login"</p>
<p>Label = "login"</p>
<p>ActionRef = "LoginBean.login" /></p>
<p><br></p>
<p><h: Output_ERRORS /></p>
<p></ h: form></p>
<p></ f: USE_FACES></p>
<p></ body></p>
<p></ html></p>
<p>Welcome.jsp</p>
<p><% @ Taglib Uri = "http://java.sun.com/jsf/html" prefix = "h"%></p>
<p><% @ Taglib URI = "http://java.sun.com/jsf/core" prefix = "f"%></p>
<p><html></p>
<p><HEAD></p>
<p><title> Welcome </ Title></p>
<p></ hEAD></p>
<p><body></p>
<p>You logged in successfully.</p>
<p></ body></p>
<p></ html></p>
<p>The command_button sign in login.jsp has a value of loginbean.login ActionRef:</p>
<p><h: command_button commandname = "login" label = "login"</p>
<p>ActionRef = "LoginBean.login" /></p>
<p>This means that the output of Command Button comes from the loginbean's login property, pay attention to the LoginBean code below, we will explain later.</p>
<p>Package jsfarticle;</p>
<p>Import javax.faces.Application.action;</p>
<p>Import javax.faces.Application.Message;</p>
<p>Import javax.faces.Application.MessageImpl;</p>
<p>Import javax.faces.context.facescontext;</p>
<p>Public class loginbean {</p>
<p>PRIVATE STRING UserName;</p>
<p>PRIVATE STRING Password;</p>
<p>PRIVATE ACTION LOGIN;</p>
<p>Public string getUsername () {</p>
<p>Return UserName;</p>
<p>}</p>
<p>Public void setusername (string username) {this.username = username</p>
<p>}</p>
<p>Public string getpassword () {</p>
<p>Return Password;</p>
<p>}</p>
<p>Public void setpassword (string password) {</p>
<p>this.password = password;</p>
<p>}</p>
<p>Public action getLogin () {</p>
<p>IF (login == null)</p>
<p>Login = new loginaction ();</p>
<p>Return login;</p>
<p>}</p>
<p>Class loginaction extends action {</p>
<p>Public string infoke () {</p>
<p>IF ("Anna" .Equals (username) && "Honolu" .equals (password))</p>
<p>Return "Success";</p>
<p>Else {</p>
<p>Message loginerrorMessage =</p>
<p>New MessageImpl (1, "<HR> Login Failed", NULL;</p>
<p>FacesContext.getCurrentInstance (). Addmessage</p>
<p>null, loginerrorMessage;</p>
<p>Return "failed";</p>
<p>}</p>
<p>}</p>
<p>}</p>
<p>}</p>
<p>Because a bean property represents an action of an action, this property must be a javax.faces.Application.Action class</p>
<p>PRIVATE ACTION LOGIN;</p>
<p>getLogin Returns Login Action.</p>
<p>Public action getLogin () {</p>
<p>IF (login == null)</p>
<p>Login = new loginaction ();</p>
<p>Return login;</p>
<p>}</p>
<p>The implementation of the Action class must provide an Invoke method. According to the navigation rule, the value is Success or Failed this is the return value of the INVOKE method in the LoginAction class. Thus, the correct username and password are Anna and BlackcomBhonolulu.</p>
<p>The loginbean used by the example must be registered in the application configuration file:</p>
<p>Register Loginbean</p>
<p><managed-bean></p>
<p><managed-bean-name> loginbean </ managed-bean-name></p>
<p><managed-bean-class> jsfarticle.loginbean </ managed-bean-class></p>
<p><managed-bean-scope> session </ management-bean-scope></p>
<p></ managed-bean></p>
<p>Now you can enter in your browser</p>
<p>Http: // localhost: 8080 / jsfch0jsfpagenav6 / faces / login.jsp</p>
<p>You will see the following screen:</p>
<p>Enter the correct username and password, you will see Welcome.jsp</p>
<p>If you enter an error, you will see the login.jsp with error messages.</p>
<p>Note that you can also use from-action-rel elements to define:</p>
<p><navigation-rule></p>
<p><from-Tree-id> /Login.jsp </ from-tree-id></p>
<p><Navigation-Case></p>
<p><from-action-ref> LoginBean.login </ from-action-ref></p>
<p><from-Outcome> Success </ from-outcome> <to-tree-id> /welcome.jsp </ to-tree-id></p>
<p></ navigation-case></p>
<p><Navigation-Case></p>
<p><from-action-ref> LoginBean.login </ from-action-ref></p>
<p><from-Outcome> Failed </ from-Outcome></p>
<p><to-tree-id> /login.jsp </ to-tree-id></p>
<p></ navigation-case></p>
<p></ navigation-rule></p>
<p>However, this is not required, because the value of the action is from the bean, it is unique.</p>
<p>Use from-action-ref elements</p>
<p>This example uses the action-ref attribute in turn uses the action attribute, which is used to login2.jsp, and login.jsp is very similar, just login2.jsp contains a hyperlink to the Help.jsp page.</p>
<p>Note: You must restart your browser so that JSF creates a new LoginBean instance.</p>
<p><navigation-rule></p>
<p><from-Tree-id> /Login2.jsp </ from-tree-id></p>
<p><Navigation-Case></p>
<p><from-Outcome> Success </ from-outcome></p>
<p><to-tree-id> /welcome.jsp </ to-tree-id></p>
<p></ navigation-case></p>
<p><Navigation-Case></p>
<p><from-Outcome> Failed </ from-Outcome></p>
<p><to-tree-id> /login2.jsp </ to-tree-id></p>
<p></ navigation-case></p>
<p><Navigation-Case></p>
<p><from-outcome> Help </ from-outcome></p>
<p><to-tree-id> /help.jsp </ to-tree-id></p>
<p></ navigation-case></p>
<p></ navigation-rule></p>
<p>Login2.jsp</p>
<p><% @ Taglib Uri = "http://java.sun.com/jsf/html" prefix = "h"%></p>
<p><% @ Taglib URI = "http://java.sun.com/jsf/core" prefix = "f"%></p>
<p><html></p>
<p><HEAD></p>
<p><title> login 2 </ title></p>
<p></ hEAD></p>
<p><body></p>
<p><f: USE_Faces></p>
<p><h: form formname = "loginform"></p>
<p><H2> please enter your user name and password </ h2></p>
<p><br> User Name: <H: Input_Text</p>
<p>VALUEREF = "loginbean.username" /></p>
<p><br> Password: <h: input_secret</p>
<p>VALUEREF = "loginbean.password" /></p>
<p><br> <h: command_button commandname = "login" label = "login"</p>
<p>ActionRef = "LoginBean.login" /></p>
<p><br> <h: command_hyperlink commandname = "forgottenpassword"</p>
<p>Action = "HELP"</p>
<p>Label = "Forgotten Your Password?" /></p>
<p><h: Output_ERRORS /></p>
<p></ h: form></p>
<p></ f: USE_FACES></p>
<p></ body></p>
<p></ html></p>
<p>Help.jsp.jsp</p>
<p><html></p>
<p><HEAD></p>
<p><title> Help </ Title></p>
<p></ hEAD></p>
<p><body></p>
<p>If you have forgotten your password, please contact the admin</p>
<p>(admin@brainysoftware.com).</p>
<p></ body></p>
<p></ html></p>
<p>Enter http:// localhost: 8080 / jsfch0jsfpagenav6 / faces / login2.jsp</p>
<p>If you enter the correct username and password, you will see the Welcome.jsp page. Enter an error will return Login.jsp. If you have a hyperlink below, you will see Help.jsp.jsp.jsp</p>
<p>If you plan to use Success as the value of the action attribute in the Command_HyperLink tab:</p>
<p><h: command_hyperlink commandname = "forgottenpassword"</p>
<p>Action = "Success" label = "Forgotten Your Password?" /></p>
<p>Navigation-rule elements should be written (this time I use from-action-ref elemental):</p>
<p><navigation-rule></p>
<p><from-Tree-id> /Login2.jsp </ from-tree-id></p>
<p><Navigation-Case></p>
<p><from-action-ref> LoginBean.login </ from-action-ref></p>
<p><from-Outcome> Success </ from-outcome></p>
<p><to-tree-id> /welcome.jsp </ to-tree-id></p>
<p></ navigation-case></p>
<p><Navigation-Case></p>
<p><from-action-ref> LoginBean.login </ from-action-ref></p>
<p><from-Outcome> Failed </ from-Outcome></p>
<p><to-tree-id> /login2.jsp </ to-tree-id></p>
<p></ navigation-case></p>
<p><Navigation-Case></p>
<p><from-Outcome> Success </ from-outcome></p>
<p><to-tree-id> /help.jsp </ to-tree-id></p>
<p></ navigation-case></p>
<p></ navigation-rule></p>
<p>to sum up</p>
<p>This article demonstrates the method of page navigation. This is an important aspect of JSF programming. The author first explains the page navigation rule and then gives a lot of examples. Budi Kurniawan is an IT consultant, specializing in the network and object-oriented programming, taking over Microsoft and Java technology.</p></div><div class="text-center mt-3 text-grey">
转载请注明原文地址:https://www.9cbs.com/read-22299.html</div><div class="plugin d-flex justify-content-center mt-3"></div><hr><div class="row"><div class="col-lg-12 text-muted mt-2"><i class="icon-tags mr-2"></i><span class="badge border border-secondary mr-2"><h2 class="h6 mb-0 small"><a class="text-secondary" href="tag-2.html">9cbs</a></h2></span></div></div></div></div><div class="card card-postlist border-white shadow"><div class="card-body"><div class="card-title"><div class="d-flex justify-content-between"><div><b>New Post</b>(<span class="posts">0</span>)
</div><div></div></div></div><ul class="postlist list-unstyled">
</ul></div></div><div class="d-none threadlist"><input type="checkbox" name="modtid" value="22299" checked /></div></div></div></div></div><footer class="text-muted small bg-dark py-4 mt-3" id="footer"><div class="container"><div class="row"><div class="col">CopyRight © 2020 All Rights Reserved
</div><div class="col text-right">Processed:
<b>0.069</b>, SQL:
<b>9</b></div></div></div></footer><script src="./lang/en-us/lang.js?2.2.0"></script><script src="view/js/jquery.min.js?2.2.0"></script><script src="view/js/popper.min.js?2.2.0"></script><script src="view/js/bootstrap.min.js?2.2.0"></script><script src="view/js/xiuno.js?2.2.0"></script><script src="view/js/bootstrap-plugin.js?2.2.0"></script><script src="view/js/async.min.js?2.2.0"></script><script src="view/js/form.js?2.2.0"></script><script>
var debug = DEBUG = 0;
var url_rewrite_on = 1;
var url_path = './';
var forumarr = {"1":"Tech"};
var fid = 1;
var uid = 0;
var gid = 0;
xn.options.water_image_url = 'view/img/water-small.png';
</script><script src="view/js/wellcms.js?2.2.0"></script><a class="scroll-to-top rounded" href="javascript:void(0);"><i class="icon-angle-up"></i></a><a class="scroll-to-bottom rounded" href="javascript:void(0);" style="display: inline;"><i class="icon-angle-down"></i></a></body></html><script>
var forum_url = 'list-1.html';
var safe_token = 'E_2BG3nsD3wKh9NDa5Y9BNaa3eyvL2kJmMm9lJkOI8AxWCwmRiK4Hgk8KJNa5pybWdOGcPSImB6rVVHcpy';
var body = $('body');
body.on('submit', '#form', function() {
var jthis = $(this);
var jsubmit = jthis.find('#submit');
jthis.reset();
jsubmit.button('loading');
var postdata = jthis.serializeObject();
$.xpost(jthis.attr('action'), postdata, function(code, message) {
if(code == 0) {
location.reload();
} else {
$.alert(message);
jsubmit.button('reset');
}
});
return false;
});
function resize_image() {
var jmessagelist = $('div.message');
var first_width = jmessagelist.width();
jmessagelist.each(function() {
var jdiv = $(this);
var maxwidth = jdiv.attr('isfirst') ? first_width : jdiv.width();
var jmessage_width = Math.min(jdiv.width(), maxwidth);
jdiv.find('img, embed, iframe, video').each(function() {
var jimg = $(this);
var img_width = this.org_width;
var img_height = this.org_height;
if(!img_width) {
var img_width = jimg.attr('width');
var img_height = jimg.attr('height');
this.org_width = img_width;
this.org_height = img_height;
}
if(img_width > jmessage_width) {
if(this.tagName == 'IMG') {
jimg.width(jmessage_width);
jimg.css('height', 'auto');
jimg.css('cursor', 'pointer');
jimg.on('click', function() {
});
} else {
jimg.width(jmessage_width);
var height = (img_height / img_width) * jimg.width();
jimg.height(height);
}
}
});
});
}
function resize_table() {
$('div.message').each(function() {
var jdiv = $(this);
jdiv.find('table').addClass('table').wrap('<div class="table-responsive"></div>');
});
}
$(function() {
resize_image();
resize_table();
$(window).on('resize', resize_image);
});
var jmessage = $('#message');
jmessage.on('focus', function() {if(jmessage.t) { clearTimeout(jmessage.t); jmessage.t = null; } jmessage.css('height', '6rem'); });
jmessage.on('blur', function() {jmessage.t = setTimeout(function() { jmessage.css('height', '2.5rem');}, 1000); });
$('#nav li[data-active="fid-1"]').addClass('active');
</script>
