如何在ExtJS 6中使用Fashion美化应用程序
在Ext JS 6,一个最大的改变就是框架合并,使用一个单一的代码库,就可以为每一种设备开发各具有良好体验的最好应用程序。它还带来了一种美化应用程序的新方式。
在本文,重点是Sencha Fashion。这是什么?该如何使用它呢?在未来陆续的教程中,将为你展示如何去创建一个极好的暗黑主题。
编译主题
Ext JS应用程序的主题使用的是SASS,它是一种动态编写CSS代码的方法。例如,可以在样式表中使用变量和运算。浏览器并不了解SASS,它只知道CSS,隐藏,这些SASS主题需要被编译为浏览器能理解的,生产用的CSS代码。在Ext JS应用程序中可以通过在Sencha Cmd运行以下命令来编译主题:
1.
sencha app build [development]
或
1.
sencha app watch [toolkit]
两者的区别在于watch会通过轮询来了解更新,并理解进行编译,而build编译只能手动执行一次。
在旧版本的Ext JS或Sencha Touch,SASS样式是在Ruby中编译的。在Windows,需要使用管理员权限来安装Ruby。一旦安装完成,就可以开始编译主题了。不过,在有大量代码库和高级主题的时候,就要花费大量的编译时间。
为了编译高级主题,有时候需要花费一分钟。然后,你不得不刷新浏览器窗口来测试主题以确保已正确设置SASS变量。之后还要一次次的重复此过程。要知道,这个过程是相当耗时间的。这也是为什么对Fashion感到高兴的原因。
Sencha Fashion是使用javascript来编译主题的,可以说这是超级的快。当在左边的显示器修改一行代码后,就可以右边的显示器看到变化了,就是这么快。不再需要等等编译(在服务器开始),也不再需要刷新浏览器窗口。
由于Fashion使用的是javascript,因而有更多优点。例如,可以在Fashion之上进行扩展并创建自己的样式功能(类似SASS功能),还能调试样式表代码。
不过,最大的得益还是可以在开发机器上设计主题。要实现这个,只需要在命令行运行sencha app watch并在URL中添加以下参数:
1.
?platformTags=fashion:
true
开始编译
下面来尝试下使用Fashion来编译一个主题。首先,下载Ext JS 6。这已经包含了SDK。还需要下载Sencha Cmd 6。
安装好命令行工具后,在机器上解压Ext JS 6框架包(zip)。打开命令行提示符并通过命令行导航到框架文件夹。在Ext6文件夹,输入以下命令来创建第一个sencha通用应用程序:
ext> sencha generate app MyApp ../指定的项目路径
在IDE或编辑器中打开新的应用程序项目。要注意classic和modern这两个新的文件夹。这是用来区分工具包的文件夹。共享代码要放在app文件夹内。classic工具包文件夹包含了旧版本(桌面)视图,而modern工具包文件夹则包含了现代touch的视图。对于两个工具包来说,DOM是不同的,因而样式也会有些许不同。这也是为什么工具包文件夹会有一个src子文件夹用来放置javascript代码,会有一个sass文件夹来放置指定的样式的原因。
打开app.json文件并滚动到“builds”配置:
01.
"builds"
: {
02.
"classic"
: {
03.
"toolkit"
:
"classic"
,
04.
"theme"
:
"theme-triton"
05.
},
06.
07.
"modern"
: {
08.
"toolkit"
:
"modern"
,
09.
"theme"
:
"theme-neptune"
10.
}
11.
},
要注意这里的每一个build配置,他们都有自己的工具包和主题。对于classic配置,将使用新的海卫一(Triton)主题,而modern工具包将使用海王星(Neptune)主题(原名是Sencha Touch默认主题)。
现在不需要对这个进行修改。下面来创建两个新文件:
1.
classic/sass/
var
/Application.scss
2.
modern/sass/
var
/Application.scss
现在,打开Sencha本地Web服务器,并让Sencha轮询样式表的改变。
在通用应用程序的文件夹中,运行以下命令:
项目文件夹> sencha app watch classic
如果Cmd安装正确,该命令会正确运行。现在内置的sencha服务器将等待更新。应用程序默认可通过http://localhost:1841来访问。
假如运行的端口是1841,则在浏览器输入以下地址来打开应用程序:
1.
http:
//localhost:1841/?platformTags=fashion:true
等待应用程序加载完成。主题第一次编译,需要一点时间。一旦看到应用程序,在编辑器打开以下文件:
1.
classic/sass/
var
/Application.scss
如果有两个显示器,将浏览器窗口拖到其他显示器,让编辑器在一个显示器,而浏览器在另一个显示器。
接下来将样式表的总体样式修改为黑色。编写以下全局变量:
1.
$base-color:
#000;
等一会,就可以在浏览器中看到更改后的样式了。不仅标题已更改为黑色,其他扩展自全局基本颜色的样式都已经变成黑色了。,例如,双击网格,会看到告警窗口也已经改变了。
修改$base-color的值,试一下其他颜色效果。例如20%变亮的红色:
1.
$base-color: lighten(red, 20%);
当然,现在也可以使用这种方式来修改modern工具包的主题。运行以下命令:
1.
sencha app watch modern
在浏览器打开以下url将打开modern工具包:
1.
http:
//localhost:1841/?toolkit=modern&platformTags=fashion:true
修改以下文件:
1.
modern/sass/
var
/Application.scss
这相当快!这就是Fashion,编译是在Javascript下运行的。所有的效果都是在这个引擎下产生的。Sencha Cmd在后台运行的是PhantomJS。它是一个没有显示的浏览器,可以在命令行中运行。它可以运行应用程序,编译主题,以及将它推送给一个大的javascript函数。每一次修改,都会让javascript去修改DOM中的样式。
敬请期待未来的主题教程。请把你们对于Fashion的想法告诉我们。这个可以在Ext JS 6论坛中提交你的问题。
作者: Lee Boonstra
原文: https://www.sencha.com/blog/how-to-style-apps-with-fashion-in-ext-js-6/
译者: 黄灯桥
译文: http://blog.csdn.net/tianxiaode/article/details/46829085
如何在ExtJS 6中使用Fashion美化应用程序的更多相关文章
- 【翻译】如何在Ext JS 6中使用Fashion美化应用程序
原文:How to Style Apps with Fashion in Ext JS 6 在Ext JS 6,一个最大的改变就是框架合并,使用一个单一的代码库,就可以为每一种设备开发各具有良好体验的 ...
- 如何在 Visual Studio 中使用 Git 同步代码到 CodePlex
开源社区不管在国内还是国外都很火热,微软也曾因为没有开源而倍受指责,但是随着 .Net framework.ASP.Net MVC等框架的逐渐开源,也让大家看到了微软开源的步伐.CodePlex 则是 ...
- 如何在Linux服务器中隐藏PHP版本
通常,大多数默认设置安装的web服务器存在信息泄露,这其中之一就是PHP.PHP 是如今流行的服务端html嵌入式语言(之一?).在如今这个充满挑战的时代,有许多攻击者会尝试发现你服务端的漏洞.因此, ...
- [Laravel-Swagger]如何在 Laravel 项目中使用 Swagger
如何在 Laravel 项目中使用 Swagger http://swagger.io/getting-started/ 安装依赖 swagger-php composer require zirco ...
- 如何在win7系统中安装redis
转载于:http://www.itxuexiwang.com/a/shujukujishu/redis/2016/0216/92.html?1455871954 如何在win7系统中安装redis ...
- 如何在 ETL 项目中统一管理上百个 SSIS 包的日志和包配置框架
一直准备写这么一篇有关 SSIS 日志系统的文章,但是发现很难一次写的很完整.因为这篇文章的内容可扩展的性太强,每多扩展一部分就意味着需要更多代码,示例和理论支撑.因此,我选择我觉得比较通用的 LOG ...
- 如何在window Form中使用Font Awesome?
随着技术的发展,web上以前的图片按钮现在逐步换成了图标字体,这些图标字体是矢量的,矢量图意味着每个图标都能在所有大小的屏幕上完美呈现,可以随时更改大小和颜色,而且不失真,真心给人一种“高大上”的感觉 ...
- 如何在JDK1.8中愉快地处理日期和时间
如何在JDK1.8中愉快地处理日期和时间 JDK1.8新增了LocalDate和LocalTime接口,为什么要搞一套全新的处理日期和时间的API?因为旧的java.util.Date实在是太难用了. ...
- ExtJs 4 中的MVC应用架构
一.ExtJs 4.x MVC模式的原理与作用 大规模客户端应用通常不好实现不好组织也不好维护,因为功能和人力的不断增加,这些应用的规模很快就会超出掌控能力,ExtJS4带来了一个新的应用架构,不但可 ...
随机推荐
- Makefile学习(1) arm-linux-ld arm-linux-objcopy arm-linux-objdump
记录自己所学的点点滴滴O(∩_∩)O哈哈~ makefile: link.bin: start.o main.o arm-linux-ld -Tlink.lds -o link.elf $^ arm- ...
- git 上传
首先明白两个点: git clone diveinedu@192.168.1.254:~/YGYSocket 从服务器上下载项目 divein 服务器密码 nc -l -t 2000 socket ...
- 多层CCLayer的touch冲突解决
一般通过layer. setTouchPriority()方法来设置 touch优先级,数值越小,优先级越高,但有时多人开发过程中,多层layer叠在一起,无法通过setTouchPrority()来 ...
- What books does Bjarne Stroustrup suggest to master C++?
QUESTION : What books does Bjarne Stroustrup suggest to master C++? ANSWER: A Tour of C++ is a quick ...
- sdut 2153 Clockwise (2010年山东省第一届ACM大学生程序设计竞赛)
题目大意: n个点,第i个点和第i+1个点可以构成向量,问最少删除多少个点可以让构成的向量顺时针旋转或者逆时针旋转. 分析: dp很好想,dp[j][i]表示以向量ji(第j个点到第i个点构成的向量) ...
- iOS学习笔记---oc语言第六天
Block .数组高级 block本质上就是匿名函数(没有名称的函数) block语法和函数指针很相似 回顾函数 函数:C语⾔中,实现某一类功能的代码段. 完整的函数包含两部分:函数声明.函数定义 函 ...
- dedecms调用子栏目内容,缩略图,以及栏目名字
织梦后台栏目页默认是没有添加缩略图的选项的,所以首先我们要调整后台提交表单使界面出现上传图片的地方,如下图所示: 织梦后台默认是没有栏目缩略图选项的,所以首先你需要从网上下载对应需要修改的文件,从 ...
- Docker简介
Docker简介 1.容器虚拟化,比传统的虚拟化轻量 2.2013年出现,发展非常迅猛 3.Redhat在6.5版本开始支持docker 4.使用go语言开发,基于apache2.0协议 5.开源原件 ...
- Codeforces Round #141 (Div. 2)
A. Is your horseshoe on the other hoof? 模拟题意. B. Two Tables 暴力枚举\(x,y\). C. Fractal Detector 显然,判断图形 ...
- HDU 2083 简易版之最短距离 --- 水题
HDU 2083 简易版之最短距离 /* HDU 2083 简易版之最短距离 */ #include <cstdio> #include <algorithm> using n ...