Create an HTML 5 Web application on the Ubuntu touch __html

We know that we can create qt/qml apps on the Ubuntu touch, and we can also use the Ubuntu SDK to create some cross-platform HTML 5 apps. These should be created on the Ubuntu Touch SDK, but can also be modified to run on other platforms. Here's a quick overview of how to create and deploy in the SDK.

On the Ubuntu touch, we can use some of the tags from HTML 5, our apps, and we can use the Cordova API interface to extend our functionality. Read more and you can read our official website

HTML5 Guide Cordova Guide You can find more information about these APIs on the Ubuntu developer website: http://developer.ubuntu.com/api/html5/development/

1) to create a basic framework
First we open our SDK and see the following interface:



Next we can create an application called "Websysinfo". The purpose of this application is to display some information about the system.


Immediately follow the instructions in the SDK to complete the remaining steps to create a most basic framework application. Since the application of HTML 5 is cross-platform, we can run this most basic application directly on the computer, or we can deploy it directly to the phone. If you are not able to run your application correctly at this step, please check my SDK installation guide. If you run the program correctly, you can see the following screen:




So far, we have completed a basic application. Let's learn how to add Cordova APIs to our applications to extend some of our functionality.
2) Add the Cordova API to the application we know that the Cordova API has many useful features. Can be more rich in our application. Now let's learn how to add the Cordova API to our application. First, we select our item and select Menu "Tool" ==> "Ubuntu" ==> "Add Cordova Runtime to HTML 5 project".


This time the application starts downloading the latest Cordova API package and installs it in our application. For some reason, you need to close the project (the final version should fix the problem) and reopen the project to see the directory structure that was updated in the project bar.



To use these APIs, we can make the following modifications to the code for "index.html".

<! DOCTYPE html>  

Here we define a "System Info" tab. It corresponds to the "mainpage". When it is clicked, the corresponding "MainPage" will be opened. In "mainpage" we define a section, in which a list is defined. We also defined a header called "System Info" for the list. Of course I can also define more "header". It is worth noting that we passed the statement

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

To load the Cordova API so that we can use them properly. While

 
    <!--application Script-->
 
    <script src= "Js/app.js" ></script>
 

We can use "app.js" to manipulate our HTML.

 

 
3 How to debug the applicationWhen we run the application, we can see the following information in the "Application Output" window:

 
Unity::action::actionmanager::actionmanager (qobject*):
	could not determine application identifier. HUD would not work properly.
	Provide your application identifier in $APP _id environment.
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
 

Apparently, it tells us that we can open it in the Chrome browser.
http://192.168.199.228:9221Address to view the information we need. We may as well enter the following sentences in the "app.js" file

 
Window.onload = function () {
    var UI = new Ubuntuui ();
    Ui.init ();

    Console.log ("We are so glad to the It works!")

    Add an event listener this
    is pending to the initialization//of  the platform layer API, if it is being used.< C6/>document.addeventlistener ("Deviceready", function () {
        if (console && console.log)
            console.log (' Platform layer API ready ');
    }, false;

 

 

Run the program and open it in chrome
http://192.168.199.228:9221. You can see the following screen:

 

 

We can see the output we need in the Console. It is important to note that if an application has two instances running concurrently, the latest instance will not have any output. Only the output of the first instance is visible in the console. When you run the second instance, you can see the following output from the Application Output window:

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

In addition, the application must start first and then look at the address
http://192.168.199.228:9221. Or you will not get in.

 
4) Add JS code to implement Cordova API callNow let's modify the "App.js" file in the project to make changes to the UI. First we add the following sentences to "index.html":

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

In this way, we can use the following sentences in "App.js" to get our list:

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

With the variable info, we can add what we need to it.

 
Handling Window.onload EventsFor web developers, the Window.onload event is no stranger. This event occurs when the DOM is fully loaded. This event executes some code shortly after the DOM is fully loaded.

 
Window.onload = function () {
...
}
 
Handling Deviceready EventsFor applications using the Cordova API, we need to use the Deviceready event to complete the use of the Cordova API. This event is used to tell Cordova Runtime is ready to use. In general, it's used like this

 
/** * Wait before the DOM has been loaded before initializing the Ubuntu UI layer/window.onload = function () {V
    Ar UI = new Ubuntuui ();

    Ui.init ();

    Console.log ("We are so glad to the It works!")


    var info = ui.list (' #info ');
    Add an event listener this is pending to the initialization//of the platform layer API, if it is being used. Document.addeventlistener ("Deviceready", function () {if (console && console.log) console.lo

        G (' 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);
 };
 

So one of our simple applications has been done. On Nexus 4, we can see the following picture

 

 

So far, one of our most basic HTML 5 apps has been done. The source code can be found at the address below.

BZR Branch Lp:~liu-xiao-guo/debiantrial/websysinfo