关闭

【翻译】如何在Ext JS 6中使用Fashion美化应用程序

标签: Ext-JS主题Fashion样式
4056人阅读 评论(0) 收藏 举报
分类:
原文:How to Style Apps with Fashion in Ext JS 6

在Ext JS 6,一个最大的改变就是框架合并,使用一个单一的代码库,就可以为每一种设备开发各具有良好体验的最好应用程序。它还带来了一种美化应用程序的新方式。

在本文,重点是Sencha Fashion。这是什么?该如何使用它呢?在未来陆续的教程中,将为你展示如何去创建一个极好的暗黑主题。

编译主题

Ext JS应用程序的主题使用的是SASS,它是一种动态编写CSS代码的方法。例如,可以在样式表中使用变量和运算。浏览器并不了解SASS,它只知道CSS,隐藏,这些SASS主题需要被编译为浏览器能理解的,生产用的CSS代码。在Ext JS应用程序中可以通过在Sencha Cmd运行以下命令来编译主题:

sencha app build [development]

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中添加以下参数:

?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”配置:

    "builds": {
        "classic": {
            "toolkit": "classic",
            "theme": "theme-triton"
        },

        "modern": {
            "toolkit": "modern",
            "theme": "theme-neptune"
        }
    },

要注意这里的每一个build配置,他们都有自己的工具包和主题。对于classic配置,将使用新的海卫一(Triton)主题,而modern工具包将使用海王星(Neptune)主题(原名是Sencha Touch默认主题)。

现在不需要对这个进行修改。下面来创建两个新文件:

classic/sass/var/Application.scss
modern/sass/var/Application.scss

现在,打开Sencha本地Web服务器,并让Sencha轮询样式表的改变。

在通用应用程序的文件夹中,运行以下命令:

项目文件夹> sencha app watch classic

如果Cmd安装正确,该命令会正确运行。现在内置的sencha服务器将等待更新。应用程序默认可通过http://localhost:1841来访问。

假如运行的端口是1841,则在浏览器输入以下地址来打开应用程序:

http://localhost:1841/?platformTags=fashion:true

等待应用程序加载完成。主题第一次编译,需要一点时间。一旦看到应用程序,在编辑器打开以下文件:

classic/sass/var/Application.scss

如果有两个显示器,将浏览器窗口拖到其他显示器,让编辑器在一个显示器,而浏览器在另一个显示器。

接下来将样式表的总体样式修改为黑色。编写以下全局变量:

$base-color: #000;

等一会,就可以在浏览器中看到更改后的样式了。不仅标题已更改为黑色,其他扩展自全局基本颜色的样式都已经变成黑色了。,例如,双击网格,会看到告警窗口也已经改变了。

修改$base-color的值,试一下其他颜色效果。例如20%变亮的红色:

$base-color: lighten(red, 20%);

{.aligncenter}

当然,现在也可以使用这种方式来修改modern工具包的主题。运行以下命令:

sencha app watch modern

在浏览器打开以下url将打开modern工具包:

http://localhost:1841/?toolkit=modern&platformTags=fashion:true

修改以下文件:

modern/sass/var/Application.scss

这相当快!这就是Fashion,编译是在Javascript下运行的。所有的效果都是在这个引擎下产生的。Sencha Cmd在后台运行的是PhantomJS。它是一个没有显示的浏览器,可以在命令行中运行。它可以运行应用程序,编译主题,以及将它推送给一个大的javascript函数。每一次修改,都会让javascript去修改DOM中的样式。

敬请期待未来的主题教程。请把你们对于Fashion的想法告诉我们。这个可以在Ext JS 6论坛中提交你的问题。

作者: Lee Boonstra
Lee is a sales engineer at Sencha in Europe. She’s located in Amsterdam and has experience in both front-end and back-end development. Lee spends her spare time developing web and mobile apps. She also wrote a book for O’Reilly: Hands-on Sencha Touch 2.
0
1
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

extjs的css效果及与传统布局结合下的panel的使用及表单提交

一、美化表单:ExtJS自带的CSS效果可以让表单非常漂亮,在使用前先将ext-all.css文件导入页面,然后加入以下代码 div class="x-box-ml">        div c...
  • i_am_wangzg
  • i_am_wangzg
  • 2008-07-19 15:34
  • 4265

Ext-Desktop Web桌面项目 Leetop 开发<持续更新中....>

前言 做了Ext桌面项目这么久了,感受到了Ext开发的方便也看到了Ext开发的短板,Ext可能更是适应于企业内部系统更好点,对于互联网开发确实捉襟见肘,也可能是对于Ext的优化还没有深入,这个项目也只...
  • leecho571
  • leecho571
  • 2012-11-21 11:20
  • 35005

Ext JS 6开发实例(三) :主界面设计

在上文中,已经将CMD创建的应用程序导入到项目里了,而且也看到默认的主界面了,今天的主要工作就是修改这个主界面,以符合项目的需要。
  • tianxiaode
  • tianxiaode
  • 2016-05-26 17:10
  • 10598

Extjs之icon和iconCls的图解写法,通俗易懂

icon:在文字下面的背景图。直接写路径即可。 效果图: 代码如下: { text:'btn1', xtype:'button',...
  • zhang6622056
  • zhang6622056
  • 2011-12-27 17:07
  • 25221

Extjs 使用icon属性添加图标 使用cls设置字体样式 使用iconCls设置图标宽高

Extjs 使用icon属性添加图标 使用cls设置字体样式 使用iconCls设置图标宽高
  • lusile82704774
  • lusile82704774
  • 2011-05-29 00:18
  • 7150

最完美的select下拉框美化

很多人为select的诸多不完善而头痛,如无法自定义样式、IE6中无法被浮动层遮住等等。下面介绍一款堪称最完美的下拉框组件。感兴趣的可以从最后的链接地址下载代码研究与交流。   特点1:美化的并且...
  • jianhua0902
  • jianhua0902
  • 2012-10-06 09:31
  • 6628

JQuery EasyUi之界面设计——前言与界面效果(一)

 如果冯巩的开场白是“观众朋友们,我想死你们了”,那么我的开场白是“最近一直很忙,很久没有发文了”。 前面说过了EXT.NET,这里顺便再说说JQuery EasyUI。为啥我会选择JQu...
  • wilsonke
  • wilsonke
  • 2014-09-09 15:38
  • 10548

[Ext JS 6 By Example 翻译] 第1章 – 入门指南

转载自:http://www.jeeboot.com/archives/1211.html 前言 本来我是打算自己写一个系列的 ExtJS 6 学习笔记的,因为 ExtJS 6 目前的中文学习资料还...
  • lovelyelfpop
  • lovelyelfpop
  • 2016-12-27 11:11
  • 2914

【翻译】在Ext JS 5应用程序中如何使用路由

Ext JS 5是一个重要的发布版本,它提供了许多新特性来创建丰富的、企业级的Web应用程序。MVVM和双向数据绑定为开发人员承担了大量的繁重工作。在Ext JS 5种,另一个新特性就是路由,它可以在...
  • tianxiaode
  • tianxiaode
  • 2014-06-18 14:54
  • 5106

【翻译】使用Sencha Ext JS 6打造通用应用程序

在Sencha和整个Ext JS团队的支持下,我很高兴能跟大家分享一下有关Sencha Ext JS 6的更多细节。该版本向前迈出了一大步,支持使用一个单一的代码库来开发基于桌面、平板和智能手机的通用...
  • tianxiaode
  • tianxiaode
  • 2015-07-07 18:23
  • 8118
    个人资料
    • 访问:1570326次
    • 积分:17816
    • 等级:
    • 排名:第620名
    • 原创:164篇
    • 转载:28篇
    • 译文:101篇
    • 评论:2192条
    交流QQ群
    391747779
    193238033
    博客专栏
    《Ext JS 6.2实战》
    《Ext JS权威指南》
    《Sencha Touch实战》
    《Ext JS 4.2 实战》
    文章分类
    最新评论