我們知道在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>
<script src="cordova/cordova.js"></script>
<!-- Application script -->
<script src="js/app.js"></script>
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
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);};
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"
<script src="/usr/share/ubuntu-html5-ui-toolkit/0.1/ambiance/js/list.js"></script>
var info = UI.list('#info');
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);};
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
