Create platform-independent theme for HTML5 applications

We found that when using the SDK to create a HTML5 application, the template application would produce the following code:

    <link href= "/usr/share/ubuntu-html5-ui-toolkit/0.1/ambiance/css/apptemplate.css" rel= "stylesheet" type= "text/    CSS "/> <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/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/popovers.js "></script> <script src="/usr/share/ Ubuntu-html5-ui-toolkit/0.1/ambiance/js/list.js "></script> <script src="/usr/share/ Ubuntu-html5-ui-toolkit/0.1/ambiance/js/toolbars.js "></script> <script src="/usr/share/ Ubuntu-html5-ui-toolkit/0.1/amBiance/js/tabs.js "></script> <script src="/usr/share/ubuntu-html5-ui-toolkit/0.1/ambiance/js/ Shape.js "></script>

The code above shows that when our application relies on different platforms for the ambiance file provided by the system, the same application may have different representations. To make our HTML appear the same on different platforms, we can use a tool to do it.

1) First, we'll check our awk.
In the shell, enter the following command:

Ls-altr/etc/alternatives/awk

Show in my place as gawk, if your version is:

[Email protected]:~$ ls-altr/etc/alternatives/awklrwxrwxrwx 1 root root  September 27  

Please follow the steps below to install Gwak:

$sudo Apt-get Install Gawk

2) Download Ubuntu-html5-theme script
We can at address:

http://bazaar.launchpad.net/~dbarth/ubuntu-html5-theme/cmdline-tool/download/head:/ Ubuntuhtml5theme-20150319111737-5oucox80hsx3rmj1-1/ubuntu-html5-theme

Download the Ubuntu-html5-theme script and modify it to a file that can be executed:

$chmod +x Ubuntu-html5-theme

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

3) Create our HTML5 application we can follow the steps of our SDK to create our HTML5 application and enter the root directory of our HTML5 application. Enter the following command:

# to list the available HTML5 toolkit/theme releases:$ ubuntu-html5-theme listtrunk14.1014.0413.10rtm-14.09# to install A toolkit release in the current project directory$ ubuntu-html5-theme install 14.10Downloading release 14.10...Branched 1 revisions.# to convert the index.html file of an existing project$ ubuntu-html5-theme convert

When we enter the "Ubuntu-html5-theme install 14.10" command, a subdirectory called "ambiance" is generated under the root of our project:





When we enter the "ubuntu-html5-theme convert" command, the following line in our index.html file changes:

    <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>

We can see that in the beginning of the article "/USR/SHARE/UBUNTU-HTML5-UI-TOOLKIT/0.1/" was removed, we use the local application of their own files.
The source code used in this application is in address: Git clone https://gitcafe.com/ubuntu/html5test.git

Create platform-independent theme for HTML5 applications