为 Intel AppUp℠ 开发者计划开发 HTML5 应用程序 -第一部分：简单示例

Jeff Tranter

0/5 (0投票)

2011 年 12 月 19 日

CPOL

8分钟阅读

26583

这是关于为 Intel AppUp (SM) 中心开发 HTML5 应用程序系列文章的第一篇。本系列将涵盖从使用 AppUp 封装工具打包最小化应用程序的基础知识到演示不同功能的应用程序的各种主题。

引言

这是关于为 Intel AppUp 中心开发 HTML5 应用程序系列文章的第一篇。本文将介绍使用 Intel AppUp™ 封装工具打包最小化应用程序的基础知识。后续文章将介绍一些更大型的示例应用程序，演示 HTML5 的不同功能。假设您对 HTML5 或至少是 HTML4 和 JavaScript 有一定的了解。

我们将重点关注 Windows 平台，尽管 AppUp 封装工具也可以生成适用于 MeeGo netbook 版本的包。其目的是这些应用程序未来也能在 Tizen™ 等其他平台上运行，而无需进行多少或根本无需进行任何更改。

本文中描述的所有源文件都可以从此处下载。

请注意，在撰写本文时，AppUp 封装工具仍处于 beta 测试阶段。此处描述和显示的内容与最终发布版本之间可能存在一些差异。

最小化应用程序

对于第一个示例，我们只想显示一个网页，使用一个简单的样式表，并编写一些 JavaScript。我将展示如何使用 Intel AppUp (SM) 开发者程序提供的一些 API。然后，我将引导您完成使用 AppUp 封装工具将代码打包为应用程序的步骤，然后将其安装并运行在 Windows 桌面操作系统上。

虽然我们可以将所有代码放在一个 HTML 文件中，但对于除最简单的应用程序之外的所有应用程序来说，将 JavaScript 放在一个或多个单独的文件中是一种良好的做法。我们还将包含一个 CSS 文件来说明样式表的典型用法。

首先，我们需要一个主 HTML 文件，名为 index.html，它将引用我们的样式表（app.css）和外部 JavaScript 文件（functions.js）。主 HTML 文件必须命名为 index.html；其他文件可以任意命名。我们的 index.html 文件的前几行显示在下面的列表 1 中。我们引用了样式表和 JavaScript 文件。

  <!DOCTYPE HTML>
  <html>
    <head>
      <title>HTML5 Application: Simple Example</title>
      <link href="app.css" rel="stylesheet" type="text/css" />
      <script src="functions.js" type="text/javascript"></script>
    </head>

列表 1：主 HTML 文件第一部分

现在，让我们用一个标题和一些文本来实现网页的正文。这显示在列表 2 中。

  <body>
    <h1>HTML5 Application: <em>Simple Example</em></h1>

      This is a simple first example of an HTML5 application. It illustrates
      what is needed to use Encapsulator to package an HTML5 application for
      AppUp. As well as a single HTML file, it includes a JavaScript file
      and style sheet. It shows how to call some of the Encapsulator AppUp
      APIs and use some HTML5 features.
    
  </hr>

列表 2：主 HTML 文件第二部分

让我们提供三个按钮，并将它们与我们希望在按下时执行的 JavaScript 函数关联起来。这些按钮的代码显示在列表 3 中。

<a href="#" id="FullScreen" class="button black" onclick="fullScreen()">Set Full Screen Mode</a>
<a href="#" id="ExitFullScreen" class="button white" onclick="exitFullScreen()">Exit Full Screen Mode</a>
<a href="#" id="CloseApp" class="button blue" onclick="closeApplication()">Close Application</a>

列表 4：主 HTML 文件第四部分

这是我们的 JavaScript 文件 functions.js。它通过调用 API 中提供的函数来简单地实现三个函数。这些函数应该是自 explanatory 的，并且在此处有更详细的描述。这里。文件在列表 5 中完整显示。

function closeApplication()
{
    intel.adp.encapsulator.closeapplication();
}
 
function fullScreen()
{
    intel.adp.encapsulator.setfullscreen();
}

function exitFullScreen()
{
    intel.adp.encapsulator.exitfullscreen();
}

列表 5：JavaScript 函数文件

最后，我们提供一个样式表 app.css，它为我们的按钮提供了一些样式。我不会在此列出整个文件，因为它有点大且不太有趣。如果您愿意，可以下载并检查它。列表 6 显示了文件的一部分。

BODY {
 background-color: grey
}
 
.button {
      display: inline-block;
      margin: 0 2px;
      outline: none;
      cursor: pointer;
      text-align: center;
      text-decoration: none;
      font: 14px/100% Arial, Helvetica, sans-serif;
      text-shadow: 0 1px 1px rgba(0,0,0,.3);
}

列表 6：CSS 文件的一部分

我们为满足 AppUp 所需的最后一项是图标文件。它将在应用程序打包时使用。它需要是 PNG 格式，命名为 icon.png，并且需要是正方形，分辨率至少为 128 x 128 像素。图 1 显示了我创建的图标。

HTML5-Intel-AppUp/image2.png

图 1：应用程序图标

有了这些文件，您现在就可以使用 Web 浏览器在本地测试应用程序了。唯一的限制是您的浏览器将无法识别 AppUp JavaScript API 函数。对于这个简单的应用程序，在本地 Web 浏览器中测试它是初步检查用户界面是否正确的有效方法。

现在我们的应用程序看起来已准备就绪，我们可以继续使用 Intel AppUp 封装工具将其打包为应用程序。

使用 Intel AppUp™ 封装工具

Intel AppUp 封装工具是一个基于 Web 的工具，它接收我们的 HTML5 应用程序并将其打包为适用于 AppUp 的每个平台的本机应用程序。

第一步是将我们的应用程序文件打包成一个 ZIP 存档。图 2 显示了我使用 Windows 资源管理器在 Windows 7 桌面操作系统上执行此操作时拍摄的屏幕截图。我们需要包含我们之前创建的四个文件：主 HTML 文件、JavaScript 文件、CSS 文件和图标。

HTML5-Intel-AppUp/image3.png

图 2：创建 ZIP 文件

现在，我们可以通过在 Web 浏览器中打开该 URL 来访问 AppUp 封装工具。阅读完“简介”选项卡中的信息后，请转到“制作您的应用”。我们需要在表单中填写必填字段。如果您需要帮助理解任何字段，请单击“?”按钮。填写完所有信息后，单击“选择文件”以选择并上传包含应用程序文件的 ZIP 文件。图 3 展示了我们简单示例应用程序的示例。

HTML5-Intel-AppUp/image4.png

图 3：填写 AppUp 封装工具字段

现在您可以单击“生成”，AppUp 封装工具将检查您的应用程序文件，并告知您是否存在任何问题；它在检测错误并告诉您哪里出了问题方面做得很好，例如缺少或太小的图标文件、版本字符串格式不正确等。

如果一切顺利，“检查状态和下载”选项卡将变为活动状态，您可以监控 AppUp 封装工具为每个平台打包应用程序的状态。下面的图 4 中的屏幕截图说明了这一点。

HTML5-Intel-AppUp/image5.png

图 4：检查状态和下载

当您的应用程序成功打包后，Web 界面将指示这一点，并提供一个链接供您下载包。对于 Windows，它将是一个 MSI 文件；对于 MeeGo，它将是一个 RPM 包。如果打包失败，应该会显示原因，您可以返回并修复问题，然后重新提交。

让我对构建包的幕后工作做一些说明：Intel AppUp 封装工具构建一个包含 HTML 渲染引擎的原生应用程序。目前它使用 Qt 工具包和 QtWebKit。应用程序中的 Web 视图会打开您应用程序的 index.html 文件。这个包装器应用程序为每个平台编译，并以适当的格式打包，包括图标以及您在 zip 存档中包含的任何其他文件。

在 MeeGo 上，包是一个 rpm 文件。它使用安装在 MeeGo netbook 上的 Qt 版本。可以使用“rpm”命令安装该包。

在 Windows 上，包是一个 MSI 文件，其中包括一个图形化的安装/卸载向导。该包包含 Qt 以及原生包装器应用程序所需的任何其他 DLL。

安装、运行和卸载

现在我们的包已经构建好了，让我们安装并测试它。在 Windows 上，下载生成的 MSI 文件并运行它。您应该会看到一个类似于下面图 5 的安装程序。

HTML5-Intel-AppUp/image6.png

图 5：应用程序安装程序

安装完成后，您就可以启动应用程序了，无论是从桌面图标还是开始菜单。对于我们简单的应用程序，它应该显示如下面图 6 所示。

HTML5-Intel-AppUp/image7.png

图 6：简单示例运行

现在您可以完成测试。通过我们的简单应用程序，您可以尝试三个按钮，并确认它们执行了预期的功能。

如果您想卸载应用程序，可以从 Windows 控制面板进行。在 Windows 7 上，它应该看起来像下面图 7 中的屏幕截图。

HTML5-Intel-AppUp/image8.png

图 7：卸载应用程序

部署到 Intel AppUp(SM) 中心

对于您想要提供下载的实际应用程序，您需要将其部署到 Intel AppUp 中心。我们将在以后的文章中介绍执行此操作的附加步骤。

其他技巧

这里有一些您可能会觉得有用的杂项提示。

要调试您的应用程序，我之前提到了先在浏览器中本地运行它的策略。这可以避免使用 AppUp 封装工具的上传/生成/下载周期，但通常无法完全测试您的应用程序，因为它运行在与包装器应用程序不同的环境中。对于应用程序的测试和调试，有一个名为 Web Inspector 的有用工具，它是 WebKit 渲染引擎内置的。如果您右键单击 Web 视图，您将看到一个“检查”菜单项。这会打开 Web Inspector。除了能够查看错误和调试 JavaScript 之外，您还可以执行许多操作，包括查看 HTML 元素和获取性能信息。当您的应用程序作为已发布版本提交到 AppUp 中心时，“检查”菜单将不会出现。图 8 显示了正在运行的 Web Inspector。

HTML5-Intel-AppUp/image9.png

图 8：Web Inspector

随着 HTML5 标准仍在发展，Web 渲染引擎并不支持所有功能。AppUp 封装器包装程序使用的基于 Qt WebKit 的渲染引擎存在一些限制。此工具支持的 HTML5 功能记录在此处。这里。随着时间的推移，您可以期望 HTML5 支持的水平会不断提高。

您进行的测试再多也不为过！以下是一些在测试应用程序时需要考虑的事项：

执行应用程序的所有功能
在所有您想支持的平台上进行测试（例如 Windows 和 MeeGo）
在不同版本的平台上进行测试，例如不同版本的 Windows
验证安装程序是否安装了所有必需的文件，不多也不少
验证卸载程序是否删除了所有文件
使用 Web Inspector 检查 JavaScript 错误或警告，并运行 Audits 功能

摘要

在本教程中，我们介绍了使用 Intel AppUp 封装工具打包简单 HTML5 应用程序的基础知识。我希望这个简单的示例能为您的应用程序提供一个良好的起点。在未来的系列文章中，我们将研究一些更复杂的 HTML5 应用程序，它们将演示 AppUp 封装器支持的其他 HTML5 功能。

Tizen™ 是 Linux Foundation 的商标。