在JSF中使用依赖级联选择框-CSDN博客

作者: 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 οnchange="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.