为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在不同的平台上显示相同,我们可以使用一个工具来完成。

1)首先我们来检查我们的awk

在Shell中打入如下的命令:

ls -altr /etc/alternatives/awk

在我的地方显示为gawk,如果你的版本是:

liuxg@liuxg:~$ ls -altr /etc/alternatives/awklrwxrwxrwx 1 root root 13 9月 27 2014 /etc/alternatives/awk -> /usr/bin/mawkliuxg@liuxg:~$ 请按照如下的步骤来安装gwak:

$sudo apt-get install gawk

2)下载Ubuntu-html5-theme脚本

我们可以在地址:

~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 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 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 clonehttps://gitcafe.com/ubuntu/html5test.git

一定要记得挺身而出,即便帮不了忙,安慰也是最大的支持.

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

相关文章:

你感兴趣的文章:

标签云: