流线化 Web 应用程序开发（3）

look_w

当用户激活 Go 按钮并提交表单后，JSF 将调用按钮的操作方法：place.fetch()。该方法将信息从 Web 服务发送到 Place.addPlace()，后者创建一个新的 Place 实例，使用传递给方法的数据初始化实例，并将其存储在请求范围内。
清单 2 展示了 Place.fetch()：
清单 2. Place.fetch() 方法

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35

public class Place {   ...   private String[] mapUrls   private String weather   ...   public String fetch() {     FacesContext fc = FacesContext.getCurrentInstance()     ELResolver elResolver = fc.getApplication().getELResolver()     // Get maps     MapService ms = elResolver.getValue(       fc.getELContext(), null, "mapService")     mapUrls = ms.getMap(streetAddress, city, state)     // Get weather     WeatherService ws = elResolver.getValue(       fc.getELContext(), null, "weatherService")     weather = ws.getWeatherForZip(zip, true)     // Get places     Places places = elResolver.getValue(       fc.getELContext(), null, "places")     // Add new place to places     places.addPlace(streetAddress, city, state, mapUrls, weather)     return null   } }

Place.fetch() 使用 JSF 的变量分解器（resolver）查找 mapService 和 weatherService 托管 bean，并且使用这些托管 bean 从 Yahoo! Web 服务获得地图和天气信息。随后 fetch() 调用 places.addPlace()，后者使用地图和天气信息以及地址，在请求范围内创建一个新的 Place。
注意 fetch() 返回 null。由于 fetch() 是一个与按钮有关的操作方法，null 返回值使得 JSF 重新加载同一个视图，其中显示用户会话中的所有位置，如清单 3 所示：
清单 3. 在视图中显示位置

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59

<ui:composition xmlns="http://www.w3.org/1999/xhtml"     xmlns:f="http://java.sun.com/jsf/core"     xmlns:h="http://java.sun.com/jsf/html"     xmlns:ui="http://java.sun.com/jsf/facelets">   <h:form>     <!-- Iterate over the list of places -->     <ui:repeat value="#{places.placesList}" var="place">       <div class="placeHeading">         <h:panelGrid columns="1">           <!-- Address at the top -->           <h:panelGroup>             <div style="padding-left: 5px;">               <i><hutputText value="#{place.streetAddress}"/></i>,               <hutputText value="#{place.city}"/>               <hutputText value="#{place.state}"/>               <hr/>             </div>           </h:panelGroup>           <!-- zoom level prompt and drop down -->           <h:panelGrid columns="2">             <!-- prompt -->             <div style="padding-right: 10px;margin-bottom: 10px;font-size:14px">               #{msgs.zoomPrompt}             </div>             <!-- dropdown -->             <h:selectOneMenu onchange="submit()"                  value="#{place.zoomIndex}"                  valueChangeListener="#{place.zoomChanged}"                  style="font-size:13px;font-familyalatino">               <f:selectItems value="#{places.zoomLevelItems}"/>             </h:selectOneMenu>           </h:panelGrid>           <!-- The map -->           <h:graphicImage url="#{place.mapUrl}" style="border: thin solid gray"/>         </h:panelGrid>         <!-- The weather -->         <div class="placeMap">           <div style="margin-top: 10px;width:250px;">             <hutputText style="font-size: 12px;"               value="#{place.weather}"               escape="false"/>           </div>         </div>       </div>     </ui:repeat>   </h:form> </ui:composition>

清单 3 中的代码使用 Facelets <ui:repeat> 标记迭代用户会话中存储的位置列表。对于每个位置，输出应当如图 3 所示：
图 3. 视图中显示的位置