为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,如果你的版本是:

[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

为HTML5应用创建独立于平台的Theme的相关文章

如何使用phpMyAdmin创建独立数据库用户

一般需要建多个网站,需要多个数据库默认,但都是使用root账号管理管理所有数据库.这留下了很大的隐患,如果其中一个网站出问题被获取到root密码,则可以修改或删除您所有的数据库.建议对每个数据库都创建一个独立的账号管理,而且此账号只对该数据库有权限 .使用命令创建独立用户对不熟悉MySQL的用户来说比较困难,这里给大家演示使用phpMyadmin实现. 一.操作前的准备 可以正常使用的主机,windows,Linux都可以 装有phpMyadmin的PHP,MySQL环境 root管理账号密码

python创建独立虚拟工作环境方法

前言: python的组件非常之多,有时这个项目依赖m个组件,有时那个项目依赖n个组件,时间一长很容易导致系统python环境的臃肿不堪,由此便有了virtualenv.virtualenvwrapper的存在价值. 使用方法: 摘自-- http://www.jianshu.com/p/3abe52adfa2b virtualenv用于创建独立的Python环境,多个Python相互独立,互不影响,它能够: 在没有权限的情况下安装新套件 不同应用可以使用不同的套件版本 套件升级不影响其他应用.

创建独立的Firefox profile

使用Webdriver进行下载操作时,通常需要指定下载路径,于是就需要设置浏览器的profile. 为什么要创建独立的Firefox Profile?独立的Firefox Profile配置文件,能为你在Firefox的使用中带来不少方便. 独立的Firefox Profile与普通的“Profile”分离开来,不至于混乱 可以让两个Profile同时运行 拥有两个Profile能让你以两个不同的帐号同时登陆Google 比较关键词在个性化与普通的Profile中的搜索情况 通过代理服务运行一个

使用github pages 创建独立的博客(转载)

?Github很好的将代码和社区联系在了一起,于是发生了很多有趣的事情,世界也因为他美好了一点点.Github作为现在最流行的代码仓库,已经得到很多大公司和项目的青睐,比如jQuery.Twitter等.为使项目更方便的被人理解,介绍页面少不了,甚至会需要完整的文档站,Github替你想到了这一点,他提供了Github Pages的服务,不仅可以方便的为项目建立介绍站点,也可以用来建立个人博客. Github Pages有以下几个优点: 轻量级的博客系统,没有麻烦的配置 使用标记语言,比如Mar

基于 HTML5 的工业互联网云平台监控机房 U 位

前言 机柜 U 位管理是一项突破性创新技术--继承了 RFID 标签(电子标签)的优点的同时,完全解决了 RFID 技术(非接触式的自动识别技术)在机房 U 位资产监控场应用景中的四大缺陷,采用工业互联网云平台监控机房 U 位的方法,具有高可靠性.高准确性.精准定位.免维护的特点,满足了 U 位级实时监控.智能运维闭环管理的需求.设备上架.下架与迁移,自动变更和实时记录,(用户评价):部署工业互联网云平台监控机房 U 位后节省了 99% 的登记变更记录的时间,而且实现了变更后数据 100% 的准

Java创建极速飞艇平台出租线程的三种方式

(1)定义Thread类的子类,极速飞艇平台出租[企鹅21717-93408]并重写该类的run方法,该run方法的方法体就代 表了线程要完成的任务.因此把run()方法称为执行体.(2)创建Thread子类的实例,即创建了线程对象.(3)调用线程对象的start()方法来启动该线程. 二.通过Runnable接口创建线程类(1)定义runnable接口的实现类,并重写该接口的run()方法,该run()方法的方法体是该线程的线程执行体.(2)创建 Runnable实现类的实例,并依此实例作为T

[Windows]_[初级]_[创建独立子进程和读取子进程的输出]

场景: 1.  有一些外部工具命令需要通过程序调用,比如启动服务器或者使用网络命令获取输出. 2.  使用了匿名管道CreatePipe获取子进程输出. 参考: 1.  MSDN的主题<Creating a Child Process with Redirected Input and Output>. 2.  <Windows核心编程>进程章节. 代码: #include "test_shellrun.h" #include <stdlib.h>

HTML5 Canvas ( 创建图形对象 ) createImageData

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>canvas</title> <script type="text/javascript" src="../js/jQuery.js"></script> <style type="text/css">

HTML5实战 文摘 第二章 HTML5用于创建表单的输入小部件 数据绑定以及数据验证

HTML5表单在原有表单特性的基础上增加了一些比较便捷的特性,使得我们实现一些常用的表单的小部件.输入类型.输入验证不再那么大费周章.上一篇文章提到了HTML5实现的几种新的输入类型,现在我们更加详尽的了解HTML5的表单产生的新特性和功能. 1. 输入类型和输入属性 菜鸟教程上给出了HTML5新增加的input输入类型,可以在上面尝试一下不同类型的样子,基本可以满足日常开发需求了.类型不同会照成什么内在差异呢?主要有三点,首先,浏览器会根据输入类型进行基本的数据校验,例如type="email