为HTML5应用创建独立于平台的Theme

独立于平台的Theme"/>

为HTML5应用创建独立于平台的Theme

我们发现在使用SDK创建HTML5应用的时候，模版应用会产生如下的代码：

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

上述代码显示，当我们的应用在不同的平台上依赖于系统所提供ambiance文件，同样的应用可能会有不同的表现形式。为了使得我们的HTML在不同的平台上显示相同，我们可以使用一个工具来完成。

１）首先我们来检查我们的awk

在Shell中打入如下的命令：

 ls -altr /etc/alternatives/awk

在我的地方显示为gawk，如果你的版本是：

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

请按照如下的步骤来安装gwak:

$sudo apt-get install gawk

2）下载Ubuntu-html5-theme脚本

我们可以在 地址：

:/ubuntuhtml5theme-20150319111737-5oucox80hsx3rmj1-1/ubuntu-html5-theme

下载ubuntu-html5-theme脚本，并把它修改为可以执行的文件：

$chmod +x ubuntu-html5-theme

我们可以把这个脚本放到任何一个可以被执行的目录中，比如/usr/local/bin/,这样这个文件可以在任何一个地方就像一个系统的命令一样来执行.

3）创建我们HTML5应用

我们可以按照我们的SDK的步骤来创建我们的HTML5应用，并进入我们的HTML5应用的根目录。打入如下的指令：

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

当我们打入“ubuntu-html5-theme install 14.10”命令后，我们的项目的根目录下会产生一个叫做“ambiance”的子目录：





当我们打入“ubuntu-html5-theme convert”命令后，我们的index.html文件中的如下行发生变化：

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

我们可以看到在文章一开始中的“/usr/share/ubuntu-html5-ui-toolkit/0.1/”被剔除了，我们使用本地应用自己所带的文件。
在本应用中所用的源码在地址：