JavaServer Faces Introduction

Server

The JavaServer Faces 1.0 Framework makes it easy for you to create powerful and dynamic WEB applications. There are many WEB user interface frameworks available on the market, but the JavaServer Faces Technology stand out for several reasons: it is a Java Community Process standard; it introduces JavaBeans to Web UI programming Component paradigm, and its build takes advantage of many existing architectures. As a standard, many tool vendors can benefit from strictly defined and consistent behavior. The design concept of JavaServer Faces Technology was first used within the tool. Users can also benefit from the consistent and unambiguous behavior of different JavaServer Faces technology implementations.


Many useful features are provided in the JavaServer Faces Technology. Some of the key features you need to highlight include:

Managed Bean Tools
Verification Tool
A rich and scalable component library
Insert Rendering Tool Kit
Navigation for specific user event responses
Preserve application state across requests
Transformation model
This article will briefly introduce these features of JavaServer Faces Technology and give some examples.
For more information on these features and other features provided by JavaServer Faces Technology, please refer to the JavaServer Faces Technology section of the Java EE Guide (第17-21 chapter).


The JavaServer Faces application is essentially a Servlet or Java Edition running in a container that is compatible with the Java (tm) 2 Platform, Enterprise Platform (tm) Serv Er Pages (JSP) application. This indicates that it requires Java Servlet 2.3 and JSP 1.2 or newer versions. The best way to start creating and configuring a JavaServer Faces application is to download the Java 2 Software Development Kit, Standard Edition (j2se SDK) 1.4 or later for free. It should be noted that JavaServer Faces Technology does not require JSP pages to be used in an application, and you are free to choose to use servlets or other template technologies directly. If you do use the JavaServer Faces Technology for the JSP container, you will benefit from the built-in Faces JavaServer kernel and HTML component libraries through JavaServer Faces customer component tags. JavaServer Faces components represent WEB controls such as text fields, forms, buttons, tables, check boxes, and so on.

When you create a JSP page using JavaServer Faces Technology, a component tree is created in the server's memory, and each component label corresponds to a uicomponent instance in the tree. The framework uses the component tree to process requests for applications and create a rendered response. When a user generates an event, for example, a button is clicked, the JavaServer Faces life cycle handles the event and produces the appropriate response. This is an example (paradigm) that is common to most graphical user interface programming forms.


Facesservlet is the entry point into the JavaServer Faces framework. It processes the request processing lifecycle and serves as a front-end controller. JavaServer Faces Technology also has the concept of keeping the context of important request information. The context object is called Facescontext. The context objects are modified at each stage of the JavaServer Faces Technology lifecycle and are valid on each request.


The JavaServer Faces Technology Framework also has the concept of "value binding" and "method binding expressions." If you are familiar with techniques such as JSP Standard Tag Library (JSTL) or JSP 2.0, you are already familiar with the concept of expression language. JavaServer Faces Technology binding expressions allow you to easily interact with the underlying data model. The Character Combat demo application illustrates how to use value binding to extract values from the data model.


Simple JavaServer Faces Technology application
This article contains a simple JavaServer Faces application that illustrates some of the important concepts of JavaServer Faces Technology. To understand the application, you should already be familiar with the basic Java EE WEB Technologies, including JSP, Servlets, and tag libraries.

The basic idea behind the sample application is to let users take part in a quick and fun game. Do you want to know what happens if you take two characters from The Lord of the Rings and make them fight each other? The sample application answers the question in a simple and interesting way. The name of the application is Character combat.

The composition of Character combat is as follows:


JSP pages with JavaServer Faces components that represent the UI

Backing Bean that holds model data
The application configuration file specifies:
JavaServer Faces Controller Servlet
Managed Bean
Navigation processing

The figure above shows the page flow in the Character combat demo application:

On the first page, the user can do the following:
Add more characters
Go directly to the next page
On the second page, the user can do the following:
Go back to the first page and add more characters
Select the first participant of the fight
Go to Page Three
On the third page, the user can do the following:
Go back to the second page
Select a second participant in the fight
Go to Tail page
At the end of the page, the user can do the following:
View Battle Results
Back to Page Three
Start Demo application again
You will notice that this workflow conforms to the wizard UI design pattern. We have extracted the wizard functionality of this example into a simple bean for your own application.

Running the application
The latest JavaServer Faces Technology 1.0 Framework and all other running-time satellite programs are integrated into the Sun Java System application Server Platform 8. You do not need to make any additional configuration steps in application Server to set up a JavaServer Faces Web application. The application Server is free and contains the latest implementation of the Java EE technology. If you downloaded the Java EE 1.4 SDK, it already contains the application Server.


If you are writing your own JavaServer Faces Web application, to use the JavaServer Faces Technology 1.0 framework, the only thing you need to do in the application server is to specify the Facesservlet instance and map your web Use the deployment descriptor for the program. All satellite files are already part of the container and you do not need to bind any additional JAR files.

To run the sample program discussed in this article, simply deploy the supplied configuration war file to the application server. You can use the application by using the context name "Jsf-charactercombat". In addition to a pre-built war file, the demo source code is also provided. In the README issued with the source code, you will find instructions on how to configure and build.


You can access the source code for this demo by following the instructions in the FAQ on the new Javaserverfaces project on java.net:


Https://javaserverfaces.dev.java.net/faq.html#Code_checkout.

Once these instructions are followed, the source code for this article can be browsed at the following address:
https://javaserverfaces-sources.dev.java.net/source/browse/javaserverfaces-sources/jsf-demo/characterCombat/
Demo Application Building Blocks
Deployment descriptor
In order to use the JavaServer Faces framework in a WEB application, you need to define Facesservlet and a facesservlet mapping in the deployment descriptor. Here is an example:

<!--Faces Servlet--> <servlet> <servlet-name>faces servlet</servlet-name> <servlet-class >javax.faces.webapp.FacesServlet</servlet-class> <load-on-startup>1</load-on-startup> </ servlet> <!--Faces Servlet Mapping--> <servlet-mapping> <servlet-name>faces servlet</ Servlet-name> <url-pattern>*.faces</url-pattern> </servlet-mapping>


The Facesservlet instance acts as a front-end controller in the JavaServer Faces Technology framework. It handles all requests related to JavaServer Faces Technology.

The extension mapping is used in the example above. Using extension mappings, the WEB container sends all requests to the Faces Servlet to obtain a page with an extension such as "*.faces."

You can also use prefix mappings to map to Facesservlet instances. For example, you can make a Web page with all names prefixed with "/faces/*" through an Facesservlet instance.


Application Configuration
The specific configuration information for all JavaServer Faces Technology will go into an application configuration file such as Faces-config.xml. You can define Managed beans, navigation rule, Converter, and Validator in the configuration file.

The following is an example of an entry in a configuration file:


<faces-config> <managed-bean> <managed-bean-name>modelBean</managed-bean-name> < managed-bean-class> Charactercombat.modelbean </managed-bean-class> <managed-bean-scope>session </managed-bean-scope> </managed-bean> </faces-config>


The entry creates a mapping between a bean name and a class. This mapping is used by the Managed Bean creation tool. When "Modelbean" is referenced for the first time, the model object is created and saved to the appropriate scope. The Model Bean Bean is discussed later in this article.

There are more configuration options in the JavaServer Faces Technology 1.0 specification where you can find the complete set of configuration options.

Building an application
A pre-built war file is included in the demo source code release. You can deploy the war file in the Web container.

Note that the war file contains a JSTL 1.1 implementation. If your WEB container does not support JSTL 1.1, you will need to reconstruct the war file with a JSTL 1.0 implementation.

If you want to build your demo application yourself, you need to follow the steps below:


Before attempting to build a demo application, make sure that you have all the compile-time satellite files. The demo application provides a "build.properties.sample" file. Copy the file and rename it to "Build.properties" and make changes to suit your environment.

If you are using the application Server or the Java EE 1.4 SDK, JavaServer Faces Technology the 1.0 Framework and running a JavaServer Faces application requires full Part of the file is already part of your environment. The only thing you need to do is modify the Sjsas PE 8.0 installation location in your "build.properties" file.

The Character Combat demo application provides a "Build.xml" file. This file contains a set of rules and objectives for building a demo application Web archive. You also need Ant to build your application. Ant is already part of the Sjsas PE 8.0 release, which is located in <sjsas_home>/bin/asant.

To build a demo application using the Sjsas PE 8.0 container, simply call "Asant" in your solution's Character combat demo directory, and your "build.xml" and Custom "build.properties" files are also in this directory.
Character Combat Demo Application Architecture
Managed Bean
The Managed Bean simply has a class that has a public parameterless constructor, which is consistent with the method naming convention of JavaBeans 1.0, and is the same as the Faces application that uses the Managed Bean tool. The Managed Bean tool is configured in the Web-inf/faces-config.xml file. In this file you can place any number of <managed-bean> declarations, each containing a name, a class, and a scope. In the WEB application itself, you can reference the bean by using the bean name defined in the JavaServer Faces Expression Language expression. The first time you reference a bean, it is created and placed in the appropriate scope. Managed beans are very flexible and allow you to customize your own beans by specifying properties, including Java arrays, mappings, lists, and other Managed beans.

The Character combat instance has a backing bean named Modelbean. Here's how to define a Modelbean bean in a web-inf/faces-config.xml file using the Managed Bean tool:


<managed-bean> <managed-bean-name> Modelbean </managed-bean-name> <managed-bean-class> Charactercombat.modelbean </managed-bean-class> <managed-bean-scope> Session </managed-bean-scope > </managed-bean>


The bean was later referenced in the JSP page of the WEB application. Here is an example of how to use a bean:



Where

Object model
The Character combat example creates a Modelbean object. Like other JavaBeans components, Modelbean contains a set of access methods. It also presets a default character chart and also stores user-defined characters.

Modelbean is created using the Managed Bean creation tool, and is referenced by name by the JavaServer Faces component defined in the view. Modelbean explains how to use a bean to hold the value of a component.

Only the addition of new characters is supported in this example. By changing the model and view to support this feature, a good extension of the program can support the deletion feature.


JSP page
The JSP page provides the UI for the Web application. JavaServer Faces Technology provides two JSP tag libraries that show the component to the author of the page. You can customize these components or create your own components. Standard components are rendered as basic HTML 4.01 components, making JavaScript absolutely minimal. This ensures that your page appears as expected in all browsers. If you need support for other rendering types such as WML or SVG, JavaServer Faces Technology contains a renderkit concept, a software module that the component uses to render itself to a specific customer device type.

To use the built-in JavaServer Faces tag library that contains the components, you need to include the following instruction in the JSP page:


<%@ taglib uri= "Http://java.sun.com/jsf/core" prefix= "F"%><%@ taglib uri= "http://java.sun.com/jsf/html" prefix= "H"%>


Note that your JavaServer Faces page requires all JavaServer Faces tags to be included in the <f:view>...</f:view> tab so that you can set up the component tree correctly.

Each HTML component can be customized using a style sheet. You can specify a generic styleClass or set a specific style property value for the component.

Here are some examples of Character combat applications that illustrate the above concepts:


DataTable
DataTable UIComponent can handle several different types of data models, including Java.util.List and Java.sql.ResultSet. It extracts the data and displays it in a customizable table. The component can also be customized using style sheets.

In the Character combat demo application, use List as the underlying data model. Here is a snippet of code:




As you can see in this example, #{modelbean.datalist} evaluated the list of character entries saved in the "character" variable, based on the definition in the
The <f:facet/> label creates a special relationship between the component that is contained in facet and its parent component. This special relationship allows you to define a component as a title or footer. In our example, we use facet to create a title for the column.

Since

<link rel= "stylesheet" type= "text/css" href= ' <%= request.getcontextpath () + "/stylesheet.css"%> ' >


The following is the appearance of the rendered Htmlhere DataTable:




Panelgrid
For simple table layouts, you can use the
The following is an example of a two-column table. A caption is defined in the first line. The first column of the second row contains a Inputtext field, and the second column contains a drop-down option for a list:




Inputtext
The Inputtext component is a way to get information submitted by a user. In our example, we connect a text field and a model by specifying a Value property as follows:



Inputtext is nested within a form. Once the form is submitted, the values in the field are mapped to our model.

In the image below, you can see a combination of a inputtext, a commandbuttons set, and a ListBox in the Panelgrid layout component:




Outputtext
The Outputtext component can display information in different ways. For example, you can configure it to skip HTML tags, change the display of all angle brackets to the appropriate < syntax, or pass the label without changing it directly. You can also use various style sheets for this component.

Outputtext is used throughout the sample application to display data from the model. In this case we show the name of the character:




Selectoneradio
You can use Selectoneradio to display a single radio button selection collection. You can include a set of single selection options and nested option groups. Here's how to use Selectoneradio in our example:



The Layout property tells the

CommandButton
CommandButton is an input component that can create action events. You can create action listeners to listen for specific events when users browse your JavaServer Faces Web application. You can also provide an action method binding for an application action, which is activated when the component is selected. In this case we use the latter:



In the next section, we'll talk about actions because they are very important in navigating the process.

The following shows how to submit the RadioButtons Collection and CommandButton Wizard:



Navigating: Sample Wizard Components
Let's take a look at the wizard component that handles navigation in the application. The component has three parts, which are shown in bold in the following illustration.


To use this component the user must do two things:

Include this component in the WEB application UI
Create the appropriate navigation rules
We'll explain these steps in more detail below. The details of the wizardbuttons Managed Bean are beyond the scope of this article, but basically there are ways to enable or disable the next and Back buttons based on the current position of the User in the wizard page flow.

Include a button in the UI
The <jsp:include> mechanism allows you to include components in the application UI. In each page of the sample application, you will see the following line of code at the bottom:



<jsp:include page= "wizard-buttons.jsp"/>


Looking at the page, we see that it has the following tag:

<%@ page contenttype= "text/html" language= "java"%><%@ taglib "F" prefix= "uri="% ><%@ taglib prefix= "h" uri= "http://java.sun.com/jsf/html"%> <f:subview id= "Wizard-buttons" >

It is noteworthy that any JavaServer Faces component that resides on the included page must be a subassembly of the <f:subview> label, just as it must be a child page of the <f:view> tag in the parent page. This example does not show this, but any template label text that you want to include in a child view must be prepackaged inside the <f:verbatim> label.
You can see that the page has only one Panel Grid, which shows two adjacent buttons. The properties of these buttons are bound to the methods and properties provided by the wizardbuttons Bean. These buttons and the bean are designed to work together. The Back button has its own value and the action is hard-coded. The Next button extracts the value from the wizardbuttons bean and makes the action hard code.


Navigation rules
Navigation rules are the core of a wizard component. These rules must be included in the application's Faces-config.xml file. The following is a subset of the demo application rules. You can use these rules as a starting point to take advantage of the wizard components in your own applications.


<navigation-rule> <from-view-id>/main.jsp</from-view-id> <navigation-case> < Description> If The action returns "Next", Goto firstselection.jsp </description> <from-outcome>next< /from-outcome> <to-view-id>/firstSelection.jsp</to-view-id> </navigation-case> </ Navigation-rule> <navigation-rule> <from-view-id>/firstSelection.jsp</from-view-id> < Navigation-case> <description> If The action returns "Next", Goto secondselection.jsp </description> < From-outcome>next</from-outcome> <to-view-id>/secondSelection.jsp</to-view-id> </ Navigation-case> <navigation-case> <description> If The action returns "back", Goto main.jsp </ Description> <from-outcome>back</from-outcome> <to-view-id>/main.jsp</to-view-id> < /navigation-case> </navigation-rule>



The navigation rules describe how to handle actions based on where the action is invoked, as follows:

If the action is called on the "main.jsp" page and returns "Next", the navigation handler renders the "firstselection.jsp" page
If the action is called on the "firstselection.jsp" page and returns "Back", we go to the main page
If the invoked action returns "Next", we will go to the "secondselection.jsp" page
Action
You can recall that the first page in the workflow flowchart is special because the workflow can cause the page to reload. The first page is reloaded when the user wants to add characters to the character table. This addition is done by placing a button in the page and triggering the corresponding action when the button is pressed.

On the main.jsp page, you can see the button's declaration:



The implementation of the actual action handler is in the Modelbean.java file. The "Addcustomname" method adds name to the table.

public void Addcustomname (ActionEvent event) throws Abortprocessingexception {if (customname!= null) && (!custo Mname.trim (). Equals (""))) {customname = Customname.trim (); Check to the if name already exists in list iterator iter = Datalist.iterator (); while (Iter.hasnext ()) {Characterbean item = (Characterbean) iter.next (); if (Item.getname (). Equals (Customname)) {Reset (); Return }//create new Entry Characterbean item = new Characterbean (); Item.setname (Customname); Item.setspecies ((Speciesbean) Speciespropertymap.get (customspecies)); Datalist.add (item); }}


When a CommandButton with an action listener is invoked, the action program is invoked. The "Addcustomname" method traverses the list of existing characters and creates a new Character entry if no new name is found in the list.

If the action handler has a return value, the navigation handler can use the value to determine the next action and determine the direction of the navigation based on the result. There is no return value in this particular example, because only the same page is displayed again, but a new user name entry is added. The design of action handlers and navigation handlers determines that they can interoperate easily.


Conclusion
This article describes some of the features provided in the JavaServer Faces Technology framework. The sample application demonstrates the use of components, navigation, action handlers, and style sheets.

JavaServer Faces can help you easily create complex and robust Web applications. It is a standard Java WEB application framework that has evolved over the years. To start using JavaServer Faces, all you have to do is download the Sun Java System application Server Platform Edition 8.0 or the Java EE 1.4 SDK for free. As a standard, it is positioned to be used by users and tool providers. JavaServer Faces Technology is a tool that can help you build excellent WEB applications using the MVC principle. As a result, using JavaServer Faces, you can distinguish between what is a good application and what is an excellent one.

　

About the Author:

Ed Burns is a senior engineer for Sun Microsystems. Since 1994, Ed has been involved in a variety of client and server-side WEB technologies, including NCSA Mosaic, Mozilla, Sun Java Plugin, Jakarta Tomcat, and the latest JavaServer Faces. Ed is now a joint leader of JavaServer Faces.

Justyna Horwat is the director engineer of the next Generation JSP standard Tag library for Sun Microsystems. Since 1999, she has been extensively involved in the development of Java Web technology, and she has made a great contribution to JavaServer Faces and Apache Tomcat. She has been active in the open source community for several years, and in 2002 she became the first female development member of the Apache Software Fund organization.