65.9K
CodeProject 正在变化。 阅读更多。
Home

JSF 中 selectOneMenu 标签的演示

bmharwani
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.40/5 (4投票s)

2008年5月5日

CPOL

6分钟阅读

viewsIcon

92900

标准的 JSF HTML 标签用于表示 HTML 表单控件和其他基本的 HTML 元素。这些控件显示数据或接受用户输入的数据。这些数据作为表单的一部分被收集，并在用户点击按钮时提交到服务器。在这些标签中，我们将重点关注 selectOn

引言

Java Server Faces 是一项令人兴奋的新技术，由 Java Community Process (JCP) 开发，JCP 是一个由来自不同组织（如 Jakarta Struts、Oracle、Sun、IBM、ATG 等）的 Web 应用程序专家组成的社区。

JSF 技术提供了构建基于 Web 的用户界面所需的标准 API 和标签库。JSF 定义了一组 JSP 标签，这些标签生成可以绑定到 Java Bean 属性的 HTML 表单元素。

JSF 标签库

JSP 中的标签表示我们希望在页面中执行的任务或操作。一组标签构成一个标签库。在 JSF 中，有两种标签库可用：

  • JSF 核心标签库
  • JSF HTML 标签库

JSF Html 标签

html_basic 标签库定义了表示常见 HTML 用户界面组件的标签。HTML 组件包括文本字段、按钮、表单等。HTML 标签可以分为以下几类：

输入 （inputText，inputTextarea）
输出 （outputText，outputLabel）
Commands （commandButton）
选择 （selectOneRadio，selectOneListbox，selectOneMenu 用于单选按钮、列表框、菜单等）
Layouts （panelGrid）
数据表 （dataTable）
错误和消息 （message，messages）

标准 JSF HTML 标签用于表示 HTML 表单控件和其他基本的 HTML 元素。这些控件显示数据或接受用户输入的数据。这些数据作为表单的一部分被收集，并在用户点击按钮时提交到服务器。在这些标签中，本文将重点关注 selectOnemenu 标签。

h:selectOneMenu

它在一个列表框中显示其子项，并且显示的项数始终为一个。它显示一个 <select> 元素，其 size 属性设置为 1。由子 UISelectItem 或 UISelectItems 组件配置的所有项都渲染为 <option> 元素。

在 JSF 中创建 Web 应用程序有以下步骤：

  • 创建用户界面组件（JSP 文件）
  • 创建管理 Bean
  • 编写导航规则
  • 编译应用程序
  • 部署和测试应用程序

注意：我们假设 Tomcat、JSF 实现和 JDK 已安装在计算机上。

创建 Web 应用程序

让我们在 apache-tomcat-6.0.14\webapps 文件夹下创建一个名为 trial 的目录。Trial 是我们应用程序的任意名称。然后在 apache-tomcat-6.0.14\webapps\trial 下创建 WEB-INF 目录。同时，在 apache-tomcat-6.0.14\webapps\trial\WEB-INF 文件夹下创建 classes 和 lib 目录。

总而言之，我们的 trial Web 应用程序将包含以下文件和目录：

image001.jpg

在 apache-tomcat-6.0.13\webapps\trial\WEB-INF 下创建文件 web.xml，内容如下：

web.xml

<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE web-app PUBLIC
"-//Sun Microsystems, Inc.//DTD Web
Application 2.3//EN"
"http://java.sun.com/dtd/web-app_2_3.dtd">

<web-app>
<!-- 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>
</web-app>

Faces servlet 是所有 JSF 应用程序的引擎。每个 JSF 应用程序都有自己的 Faces servlet，它构建 JSP 页面的组件树，其控件触发事件。它还创建一个事件对象并将其传递给任何注册的监听器。客户端浏览器上的 Web 控件触发的事件被封装在 HTTP 请求中。所有需要 Faces servlet 处理的请求都必须定向到此 servlet。要通过每个 HTTP 请求调用 Faces servlet，请使用部署描述符中的 servlet-mapping 元素将特定的 URL 模式与 Faces servlet 映射。servlet 元素标识 FacesServlet，它处理应用程序的生命周期。load-on-startup 元素的值为 true，表示 FacesServlet 应在应用程序启动时加载。

servlet-mapping 元素列出了 servlet 元素中定义的每个 servlet 名称，并提供了 servlet 的 URL 路径。当收到对 servlet 的请求时，Tomcat 会将路径映射到 servlet。

复制 JSF 1.1 库：将 jsf-api.jar、jsf-impl.jar、commons-beanutils.jar、commons-collections.jar、commons-digester.jar、commons-logging.jar 从 C:\jsf-1.1\lib 文件夹复制到 apache-tomcat-6.0.14\webapps\trial\WEB-INF\lib 目录。

注意：我们假设 JSF 实现文件已复制到 C:\jsf-1.1 文件夹中。

将 standard.jar 和 jstl.jar 从 C:\apache-tomcat-6.0.14\webapps\examples\WEB-INF\lib 文件夹复制到 apache-tomcat-6.0.13\webapps\trial\WEB-INF\lib 目录。

这些 Jar 文件的使用

jsf-api.jar: 包含 javax.faces.* API 类
jsf-impl.jar: 包含 JSF 参考实现的实现类
jsf-ri.jar 包含 JavaServer Faces RI 的实现类
jstl.jar 使用 JSTL 标签和 JavaServer Faces 参考实现类引用所需的
standard.jar 使用 JSTL 标签和 JavaServer Faces 参考实现类引用所需的
commons-beanutils.jar 用于定义和访问 JavaBeans 组件属性的实用程序
commons-digester.jar 用于处理 XML 文档
commons-collections.jar Java 2 SDK 集合框架的扩展
commons-logging.jar 一种通用、灵活的日志记录工具，允许开发人员使用日志语句来检测其代码

在 trial 文件夹中创建一个 index.jsp 文件，内容如下：

index.jsp

<%@taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@taglib uri="http://java.sun.com/jsf/core" prefix="f" %>

<html>
<head>
<title>
</title>
</head>
<body>
<f:view>
  <h:form id="FastFood">
<h:outputText
value="Select your food "/>
<h:selectOneMenu
id="food" value="#{FoodBean.foodName}"> 
<f:selectItem
itemValue="pizza" itemLabel="Pizza" />
<f:selectItem
itemValue="burgar" itemLabel="Burgar" />
<f:selectItem
itemValue="chowmein" itemLabel="Chowmein" />
<f:selectItem
itemValue="hotdog" itemLabel="Hot Dog" />
</h:selectOneMenu>
  <h:commandButton action="submit" value="Submit" />
  </h:form>
</f:view>
</body>
</html>

有两个 JSP 自定义标签库用于在 JSP 页面中表达用户界面 (UI) 组件并将组件连接到服务器端对象。要使用 JSF 标签库，我们必须使用 taglib 指令导入它们。前两行是指令，分别指定查找定义 HTML 元素和核心 JSF 标签的 JSF 标签的位置。

语法

<%@ taglib prefix="h" uri="http://java.sun.com/jsf/html" %>

我们可以为前缀选择任何名称。惯例是 f 和 h，分别用于核心库和 HTML 库。

标签 <h:form id="FastFood"> 生成表单的 HTML 代码。

标签 <h:outputText value=" Select your food "/> 在浏览器上生成“选择您的食物”消息。

标签 <h:selectOneMenu id="food" value="#{FoodBean.foodName}"> 显示一个包含四个选项的组合框：披萨、汉堡、炒面和热狗。用户选择的任何项目都分配给名为 FoodBean 的 Java Bean 的 foodName 属性。

在 trial 文件夹中创建另一个文件 bill.jsp，内容如下：

bill.jsp

<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<html>
<head>
<title>
</title>
</head>
<body>
<f:view>
<h3>
<h:outputText
value="You have selected " />
<h:outputText
value="#{FoodBean.foodName}" /> <br/>
<h:outputText
value="and your bill is " />
<h:outputText
value="#{FoodBean.billAmt}" /> <br/>
</h3>
</f:view>
</body>
</html>

标签 <h:outputText value="#{FoodBean.foodName}" /> 显示与 FoodBean Java Bean 的 foodName 属性绑定的值。为了显示 foodName 属性的值，将执行 FoodBean Java Bean 中定义的 getFoodName() 方法。

同样，标签 <h:outputText value="#{FoodBean.billAmt}" /> 显示与 FoodBean Java Bean 的 bilAmt 属性绑定的值。在显示 billAmt 属性的值之前，将首先执行 Java Bean 中的 getBillAmt() 方法。

现在我们将创建一个 Bean 来保存表单发送的数据。JSF 管理 Bean 是一个 JavaBean 组件，其属性和方法由 JSF 组件使用。

在 classes 文件夹中创建管理 Bean：Food.java，内容如下：

Food.java

public class Food {
    private String foodName;
    private Integer billAmt=null;

    public String getFoodName() {
        return foodName;
    }
    public void setFoodName(String name) {
        foodName = name;
    }

    public Integer getBillAmt() {
        calc();
        return billAmt;
    }
    public void calc()
    {
        if(foodName.equals("pizza"))setBillAmt(80);
        if(foodName.equals("burgar"))setBillAmt(30);
        if(foodName.equals("chowmein"))setBillAmt(40);
        if(foodName.equals("hotdog"))setBillAmt(25);
    }
    public void setBillAmt(Integer amt) {
        billAmt = amt;
    }
}

正如我们在上面的示例中看到的，在显示 billAmt 属性的值时，会调用包含 getBillAmt() 方法的 JavaBean 组件，并调用 calc() 方法，该方法根据用户通过 index.jsp 页面设置的 foodName 属性为 billAmt 属性赋值

在 WEB-INF 文件夹中创建一个文件 faces-config.xml，内容如下：

faces-config.xml

<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE faces-config PUBLIC
"-//Sun Microsystems, Inc.//DTD JavaServer Faces Config 1.1//EN"
"http://java.sun.com/dtd/web-facesconfig_1_1.dtd">
<faces-config>

<navigation-rule>
<from-view-id>/index.jsp</from-view-id>
<navigation-case>
<from-outcome>submit</from-outcome>
<to-view-id>/bill.jsp</to-view-id>
</navigation-case>
</navigation-rule>

<managed-bean>
<managed-bean-name>FoodBean</managed-bean-name>
<managed-bean-class>Food</managed-bean-class>
<managed-bean-scope>request</managed-bean-scope>
</managed-bean>

</faces-config>

在上面的 XML 文件中，我们首先定义导航规则，即当结果为 submit 时，从 index.jsp 页面导航到 bill.jsp 页面。index.jsp 中的提交按钮在点击时会创建结果：submit。

然后我们定义了管理 Bean，它在应用程序中被称为 FoodBean，其类名为 Food.class。

编译 Java Bean 应用程序

打开命令提示符，进入应用程序（trial）的 classes 文件夹，并输入以下命令：

C:\apache-tomcat-6.0.14\webapps\trial\WEB-INF\classes> javac Food.java

要测试应用程序，请运行 Tomcat 并输入 https://:8080/trial/index.jsp。浏览器将显示以下屏幕：

image002.jpg

当我们选择食物类型并按下提交按钮时，会得到以下输出：

image003.jpg

© . All rights reserved.