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

浏览数：20 / 时间：2015年06月09日

我们发现在使用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脚本

我们可以在地址：

http://bazaar.launchpad.net/~dbarth/ubuntu-html5-theme/cmdline-tool/download/head:/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/”被剔除了，我们使用本地应用自己所带的文件。

在本应用中所用的源码在地址：git clone https://gitcafe.com/ubuntu/html5test.git

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

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