Titanium 初识

sofes 2014-08-07

展开全文

过去五年左右的时间里，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）：

在 Project type 中，选择 desktop。
命名您的应用程序。
给您的应用程序分配一个 App ID。一般来说，App ID 遵循熟悉的 com.companyname.applicationname 格式（比如 com.example.sampleapp）。
为完成的代码选择一个目录。
输入您公司或个人的 URL。
检查您想要包含在新应用程序中的语言模块（当前支持 Ruby、Python 和 PHP）。
单击 Create Project。

图 2. 创建新项目

新项目创建窗口的屏幕快照，展示了一个正在为 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. 您的软件包可以下载了

单击下载该软件包，然后安装。当然，您会看到的只是一个空白屏幕，顶部有一行文字 "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!' 的消息

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

例如，如果您要返回去并添加清单 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() 命令的基本结果

如您所见，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 块打包到单独的文件中，并通过两种方式之一包含这些文件：通过常见的 <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>

回页首