下载 Oracle JDeveloper Studio 版 示例 iPhone CSS

标签 mobile, adf, 全部

使用 Oracle JDeveloper 和 ADF 针对 Apple iPhone 进行开发

作者：Joe Huang

如今，任何开发人员都可以使用 Oracle JDeveloper 和 ADF 快速创建一个引人注目的 iPhone Web 应用程序。

2008 年 12 月发布

自 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 内容传送到所有的移动浏览器。
.

而 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 优化的移动应用程序的高级步骤如下：

1. 开发或重用现有的业务逻辑组件：由于 ADF Mobile 完全兼容 ADF 模型和业务逻辑组件，因此开发人员可以轻松地重用其他项目现有的任何业务逻辑组件。此外，还可使用支持将数据控件拖放至视图编辑器的 JDeveloper 特性。
2. 为移动应用程序开发页面流和视图：对于移动应用程序与 JSF 应用程序，开发页面流和视图的过程基本相同。视图编辑器中一个有用的特性就是设置画板的大小至近似移动设备分辨率的功能。Oracle JDeveloper 支持许多常见的移动分辨率，也可以手动添加 iPhone 分辨率。
3. 针对 iPhone Safari 浏览器进行优化：可以使用一些技巧来实现 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 name="320 X 240" displayable-name="320 X 240" width="320" height="240" TablesCapable="true" /> 
   

3. 在 240x40 分辨率项上插入以下行：

   <reference-device name="320 X 480" displayable-name="320 X 480" width="320" height="480" TablesCapable="true" /> 
   

4. 将更新的 dc.xml 文件保存回 oracle.wireless.dt.jar 文件。可以从解压缩程序直接打开文件并在出现提示后保存文件，或使用您喜欢的解压缩程序将文件添加回 jar 文件。
5. 首先在 jdev/extensions 目录中备份原始的 oracle.wireless.dt.jar 文件。然后将更新的 oracle.wireless.dt.jar 复制回 jdev/extensions 目录。
6. 需要重启 Oracle JDeveloper 以查看视图编辑器分辨率下拉列表中的其他项。

实现 iPhone 原有外观

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

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

<skin-family>#{AgentUtil.phoneFamily}

<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>

 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("<UA String>") 函数的一点说明。 此函数将对照发出请求的浏览器的 User Agent 字段使用输入 <UA String> 进行匹配。  此函数执行部分匹配 — 例如，在示例 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>

有关 listingImage 等样式类的定义，请参阅示例 iPhone CSS 文件。

导航栏

导航栏为 iPhone 应用程序提供了主要的导航机制。在前面的示例中，导航栏位于屏幕的顶部，提供了可打开另一视图的单击按钮。以下将详细介绍导航栏：

<tr:panelHeader text="Details" styleClass="toolbar" rendered="true">
 <tr:commandLink text="Agent" styleClass="button"
 disabled="false"
 rendered="true"
 action="toAgent"/>
 <tr:commandLink text="Intro" styleClass="backButton"
 disabled="false"
 rendered="true"
 action="backtoIntro"/>
 </tr:panelHeader>

与 iPhone 服务交互

移动设备浏览器通常提供一些与设备上服务的基本交互，例如电话功能和电子邮件功能。iPhone 通过添加与 iPhone Google Maps 应用程序的交互而前进了一步。使用 Oracle ADF 和 JDeveloper 来利用这些功能只需几行代码。通过轻松访问电话号码和地址等数据所在的绑定层，Oracle ADF 和 JDeveloper 使用户可以轻松地执行诸如拨打数据库字段中电话号码等操作。

电话服务

iPhone Safari 在页面上内置了识别电话号码的功能，允许用户单击并拨打此号码。但是，此功能并非屡试不爽。如果电话号码只是显示在 outputText 字段中，则无法确保 iPhone 将其识别为电话号码。

要确保 iPhone 能识别出电话号码，开发人员应在 tr:goLink 组件中显示电话号码，并将 tel:添加到 goLink 的目标属性。拨打电话号码的示例代码包含在会话变量 houseDetails 和字段 AgentPhone 中：

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

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

电子邮件客户端

iPhone Safari 浏览器也提供了 iPhone 电子邮件客户端接口。要调用填写了电子邮件目的地的电子邮件客户端，开发人员应使用 tr:goLink 组件来显示电子邮件字段并将 mailto:添加到组件的目标属性，例如：

<tr:goLink styleClass="messageLink"
 destination="mailto:#{sessionScope.houseDetails.AgentEmail}"
 text="#{sessionScope.houseDetails.AgentEmail}"/>

iPhone 也支持其他电子邮件字段的填充。开发人员只需将下方内容添加到 goLink 组件的目标属性：

• 添加多个收件人：通过逗号 (,) 分隔即可添加其他电子邮件地址
• 电子邮件主题：subject=<subject text>
• 抄送收件人：cc=<Email Addresses>
• 密送收件人：bcc=<Email Addresses>
• 消息文本：body=<Message Text>

例如，下方代码会预填充电子邮件的主题、抄送收件人和消息文本：

<tr:goLink styleClass="messageLink"
 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}"/>

iPhone Google Maps

iPhone Safari 浏览器会拦截对 http://maps.google.com 的调用，并转而调用 iPhone 上的 Google Maps 应用程序。也部分支持在 Google Maps 应用程序中的特定地址加一个图钉标记。加了图钉标记后，iPhone 用户可以使用 GPS 和“获取说明”功能来导航到此地址，甚至在街道级查看地址外观。

要访问此功能，开发人员应使用 tr:goLink 组件，然后使用可链接到 Google Maps 和地址的 URL 填充 goLink 组件的目标属性。Google Maps URL 应为以下格式：

http://maps.google.com/maps?q=<Address_Field>

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

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

结论

iPhone 重新定义了移动设备的“使用简便性”；几乎所有人都可以轻松地了解并使用它，而无需大量培训。原因众所周知：iPhone 核心应用程序的用户界面与设备硬件的完美配合。任何运行在 iPhone 上的其他应用程序都需要遵守此用户界面标准，否则使用此应用程序时，用户将丧失“使用简便性优势”。在本文中，您了解了如何使用 Oracle ADF 和 JDeveloper 轻松开发用户界面，现在，所有的开发人员都可以快速地创建引人注目的 iPhone Web 应用程序。

更多入门资源

以下资源将帮助您了解如何使用 ADF 和 JDeveloperto 进行 iPhone 开发：

• ADF Mobile 演示站点：在 iPhone 上导航到此站点以查看运行中的应用程序。本文中的示例代码来自为 2008 年甲骨文全球大会开发的应用程序。
• Oracle ADF Mobile 开发人员指南
• Oracle JDeveloper 与 ADF 论坛
• Apache MyFaces Trinidad 项目：所有的移动呈现支持由 Trinidad 组件提供。有关使用 Trinidad 组件的其他详细信息和技巧，请访问该项目网站。
• Apple iPhone WebApp 开发人员中心：其中包含到 iPhone 样式指南和 CSS 参考的链接，可帮助您深入自定义示例 iPhone CSS。