Introduction to JavaServer Faces

Author: Ed Burns and Justyna HorwatJavaServer Faces 1.0 Framework allows you to easily create powerful and dynamic Web applications. There are many web user interface frames on the market, but JavaServer Faces Technology stands out in the following reasons: it is a Java Community Process standard; it introduces the JavaBeans component model for Web UI; and its build has been used. There is an advantage of architecture. As a standard, many tool suppliers can benefit from strict definition and consistent behavior. The design concept of JavaServer Faces Technology is to use it inside the tool. Users can also benefit from the consistent and clear behavior between different JavaServer Faces technology implementations.

Many useful features are available in JavaServer Faces Technology. Some of the main features that need to be focused include:

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 briefly introduces these features of JavaServer Faces Technology and give some examples. For more information on these functions, other features provided by JavaServer Faces Technology, please refer to the sections of JavaServer Faces Technology (Chapter 17-21) for JAVASERVER FACES TECHNOLOGY.

JavaServer Faces applications are essentially a servlet or Java Server Pages (JSP) application running in a container compatible with Java (TM) 2 Platform, Enterprise Edition (J2EE (TM) Platform). This shows that it requires Java Servlet 2.3 and JSP 1.2 or updated versions. The best way to start creating and configuring a JavaServer Faces app is free to download Java 2 Software Development Kit, Standard Edition (J2se SDK) 1.4 or later. It should be pointed out that JavaServer Faces Technology does not require the use of JSP pages in the application, you can freely choose to use servlets or other template technology. If you really use JSP containers to use JavaServer Faces Technology, you will benefit from the built-in JavaServer Faces kernel and HTML component libraries through the JavaServer Faces. The JavaServer Faces component represents a web control like text field, form, buttons, tables, check boxes, and the like.

When you create a JSP page using JavaServer Faces Technology, a component tree is created in the server's memory, and each component tag corresponds to a UIComponent instance in the tree. The framework uses the component tree to handle the request of the application and create a presentation response. When the user generates an event, for example, click on a button, the JavaServer Faces life cycle handles the event and generates an appropriate response. This is a paragrace that is common for most graphical user interface programming.

Facesservlets are entry points that enters the JavaServer Faces framework. It processes the request to handle life cycles and serve as a front-end controller. JavaServer Faces Technology also has the concept of context that holds important request information. The context object is called FacesContext. Each stage context object in the JavaServer Faces Technology lifecycle is modified and is valid for each request. The JavaServer Faces Technology framework also has the concept of "value binding" and "method binding expressions". If you are familiar with techniques like JSP Standard Tag Library (JSTL) or JSP 2.0, you are already familiar with the concept of expressions. JavaServer Faces Technology Binding Expressions allow you to easily interact with the underlying data model. The Character Combat demo application illustrates how to extract values ​​from the data model from the data model.

Simple JavaServer Faces Technology Application

This article contains a simple JavaServer Faces application that clarifies some important concepts of JavaServer Faces Technology. To understand the application, you should be familiar with basic J2EE Web technology including JSP, Servlets, and label libraries.

The basic idea after the sample application is to let users participate in a quick and interesting game. Do you want to know what happens if you take two characters from the "Rings King" and make them fight each other? The sample application answered this problem in a simple and interesting way. The name of the application is Character Combat.

The composition of Character Combat is as follows:

The JSP page is specified with the BACKING BEAN application configuration file for the JavaServer Faces component containing the UI:

JavaServer Faces Controller Servlet Managed Bean Navigation Processing

The above figure shows the page stream in the Character Combat demo application:

On the top page, the user can do the following:

Add more characters directly to the next page on the second page, the user can do the following:

Return to the first page and add more characters Selected Fighting First Participants Go to the third page on the third page, the user can do the following:

Returns the second participant to the second page Selected Fight to the tower surface on the tail page, the user can do the following:

View the battle result Back to the third page Resensively Demo the application

You will notice that the workflow meets the Wizard UI design mode. We have extracted the wizard function of this example into a simple bean of your own application.

Run application

The latest JavaServer Faces Technology 1.0 Framework and all other runtime accessories are integrated into Sun Java System Application Server Platform EDTION 8. You don't need to make any additional configuration steps in Application Server to set a JavaServer Faces web application. Application Server is free, which contains the latest J2EE technology. If you have downloaded J2EE 1.4 SDK, which already contains Application Server.

If you write your own JavaServer Faces web application, 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 application deployment descriptor. All affiliates are already part of the container, you do not need to bind any additional JAR files.

To run the sample programs discussed in this article, you only need to simply deploy the provided WAR files in the application server. Applications can be used by using the context name "JSF-CharacterCombat". In addition to a pre-built WAR file, it also provides a demonstration source code. In the ReadME that is issued with the source code, you will find the instructions for configuring and build. You can access the source code for this presentation by following the instructions on the FAQ on the new JavaServerFaces items on JavaServerFaces projects.

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

Once these instructions are followed, you can browse the source code of this article on the following address:

Https://javaserverfaces-sources.dev.java.net/source/browse/javaserverfaces-sources/jsf-demo/charactercombat/

Demonstrate application build module

Deployment descriptor

In order to use the JavaServer Faces framework in the web application, you need to define the FacesServlet and a FacesSrvlet mapping in the deployment descriptor. Below is an example:

Faces servlet javax.faces.Webapp.Facesservlet 1 faces servlet *. Faces < / url-pattern>

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

The extension map is used in the example above. Using an extension map, the web container sends all requests to the Faces Servlet to get the page, such as "* .faces".

You can also use prefix mapping to map to FacesServlet instances. For example, you can make all the names of the web page through the FacesServlet instance with the "/ faces / *" prefix.

Application configuration

The specific configuration information of all JavaServer Faces Technology will enter an application profile like Faces-Config.xml. In the configuration file, you can define Managed Beans, Navigation Rule, Converter, and Validator.

Below is an example of an entry in the configuration file:

modelbean charactercombat.modelbean session This entry creates a mapping between a bean name and class. This mapping is used by the Managed Bean. When "Modelbean" is first referenced, the model object will be created and it saves it to the appropriate domain. This article discusses the Model Bean Bean later.

There are more configuration options that you can find a complete configuration option set in JavaServer Faces Technology 1.0 specification.

Build 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 need to rebuild the WAR file with a JSTL 1.0.

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

Before trying to establish a demo application, make sure you have all compile time. The demo app provides a "build.properties.sample" file. Copy the file and rename it "build.properties" and make it suggest to your environment. If you are using Application Server or the J2EE 1.4 SDK, JavaServer Faces Technology 1.0 Framework and the full space required to run a JavaServer Faces application are already part of your environment. The only thing you need to do is to 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 targets that establish demonstration applications web archives. To build an application, you also need ANT. Ant is already part of SJSAS PE 8.0, which is located in / BIN / ASANT. To use the SJSAS PE 8.0 container to create a demo application, you only need to call "Asant" in your unpacking Character Combat Demo directory, your "build.xml" and custom "build.properties" files are also available in this directory. in.

Character Combat demo application architecture

Managed bean

The Managed Bean is 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 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. The Character Combat instance has a backing bean named ModelBean. Below is a method of defining ModelBean Beans using the Managed Bean tool in a web-inf / faces-config.xml file:

modelbean charactercombat.modelbean session

That bean is later referenced in the JSP page of the web application. Here is an example of how to use bean:

Where is a text field component nested in the form. When the form is submitted, the value in the text field will be saved as the "CustomName" property in ModelBean. "# {" And "}" specifies to use a "value binding" expression. This value binding expression tells the framework "CustomNamethe" is a JavaBean property that is defined in Model Data under the "ModelBean" keyword. According to the Web-INF / FACES-Config.xml configuration file, the Framework's Managed Bean tool knows the bean name of the class map, and if the bean does not exist, the bean is initialized.

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 table while also storeing user-customized characters.

ModelBean is created with the Managed Bean creation tool and is referenced by the JavaServer Faces component defined in the view. ModelBean illustrates how to use bean to save the value of the component.

Only add new characters are supported in this example. This feature is supported by changing models and views, and the good extension of the program can support the delete function.

JSP page

The JSP page provides a UI for web applications. JavaServer Faces Technology offers two JSP tag libraries that present components to the author of the page. You can customize these components or create your own components. Standard components are presented as basic HTML 4.01 components, making JavaScript absolute minimal. This ensures that your page is displayed in all browsers. If you need support for other rendering types such as WML or SVG, JavaServer Faces Technology contains a renderkit concept, which is a software module that uses it to render yourself in a particular client device type. To use a built-in JavaServer Faces tag library containing components, you will need to include the following instructions 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 Your JavaServer Faces page requires all JavaServer Faces tags to be included in the ... tag, so that component tree can be created correctly.

Each HTML component can be customized using a style sheet. You can specify a general STYLECLASS or set a specific style attribute value for the component.

Here are some examples of the Character Combat application used to explain the above concept,:

Datarable

DataTable uicomponent can process several different types of data models, including java.util.list and java.sql.resultSet. It extracts data and displays data in a customable table. This component can also be customized using a style sheet.

In the Character Combat demo application, use List as the underlying data model. Below is a piece of code:

... As you see in this example, according to the definition in the tag, # {modelbean.DataList} Save in the "Character" variable The list of entries performs value. All characters in the list are created and displayed according to the corresponding Tags tab.

The tag creates a special relationship between components contained in the Facet and its parent components. This special relationship allows you to define components as headings or footers. In our example, we use Facet to create a title for columns.

Since is an HTML component, its style can customize the style sheet. In our example, we show you how to use style features for several different properties. We use the following code snaps in the JSP page title to import style sheets named "stylesheet.css":

Navigation: Sample Wizard Components Let's take a look at the wizard assembly that handles navigation in the application. The assembly has three parts, which are displayed with a black body in the figure below.

To use this component user must do two things:

In the web application UI, it contains the component to create a corresponding navigation rule.

Let's introduce these steps in detail. Details of WizardButtons Managed beans are exceeded in the discussion scope of this article, but basically, it has some ways to enable or disable the next and back buttons based on the current location of the user in the wizard page process.

In the UI, the button can be included in the application UI through the mechanism. In each page of the sample application, you will see the following code line at the bottom:

Look at the page, we see it has the following tags:

<% @ Page ContentType = "text / html" language = "java"%> <% @ taglib prefix = "f" URI = "http://java.sun.com/jsf/core"%> <% @ Taglib Prefix = "h" URI = "http://java.sun.com/jsf/html"%> It is worth noting that any JavaServer Faces component located in the page must be the sub-component of the tag, as in the parent page must be The subpage of the label is the same. This example does not show this, but you want to include any template tag text in the subview must be pre-packaged inside the tag.

You can see that there is only one Panel Grid that shows two adjacent buttons. The properties of these buttons are bound to the methods and properties provided by WizardButtons Beans. These buttons and the beans are designed to work together. The back button has its own value and has a hard code. The next button extracts values ​​from the WizardButtons Bean and performs hard coding.

Navigation rule

The navigation rule is the core of the wizard component. These rules must be included in the application's Faces-Config.xml file. Below is a subset of demonstrating the application rules. You can use these rules as the starting point to utilize wizard components in your own application.

/main.jsp if The action returns "next", goto firstselection.jsp Next /firstselection.jsp /firstselection.jsp if the action returns "next", goto secondselection.jsp Next /secondselection.jsp if the action returns "back", goto main.jsp back /main.jsp Navigation rule describes how to operate The call location is handled, as shown below:

If the action is called and returns "Next", the navigation handler renders the "firstselection.jsp" page If the action is called and returns "Back", then we go to the main page If the call is called back, we will go to the "SecondSelection.jsp" page

action

You can recall the first page in the workflow chart is special, because the workflow can make the page reload. When the user wants to add characters to the character table, the home page is reloaded. This addition is implemented by placing a button in the page, which triggers the corresponding action when the button is pressed.

In the "main.jsp" page, you can see the statement of the button:

The actual action handler is implemented in the ModelBean.java file. "AddCustomName" method Adds Name to the table.

public void addCustomName (ActionEvent event) throws AbortProcessingException {if (!! (customName = null) && (customName.trim () equals ( "")).) {customName = customName.trim (); // check to see if name Already exissrs in list iterator it = DataList.ITerator (); while (tem.hasnext ()) {CharacterBean item = () n. (); 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 the CommandButton with the action listener is called, the action program is called. "AddCustomName" method traverses a list of existing characters, and if there is no new name in the list, it creates a new Character entry.

If this action handler has a return value, the navigation handler can use this value to determine the next action and determine the direction of the navigation based on the results. There is no return value in this special example, because only the same page is replaced, but a new username entry is added. The design of the action handler and navigation handler determines that they can be easily interoperable.

Conclude

This article describes some of the features provided in the JavaServer Faces Technology framework. The sample application demonstrates the use of components, navigation, action handles, 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 developed in a few years. To start using JavaServer Faces, you need to do free download Sun Java System Application Server Platform Edition 8.0 or the J2EE 1.4 SDK. As a standard, its positioning is capable of being adopted by the user and tool provider. JavaServer Faces Technology is a tool that helps you build an excellent web application using the MVC principle. As a result, using JavaServer Faces, you can distinguish what is a good application, what is an excellent application.

About the Author:

Ed Burns is a senior engineer of Sun Microsystems. Since 1994, Ed participated in various clients and server-side Web technology, including NCSA Mosaic, Mozilla, Sun Java Plugin, Jakarta Tomcat, and the latest JavaServer Faces. ED is now the joint leader of JavaServer Faces.