针对AppleiPhone举行的开辟-开辟技术[Oracle防范]

　　自 2007 年 7 月问世以来,Apple iPhone 在上市的 18 个月中已成为最热销的智能手机.它成功的关键因素在于其强盛的 Safari Web 浏览器,该浏览器可以利用户查看 Web 上的几近任何页面,并完好支持 JavaScript 和 AJAX 等桌面浏览器普通具有的特点.本文将重点介绍若何利用 Oracle JDeveloper 和 Oracle 利用开辟框架 (ADF) 移动开辟针对 iPhone 举行了优化的移动 Web 利用程序.

　　面对的挑衅

　　关于利用 3.5 英寸 iPhone 屏幕拜候 Web 的移动用户和利用 22 英寸液晶显示器拜候 Web 的久坐用户,Web 利用程序的计划存在着较大差别.这为 Web 开辟人员带来了风趣的挑衅,因为目前市面上的 Web 开辟工具可归为两类:

　　针对桌面 Web 浏览器的工具:这些工具充分操纵了桌面浏览器供应的 AJAX/JavaScript 功效.它们也关注 17 英寸屏幕或 1024X768 及以上辨别率的用户界面开辟.

　　针对 HTML 移动 Web 浏览器的工具:这些工具主如果为小 (240X320) 屏幕供利用户界面.它们也利用最小公分母办法将基本 HTML 内容传送到全部的移动浏览器. .

　　这两种工具实现的 Web 站点可以供应次优用户界面和大型页面下载,或不操纵任何 Safari 浏览器支持的高级 AJAX 特点的普通 HTML 页面.

　　而 Oracle ADF 移动浏览器客户端可以使开辟人员在操纵 iPhone Safari 浏览器的 AJAX 功效的同时,保持与仅能处理普通 HTML 或 WAP 2.0 内容的移动浏览器的完好兼容性.此外,它可以帮忙开辟人员成立为 iPhone 屏幕大小和移动 Web 利用而优化的用户界面.

　　Oracle ADF 中的移动开辟底子

　　Oracle ADF 通过 Oracle ADF Mobile 支持移动利用程序开辟.移动支持的核心是通过 MyFaces Trinidad 组件供应的 JavaServer Faces (JSF) 移动显现器工具包以及 Oracle JDeveloper 计划时支持.这里介绍的只是 ADF Mobile 供应的关键特点中的一些:

　　浏览器用户代理检测和功效拜托: Trinidad 组件的移动显现器工具包会通过检测用户代理来肯定客户端浏览器范例,然后按照检测到的浏览器功效供应内容.比方,当针对不支持完好 AJAX 功效的移动浏览器举行显现时,会自动禁用部份页面革新支持.此机制支持大量的移动浏览器,大体上可分为以下类别:

　　iPhone Safari 浏览器

　　BlackBerry 浏览器

　　Nokia S60 浏览器

　　Windows Mobile 浏览器

　　基本 HTML 浏览器

　　移动浏览器显现优化:每个移动浏览器对各种 UI 组件的支持方法各不相同,且各个移动设备的构成因素和辨别率也有差别.Trinidad 组件会以差别的方法显现这些 UI 元素,以确保优化用户界面的显示和筹划,从而使开辟人员无需考虑各个目标移动设备中的改变.

　　完好支持 ADF 模子: 移动开辟支持全部的 ADF 模子和业务逻辑组件,在 JDeveloper 中具有相同的计划时、拖放支持.

　　移动视图成立和组件面板: JDeveloper 中的"成立 JSF 页面"对话框答应开辟人员挑选移动设备作为目标对象.一旦设置,组件面板仅列出移动浏览器支持的组件 .

　　视图编辑器中的屏幕辨别率支持: 开辟人员可以在 Oracle JDeveloper 中设置视图编辑器的大小以接近移动设备屏幕的大小.此特点使开辟人员可以大致理解视图在真实移动设备上的显示情形.

　　关于移动支持,还有一些限制:

　　仅 Trinidad 组件包含用于移动设备的显现器工具包.Oracle ADF Faces 组件目前不包含移动专用的显现器工具包.

　　移动设备支持 Trinidad 组件的子集.此外,对一些 Trinidad 组件的支持会有某些限制.有关具体信息,请参阅 Oracle 技术网上的 ADF Mobile 组件标志概要页面.

　　开辟针对 iPhone 优化的 Oracle ADF 移动利用程序

　　利用 Oracle ADF 和 JDeveloper 开辟针对 iPhone 优化的移动利用程序的高级步骤以下:

　　开辟或重用现有的业务逻辑组件: 由于 ADF Mobile 完好兼容 ADF 模子和业务逻辑组件,因此开辟人员可以轻松地重用其他项目现有的任何业务逻辑组件.此外,还可以利用支持将数据控件拖放至视图编辑器的 JDeveloper 特点.

　　为移动利用程序开辟页面流和视图: 关于移动利用程序与 JSF 利用程序,开辟页面流和视图的历程基本相同.视图编辑器中一个有效的特点就是设置画板的大小至近似移动设备辨别率的功效.Oracle JDeveloper 支持很多常见的移动辨别率,也可以手动增添 iPhone 辨别率.

　　针对 iPhone Safari 浏览器举行优化: 可以利用一些本领来实现 iPhone 原有外观、与 iPhone 服务交互并改良页面转换用户体验.

　　下面将具体介绍增添视图编辑器辨别率和 iPhone 优化的本领.

　　将 iPhone 辨别率增添到视图编辑器

　　视图编辑器中的屏幕辨别率列表为开辟人员在计划视图时供应了可视帮忙.Oracle JDeveloper 支持以下现成份辨率:240x240、240x260、240x320 和 320x240.iPhone 支持 320x480 辨别率.

　　要将 iPhone 辨别率增添到视图编辑器:

　　1.首先,定位并复制下方文件到暂时位置.这是 JDeveloper 扩大文件,在 Oracle JDeveloper 中供应移动开辟支持:

   <JDeveloper Install Home>/jdev/extenstions/oracle.wireless.dt.jar

　　2.利用您喜好的解紧缩程序翻开该 jar 文件并找到文件 dc.xml.在文本编辑器中或从 Oracle JDeveloper 翻开该文件.请注意视图编辑器中定义各种设备辨别率项的行.比方:
<reference-device displayable- width="320" height="240" TablesCapable="true" />

　　3.在 240x40 辨别率项上插入以下行:

　　4.将更新的 dc.xml 文件保存回 oracle.wireless.dt.jar 文件.可以从解紧缩程序直接翻开文件并在呈现提醒后保存文件,或利用您喜好的解紧缩程序将文件增添回 jar 文件.

　　5.首先在 jdev/extensions 目录中备份原始的 oracle.wireless.dt.jar 文件.然后将更新的 oracle.wireless.dt.jar 复制回 jdev/extensions 目录.

　　6.需求重启 Oracle JDeveloper 以查看视图编辑器辨别率下拉列表中的其他项.

　　换肤答应 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 >
 <tr:table value="#{bindings.HouseByZip1.collectionModel}"
 var="row" 
 rows="6" width="100%"
 horizontalGridVisible="false">
 <tr:column sortProperty="Price" sortable="false">
 <tr:panelGroupLayout layout="vertical" style>
 <!—Place a small image in each row --> 
 <!—row.image returns path to the image --> 
 <tr:image style
 source="#{row.Picture}"/> 
 <!—Main text for each row is a commandLink --> 
 <!—"goIntro" navigates to another view--> 
 <tr:commandLink text="#{row.Street}"
 style
 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."
 style/>
 </tr:panelGroupLayout>
 </tr:column>
 </tr:table>
 </div>

　　　　字段设置面板

　　字段设置面板普通用于显示有关数据实例的具体信息,也会供应导航到显示相关具体信息的其他屏幕或视图的链接.字段设置面板的示比方下;履行以上示例后,此视图将显示有关某座房屋的具体信息,并供应查看该房屋其他具体信息的链接:

　　对应的代码片段以下所示:

<div >
 <tr:panelCaptionGroup>
 <div >
 <tr:outputText style value="Street:"
 truncateAt="0"/>
 <tr:goLink style 
 destination="http://maps.谷歌.com/maps?q= 
 #{sessionScope.houseDetails.Street},+ 
 #{sessionScope.houseDetails.City},+ 
 #{sessionScope.houseDetails.Zip}"
 text="#{sessionScope.houseDetails.Street}"/>
 </div>
 <div >
 <tr:outputText style value="City:"
 truncateAt="0"/>
 <tr:outputText style 
 value="#{sessionScope.houseDetails.City}"/> 
 
 </div>
 </tr:panelCaptionGroup>
 <tr:panelCaptionGroup>
 <div >
 <tr:outputText style value="Price($):"/>
 <tr:outputText style
 value="#{sessionScope.houseDetails.Price}"/>
 </div>
 ......
 </tr:panelCaptionGroup>
 </div>

<tr:goLink style
 destination="tel:#{sessionScope.houseDetails.AgentPhone}"
 text="#{sessionScope.houseDetails.AgentPhone}"/>

<tr:goLink style
 destination="tel:1-800-use-jdev;pp8"
 text="1-800-use-jdev"/>

<tr:goLink style
 destination="mailto:john.doe@oracle.com,
 jane.doe@oracle.com?subject=Questions?
 cc=myname@myhome.com?
 body=I have questions for you"
 text="#{sessionScope.houseDetails.AgentEmail}"/>

<tr:goLink style 
 destination="http://maps.谷歌.com/maps?q=#{sessionScope.houseDetails.Street},
	+#{sessionScope.houseDetails.City},
 +#{sessionScope.houseDetails.Zip}"
 text="#{sessionScope.houseDetails.Street}"/>

http://maps.谷歌.com/maps?saddr=<Start_Address>&daddr=<destination_address>
</destination_address>