在Ubuntu Touch上创建一个HTML 5 Web应用

Elastic 中国社区官方博客

于 2014-08-19 16:05:13 发布

阅读量2.7k

点赞数

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/UbuntuTouch/article/details/38683023

版权

我们知道在Ubuntu Touch上面，我们可以创建Qt/QML的应用，同时，我们也可以使用Ubuntu SDK来创建一些跨平台的HTML 5的应用。这些应该虽然是在Ubuntu Touch的SDK上面创建的，但也是可以修改在其它的平台上运行。下面，我们来简单介绍一些怎么在SDK中创建并部署.

在Ubuntu Touch上面，我们可以使用HTML 5的一些tag来些，我们的应用，同时我们也可以使用Cordova API接口来扩展我们的功能。更多的阅读，可以阅读我们的官方网站

HTML5 Guide
Cordova Guide

你可以在Ubuntu的开发者网站找到更多的关于这些API的介绍：http://developer.ubuntu.com/api/html5/development/

1) 创建一个基本的框架

首先我们打开我们的SDK，可以看到如下的界面：

接下来我们可以创建一个称作“WebSysInfo"的应用。这个应用的目的是为了显示一些系统的一些信息。

紧接着，按照SDK的提示完成剩下的步骤来创建一个最基本的框架应用。由于HTML 5的应用是跨平台的，我们可以直接在电脑上运行这个最基本的应用，也可以直接部署到手机上。如果你在这个步骤不能正确地运行你的应用，请查看我的 SDK安装指南。

如果你运行程序正常，你可以看到如下的画面：

至此，我们已经完成了一个最基本的应用。下面我们来学习如何添加Cordova API 到我们的应用中来扩展我们的一些功能。

２）添加Cordova API到应用中

我们知道Cordova API有很多有用的功能。可以是我们的应用更加丰富。下面我们来学习怎么把 Cordova API加到我们的应用中去。首先，我们选中我们的项目，同时选择菜单“　Tool”==>"Ubuntu" ==>"Add Cordova runtime to HTML 5 project"。

这时应用开始下载最新的Cordova API的包，并安装到我们所在的应用中。目前由于一些原因，需要关闭项目（最终的版本应该解决这个问题），再重新打开项目来查看在项目栏更新后的目录结构。

为了使用这些API，我们可以对"index.html"的代码做如下的修改。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>An Ubuntu HTML5 application</title>
    <meta name="description" content="An Ubuntu HTML5 application">
    <!-- due to a bug in the SDK, the following line will be used in the final SDK
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"> -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Ubuntu UI Style imports - Ambiance theme -->
    <link href="/usr/share/ubuntu-html5-ui-toolkit/0.1/ambiance/css/appTemplate.css" rel="stylesheet" type="text/css" />

    <!-- Ubuntu UI javascript imports - Ambiance theme -->
    <script src="/usr/share/ubuntu-html5-ui-toolkit/0.1/ambiance/js/fast-buttons.js"></script>
    <script src="/usr/share/ubuntu-html5-ui-toolkit/0.1/ambiance/js/core.js"></script>
    <script src="/usr/share/ubuntu-html5-ui-toolkit/0.1/ambiance/js/buttons.js"></script>
    <script src="/usr/share/ubuntu-html5-ui-toolkit/0.1/ambiance/js/dialogs.js"></script>
    <script src="/usr/share/ubuntu-html5-ui-toolkit/0.1/ambiance/js/page.js"></script>
    <script src="/usr/share/ubuntu-html5-ui-toolkit/0.1/ambiance/js/pagestacks.js"></script>
    <script src="/usr/share/ubuntu-html5-ui-toolkit/0.1/ambiance/js/tab.js"></script>
    <script src="/usr/share/ubuntu-html5-ui-toolkit/0.1/ambiance/js/tabs.js"></script>

    <!-- Cordova platform API access - Uncomment this to have access to the Cordova Javascript APIs -->
    <!-- NOTE:
         Make sure that you have imported the Cordova native runtime and JS libraries into your project first.
	 In order to do that, in QtCreator, select the "Add Cordova runtime to HTML5 project" menu item
         in Tools > Ubuntu.
      -->
    <script src="cordova/cordova.js"></script>

    <!-- Application script -->
    <script src="js/app.js"></script>
  </head>

  <body>

    <div data-role="mainview">

      <header data-role="header">
        <ul data-role="tabs">
          <li data-role="tabitem" data-page="mainpage">System Info</li>
        </ul>
      </header>

      <div data-role="content">

          <!-- The application main page -->

          <div data-role="tab" id="mainpage">

            <section data-role="list" id="info">
                <header class="large-font">System Info</header>
            </section>

          </div>

      </div>
      
    </div>
  </body>
</html>

这里我们定义了一个“System Info”的tab。它对应着"mainpage"。当它被点击的时候，对应的"mainpage"就会被打开。在“mainpage"中我们定义了一个section, 在section中，定义了一个list。我们为list也定义了一个叫做"System Info”的"header"。当然我么也可以定义更多的"header"。值得注意的是我们通过一下语句

    <script src="cordova/cordova.js"></script>

来加载Cordova API以使我们能够正常使用们。同时，

    <!-- Application script -->

    <script src="js/app.js"></script>

我们可以使用"app.js"来对我们的HTML进行操作。

３）怎么调试应用

当我们运行应用的时候，我们可以在"Application output"窗口看到如下的信息：

unity::action::ActionManager::ActionManager(QObject*):
	Could not determine application identifier. HUD will not work properly.
	Provide your application identifier in $APP_ID environment variable.
Using "/home/liuxg/cases/WebSysInfo/www" as working dir 
"file:///home/liuxg/cases/WebSysInfo/www/index.html" 
Using "/home/liuxg/cases/WebSysInfo/www" as working dir 
"file:///home/liuxg/cases/WebSysInfo/www/index.html" 
Inspector server started successfully. Try pointing a WebKit browser to http://192.168.199.228:9221

显然它告诉我们我们可以在Chrome浏览器中打开 http://192.168.199.228:9221地址查看我们所需要的信息。我们不妨在“app.js"文件里输入如下的句子

window.onload = function () {
    var UI = new UbuntuUI();
    UI.init();

    console.log("we are so glad to see it works!")

    // Add an event listener that is pending on the initialization
    //  of the platform layer API, if it is being used.
    document.addEventListener("deviceready", function() {
        if (console && console.log)
            console.log('Platform layer API ready');
    }, false);
};

运行程序，同时在Chrome中打开 http://192.168.199.228:9221。可以看到如下的画面：

我们可以在“Console”里看到我们需要的输出。必须注意的是，如果一个应用有两个同时运行的实例，那么最新的实例将不会有任何的输出。在Console里只能看到第一个实例的输出。当你运行第二个实例的时候，你可以在Application Output 窗口中看到如下的输出：

Couldn't start the inspector server on bind address "192.168.199.228" and port "9221". In case of invalid input, try something like: "12345" or "192.168.2.14:12345"

另外应用必须先启动，然后再看地址 http://192.168.199.228:9221。否则你将进不去。

４）加入JS代码实现Cordova API的调用

现在我们来修改项目中“app.js”文件来对UI进行改变。首先我们在"index.html"中加入如下的句子：

    <script src="/usr/share/ubuntu-html5-ui-toolkit/0.1/ambiance/js/list.js"></script>

这样，我们就可以在"app.js"中使用如下的句子来得到我们的list了：

    var info = UI.list('#info');

有了变量info，我们就可以向其中添加我们所需要的东西了。

处理window.onload事件

对于Web开发者来讲，window.onload事件并不陌生。当DOM被完全载入时，这个事件会被发生。这个事件对于处理一些需要在DOM完全载入紧接着执行一些代码。

window.onload = function ()　｛
....
}

处理deviceready事件

对于使用Cordova API的应用来说，我们需要使用deviceready事件来完成对Cordova API的使用。这个事件是用来告诉Cordova runtime已经准备好了可以使用了。一般来说，它的使用是这样的

/**
 * Wait before the DOM has been loaded before initializing the Ubuntu UI layer
 */
window.onload = function () {
    var UI = new UbuntuUI();
    UI.init();

    console.log("we are so glad to see it works!")

    var info = UI.list('#info');


    // Add an event listener that is pending on the initialization
    //  of the platform layer API, if it is being used.
    document.addEventListener("deviceready", function() {
        if (console && console.log)
            console.log('Platform layer API ready');

        info.append("Cordova version: " + device.cordova, null, null, null);
        info.append("Device model: " + device.model, null, null, null);
        info.append("Version: " + device.version, null, null, null);
        info.append("Platform: " + device.platform, null, null, null);
        info.append("UUID: " + device.uuid, null, null, null);
        info.append("Available: " + device.available, null, null, null);
        info.append("Screen width: " + screen.width);
        info.append("Screen height: " + screen.height);
        info.append("Colordepth: " + screen.colorDepth);
        info.append("UserAgent: " + navigator.userAgent);
    }, false);
};

这样我们的一个简单的应用就已经做好了。在Nexus 4上面我们可以看到如下的画面