We found that when creating an HTML5 app using the SDK, the template app generated the following code:

\

    <link href="/ usr/share/ubuntu - HTML 5 - the UI toolkit / 0.1 / ambiance/CSS/appTemplate CSS" rel="stylesheet" type="text/css" />    
    <script src="/ usr/share/ubuntu - HTML 5 - the UI toolkit / 0.1 / ambiance/js/fast - buttons. Js." "></script>
    <script src="/ usr/share/ubuntu - HTML 5 - the UI toolkit / 0.1 / ambiance/js/core. Js." "></script>
    <script src="/ usr/share/ubuntu - HTML 5 - the UI toolkit / 0.1 / ambiance/js/buttons. Js." "></script>
    <script src="/ usr/share/ubuntu - HTML 5 - the UI toolkit / 0.1 / ambiance/js/page. Js." "></script>
    <script src="/ usr/share/ubuntu - HTML 5 - the UI toolkit / 0.1 / ambiance/js/pagestacks js." "></script>
    <script src="/ usr/share/ubuntu - HTML 5 - the UI toolkit / 0.1 / ambiance/js/popovers. Js." "></script>
    <script src="/ usr/share/ubuntu - HTML 5 - the UI toolkit / 0.1 / ambiance/js/list. Js." "></script>
    <script src="/ usr/share/ubuntu - HTML 5 - the UI toolkit / 0.1 / ambiance/js/toolbars. Js." "></script>
    <script src="/ usr/share/ubuntu - HTML 5 - the UI toolkit / 0.1 / ambiance/js/tabs. Js." "></script>
    <script src="/ usr/share/ubuntu - HTML 5 - the UI toolkit / 0.1 / ambiance/js/shape. Js." "></script>
Copy the code


\

The above code shows that the same application may behave differently when relying on the ambiance files provided by the system on different platforms. To make our HTML display the same across different platforms, we can use a tool to do this.

\

1) First let’s check our AWK

\

Type the following command in the Shell:

\

 ls -altr /etc/alternatives/awk
Copy the code


\

\

In my place it appears as GAWK if your version is:

\

liuxg@liuxg:~$ls -altr /etc/alternatives/awk LRWXRWXRWX 1 root root 13 9月 27 2014 /etc/alternatives/awk -> /usr/bin/mawk liuxg@liuxg:~$Copy the code

Please follow these steps to install GWAk:

\

$sudo apt-get install gawk
Copy the code

\

2) Download the Ubuntu-HTML5 theme script

\

We can do it at the address:

\

http://bazaar.launchpad.net/~dbarth/ubuntu-html5-theme/cmdline-tool/download/head:/ubuntuhtml5theme-20150319111737-5ouco x80hsx3rmj1-1/ubuntu-html5-themeCopy the code

Download the Ubuntu-html5-theme script and modify it to an executable file:

\

$chmod +x ubuntu-html5-theme
Copy the code

We can place the script in any directory where it can be executed, such as /usr/local/bin/, so that the file can be executed anywhere as a system command.

\

\

3) Build our HTML5 app

We can follow the steps of our SDK to create our HTML5 app and access the root directory of our HTML5 app. Type the following command:

\

# To list the available HTML5 toolkit / theme releases: $ubuntu-html5-theme list Trunk 14.10 14.04 13.10 RTM-14.09 # To install a Toolkit release in the current project Directory $Ubuntu-html5-Theme Install 14.10 Downloading Release 14.10... Branched 177 revisions. # To convert the index.html file of an existing project $ ubuntu-html5-theme convertCopy the code

When we type in the “Ubuntu-html5-theme install 14.10” command, a subdirectory called “Ambiance” is generated in the root directory of our project:

\

\

\

\

\

\

When we typed in the “ubuntu-html5-theme convert” command, the following lines in our index. HTML file changed:

\

    <script src="ambiance/js/fast-buttons.js"></script>
    <script src="ambiance/js/core.js"></script>
    <script src="ambiance/js/buttons.js"></script>
    <script src="ambiance/js/dialogs.js"></script>
    <script src="ambiance/js/page.js"></script>
    <script src="ambiance/js/pagestacks.js"></script>
    <script src="ambiance/js/tab.js"></script>
    <script src="ambiance/js/tabs.js"></script>
Copy the code

We can see that the “/usr/share/ubuntu-html5-uI-toolkit /0.1/” at the beginning of the article has been removed and we use the files that come with the native application.

\

The source code used in this application is at the address: github.com/liu-xiao-gu…

\

\

\