我们发现在使用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,如果你的版本是:
[email protected]:~$ ls -altr /etc/alternatives/awk lrwxrwxrwx 1 root root 13 9月 27 2014 /etc/alternatives/awk -> /usr/bin/mawk [email protected]:~$
请按照如下的步骤来安装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
时间: 2024-10-13 03:01:02