在JSF中使用依赖级联选择框

来源：互联网发布：linux&符号转译编辑：程序博客网时间：2024/06/13 22:49

作者: Chris http://jroller.com/page/cschalk?entry=building_dependent_select_menus_in

翻译: icess http://blog.matrix.org.cn/page/icess

在web程序中,有时候需要管理的选择按钮,(译者注:如注册qq号码时候选择省份和地区,地区是根据省份的不同来动态变化的) 在jsf中实现这种选择按钮可以有多种方式(译者注:现在使用ajax4jsf可以实现更友好的组件),这里提供一个比较简单的实现.

Defining the HashMaps as managed beans

Faces提供了在配置文件中直接声明Lists和Maps 为managed bean的功能 .一旦在 faces-config.xml中定义, Faces apps就可以通过EL表达式来使用她了, 我们定义下面的Maps

CountriesMap - A Map of countries: France, United States, India.

该Map将驱动一些Maps: UsCitiesMap, FrCitiesMap and InCitiesMap.

当用户选择一个国家名,依赖的list将会根据国家名自动加载.

The HashMaps

CountriesMap

<managed-bean>
 <managed-bean-name>CountriesMap</managed-bean-name>
 <managed-bean-class>java.util.HashMap</managed-bean-class>
 <managed-bean-scope>request</managed-bean-scope>
 <map-entries>
   <map-entry>
     <key>France</key>
     <value>fr</value>
   </map-entry>
  <map-entry>
    <key>United States</key>
    <value>us</value>
  </map-entry>
  <map-entry>
    <key>India</key>
    <value>in</value>
  </map-entry>
  </map-entries>
</managed-bean>

And the dependent city Maps..

UsCitiesMaps

<managed-bean>
  <managed-bean-name>UsCitiesMap</managed-bean-name>
  <managed-bean-class>java.util.HashMap</managed-bean-class>
  <managed-bean-scope>request</managed-bean-scope>
  <map-entries>
    <map-entry>
      <key>New York</key>
      <value>ny</value>
    </map-entry>
    <map-entry>
      <key>San Francisco</key>
      <value>sf</value>
    </map-entry>
    <map-entry>
      <key>Los Angeles</key>
      <value>la</value>
    </map-entry>
  </map-entries>
</managed-bean>

FrCitiesMaps

<managed-bean>
  <managed-bean-name>FrCitiesMap</managed-bean-name>
  <managed-bean-class>java.util.HashMap</managed-bean-class>
  <managed-bean-scope>request</managed-bean-scope>
  <map-entries>
    <map-entry>
      <key>Paris</key>
      <value>ps</value>
    </map-entry>
    <map-entry>
      <key>Lyon</key>
      <value>ly</value>
    </map-entry>
    <map-entry>
      <key>Orlean</key>
      <value>ol</value>
    </map-entry>
  </map-entries>
</managed-bean>

InCitiesMap

<managed-bean>
  <managed-bean-name>InCitiesMap</managed-bean-name>
  <managed-bean-class>java.util.HashMap</managed-bean-class>
  <managed-bean-scope>request</managed-bean-scope>
  <map-entries>
    <map-entry>
      <key>New Delhi</key>
      <value>nd</value>
    </map-entry>
    <map-entry>
      <key>Bangalore</key>
      <value>bl</value>
    </map-entry>
    <map-entry>
      <key>Calcutta</key>
      <value>cc</value>
    </map-entry>
  </map-entries>
</managed-bean>

在选择国家以前为了显示一些提示,我们提供一个 EmptyCities Map

EmptyCitiesMap

<managed-bean>
  <managed-bean-name>EmptyCitiesMap</managed-bean-name>
  <managed-bean-class>java.util.HashMap</managed-bean-class>
  <managed-bean-scope>request</managed-bean-scope>
  <map-entries>
    <map-entry>
      <key>empty</key>
      <value>em</value>
    </map-entry>
  </map-entries>
</managed-bean>

注意,这些Maps也可以从其他地方动态的建立和驱动,如数据库

下面的包含两个select menus的jsp代码.

<%@ page contentType="text/html;charset=windows-1252"%>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<f:view>
<html>
  <head>
  <title>deplist</title>
  </head>
  <body>
  <h:form>
  <p>
  Country:<h:selectOneMenu onchange="submit()"
            binding="#{Deplist_backing.inputCountry}"           >
            <f:selectItems value="#{CountriesMap}"/>
          </h:selectOneMenu>
  </p>
  <p>
  City:<h:selectOneMenu          binding="#{Deplist_backing.inputCity}">
         <f:selectItems value="#{Deplist_backing.cities}"/>
       </h:selectOneMenu>
  </p>  </h:form>  </body>
</html>
</f:view>

页面包含两个selectOneMenu 组件,和他们的子组件 selectItems 被绑定到faces配置文件中配置的#{CountriesMap} 中, 和一个依靠选择的国家名来改变的城市list #{Deplist_backing.cities} Deplist_backing 对象是一个 managed bean 代码如下:

package backing;import java.util.Map;import javax.faces.component.html.HtmlSelectOneMenu;import javax.faces.context.FacesContext;import javax.faces.el.ValueBinding;public class DepList {  HtmlSelectOneMenu inputCountry, inputCity;  // Method which returns the cities Map   // based on the value of inputCountry  public Map getCities() {    String cityMap = "";    if (inputCountry.getValue() != null) {      String countryKey = inputCountry.getValue().toString();      if (countryKey.equals("fr"))        cityMap = "FrCitiesMap";      else if (countryKey.equals("us"))        cityMap = "UsCitiesMap";      else if (countryKey.equals("in"))         cityMap = "InCitiesMap";      else         cityMap = "EmptyCitiesMap";     }     else {       cityMap = "EmptyCitiesMap";     }   cityMap = "#{" + cityMap + "}";   //retrieve correct cityMap and return   FacesContext context = FacesContext.getCurrentInstance( );   ValueBinding binding;   binding = context.getApplication().createValueBinding(cityMap);   return (Map) binding.getValue(context);     }  public void setInputCountry(HtmlSelectOneMenu inputCountry) {    this.inputCountry = inputCountry;  }  public HtmlSelectOneMenu getInputCountry() {    return inputCountry;  }  public void setInputCity(HtmlSelectOneMenu inputCity) {    this.inputCity = inputCity;  }  public HtmlSelectOneMenu getInputCity() {    return inputCity;  }}

注意getCities方法是如何检测是否inputCountry中有输入值,如果有意味着要根据选择的国家来加载城市Map. 这是通过访问managed bean中的city Map来完成的..

And finally the registration of the class Deplist as managed bean Deplist_backing.

<managed-bean>  <managed-bean-name>Deplist_backing</managed-bean-name>  <managed-bean-class>backing.DepList</managed-bean-class>  <managed-bean-scope>request</managed-bean-scope></managed-bean>

And that's it.. when you run the JSP page, you will be able to select the country first and then select the city name.