Java Development Wonderful Tutorial: JSF Series (1) Source: PConline Editor: chenyong
[03-10-21 15:34] Author: fpwang / Matrix.com
Java Server Faces (JSF) technology provides standard programming interface APIs and tag libraries for developers based on network user interface. The Apache Struts Framework Author Craig Mcclanahan assists in leading Sun's JSF project. This allows the project to be easily transplanted from the popular Apache to the JSF standard. Just like the Struts framework, JSF defines a set of JSP tags that can generate an HTML form element that is bound to the Javabean property. From the perspective of the application developer, both frameworks are very similar, but JSFs may get more support. Because JSF is the standard of Java. In the future, there may be all J2EE application servers need to support JSF (Java Server Faces).
Sun Inn the free download of Java Web Services Developer Pack 1.2 (http://java.sun.com/webservices/downloads/webservices), including JSF (JSF Specification Version 1.0, public review Reference implementation of Draft 2) (Early Access 4 - EA4). The EA4 version implements many new features: action, beans management and navigation rules. This article will focus on these new features and show how to get benefits from JSF development to establish a form, confirm user input, and bind user interface components to JavaBeaN properties.
This article contains a network application consisting of four main parts:
1. JavaBean class (PBean.java), saving some text as a data model and related properties: font, size, color, placement position, etc.
2. Based on JSF's form (edit.jsp), users can assign values for JavaBean attributes;
3. Java class (PBUILDER.JAVA), generate an HTML page program with a given text;
4. JSP page (View.jsp) shows the generated HTML page.
Note:
Source code download address: http://www.onjava.com/onjava/2003/09/03/EXAMPLES /USINGJSF-SRC.ZIP
Documentation
Original: Introducing JavaServer Faces (http://www.onjava.com/pub/a/onjava/2003/07/30/JSF_INTRO.HTML)
Translation: http://www.matrix.org.cn/forum_view.asp?forum_id=14&view_id=658
JavaServer Faces (or JSF) is a new development trend in the development of the server. It allows you to make your more easily design, your program can easily maintain, and may even make your work more interesting. Budi Kurniawan showed us JSF technology to explain why JSF is so useful and whether it has implemented the functions committed.
Figure 1: Form based on JSF
Making a JSF form
Handling an HTML form is the most common task when you develop network applications. A good frame can save a lot of development time, because many daily program operations can be done automatically or to minimize only need to be done in the XML file. This is also possible to simplify network development using the JSP tag library. The Java Server Faces framework provides JSP tags for describing the form, managing form status, confirming user input, and error, binding user interface components with JavaBeaN properties, and many other functions that improve development efficiency. JSF also has a rich programming interface to establish a custom user interface (UI) component, custom verification class (verifier Validator), and server event listener. JSF contains two types of tag libraries to name the JSF core library and HTML base library, respectively. The former provides normal markers and some tags for registering the validator in the user interface components and event listeners. The latter includes a JSP tag for describing user interface components, such as buttons, text domains, check button, list, and more. File edit.jsp creates a form with these tags. The standard prefix of the two tag libraries is F and H, and the front of the edit.jsp file is defined:
<% @ taglib prefix = "f" URI = "http://java.sun.com/jsf/core";%> <% @ Taglib prefix = "h" uri = "http://java.sun.com / jsf / html ";%>
tag is a container tag that must contain all JSF tags that appear on the same page. This tag does not generate any HTML content, but it triggers the internal mechanism of JSF. tag generates an HTML element
Edit </ title> </ head> <body> <f: use_faces> <h: form formname = "pform"> ........ </ h: Form> </ f: USE_FACES> </ body> </ html></p>
<p>The above JSP code generates the following HTML pieces:</p>
<p><html> <head> <title> Edit </ title> </ head> <body> <form method = "post" action = "/ usingjsf / faces / edit.jsp"> ......... </ form> </ body> </ html></p>
<p>The next part introduces the application's JavaBean model.</p>
<p>Management bean</p>
<p>Like some other web framework, JSF seizes the user interface from the encapsulation data and the application logic's object model. When the HTML user interface is generated by the JSF tag, the JSF framework obtains data from the JavaBean model and sets the properties of the HTML form user interface component. When the user submits the form, the JSF verifies the user input. If all normal JSF saves the user input to the JavaBean model and the HTTP request will go to the next page according to the "Navigation Rules". If an error occurs, the JSF returns to the form and returns an error message so that the user can correct the error input.</p>
<p>Class PBEAN follows the JavaBean specification to implement the corresponding GET and SET methods for its properties (text, size, font, color, placement position, bold, slope, underscore). The user of each application of JSF creates an instance of a PBean, which is stored in a JSP session (session) and specifies the ID in the XML format profile named Faces-Config.xml. JSF will also initialize the property value of the JavaBean instance based on the data provided by the Faces-Config.xml file. The XML file may also contain other JSF configuration parameters, such as navigation rules, we will introduce later in the following chapters. The following XML program is broken with the declaration of JavaBean managed by JSF:</p>
<p><? XML Version = "1.0"?> <! doctype faces-config public "- // Sun microsystems, Inc.//dtd javaserver faces config 1.0 // en" "http://java.sun.com/dtd/ Web-facesconfig_1_0.dtd ";> <faces-config> ........ <managed-bean> <management-bean-name> PBean </ management-bean-name> <management-bean-clan > com.devsphere.Articles.USINGJSF.PBEAN </ management-bean-class> <management-bean-scope> session </ management-bean-scope> <management-property> <property-name> Text </ property-name > <null-value /> </ management-property> <material-name> size </ proty> <value> <value> <value> </ value> </ management-property> <management-property> < Property-Name> Font </ Property-Name> <value> <value> arial </ value> <value> Courier new </ value> </ value> </ management-property> <managed-property> <property-name > Color </ Property-Name> <value> Green </ value> </ management-property> <managed-property> <property-name> align </ profy-name> <value> Left </ value> </ managed -Property> <management-proteth> <property-name> bold </ property-name> <value> false </ value> </ management-property> <m Anaged-property> <property-name> italic </ proty> <value> true </ value> </ management-property> <management-property> <property-name> underline </ property-name> <value> False </ value> </ managed-property> </ management-bean> </ faces-config></p>
<p>The management bean created by JSF can be stored within the request (Session) or application according to the value of the <managed-bean-scope> element. The value of <managed-bean-scope> element can be empty. If an object already specifies the ID and register, JSF does not establish a JavaBean instance within a given range. User interface components and verification</p>
<p>The <h: form> element in the file edit.jsp contains multiple user interface components, and we will introduce in detail later. The HTML code of each component is generated by the JSF component tag, for example: <h: infut_textArea>, which may also contain other JSF tags, such as: <f: validate_required> tag, the tag makes the JSF to confirm that the user entered information. .</p>
<p>Handling the components entered by the user use attributes VALUEREF = "pBean.property" binds with the Javabean property. JSF Get and Set Management Bean Properties is already introduced earlier.</p>
<p>Some JSF component tags do not handle any user input. For example <H: Output_Text> can be used to output a value of the text or JavaBean read-only properties.</p>
<p>Each component has a unique ID, ID can be specified in the ID attribute or automatically generated by JSF. The user interface component to be verified requires the ID attribute to verify that the error can be displayed together with the <h: output_errors for = "id" />.</p>
<p>Figure 2: Verification error</p>
<p>Text domain Text Area</p>
<p>The text field of the JSF form allows the user input to generate it by the PBUILDER.JAVA and displayed by some text paragraphs displayed by View.jsp. Edit.jsp shows a label determined by <h: Output_Text> and use <H: Input_TextArea> to generate <textarea> HTML elements of 3 rows 30 columns. <f: validate_required> Tag registers a JSF verifier, if the user in the text domain is empty, the error signal is issued. The error message will be displayed in the <h: Output_ERRORS> tag, except that the tag does not do anything else except that the error is displayed. <h: Output_ERRORS> The value of the for attribute value is the same value as the ID attribute value of <H: Input_TextArea>.</p>
<p><F: USE_Faces> <h: form formname = "pform"> <p> <h: output: "/> <br> <h: input_textarea id =" text "valueref =" pbean.text "ROWS = "3" cols = "30"> <f: validate_required /> <f: infut_textarea> <br> <h: output_errors for = "text" /> ......... </ h: Form> </ f: use_faces></p>
<p>The above JSP code generates the following HTML pieces:</p>
<p><form method = "post" action = "/ usingjsf / faces / edit.jsp"> <p> text: <br> <textarea name = "text" cols = "30" rows = "3"> JavaServer Faces </ TextArea> <br> ......... </ form> <h: input_textarea> Properties of value VALUEREF = "PBean.Text" makes the JSF look for the ID as a JavaBean instance of PBean, and enters the text store input To the Text property of the JavaBean instance. When the HTML form is generated, the JSF inserts the TEXT attribute value into the <textarea> HTML element. The class PBean implements the GET and SET methods to allow JSF to get or modify the value of the attribute:</p>
<p>Public class pBean implements java.io.serializable {private string text; public string getText () {returnization;} public void settext;} ........}</p>
<p>In addition to <H: Input_TextArea>, JSF also provides a number of tags that generate a single-line text domain (TEXT FIELD)</p>
<p><intPut_text></p>
<p><h: input_number></p>
<p><input_secret> (password input)</p>
<p><Input_Date></p>
<p><Input_DateTime></p>
<p><Input_Time></p>
<p><Input_hidden> can be used to hide a form field</p>
<p>Single line text field (Text Field)</p>
<p>The single-line text domain component of Edit.jsp files allows only numbers between 1 to 7. This HTML code is generated by <h: infut_number>, which contains two validiar. <f: validate_required> tag has been introduced in front. <f: validate_longrange> tag is to make the verifier confirms the number of users entered within a given range. If the range is exceeded, the verification error is reported to the user, and the error message is generated by <h: Output_ERRORS>.</p>
<p>[CODE] <f: use_faces></p>
<p><h: form formname = "pform"></p>
<p>........</p>
<p><p> <h: Output_text value = "size: [1-7]" /> <br></p>
<p><h: infut_number id = "size" valueref = "pbean.size" size = "2"></p>
<p><f: validate_required /></p>
<p><f: validate_longrange minimum = "1" maximum = "7" /></p>
<p></ h: input_number></p>
<p><br> <h: Output_errors for = "size" /></p>
<p>........</p>
<p></ h: form></p>
<p></ f: USE_FACES></p>
<p>[/ code]</p>
<p>The above JSP code generates the following HTML pieces: <form method = "post" action = "/ usingjsf / faces / edit.jsp"></p>
<p>........</p>
<p><p> size: [1-7] <br></p>
<p><input type = "text" name = "sie" id = "size" value = "3" size = "2"></p>
<p><br></p>
<p>........</p>
<p></ form></p>
<p>The single line text field is set to size, the type is shaped (int). The value of the value attribute in the size is the initial value indicating the generated HTML form digital input area. Assume that no verification error occurs, when the JSF receives user inputs that contain new JavaBean size attribute values, JavaBean will be refreshed. The size property of the <h: input_number> tag is the character length (2) defining a single line text domain, and does not have other operations for the JavaBeaN property.</p>
<p>Public class pBean Implements java.io.serializable {........ private int size; public int getsize () {return size;} public void setsize (int size) {this.size = size;}. .........}</p>
<p>In addition to <f: Validate_Required> and <F: Validate_longrange> tag, JSF also provides several validator tags:</p>
<p><validate_doublerange></p>
<p><validate_stringrange></p>
<p><validate_length></p>
<p><validator></p>
<p>The last one is a general-purpose tag, which can be used to register your own custom validator in the user interface components. You can also create your own verifier tag library.</p>
<p>List List box</p>
<p><h: selectone_listbox> Mark Generate HTML Elements <SELECT>, web browser is displayed as a list. The former allows the user to make a single option, the latter is used for multiple selections.</p>
<p>File edit.jsp uses the <h: SelectMany_Listbox> tag to generate a list of several font names. HTML <option> Element defines the options in the list, which is generated by the JSF tag <H: SelectItem>:</p>
<p><f: USE_Faces> <h: form formname = "pform"> ......... <p> <h: output_text value = "font:" /> <br> <h: selectmany_listbox id = " Font "valueRef =" pbean.font "> <h: selectitem itemvalue =" arial "itemlabel =" arial "/> <h: selectitem itemvalue =" Courier new "oremlabel =" Courier new "/> <h: SelectItem itemValue = "Times New Roman" itemlabel = "Times New Roman" /> </ h: SelectMany_Listbox> ......... <</ h: form> </ f: Use_faces> The above code generates the following HTML pieces :</p>
<p><form method = "post" action = "/ usingjsf / faces / edit.jsp"> ......... <p> font: <br> <select name = "font" multiple size = "3 > <option value = "arial" selected> arial </ option> <option value = "Courier new" success> Courier new </ option> <option value = "Times New Roman"> Times New Roman </ option> < / SELECT> ......... </ form></p>
<p>The list is defined as font, the type is a string array (String []). The first getFont () method uses the clone () method to copy the internal array and returns it, and the internal array must be protected from external access. The first setFont () method is replicated with the clone () method to copy the provided array and saved, and the array provided can be modified by the second setFont () method.</p>
<p>Public Class Pbean Implements Java.io.Serializable {</p>
<p>........</p>
<p>Private string fontarray [];</p>
<p>Public string [] getFont () {</p>
<p>Return (String []) fontarray. clone ();</p>
<p>}</p>
<p>Public void setfont (String fontArray []) {</p>
<p>THIS.FONTARRAY = (String []) fontArray.clone ();</p>
<p>}</p>
<p>Public string getFont (int index) {</p>
<p>Return fontArray [index];</p>
<p>}</p>
<p>Public void setFont (int index, string font) {</p>
<p>IF (FontArray == Null)</p>
<p>FontArray = New String [index 1];</p>
<p>Else IF (FontArray.Length <= index) {string oldfontarray [] = fontarray;</p>
<p>FontArray = New String [index 1];</p>
<p>For (int i = 0; i <oldfontarray.length; i )</p>
<p>FontArray [i] = OldfontArray [i];</p>
<p>}</p>
<p>FONTARRAY [INDEX] = font;</p>
<p>}</p>
<p>........</p>
<p>}</p>
<p>Drop-down List</p>
<p><h: Selectone_Menu> tag is used to generate a drop-down list containing several color options.</p>
<p><h: SelectItem> tag is included in <h: selectone_menu>, as an option for the drop-down list:</p>
<p><f: use_faces> <h: form formname = "pform"> .......... <p> <h: output_text value = "color:" /> <br> <h: selectone_menu ID = " "valueref =" pbean.color "> <f: validate_required /> <h: selecttem itemvalue =" black "itemlabel =" black "/> <h: selecttem itemvalue =" red "itemlabel =" red "/> <h : selectitem itemvalue = "blue" itemlabel = "blue" /> <h: selectitem itemvalue = "green" itemlabel = "green" /> </ h: selectone_menu> <br> <h: Output_errors for = "color" /> ......... </ h: form> </ f: use_faces></p>
<p>The above JSP code generates the following HTML pieces:</p>
<p><form method = "post" action = "/ usingjsf / faces / edit.jsp"> ......... <p> color: <br> <select name = "color" size = "1" > <option value = "black"> black </ option> <option value = "red"> red </ option> <option value = "blue"> blue </ option> <option value = "green" SELECTED> GREEN </ option> </ select> <br> ......... </ form></p>
<p>The drop-down list is defined as a Color, the type is string:</p>
<p>Public class pbean imports java.io.serializable {........ private string color; public string getcolor () {return color;} public void setcolor (string color) {this.color = color;}. .......} When the HTML form is generated, JSF adds the HTML property Selected to the value of the value as the JavaBean model Color property. Suppose there is no verification error, the JSF receives the JavaBeaN property after receiving the user input containing the new color value.</p>
<p>Single ban button (Radio button)</p>
<p><h: selectone_radio> and <h: selecttem> tag used to generate a set of single tab:</p>
<p><f: use_faces> <h: form formname = "pform"> ......... <p> <h: Output_text value = "alignment:" /> <br> <h: selectone_radio id = " align "valueRef =" pbean.align "layout =" LINE_DIRECTION "> <f: validate_required /> <h: selectitem itemvalue =" left "itemLabel =" left "/> <h: selectitem itemvalue =" center "itemLabel =" Center "/> <h: selectitem itemvalue =" right "itemlabel =" right "/> </ h: selectone_radio> <br> <h: Output_errors for =" align "/> ......... < / h: form> </ f: USE_FACES></p>
<p>The above JSP code generates the following code:</p>
<p><form method = "post" action = "/ usingjsf / faces / edit.jsp"> ......... <p> alignment: <br> <table border = "0"> <TR> < TD> <input type = "radio" checked name = "align" value = "left"> LEFT </ td> & nbp; <TD> <input type = "radio" name = "align" value = "center"> center </ td> <TD> <input type = "radio" name = "align" value = "right"> Right </ td> </ tr> </ table> <br> ......... </ form></p>
<p>The radio button is defined as Align:</p>
<p>Public class pbean imports java.io.serializable {........ private string align; public string getAlign () {return align;} public void setalign (String align) {this.align = align;}. .. If there is no verification error, JSF refreshes the JavaBeaN property when the user input of the new placement location is received.</p>
<p>Check button (Checkbox)</p>
<p>The file edit.jsp contains three check butters generated by the <H: SelectBoolean_Checkbox> tag. These interface components are included in the table generated by <h: panel_grid> tag: Table:</p>
<p><f: USE_Faces> <h: form formname = "pform"> ........... <p> <h: output_text value = "style:" /> <br> <h: panel_grid columns = " 3 "Border =" 0 "cellspacing =" 5 "> <h: panel_group> <h: selectBoolean_Checkbox id =" bold "valueref =" pbean.bold "/> <h: Output_text value =" bold "/> </ h : panel_group> <h: panel_group> <h: selectBoolean_Checkbox ID = "italic" valueref = "pbean.italic" /> <h: output_text value = "italic" /> </ h: panel_group> <h: panel_group> <h : selectBoolean_Checkbox ID = "underline" valueref = "pbean.underline" /> <h: output_text value = "underline" /> </ h: panel_group> </ h: panel_grid> ......... / h: form> </ f: USE_FACES></p>
<p>The above code generation is as follows:</p>
<p><form method = "post" action = "/ usingjsf / faces / edit.jsp"> ......... <p> style: <br> <table border = "0" cellspacing = "5" > <tr> <TD> <input type = "checkbox" name = "bold"> bold </ td> <TD> <input type = "checkbox" name = "italic" checked> italic </ td> <TD> <Input Type = "CheckBox" name = "underline"> underline </ td> </ tr> </ table> ........ </ form> 3 copy buttons and types of Boolean (Boolean) Beld, Italic, Underline is bound to:</p>
<p>Public class pbean imports java.io.serializable {........ private boilean bold; public boolean isbold () {returnide}} public void setbold (boolean bold) {this.bold = bold;} boolean italic; public boolean isItalic () {return italic;} public void setItalic (boolean italic) {this.italic = italic;} private boolean underline; public boolean isUnderline () {return underline;} public void setUnderline (boolean underline) { THIS.underline = underline;} ........}</p>
<p>When generating an HTML form, JSF adds the check button to the check button of each Javabean property as true (TRUE). If there is no verification error, JSF will refresh the JavaBeaN property after receiving the user input.</p>
<p>In this example, the check button is independently generated separately. JSF also provides the <h: selectmany_checkboxlist> tag to generate a set of checkup buttons. It also provides <h: panel_list> and <h: panel_data> two tags for generating a table from a collection and array.</p>
<p>Command button (Command Buttons)</p>
<p>File Faces-config.xml defines the navigation rule, determines what JSF does when the user click the command button in the web page, and the path to the web page is specified by the <from-tree-id> tag (/Edit.jsp). Two navigation cases are defined by the <navigation-case> elements:</p>
<p>........ <faces-config> <navigation-rule> <from-tree-id> /EDit.jsp </ from-tree-id> <navigation-case> <from-outcome> editoutcome </ from-outcome> <to-tree-id> /EDit.jsp </ to-tree-id> </ navigation-case> <navigation-case> <from-outcome> Viewoutcome </ from-outcome> <to -tree-id> /view.jsp </ to-tree-id> </ navigation-case> </ navigation-rule> ........ </ faces-config> file edit.jsp Two buttons generated by the marker <h: command_button>. Each has a logo (ID), a label, a command name (not used here, but JSF needs) and an action or actionRef property:</p>
<p><f: use_faces> <h: form formname = "pform"> ......... <p> <h: command_button id = "View" label = "view" commandname = "viewcmd" action = " ViewoutCome "/> <h: command_button id =" bolduppercase "label =" bold upper case / view "CommandName =" bolduppercasecmd "ActionRef =" pbean.bolduppercaseAction "/> </ h: form> </ f: use_faces></p>
<p>The above JSP code generates the following HTML pieces:</p>
<p><form method = "post" action = "/ usingjsf / faces / edit.jsp"> ......... <p> <input type = "submit" name = "view" value = "view" > <input type = "submit" name = "bolduppercase" value = "bold upper case / view"> </ form></p>
<p>The JSF will verify the data in the form when you enter the user input per browser. If the validator does not make an error signal and there is no type of conversion error, the JSF will analyze the navigation code. For the first button, the JSF will get the value of the Action property, which matches the text of the <from-Outcome> element of the second navigation block. Therefore, JSF forwards the HTTP request to View.jsp, and the path of the file View.jsp is included in the <TO-Tree-id> element of the second navigation block.</p>
<p>When the user clicks on the second button, JSF calls the getBoldUpperCaseAction () method of the PBean object. This method returns an instance of a boldupPercaseAction, BoldupPercaseAction is the internal class of the PBean. Next, JSF calls the invoke () method, which returns a result of the runtime decision rather than fixed HTML files: public class pbean imports java.io.erializable {...... public bolduppercaseAction getBoldUpperCaseAction () {return new BoldUpperCaseAction ();} public class BoldUpperCaseAction extends javax.faces.application.Action {public String invoke () {String ucText = getText () toUpperCase ();. if (isBold () && getText (). Equals (uctext)) Return "Viewoutcome"; Else {setBold (true); setText (UcText); return "editoutcome";}}}}</p>
<p>If the BOLD (bold) attribute is True (true) and all characters of the text are uppercase, the JSF follows the definition in the second navigation block, and the HTTP request forwards the HTTP request to View.jsp with another button situation. . In addition, the invoke () method will set the bold property to true and change all the characters of the text to uppercase, and finally returns the string Editoutcome, so that the JSF will follow the definition of the first navigation block, keep edit.jsp as the current page.</p></div><div class="text-center mt-3 text-grey">
转载请注明原文地址:https://www.9cbs.com/read-63621.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="63621" 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.036</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 = 'G8yI8JL9ZDxko2jThjkKLM1B9IXEyI_2FBnjAmPJBgfO1WY99ChwpNfDFW_2FuEqbZxcyi8flAu8GRaVfUZhxaredQ_3D_3D';
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>
