内容


Titanium 初识

利用 web 技术构建移动和桌面应用程序

Comments

过去五年左右的时间里,web 应用程序开发领域变迁非常之快。过去,既能够交付可靠后端代码、又能够设计漂亮 UI 的 web 开发人员少之又少,现在有了诸如 Ruby on Rails 和 jQuery 之类强大的开发框架,这样的开发人员越来越多了。与此同时,CSS 和 HTML(一种相当简单的工具,用于确定 web 页面的结构和布局)已经稳定成为灵活且强大的环境,允许开发人员创建相当有吸引力的用户体验。

但是有时候,这些开发人员需要进一步开发 “纯” web 应用程序(用引号表示强调,因为每个开发 web 软件的人都知道,这做起来比看起来可难多了,但是总有一些人不以为然)。在这个快速变化的世界里,光有 web 应用程序还不够,您还需要移动和桌面应用程序。

问题是,如果您来自解释性脚本编程语言(比如 Python、JavaScript 或 PHP),那么要转变到 Java™ 技术、C++ 或 Objective-C 语言不是那么容易的。事实上,可能会非常困难。跟新语言相关的各个方面都很困难:您必须处理已编译的代码;配置设备;在不同的平台上(比如 Apple Macintosh、Windows® 或 Linux®)进行测试。您很可能必须以一种全新的方式开始工作。

所以,即使您可以学习一种新语言(比如说 Objective-C,如果您想要编写 Apple iPhone 或 iPad 应用程序的话),您仍然必须学习如何以符合新环境的方式来编程。如果是在编写 Android 或 iPhone 应用程序,那么您需要完成一些特定的步骤,以获得开发人员证书、运行构建文件、配置设备、测试运行在设备上的代码,最终完成另一个过程,提交您的应用程序,以便发布。

对于普通的 web 开发人员,习惯于通过 SFTP 将代码传输到测试服务器上,运行各种浏览器检查,然后立即发布,那么整个过程都会颠覆。

但是,如果您可以使用您对熟悉的语言已经具有的技能,使用这些语言来为桌面和移动平台构建原生应用程序,然后将这些应用程序打包以便发布和使用,那会怎么样呢?哦,您找对文章了,因为 Titanium 就是您这些问题的解答,Titanium 是 Appcelerator 发布的一个免费的开源开发工具包(参见 参考资料)。

Titanium 是什么?

简而言之,Titanium 是一个快速的应用程序开发平台,它使用 HTML、JavaScript 和 CSS(针对初学者)开发桌面和移动应用程序。该框架也支持使用 Python、Ruby 和 PHP,它们跟前端技术一起,让您能够使用所有您熟悉的能够用来创建应用程序的技术。

其他平台(比如说 Adobe® AIR®)与此类似,只不过 Titanium 是在免费/开源的 Apache 许可下发布的,您无需学习 Adobe Flash® 或 ActionScript 就可以开始使用。基本上,您将使用的是一个独立的 WebKit 客户端和一个功能广泛的 API,包含一个内部 SQLite 数据库和完整的文件系统访问权(还有一些其他特性),您可以将它们与自己的 CSS、JavaScript、HTML 和后端代码组合起来。此外,您还具有对一些常见包装器的访问权,包装器里包装了诸如桌面通知、托盘图标、窗口菜单和其他小部件之类的东西,它们允许您的应用程序很自然地与大多数主流操作系统兼容。

安装 Titanium

要开始使用 Titanium,在 Appcelerator 网站上单击 Download Titanium。软件包下载完成之后,将它安装在您的系统上。在 Mac OS X 上,只要将 Titanium 图标拖放到 Applications 文件夹图标上即可。

安装 Titanium 后,可能还需要运行更新和下载辅助库,然后才能使用。所有事情都完成后,首次启动 Titanium;应该会看到一个欢迎页面。如果您已经有了用户名和密码,就使用这些凭证登录。否则,现在就花一分钟创建您的凭证。您将使用这些凭证访问 wiki、支持门户和其他资源(比如说基于云的分析)。

一完成注册,就应该看到一个列出您的项目的页面。您也可以从这个页面访问 API 文档和其他有用的信息(参见图 1)。在空闲时,您可以随便查看这些信息,但是现在开始来创建您的第一个项目吧。

图 1. Titanium Developer Dashboard
仪表板的屏幕快照,左边是项目窗格,右边窗格中有很多指向例子和教程的快速链接
仪表板的屏幕快照,左边是项目窗格,右边窗格中有很多指向例子和教程的快速链接

创建您的第一个 Titanium 应用程序

要在 Titanium 中创建您的第一个应用程序,只需单击顶部工具栏中的 New Project 打开 New Project 窗口即可。在这里,填入关于您的新应用程序的一些数据点(参见 图 2):

  1. Project type 中,选择 desktop。
  2. 命名您的应用程序。
  3. 给您的应用程序分配一个 App ID。一般来说,App ID 遵循熟悉的 com.companyname.applicationname 格式(比如 com.example.sampleapp)。
  4. 为完成的代码选择一个目录。
  5. 输入您公司或个人的 URL。
  6. 检查您想要包含在新应用程序中的语言模块(当前支持 Ruby、Python 和 PHP)。
  7. 单击 Create Project
图 2. 创建新项目
新项目创建窗口的屏幕快照,展示了一个正在为 Ruby、Python 和 PHP 开发的 Desktop 项目。
新项目创建窗口的屏幕快照,展示了一个正在为 Ruby、Python 和 PHP 开发的 Desktop 项目。

Titanium 在规定的文件夹中为您的新应用程序创建一个文件夹。应用程序文件夹将包含某些重要的文件和目录:

  • Resources 文件夹将最终包含您所有的图像、HTML 文件、PHP 文件等。可以将它看作是您的应用程序的 web 根。在您的应用程序中,您可以使用 app:// URL 来指向该文件夹中的文件和资产。
  • tiapp.xml 文件是您的应用程序的配置文件。您可能从来不会在 Titanium 的 UI 之外编辑这个文件,但是如果您真要编辑的话,请确保预先阅读了文档(参见 参考资料)。
  • LICENSE.txt 文件包含您的用户在使用您的应用程序之前必须同意的许可。
  • manifest 文件描述关于应用程序的一些细节,比如说应用程序的运行时版本。在 Titanium 正在运行时编辑该文件不是一种好做法。
  • dist 目录是您启动和打包应用程序时,Titanium 为应用程序做准备的地方。

现在,确保您设置的初始应用程序是有效的,可以真正被打包的。为了测试这一点,单击 Test & Package 选项卡,然后再单击 Package 选项卡。

接下来,选择您想要支持的平台(就选您正在使用的平台),选择一个安装器类型(现在就选 Bundled)。保持其余选项为图 3 所示的默认值(例如,您想要应用程序是私有的,不想发布到用户)。

图 3. 打包您的应用程序
展示了打包选项的屏幕快照,带有各种平台、安装器类型、私有性和发布状态
展示了打包选项的屏幕快照,带有各种平台、安装器类型、私有性和发布状态

单击 Package Project。几分钟之后,您就会得到一个可从 Appcelerator 网站下载的软件包(参见图 4)。

图 4. 您的软件包可以下载了
屏幕快照展示了 OSX 10.5 Intel 软件包的包完成屏幕和下载链接
屏幕快照展示了 OSX 10.5 Intel 软件包的包完成屏幕和下载链接

单击下载该软件包,然后安装。当然,您会看到的只是一个空白屏幕,顶部有一行文字 "Welcome to Titanium",因为应用程序 Resources 目录中的 index.html 文件里仅有这些内容。事实上,如果您打开这个 index.html 文件,会看到类似于清单 1 中的标记。

清单 1. 您的第一个 Titanium 应用程序中的基本标记
<html><head></head>
<body style="background-color:#1c1c1c;margin:0">
<div style="border-top:1px solid #404040">
<div style="color:#fff;;padding:10px">Welcome to Titanium</div>
</div></body></html>

编辑您的应用程序

您已经构建了您的第一个应用程序,但是它还不是很完美。首先,它外观不怎么样,然后也不做任何有用的事情。所以,我们来给它添加一些元素,让它开始看起来像个应用程序。

打开包含您的应用程序的目录,然后打开 Resources 目录。下载一个您喜欢的 JavaScript 框架(我喜欢的是 jQuery),放入当前目录中。现在在编辑器中打开 index.html 文件并做更改。

首先使用一个 <script> 标记将刚才下载的框架文件绑定到页面中。然后删除 Titanium 自带的所有额外的内嵌样式。此时,您的 HTML 标记看起来应该类似于清单 2。

清单 2. 添加 jQuery
<html>
<head>
<script type="text/javascript" src="app://jquery.js"></script>
</head>
<body>
</body>
</html>

现在添加一些客户端代码,比如说执行页面上某些动态事件的按钮。在清单 3 中的例子中,我创建了一个简单的按钮,单击它会提示 jQuery 填入一个带有内容的 <div>

清单 3. 添加动态按钮
<html>
<head>
<script type="text/javascript" src="app://jquery.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
	$("#mybutton").click(function(){
		var string = 'Hello there!';
		$('#mymessage').html(string);
	});
});
</script>
</head>
<body>
<button id="mybutton">click me!</button>
<div id="mymessage"></div>
</body>
</html>

尽管这是一个简单的例子,但是您可以看出选项几乎是无限制的(参见图 5)。添加另外一些客户端框架、CSS 布局和定制内容,以创建您想要交付给客户的应用程序。

图 5. 在 Titanium 应用程序中合并 HTML 和 jQuery
展示一个样例应用程序的屏幕快照,带有 'click me' 按钮和内容为 'Hello there!' 的消息
展示一个样例应用程序的屏幕快照,带有 'click me' 按钮和内容为 'Hello there!' 的消息

跟网站不一样,您需要进行一些规划,因为您需要打包各个代码块以查看更新。例如,一旦您绑定了一个发行版本,就不是那么容易刷新内容更改了,所以要记得预算创建一个软件包将花费的时间,然后再下载它。

例如,如果您要返回去并添加 清单 4 所示的 CSS 样式:

清单 4. 简单的 CSS
body {
	margin:0;
	padding:0;
	background:#ccc;
}

#wrapper{
	border:1px solid black;
	margin:10px auto;
	width:500px;
	background:#fff;
	padding:10px;
}

然后是一些标记,添加一个 ID 为 wrapper 的 HTML <div>,如清单 5 所示:

清单 5. 应用 CSS
<html>

<style>
body {
	margin:0;
	padding:0;
	background:#ccc;
}

#wrapper{
	border:1px solid black;
	margin:10px auto;
	width:500px;
	background:#fff;
	padding:10px;
}			
</style>

<head>
<script type="text/javascript" src="app://jquery.js"></script>

<script type="text/javascript">
jQuery(document).ready(function() {
	$("#mybutton").click(function(){
		var string = 'Hello there!';
		$('#mymessage').html(string);
	});
});
</script>

</head>

<body>

<div id="wrapper">
<button id="mybutton">click me!</button>
<div id="mymessage"></div>
</div>
</body>

</html>

直到运行软件包进程,才能够看到新的外观和感受。这比起您习惯的开发网站时的速度要慢一些,但是只要记住您在处理什么,就没有问题。

即使客户端只能进行这么多更改,也还有对服务器端代码的支持。这里您应该将 HTML 文件转换为 PHP,如果您在构建的应用程序支持 PHP(换句话说,您在创建项目时选中了 PHP 复选框),那么您将能够插入 PHP 命令。PHP 加上 Titanium 自带的内置 SQLite 数据库允许您构建任何种类的动态应用程序。下一节进一步介绍这些内容并添加 PHP 代码。

向混合应用程序添加 PHP

既然基本的工作已经完成,下面就可以对您的新应用程序做一些高级的事情了。打开 Resources 目录,然后在编辑器中打开 index.html 文件。开始添加 PHP 代码之前,最好添加一个会运行 phpinfo()、指向一个 PHP 文件的链接,以便您知道自己在处理什么。我选择 PHP,因为这是我最熟悉的:您可能想要使用 Ruby 或 Python,这两种也受支持。

在 HTML 文件中,去掉按钮并放入一个到新文件的链接 — 一个将会调用 phpinfo.php 的链接,参见清单 6。

清单 6. 链接到 phpinfo.php
<div id="wrapper">
	<a href="phpinfo.php">see PHP info</a>
</div>

这个 phpinfo.php 文件是最基础的,只包含一行 PHP 代码 — 对 phpinfo() 的调用,这个函数输出 Titanium 的 PHP 环境中的每个变量和设置(参见清单 7)。您可以用 <pre> 标记约束该调用,使得按格式显示信息更为容易。

清单 7. 创建 phpinfo.php 文件
<?php
echo phpinfo();
?>

一旦完成了源代码,再回到 Titanium 并创建一个已更新的软件包。等待过程完成,然后下载并安装这个软件包。安装之后,马上运行;您应该看到一个简单的页面,带有一个到 phpinfo.php 文件的链接。单击该链接,应该看到图 6 所示的页面。

图 6. phpinfo() 命令的基本结果
展示很多 PHP 信息的屏幕快照,包括 PHP 版本、内核版本、库,等等
展示很多 PHP 信息的屏幕快照,包括 PHP 版本、内核版本、库,等等

如您所见,Titanium 显示一个页面,展示了它具有的每个 PHP 配置设置。注意,您具有对 Sessions、SQLite 和 SimpleXML(以及其他有价值的工具)的支持,并且 Titanium 知道您的本地环境(例如,WebKit 库位于哪里,您的 _ENV['HOME'] 设置是什么)。

这当然很好,但是如果您想要利用 PHP 真正做某些工作,又该怎么办呢?您当然可以创建一些单独的 PHP 文件以便调用,但是更容易的做法是将您的 PHP 代码直接嵌入到 HTML 文件中。这样做的方式是创建使用 text/php type 参数的 <script> 块(就像创建 JavaScript 块一样)并这样添加 PHP 代码。

例如,如果您想要创建一个将两数相加的简单函数并将它放入前面创建的 index.html 文件中,那么您可以通过一个 JavaScript 块来运行它,如清单 8 所示。

清单 8. 创建一个基本的 PHP 块
<script type="text/php">

function php_sum($a,$b){
	return $a + $b;
}

</script>

<script>
	alert(php_sum(3,4));
</script>

图 7 中可以看到,您可以从基本的 JavaScript 块运行 PHP 代码,让数据从一种代码到另一种代码可用,采用的方式可能与您熟悉的 web 开发时的方式不同。

图 7. 一个基本的 PHP 块
运行 PHP 代码的屏幕快照,文本区域有一个数字 7,还有一个 OK 按钮
运行 PHP 代码的屏幕快照,文本区域有一个数字 7,还有一个 OK 按钮

当然,另一种做法是将 PHP 块打包到单独的文件中,并通过两种方式之一包含这些文件:通过常见的 <script> 标记,或者通过在 <script> 块中使用 include 命令,如清单 9 所示。

清单 9. 包含 PHP 源文件
//you can use the script tag
//if you use this method, leave your PHP code bare, no <?php block
<script type="text/php" src="my_file.php"/>
 
//or you can use a PHP include command inside a script block
//if you use this method, surround your code with <?php block
<script type="text/php">
    include("source.php");
</script>

结束语

至此,您已经学习了足够的知识,完全可以开始构建您自己的 Titanium 应用程序了。学习了如何安装工具,利用 HTML 创建基本的界面,甚至添加一些 PHP 代码和一些 CSS 样式。从此,您应该能够利用您作为一个 web 开发人员已经具备的技能,添加其他特性,创建出优秀的桌面和移动应用程序。


相关主题


评论

添加或订阅评论,请先登录注册

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=10
Zone=Open source
ArticleID=607162
ArticleTitle=Titanium 初识
publish-date=01102011