JSF entry

xiaoxiao2021-03-05  50

Chapter 1 brief description of JSF

[Thinker-Yhm1218@hotmail.com]

First, what is JSF

JSF JavaServer Faces is a new technique for architecture J2EE application user interface, suitable for applications based on MVC architecture.

The main functions of JSF technology are:

Managed Bean Tool Verification Tool Rich and Scalable Component Library Inserted Rendering Toolkit The Navigation Speed ​​Route Reserved Application Status Conversion Model Responsible for Specific User Event Responsive

This article will describe the above functions through the CNJSF application, you need to understand this article, you need to understand the Web development, servlet, jsp, javabeans, and label libraries.

Second, the working principle of JSF

The JSF application is essentially a servlet or Java Server Pages (JSP) application that runs in a container compatible with Java (TM) 2 Platform, Enterprise Edition (J2EE (TM) Platform). However, JSF does not require JSP pages in the application, you can freely choose to use Servlets or other template technology. If you really use JSF to the JSP container, you will benefit from the built-in JSF core and HTML component library through the JSF customer component label. The JSF component represents a web control of text fields, forms, buttons, tables, check boxes, and the like.

When using JSF to create a JSP page (as MyForm.jsp in Figure 1-1), a component tree is created in the memory of the server (the web container in Figure 1-1), each component tag corresponding to the tree A UIComponent instance (MyUI in Figure 1-1). The framework uses component trees to process applications (as http requests in Figure 1-1) and create a presented response (as HTTP Resonse in Figure 1-1). When the user generates an event, for example, click on a button, the JSF lifecycle is processed by the event and generates an appropriate response. This is a common example of a form for most GUI programming. Whenever the user does anything, if you click the button or submit a form, there is an event generation. The event message is then transmitted to the server via HTTP. At the server side, it is a Web container that is configured with a special servlet called Faces Servlet. Faces servlet (javax.faces.webapp.facesservlet) is an engine for all JSF applications. Each JSF application has a separate Faces Servlet in a web container.

Facesservlet is the entry point entry to the JSF framework. It processes the request to handle life cycles and serve as a front-end controller. JSF also has the concept of context that holds important request information. The context object is called FaceScontext (javax.faces.context.facescontext). Each stage of the JSF lifecycle is modified and is valid for each request.

The background processing of the Faces Servlet is quite complicated. However, you don't have to understand these details, just remember that the Faces Servlet creates a component tree for the JSP page, and the control of the component tree is correspondingly. Faces Servlet knows how to create a component tree because it has accessed all JSP pages in the current application. Faces Servlet also creates an EVENT object and passes it to all registered listeners. You can get the components of this page by FacesContext corresponding to the current request.

UI running schematic in the server (Figure 1-1)

Third, a simple JSF application (a Simple JSF Application)

1. Steps to create a JSF application

Developing a simple JSF application typically requires the following four steps: u Create a page (usually a JSP page), encapsulate HTML element U in the application resource profile with JSF Components User Navigation Udrite Beans to keep users Enter the status of the component data. u Add Managed Bean description in the application resource profile

The above four steps can be carried out simultaneously or in any order. However, different open

It is recommended to keep in touch between senders. For example, page author needs to know the name of the object to be accessed by page.

Below, we will appreciate the above content through a simple application (Hello World).

2. Run the application

[Need this application engineering package to send email to YHM1218@163.com]

This application is a simple user registration form commit program. In order to run this application, you need to prepare Tomcat 5.0 and JSF1.1 (included in Java Web Services Developer Pack (JWSDP) 1.4). In order to make this application work normally, there are several JAR files, including JSF standard implementation and other class libraries. If you have a JWSDP 1.4, you can find these files you want in the JSFLIB directory. Copy these .jar files into the web-inf / lib directory. Here is the list of the entire .jar and .tld file:

JSF-API.JAR includes classes with Faces Servlet and other related javax.faces packets, JFS-IMPL.jar is JSF for JSTL.jar Standard.jar Commons-beanUtils.jar Commons-Collections.jarcommons-Digester.jar Commons- Logging.jar

Of course, if you are using JBuilder 2005, then you only need to open this program in JBuilder 2005, edit the project properties, set server for Tomcat5.0, recompiling the project, and start Tomcat5. 0. OK, you can now access http: // localhost: 8080 / web / index.faces. [JBuilder 2005 integrated JSF]

3, brief analysis of applications

(1) Creating a page (CREANG THE PAGES)

There are four JSP pages in this application.

INDEX.JSP ---- Welcome page

<% @ Page ContentType = "Text / HTML; Charset = GBK"%> <% @ Taglib Uri = "http://java.sun.com/jsf/core" prefix = "f"%> <% @ Taglib URI = "http://java.sun.com/jsf/html" prefix = "h"%> <h: OutputText value = "# {bundle ['cnjsf.welcome.title']}" /> ---- <h: OutputText value = "# {bunlde ['cnjsf.welcome.Message']} "/> </ title> </ head> <body bgcolor =" # fff)> <div align = "center"> <h1> <h: outputtext value = "# {bunlde ['cnjsf.welcome.Message'] } "/> </ h1> <h: form id =" indexform "> <h: commandLink id =" link "action =" register "> <h: outputtext value =" # {bundle ['cnjsf.reg "] } "/> </ H: common> </ div> </ body> </ html> </ f: view> About Index.jsp page quoted some instructions:</p> <p>The JSP page provides the UI, JSF provides two JSP label libraries (in subsequent chapters, we will explain in detail in this area), which exhibit components to page designers. You can customize these components or create your own components. Standard components are presented as basic HTML4.01 components that make JavaScript absolutely minimal, ensuring that your page is displayed in all browsers.</p> <p>1. To use the built-in JSF label library containing components, you need to include the following instructions in the JSP page.</p> <p><% @ Taglib Uri = "http://java.sun.com/jsf/core" prefix = "f"%> <% @ Taglib Uri = "http://java.sun.com/jsf/html" prefix = "h"%></p> <p>2, Note Your JSF page requires all JSF tags to be included between the <f: view> .. </ f: view> tag, it can create the component tree correctly.</p> <p>3, <f: loadbundle basename = "ApplicationResources" var = "bund" /> is used to bind a resource file to realize the localization of the message. The BaseName property specifies the file packet path. In this application, in the SRC directory, the VAR property specifies the variable name. The resource file is as follows: ApplicationResources.properties</p> <p># 公 变 c c = Hello Worldcnjsf.welcome.title = :: CNJSF Net Welcome :: cnjsf.reg = Register CNJSF.USERNAME = User name cnjsf.password = password cnjsf.success = Register success cnjsf.failure = Registration failed CNJSF.Reback = Return</p> <p>ApplicationResources_zh.properties</p> <p># / u</p> <p>516C / U5171 / U53D8 / U91CFCNJSF.WELCOME.MESSAGE = Hello Worldcnjsf.welcome.title = :: CNJSF / U</p> <p>7f51 / u6b22 / u8fce / u</p> <p>60A8 :: CNJSF.REG = / U6CE8 / U</p> <p>518ccnjsf.username = / u7528 / u6237 / u540dcnjsf.password = / u5bc6 / u7801cnjsf.success = / u6CE8 / U</p> <p>518C / U6210 / U</p> <p>529fcnjsf.failure = / u6CE8 / U</p> <p>518C / U5931 / U8D25CNJSF.REBACK = / u8fd4 / u56de</p> <p>Bind the information of the resource file to the JSF tag: <h: OutputText value = "# {bundle ['cnjsf.reg']}" /></p> <p>This code is translated into html is: <span> registration </ span></p> <p>4,</p> <p><h: form id = "indexform"> <h: commandLink ID = "link" action = "register"> <h: outputtext value = "# {bundle ['cnjsf.reg']}" /> </ h: CommandLink> </ h: form></p> <p>Translated into html is:</p> <p><form id = "indexform" method = "post" Action = "/ web / index.facs"> <a id = "#" οnclick = "#" οnclick = "]" ['indexform'] [' IndexForm: _idcl ']. Value =' indexform: link '; document.forms [' indexform ']. Submit (); returnial;> registration </a> <input type = "hidden" name = "indexform" VALUE = "IndexForm" /> <input type = "hidden" name = "indexform: _idcl" /> </ form> Note: The CommandLink tab will render JavaScript, so if you want to use this tag, make sure</p> <p>Your browser supports JavaScript.</p> <p>Register.jsp --- Register page</p> <p><% @ Page ContentType = "Text / HTML; Charset = GBK"%> <% @ Taglib Uri = "http://java.sun.com/jsf/core" prefix = "f"%> <% @ Taglib URI = "http://java.sun.com/jsf/html" prefix = "h"%> <f: view> <f: loadbundle baseName = "ApplicationResources" var = "bundle" /> <html> <head> <title> <h: OutputText value = "# {bundle ['cnjsf.welcome.title']}" /> ---- <h: outputtext value = "# {bundle ['cnjsf.reg']}" /> </ title> </ head> <body bgcolor = "# fff)> <div align =" center "> <h1> <h: outputtext value =" # {bundle ['cnjsf.reg']} / > </ h1> <h: form id = "registrationform"> <h: panelgrid color columns = "1"> <h: OutputLabel for = "username"> <h: outputtext value = # {bundle ['cnjsf.username ']} "/> </ H: outputLabel> <h: inputtext id =" username "value =" # {register.username} "required =" true "/> <h: message for =" use = " Color: red "/> <h: OutputLabel for =" password "> <h: outputtext value =" # {bundle ['cnjsf.password']} "/> </ h: OutputLabel> <h: inputsecret redisplay =" False "ID =" Password "value =" # {register.password} "Required =" true "/> <h: message for =" password "Sty Le = "color: red" /> <h: commandbutton action = "# {register.register}" value = "# {bundle ['cnjsf.reg']}" /> </ h: panelgrid> <</p> <p>/ h: form> </ div> </ body> </ html> </ f: view> failure ---- Register failed jump page</p> <p><% @ Page ContentType = "Text / HTML; Charset = GBK"%> <% @ Taglib Uri = "http://java.sun.com/jsf/core" prefix = "f"%> <% @ Taglib URI = "http://java.sun.com/jsf/html" prefix = "h"%> <f: view> <f: loadbundle baseName = "ApplicationResources" var = "bundle" /> <html> <head> <title> <h: outputtext value = "# {bundle ['cnjsf.welcome.title']}" /> --- <h: outpetext value = "# {bunlde ['cnjsf.failure']}" /> </ Title> </ head> <body bgcolor = "# ffffff"> <h1> <h: outputtext value = "# {bunlde ['cnjsf.failure']}" /> </ h1> <h: form id = "FailureForm"> <h: commandLink id = "link" action = "# {register.reback}> <h: outputtext value =" # {bundle ['cnjsf.reback']} "/> </ h: CommandLink> </ h: form> </ body> </ html> </ f: view></p> <p>Success ---- Register success page</p> <p><% @ Page ContentType = "Text / HTML; Charset = GBK"%> <% @ Taglib Uri = "http://java.sun.com/jsf/core" prefix = "f"%> <% @ Taglib URI = "http://java.sun.com/jsf/html" prefix = "h"%> <f: view> <f: loadbundle baseName = "ApplicationResources" var = "bundle" /> <html> <head> <title> <h: OutputText value = "# {bundle ['cnjsf.welcome.title']}" /> ---- <h: outputtext value = "# {bunlde ['cnjsf.success']}" Style = "Color: red" /> </ title> </ head> <body> <div align = "center"> <h1> <h: outputtext value = "# {bunlde ['cnjsf.success']}" Style = "Color: red" /> </ h1> <h: form id = "successform"> <h: commandLink id = "link" Action = "# {register.reback}> <h: outputtext value =" # {bundle ['cnjsf.reback']} "/> </ h: commandLink> </ h: form> </ div> </ body> </ html> </ f: view> (2) page navigation definition ( DEFINING Page Navigation)</p> <p>The page navigation definition is mainly configured to file Faces-Config.xml (Struts-Configs.xml in Struts). [Configuration for Faces-Config.xml This article will be described in detail in subsequent chapters]</p> <p>This application defines Faces-Config.xml of the first navigation:</p> <p><? XML Version = "1.0" Encoding = "UTF-8"?> <! doctype faces-config public "- // sun microsystems, incker 1.1 // en" "http: // java . Sun.com / DTD / Web-Facesconfig_1_1.dtd "> <faces-config xmlns =" ​​http://java.sun.com/jsf/configuration "> <navigation-rule> <navigation-case> <from-Outcome > Success </ from-outcome> <to-view-id> /success.jsp </ to-view-id> </ navigation-case> <navigation-case> <from-outcome> Failure </ from-Outcome> <to-view-id> /failure.jsp </ to-view-id> </ navigation-case> <navigation-case> <from-outcome> reback </ from-outcome> <to-view-id> / Register.jsp </ to-view-id> </ navigation-case> </ navigation-rule> <navigation-rule> <from-view-id> /index.jsp </ from-view-id> <navigation- Case> <from-outcome> register </ from-outcome> <to-view-id> /register.jsp </ to-view-id> </ navigation-case> </ navigation-rule> </ faces-config > (3) Creating an Object Model (CREATING Modelbean)</p> <p>This application creates a ModelBean object ---- RegisterBean. Like other JavaBeans components, ModelBean contains a set of access methods, which also prefabricates a default character table, and also stores user-customized characters, and creates this modelbean through the Managed Bean tool, and the JSF components defined in the view can be References by name [Reference = "# {register.register {register.registeracion}"].</p> <p>The registerbean source code is as follows:</p> <p>package com.cnjsf.helloworld; public class RegisterBean {private String username; private String password; public RegisterBean () {} public void setUsername (String username) {this.username = username;} public void setPassword (String password) {this. password = password;} public String getUsername () {return username;} public String getPassword () {return password;} public String registerAction () {if (username.equals ( "cnjsf")) {return "success";} else {Return "failure";}} public string reback () {return "reback";} (4) Configuring The Application Configuration Resource File</p> <p>1. All JSF specific configuration information will enter the application profile in the Faces-Config.xml in (2), which can define Managed Bean, Navigation Rule, Converter, etc. in the configuration file. In (2) we have defined Navigation, now we join Managed Bean:</p> <p><? XML Version = "1.0" Encoding = "UTF-8"?> <! doctype faces-config public "- // sun microsystems, incker 1.1 // en" "http: // java . Sun.com / DTD / Web-Facesconfig_1_1.dtd "> <faces-config xmlns =" ​​http://java.sun.com/jsf/configuration "> <management-bean> <management-bean-name> register < / management-bean-name> <management-bean-class> com.cnjsf.Helloworld.registerBean </ managed-bean-class> <management-bean-scope> session </ management-bean-scope> </ management-bean > <Navigation-rule> <navigation-case> <from-outcome> Success </ from-outcome> <to-view-id> /success.jsp </ to-view-id> </ navigation-case> <navigation -case> <from-outcome> Failure </ from-outcome> <to-view-id> /failure.jsp </ to-view-id> </ navigation-case> <navigation-case> <from-outcome> REBACK </ from-outcome> <to-view-id> /register.jsp </ to-view-id> </ navigation-case> </ navigation-rule> <navigation-rule> <from-view-id> /index.jsp </ from-view-id> <navigation-case> <from-outcome> register </ from-outcome> <to-view-id> /register.jsp </ to-view-id> </ navigation-case> </ navigation-rule> </ faces-config> Note : Create a mapping between the bean name and class in the <managed-bean> ... </ management-bean entry, which is used by the Managed Bean. When "ModelBean" is first referenced, the model object will be created and saved to the appropriate scope (Request, session).</p> <p>[* One Description: What is the Managed Bean Managed Bean just a class with a public non-parameter constructor, which is consistent with the JavaBeans 1.0 method naming agreement, and the Faces application using the Managed Bean tool is also the same. The Managed Bean tool is configured in a web-inf / asset-config.xml file. In this file you can place any number of <managed-bean> declarations, each declaration contains a name, a class, and a scope. In the web application itself, you can use the Bean name defined in the JavaServer Faces Expression Language expression. When you first reference the bean, it will be created and placed in the appropriate scope. Managed bean is very flexible, which allows you to customize your own beans by specifying properties, including Java array, mapping, list, and other Managed Beans. ] 2, in order to enable your web application to use the JSF framework, you have to do the last thing ------ Deployment Descriptor (Web.xml), you need to define FacesSrvlets and a FacesSrvlet map in the deployment descriptor The descriptor of this application is deployed as follows:</p> <p><? XML Version = "1.0" Encoding = "UTF-8"?> <! doctype web-app public "- // sun microsystems, incaps//dtd web application 2.3 // en" "http: // java. Sun.com/dtd/web-app_2_3.dtd "> <web-app> <display-name> Web </ distribLay-name> <servlet> <servlet-name> Faces servlet </ servlet-name> <servlet-class > javax.faces.Webapp.Facesservlet </ servlet-class> <load-on-startup> 1 </ loading-on-startup> </ servlet> <servlet-maping> <servlet-name> faces servlet </ servlet- Name> <url-pattern> *. Faces </ url-pattern> </ servlet-mapping> </ web-app></p> <p>The FaceSserveTex example acts as a front-end controller in the JSF framework, which processes all requests related to JSF, using the extension map in the above descriptor, the web container sends all requests to the Faces Servlet to get the extension, " * .faces "page.</p> <p>(5) Workflow (FLOW)</p> <p>Registration of this application - Workflow flow chart is as follows</p> <p>Action processing:</p> <p>Through the workflow chart, we can see that the header (Register.jsp) in the workflow chart is very special, because the workflow can make the page reload. The page will be overloaded when the user wants to add characters to the character table. This addition is implemented by placing a button in the page, which triggers the corresponding action when the button is pressed.</p> <p>In "register.jsp" you can see the statement of this button:</p> <p><h: commandbutton action = "# {register.registerAction}" value = "# {bundle ['cnjsf.reg']} /> The implementation of the actual action handler is in the registerbean.java file. "Registeraction" method for registration form committed</p> <p>Public string registeraction () {if (username.equals ("cnjsf")) {return "success";} else {return "failure";}}</p> <p>When a CommandButTOD with actions with actions with actions, the action program is called, the registeraction method verifies the username entered by the user. If you enter "CNJSF", the action handler returns a "success" value, otherwise returns the "failure" value. The navigation handler can determine the next action by this value and determine the direction of the navigation based on the results. This application If you return "Success", the page jumps to "Success.jsp", if "failure" is returned, the corresponding jump to "failure.jsp". It can be seen that the design of the action handler and navigation handler determines that they can be easily interoperable.</p> <p>to sum up:</p> <p>This chapter has made a brief overview of JSF, which is a rough introduction of the working principle of JSF, and demonstrates the use of components, navigation, action processing, application configuration, so that you build JSF for web applications. The framework has a preliminary understanding. I believe that this app is starting, you can easily create more complex and robust web applications.</p> <p>[Reference: J2EE Reference Guide Chapter 17 JavaServer Faces Technology</p> <p>Http://java.sun.com/j2ee/1.4/docs/tutorial/doc/index.html</p> <p>Introducing JavaServer Faces Author Budi Kurniawan</p> <p>http://www.onjava.com/pub/a/onjava/2003/07/30/jsf_intro.html</p> <p>JavaServer Faces Introduction Author Ed Burns and Justyna Horwat</p> <p>]</p> <p>Chapter II UI Component Mode</p> <p>(UI Component Model)</p> <p>I. Overview</p> <p>Previous chapter, we have made a brief overview of JSF. We learned that the core of JSF is the UI Component, and the JSF application UI is composed of many configurable and reused JSF UI components. These components can be simple. The key of the button can also be complex, such as the table can contain other components.</p> <p>JSF provides a rich, flexible component architecture:</p> <p>l UI Component class, detail the status and behavior of the UI Component (State and Vehavior).</p> <p>l Component rendering mode defines how to render components in different ways.</p> <p>l Event and listener mode define how to handle component events.</p> <p>l Converter mode defines how to register a data transformator on one component.</p> <p>l Verifier mode defines how to register the validator on one component.</p> <p>This chapter will be briefly introduced.</p> <p>Second, UI Component Classes</p> <p>Third, component rendering mode (Component Rendering Model)</p> <p>Fourth, conversion model (conversion model), event and listener mode (Event and Listener Model)</p> <p>6. Validation Model</p> <p>Seven, navigation mode (Navigation Model)</p> <p>Eight, manage Bean (Bean Management)</p> <p>Nine, a life cycle of a JSF page</p> <p>Chapter III JSF in JSP</p> <p>(Using JSF IN JSP)</p> <p>First, this article example</p> <p>Second, JSF core tag list</p> <p>Third, use the HTML component tag in JSP</p> <p>1, universal attributes for the UI component label</p> <p>(1) ID attribute</p> <p>(2) Immediate attribute</p> <p>(3) Rendered property</p> <p>(4) Style and StyleClass properties</p> <p>(5) Value and binding properties</p> <p>2, UI component label use</p> <p>(1) UiForm</p> <p>(2) uicolumn</p> <p>(3) UICOMMAND</p> <p>(4) Uidata</p> <p>(5) UIGRAPHIC</p> <p>(6) UIINPUT and UIOUTPUT</p> <p>(7) UIPANEL</p> <p>(8) uiselectrboolean</p> <p>(9) UISElectrMany</p> <p>(10) UIMESSAGE and UIMESSAGES</p> <p>(11) uiselectrone</p> <p>(12) UiselectItem, UISElectrITEM, and UISELECTITEMGROUP</p> <p>Fourth, use localization messages in JSP (Localized Messages)</p> <p>V. Use Standard Converters in JSP (Standard Converters)</p> <p>(1) DateTimeConverter</p> <p>(2) NumberConverter</p> <p>Six, the application of several modes</p> <p>(1) Registering event listeners on the component (Registering Listener On Components)</p> <p>(2) Using standard validator (useing the standard validators)</p> <p>(3) Binding of component values ​​and instantiation of external data sources (Binding Components Values ​​and Instances To External Data Sources)</p> <p>(4) Call backend bean method (Referencing a backing bean method)</p> <p>Chapter 4 uses JSF to develop</p> <p>(Developing with JSF Technology)</p> <p>First, write component properties (Writing Component Properties)</p> <p>(1) Writing the properties that bind to component values ​​(Writing Properties Bound To Component Values)</p> <p>1, UIINPUT and UIOUTPUT properties (UIINPUT Properties and UiOutput Properties)</p> <p>2, uidata properties (Uidata Properties)</p> <p>3, UiselectBoolean property (UISElectrBoolean Properties)</p> <p>4, UiselectMany Properties)</p> <p>5, UISElectrone Properties 6, UiSelectItem Properties</p> <p>(2) Writing the properties that bind to component instances (Writing Properties Bound to Component Instances)</p> <p>Second, the localization of resources (Performing Localization)</p> <p>1. Create a resource file (CREANG A Resource Bundle)</p> <p>2, dynamic data localization (Localizing DynamiC Data)</p> <p>3, message localization (Localizing Messages)</p> <p>4. Create a message through the information factory (CREANG A Message with a Message Factory)</p> <p>5, create a message via FaceSMessage to create a message</p> <p>Third, create a custom converter (CREANG A CUSTOM Converter)</p> <p>Fourth, the implementation of the event listener (Implementing An Event Listener)</p> <p>1. Implement the value change listener (Implementing Value-change Listener)</p> <p>2. Implement an action listener (IMPLEMENTING ACTION LISTENERS)</p> <p>V. Creating a custom verifier (CREATING A CUSTOM VALIDATOR)</p> <p>1. Implement the interface of the validator (Implementing the Validator Interface)</p> <p>2. Create a custom label (CREANG A CUSTOM TAG)</p> <p>3. Write the label handle (Writing the tag handler)</p> <p>4. Write a label descriptor (Writing the tag library descriptor)</p> <p>Sixth, write backend bean methods (Writing Backing Bean Methods)</p> <p>1. Write a handle navigation method (Writing a method to handle navigation)</p> <p>2, Writing a Method to Handle An Action Event</p> <p>3. Write the execution verification method (Writing a Method to Perform Validation)</p> <p>4. Write the execution value change event method (Writing a method to handle a value-change evenet)</p> <p>Chapter 5 Creating Custom UI Components</p> <p>Creating Custom Ui Components</p> <p>Chapter 6 JSF Application Configuration</p> <p>Configuring JSF Application</p> <p>Chapter 7 Localization and Internationalization of Web Applications</p> <p>(Internationalizing and Localizing Web Applications)</p> <p>[Attachment: Time relationship, related translation temporary stop, other chapters please refer to J2EE Tutorial Chapter 17-23]</p></div><div class="text-center mt-3 text-grey"> 转载请注明原文地址:https://www.9cbs.com/read-32959.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="32959" 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.037</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 = '1TYUo7TXKF1Z3_2FLXKw_2FoA9nQmDaOh2P3PY29xOVYjNLlGuW_2BNs2l5eHtMYJbb79e4NpfwG2MIzmCKzTfiXy8uw_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>