Apple 的 iPhone 平台为开发人员提供了一个有趣的机会借助其小型的交互式触摸屏iPhone 和 iPod Touch 在很短的时间内迅速吸引了数百万用户但是这种新颖的设计和专利平台给应用程序开发人员带来了一系列新的挑战想要在该平台上进行研究的开发人员必须创建模拟 iPhone 的本机界面外观的 Web 应用程序
幸运的是使用一系列新的开源工具可以更轻松地完成这项工作Aptana 的针对 Eclipse 的 iPhone Development 插件可以生成特定于 iPhone 的项目并在可旋转取景器中预览应用程序Joe Hewitt 的 iUi层叠样式表(Cascading Style SheetsCSS)和 JavaScript 框架包含模拟本机 iPhone 体验的部件和页面集
在本文中我们使用 Aptana 和 iUi 创建一个新应用程序针对 iPhone 的简单 Javadoc 查看器首先设计一个在 iPhone 中浏览 Javadoc 的用户界面 (UI)然后创建用于从任何源代码生成 Javadoc 页面的定制 doclet在此过程中将描述针对 iPhone 的 UI 问题如何使用这些开源工具简化开发和调试以及 iPhone 开发的未来趋势
工具快速入门
首先安装 Aptana 并下载 iUi
在 Eclipse V 中选择 Help > Software Updates > Find and Install
选择 Search for new features to install此窗口列出了可以从中下载插件的站点以及 Eclipse 预定义的插件
单击 New Remote Site 将 Aptana 添加到此列表中并使用 URL 对其进行定义
从列表中选择新定义的 Aptana 站点单击 Next然后安装所有可用功能完成此窗口安装基本的 Aptana Editor
重新启动 Eclipse
选择 Window > Open Perspective > Other然后从窗口选择 Aptana工具栏中将显示一组新图标
单击主页图标将显示 Aptana 功能的概览
在 Apple iPhone Development 部分中单击 Download and Install
安装所有功能然后完成此窗口以用特定于 iPhone 的功能配置 Aptana
重新启动 Eclipse
下载最新版本的 iUi
一切就绪之后请使用 Eclipse 创建一个名为 iDoc 的新 iPhone Project如图 所示
图 创建新 iPhone Project
图 显示了生成的项目其中包含简单 iPhone 应用程序
图 在 Eclipse 中生成的 iPhone Project
注意由 Aptana 的基本编辑器提供的突出显示的语法它支持 HTMLCSS 和 JavaScript
iPhone Preview 模式和应用服务器
在文本编辑器的底部您将看到 SourceiPhone Preview 选项卡以及系统中安装的所有浏览器(例如Safari PreviewFirefox Preview)单击 iPhone Preview 查看示例应用程序在 iPhone 中的外观在浏览器外部单击可以旋转电话单击电话标题栏可以隐藏导航栏下面显示了水平显示的 iPhone Preview 模式
图 iPhone Preview 模式下的水平视图
使用 iPhone Preview 模式可以节省大量时间可以快速测试新设计想法并重复进行开发而无需离开计算机当应该在实际的 iPhone 上测试您的应用程序时Aptana 的内置应用服务器将十分有用单击 Eclipse 工具栏中的 Run 图标启动服务器图 显示了在 Eclipse 中运行的应用服务器
图 Aptana 的 iPhone Application Server 托管页面并创建带有 URL 的电子邮件
如果通过 WiFi 连接将 iPhone 连接到本地网络则可以访问服务器窗口中显示的 URL单击 Email this url 并向 iPhone 中的电子邮件帐户发送一条消息这可以省去一个步骤单击电子邮件中的链接应用程序将在 iPhone 的 Web 浏览器中启动
iUi 演示剧院清单 Web 应用程序
虽然 Aptana 的启动应用程序包含特定于 iPhone 的 HTML 和 CSS 文件但是这些文件的功能有限一种更好的备用解决方案是使用 iUi 框架此框架拥有一组丰富的自定义部件和 JavaScript 效果可以精确地模拟本机 iPhone 界面
解压缩已下载的 iUi 发行版 iuitar然后把文件复制到 Eclipse 的 iDoc Project 中图 显示了包含 iUi 的项目
图 带有 iUi 框架和示例项目的 iDoc 项目
iUi 的演示 Web 应用程序可以在上面展开的 samples 文件夹中找到其中包括音乐浏览器剧院清单和类似 Digg 的站点使用 Aptana 的 iPhone Preview 模式我们可以在 Eclipse 中查看这些组件图 显示了剧院清单 Web 应用程序 (samples/theaters/l) 的搜索页面
图 iUi 的示例剧院清单 Web 应用程序
注意该演示与本机 iPhone 的界面外观极为相似使用这些预打包的部件可以快速开发 iPhone Web 应用程序
设计 UI
在本例中将为 iPhone 创建一个名为 iDoc 的 Javadoc 查看器由 Sun Microsystems 的标准Javadoc 生成器创建的紧密 HTML 文件在台式机上一切正常但是在 iPhone 中却很难导航和读取iDoc 将生成 iPhone 支持的 Javadoc —— 非常适合于在地铁中浏览应用程序编程接口 (API) 或者让合作的编程团队中的观察员帮助解决困难
iPhone 人机接口指南
在开始设计 iDoc 的 UI 之前一定要先了解 iPhone 开发与普通 Web 开发的不同之处图 来自 Apple 的 iPhone Dev Center(请参阅 参考资料)很好地总结了两者的不同之处手指不是鼠标这样做得不到桌面应用程序中的像素精度但是通过轻敲轻弹和轻压将开启一个丰富的新用户交互模型此外iPhone 与用户一起移动并且通常用于有干扰的环境中因此应用程序需要能够快速容易地访问目标信息
图 手指不是鼠标
Apple 的 iPhone 人机接口指南(请参阅 参考资料)定义了三种类型的 iPhone Web 内容
与 iPhone 中的 Safari 兼容
可以正确显示的任意类型的 Web 页面即使页面的一部分依赖于诸如 Adobe Flash 或 Java&#; applet 之类的不受支持的插件
最适于 iPhone 中的 Safari
为 iPhone 正确缩放内容并且不依赖于不受支持插件的 Web 页面
iPhone 应用程序
通过模拟 iPhone 界面外观来模拟本机应用程序的 Web 页面并且在适当的时候与诸如电话电子邮件或 Google Maps 之类的 iPhone 服务集成
标准 Javadoc 页面属于第一种类型与 iPhone 中的 Safari 兼容这些页面可以正确显示但是要求很好地处理轻压和轻弹才能找到相关信息iDoc 针对的是完整的 iPhone 应用程序虽然不能与其他服务集成但是 iDoc 的接口能够在 iPhone 中很好地使用
iDoc UI
针对 iPhone 进行开发时必须只关注 iPhone应用程序应当快速地完成特定任务不应该尝试包括所有可能的功能使用 iDoc用户必须找到关于 Java 类的基本文档例如类名方法名方法签名和注释通过指向目标详细信息页面的三个导航级别显示这些信息
包导航
顶层包
类导航
包内的类接口异常和错误
类细节导航
类中的描述字段构造函数和方法
详细信息页面
注释签名和参数
为了使 iDoc 保持整齐并且以任务为目的需要省略一些传统 Javadoc 功能例如不显示包描述注释由于这些功能通常不包含有用信息(例如acmeclient 包含客户机代码)并且有时被同时省略因此把它们从 iDoc 中移除并简化接口就显得十分有意义
要获得三个导航级别请使用边对边 (edgetoedge) 列表这是在本机 iPhone 应用程序中常用的构造用于浏览联系人电子邮件和音乐边对边列表将在 像素的等高行中显示项并且有助于在大量信息中滚动查找Apple 的 iPhone 人机接口指南 提供了构造边对边列表的规格包括字体字体大小和边框间距iUi 框架用 CSS 和 JavaScript 语言实现这些规格允许您创建像本机 iPhone 组件那样显示的简单 HTML 列表
清单 显示了页眉以及 javaapplet 和 javarmi 包的前两个导航级别
清单 带有页眉和前两个导航级别的 HTML 文档
<!DOCTYPE html PUBLIC //WC//DTD XHTML Strict//EN
strictdtd>
<html xmlns=>
<head>
<title>iDoc</title>
<meta name=viewport content=width=; initialscale=;
maximumscale=;
userscalable=;/>
<style type=text/css media=screen>@import
iui/iuicss;</style>
<style type=text/css media=screen>@import
iDoccss;</style>
<script type=application/xjavascript
src=iui/iuijs></script>
</head>
<body onclick=consolelog(Hello eventtarget);>
<div class=toolbar>
<h id=pageTitle></h>
<a id=backButton class=button
#></a>
</div>
<ul id=home title=Packages selected=true>
<li><a #javaapplet>javaapplet</a></li>
<! more packages>
<li><a #javarmi>javarmi</a></li>
</ul>
<ul id=javaapplet title=javaapplet>
<li class=group>Interfaces</li>
<li><a >
AppletContext</a></li>
<li><a >
AppletStub</a></li>
<li><a >
AudioClip</a></li>
<li class=group>Classes</li>
<li><a >Applet
</a></li>
<li><a >
AccessibleApplet</a></li>
</ul>
<ul id=javarmi title=javarmi>
<li class=group>Interfaces</li>
<li><a >
Remote</a></li>
<li class=group>Classes</li>
<li><a >
MarshalledObject</a></li>
<li><a >
Naming</a></li>
<li><a >
RMISecurityManager</a></li>
<li class=group>Exceptions</li>
<li><a >
AccessException</a></li>
<li><a >
AlreadyBoundException</a></li>
<li><a >
ConnectException</a></li>
<li><a >
ConnectIOException</a></li>
<li><a >
MarshalException</a></li>
<li><a >
NoSuchObjectException</a></li>
<li><a >
NotBoundException</a></li>
<li><a >
RemoteException</a></li>
<li><a >
RMISecurityException</a></li>
<li><a >
ServerError</a></li>
<li><a >
ServerException</a></li>
<li><a >
ServerRuntimeException</a></li>
<li><a >
StubNotFoundException</a></li>
<li><a >
UnexpectedException</a></li>
<li><a >
UnknownHostException</a></li>
<li><a >
UnmarshalException</a></li>
</ul>
图 显示了使用边对边列表生成的顶层选择包导航级别
图 像导航本机 iPhone 应用程序一样导航 Javadoc 包
图 显示了在 iPhone Preview 模式下显示的最终的 javarmi 包
图 在 javarmi 包中导航接口类和异常
对于 iDoc 的目标详细信息页面使用另一种 iPhone 构造圆角矩形列表这些列表对于分组信息十分有用并且 iPhone 中的设置面板都使用这种列表使用圆角矩形列表可以分隔方法签名与参数及异常清单在 V 中iUi 只支持将圆角矩形列表用于表单输入;将其元素用于静态文本将生成格式错误的块 使用定制的 iDoccss 文件扩展这些 CSS(如清单 所示)以添加用于显示带有静态文本的圆角矩形列表的 textRow 元素
