针对AppleiPhone进行的开发之二

 实现 iPhone 原有外观

　　换肤允许 Oracle ADF Mobile 应用程序通过使用 Trinidad 组件呈现 iPhone 的原有外观。还允许相同的一组 UI 组件呈现平台原有外观，无需为不同的移动设备创建同一应用程序的多个版本。

　　iPhone 换肤的第一步是实施逻辑以允许 JSF 应用程序在运行时对不同的移动浏览器应用不同的样式表。Oracle ADF Mobile 应用程序通常需要支持多种设备类型，因此要定义一个可以用于多个设备的样式表是不切实际的。为此，首先应为应用程序的页面流创建 Managed Bean，其方法之一是需要检测浏览器类型并返回将用于平台的皮肤系列名称。此方法将在 Trinidad-config.xml 文件中进行调用，例如：

　　<skin-family>#{AgentUtil.phoneFamily}
　　其中 AgentUtil 是 Managed Bean 的类名，phoneFamily 是将皮肤系列作为字符串返回的方法。Trinidad-skins.xml 文件中定义了各种外观系列以及 CSS 文件在项目中的对应位置。例如，对于 iPhone，可将皮肤系列定义为：
<skin>
<id>iphone</id>
<family>iphoneFamily</family>
<render-kit-id>org.apache.myfaces.trinidad.desktop</render-kit-id>
<style-sheet-name> styles/iPhone.css</style-sheet-name>
</skin>
      使用 iPhone 时，AgentUtil.phoneFamily 方法会返回 iphoneFamily。这将导致使用 styles/iPhone.css 中的样式表。以下是 AgentUtil.phoneFamily 方法的示例代码段;请注意示例代码仅包含适用于 iPhone、Symbian 和所有其他移动浏览器的案例。可以根据需要添加其他浏览器。

　private String IPHONE_SKIN = "iphoneFamily";
private String SYMBIAN_SKIN = "symbianFamily";
private String DEFAULT_SKIN = "minimalFamily";

public String getPhoneFamily() {
if (phoneFamily.isEmpty())
{
FacesContext fc = FacesContext.getCurrentInstance();
HttpServletRequest req =
(HttpServletRequest)fc.getExternalContext().getRequest();
String agent = req.getHeader("User-Agent");

if (agent != null && agent.indexOf("iPhone") > -1) {
phoneFamily = IPHONE_SKIN;
} else if (agent != null && agent.indexOf("Symbian") > -1) {
phoneFamily = SYMBIAN_SKIN;
} else {
phoneFamily = DEFAULT_SKIN;
}
}
return phoneFamily;
}
　　
　有关 agent.indexOf("") 函数的一点说明。 此函数将对照发出请求的浏览器的 User Agent 字段使用输入 进行匹配。 此函数执行部分匹配 — 例如，在示例 agent.indexOf("iPhone") 中，其将参照模式“iPhone”检查浏览器的整个 User Agent 字符串。 如果匹配，即 User Agent 中包含字符串 iPhone，则该函数将返回 -1。 可以根据需要在此字段中指定尽可能长或短的字符串，只要返回可保证所需的匹配。 虽然应根据测试案例指定 UA 字符串，但此处给出了一些常用的模式：

　　iPhone：用于识别所有的 iPhone Safari 浏览器

　　Symbian：用于识别所有的 Nokia S60 浏览器

　　BlackBerry9000：用于识别所有的 BlackBerry 9000 系列浏览器

　　BlackBerry88：用于识别 BlackBerry 8800 系列浏览器

　　BlackBerry83：用于识别 BlackBerry 8300 系列浏览器

　　BlackBerry：用于识别所有其他的 BlackBerry 浏览器

　　Windows CE：用于识别所有的 Windows Mobile 浏览器

　　Android：用于识别 Android 中基于 WebKit 的浏览器

　　　使用换肤和 Trinidad 组件实施常用的 iPhone UI 元素

　　下一步是要实现 iPhone 原有外观，在支持常用 iPhone UI 组件创建的样式表中定义样式类。iPhone 原有应用程序中基本上有三个常用 UI 元素：导航面板列表、字段设置面板以及导航栏。下面，我们详细介绍这些元素。

　　导航面板列表

　　导航面板列表将数据列表显示为单列表，其中的各行都包含来自多个列的数据。它支持的应用场景为：用户浏览汇总数据列表并选择其中的一行以显示有关该行的其他详细信息。在下方的示例中，面板列表显示了在售房屋列表。

　　对应的代码如下所示：　　

<div class="panelBase">
 <tr:table value="#{bindings.HouseByZip1.collectionModel}"
 var="row" 
 rows="6" width="100%"
 horizontalGridVisible="false">
 <tr:column sortProperty="Price" sortable="false">
 <tr:panelGroupLayout layout="vertical" styleClass="listing">
 <!—Place a small image in each row --> 
 <!—row.image returns path to the image --> 
 <tr:image styleClass="listingImage"
 source="#{row.Picture}"/> 
 <!—Main text for each row is a commandLink --> 
 <!—“goIntro” navigates to another view--> 
 <tr:commandLink text="#{row.Street}"
 styleClass="listingLink"
 action="goIntro">
 <!—Save Data from selected row to a session variable-->
 <tr:setActionListener from="#{row}"
 to="#{sessionScope.houseDetails}"/>
 </tr:commandLink>
 <tr:outputText value="#{row.City}, $ #{row.Price}, #{row.Sf} Sq.Ft."
 styleClass="listingDetails"/>
 </tr:panelGroupLayout>
 </tr:column>
 </tr:table>
 </div>

　　　　字段设置面板

　　字段设置面板通常用于显示有关数据实例的详细信息，也会提供导航到显示相关详细信息的其他屏幕或视图的链接。字段设置面板的示例如下;执行以上示例后，此视图将显示有关某座房屋的详细信息，并提供查看该房屋其他详细信息的链接：

　　对应的代码片段如下所示：

<div class="panelBase">
 <tr:panelCaptionGroup>
 <div class="row">
 <tr:outputText styleClass="labelText" value="Street:"
 truncateAt="0"/>
 <tr:goLink styleClass="messageLink" 
 destination="http://maps.google.com/maps?q= 
 #{sessionScope.houseDetails.Street},+ 
 #{sessionScope.houseDetails.City},+ 
 #{sessionScope.houseDetails.Zip}"
 text="#{sessionScope.houseDetails.Street}"/>
 </div>
 <div class="row">
 <tr:outputText styleClass="labelText" value="City:"
 truncateAt="0"/>
 <tr:outputText styleClass="messageText" 
 value="#{sessionScope.houseDetails.City}"/> 
 
 </div>
 </tr:panelCaptionGroup>
 <tr:panelCaptionGroup>
 <div class="row">
 <tr:outputText styleClass="labelText" value="Price($):"/>
 <tr:outputText styleClass="messageText"
 value="#{sessionScope.houseDetails.Price}"/>
 </div>
 ......
 </tr:panelCaptionGroup>
 </div>

　　请注意 panelBase 样式提供了此屏幕的排针背景。两个 panelCaptionGroup 控件将数据显示分为两组。最后，street 字段是一个 tr:goLink 组件，可以调用 iPhone Google Maps 应用程序。此功能将在下一部分说明。