原文:如何与时尚风格应用在Ext JS 6
<人力资源/>
在Ext JS 6,一个最大的改变就是框架合,并使用一个单一的代码库,就可以为每一种设备开发各具有良好体验的最好应用程序。它还带来了一种美化应用程序的新方式。
在本文,重点是Sencha时尚。这是什么?该如何使用它呢?在未来陆续的教程中,将为你展示如何去创建一个极好的暗黑主题。
编译主题
Ext JS应用程序的主题使用的是萨斯,它是一种动态编写CSS代码的方法,例如,可以在样式表中使用变量和运算。浏览器并不了解SASS,它只知道 CSS,隐藏,这些SASS主题需要被编译为浏览器能理解的,生产用的CSS代码。在Ext JS应用程序中可以通过在Sencha Cmd运行以下命令来编译主题:
sencha app build [开发]
或
sencha app watch [工具箱]
两者的区别在于手表会通过轮询来了解更新,并理解进行编译,而构建编译只能手动执行一次。
在旧版本的Ext JS或Sencha Touch, SASS样式是在Ruby中编译的。在窗户,需要使用管理员权限来安装Ruby。一旦安装完成,就可以开始编译主题了。不过,在有大量代码库和高级主题的时候,就要花费大量的编译时间。
为了编译高级主题,有时候需要花费一分钟,然后,你不得不刷新浏览器窗口来测试主题以确保已正确设置SASS变量。之后还要一次次的重复此过程。要知道,这个过程是相当耗时间的。这也是为什么对时尚感到高兴的原因。
Sencha时尚是使用javascript来编译主题的,可以说这是超级的快。当在左边的显示器修改一行代码后,就可以右边的显示器看到变化了,就是这么快。不再需要等等编译(在服务器开始),也不再需要刷新浏览器窗口。
由于时尚使用的是javascript,因而有更多优点,例如,可以在时尚之上进行扩展并创建自己的样式功能(类似SASS功能),还能调试样式表代码。
不过,最大的得益还是可以在开发机器上设计主题。要实现这个,只需要在命令行运行Sencha应用表并在URL中添加以下参数:
?platformTags=时尚:真正的
开始编译
下面来尝试下使用时尚来编译一个主题。首先,下载Ext JS 6。这已经包含了SDK。还需要下载Sencha Cmd 6 .
安装好命令行工具后,在机器上解压Ext JS 6框架包(zip)。打开命令行提示符并通过命令行导航到框架文件夹。在Ext6文件夹,输入以下命令来创建第一个Sencha通用应用程序:
ext>, sencha generate app MyApp . ./指定的项目路径
在IDE或编辑器中打开新的应用程序项目。要注意经典和现代这两个新的文件夹。这是用来区分工具包的文件夹。共享代码要放在 应用文件夹内.classic工具包文件夹包含了旧版本(桌面)视图,而现代工具包文件夹则包含了现代触摸的视图。对于两个工具包来 说,DOM是不同的,因而样式也会有些许不同。这也是为什么工具包文件夹会有一个src子文件夹用来放置javascript代码,会有一个sass文件 夹来放置指定的样式的原因。
打开应用程序。json文件并滚动到“构建”配置:
要注意这里的每一个构建配置,他们都有自己的工具包和主题。对于经典配置,将使用新的海卫一(卫)主题,而现代工具包将使用海王星(海王星)主题(原名是Sencha Touch默认主题)。
现在不需要对这个进行修改。下面来创建两个新文件:
经典/sass/var/Application.scss 现代/sass/var/Application.scss
现在,打开Sencha本地Web服务器,并让Sencha轮询样式表的改变。
在通用应用程序的文件夹中,运行以下命令:
项目文件夹在sencha应用看经典
如果Cmd安装正确,该命令会正确运行。现在内置的sencha服务器将等待更新。应用程序默认可通过http://localhost: 1841年来访问。
假如运行的端口是1841,则在浏览器输入以下地址来打开应用程序:
http://localhost: 1841/? platformTags=时尚:真正的
等待应用程序加载完成。主题第一次编译,需要一点时间,一旦看到应用程序,在编辑器打开以下文件:
经典/sass/var/Application.scss
如果有两个显示器,将浏览器窗口拖到其他显示器,让编辑器在一个显示器,而浏览器在另一个显示器。
