【翻譯】如何創(chuàng)建Ext JS暗黑主題之一

原文：How to Create a Dark Ext JS Theme– Part 1

概述

我是不是都要演示我的Spotifinder Ext JS應(yīng)用程序。它是一個很酷的應(yīng)用程序，可連接到LastFm和Spotify。創(chuàng)建它的目的，是未了在培訓(xùn)課程中演示Ext JS的概念。它還展示了Ext JS中偉大的主題功能。

今年，我在SenchaCon展示了高級主題功能，并收到了一些關(guān)于如何創(chuàng)建Spotifinder應(yīng)用程序主題的咨詢。因此，我覺得編寫一個教程來說明如何創(chuàng)建這個相當(dāng)酷，且很好看的暗黑主題。

你可以使用該教程來幫助你創(chuàng)建Sencha應(yīng)用程序主題大賽的參賽作品。

第一名的獲獎?wù)邔@得2500美金！

現(xiàn)在就報(bào)名吧。

本教程所使用到的文件可以在這里找 到。它基本上只是一個簡單的帶有許多組件的Ext JS應(yīng)用程序（視圖），如Grid以及其他組件。你也可以使用任何其他的Ext JS（4、5或6）應(yīng)用程序，我使用這個只是昨晚一個參考，而且使用的是Ext JS 6。主題化一個“所有組件”的應(yīng)用程序指的是什么呢？它就是一個可以讓你查看新主題的外觀而不需要通過單擊實(shí)際在線應(yīng)用程序的東西。

另一個先決條件是：Sencha Cmd必須可以在命令行上運(yùn)行?？梢栽诿钚猩鲜褂胹encha命令進(jìn)行測試。它將會輸出一個版本號，對于Ext JS 6，Cmd的版本號將會是6.x。

Ext JS主題使用的是Sass，是建立在棒極了的樣式表語法之上的，而且確實(shí)，它棒極了。它可以通過更多的動態(tài)方式來編寫CSS代碼，例如，可以在樣式表中使 用變量或運(yùn)算。瀏覽器是不能理解Sass的，它只會CSS，隱藏，這些Sass主題需要被編譯為生產(chǎn)所用的CSS代碼，這樣，瀏覽器才能讀懂它。在Ext JS應(yīng)用程序中要編譯主題，需要使用Sencha Cmd。

Ext JS附帶了一個開箱即用的主題，可以直接切換到其中任何一個主題并使用它，或者，還可以擴(kuò)展它或編輯它。本文是講述如何創(chuàng)建自定義主題的，最好的方式去編 輯海王星或新的海衛(wèi)一主題。它提供了一些變量，可以使用他們?nèi)ジ淖兺庥^和感官。由于它的背景是有顏色的，而前端文章是白色的，因而它是用來創(chuàng)建好看的暗黑 主題的理想主題。好了，基本理論已經(jīng)說完，下面開始來實(shí)現(xiàn)它吧。

下面開始創(chuàng)建一個新的主題。在這里，將創(chuàng)建一個主題包，這樣，就可以在其他項(xiàng)目中使用它了。

打開Sencha Cmd并運(yùn)行以下命令：

sencha generate theme theme-spotifext

這將在工作區(qū)（workspace）的packages/local文件夾中創(chuàng)建一個主題包。它包含有一個sass/var文件夾，用來存放 Sass樣式表的變量文件，這些文件會先編譯。它還包含一個sass/src文件夾，用來存放使用了混入（mixins）和CSS規(guī)則的Sass樣式表文 件，這些文件的編譯時間在后，以便使用預(yù)定義的變量。主題包還包含了一個resources文件夾，它可以用來存放諸如圖片或字體等文件。包里還包含一個 package.json文件，它保存了主題包的元數(shù)據(jù)，例如，它將包的類型設(shè)置為“主題”。此外，還可以編寫聯(lián)系信息和描述。這里還有一件事需要去做， 就是創(chuàng)建新的海衛(wèi)一主題的變種，需要將extend行修改為：

"extend": "theme-triton"

要注意的是，Ext JS 6的主題不再有“ext-”前綴。

現(xiàn)在，可以在主題示例應(yīng)用程序中查看海衛(wèi)一的變種主題了，這需要使用正確的方式來將它綁定到應(yīng)用程序。

切換主題

剛才特別特到“正確方式”是因?yàn)閭鹘y(tǒng)的Web設(shè)計(jì)是通過修改Index.html頁并切換STYLE標(biāo)記來改變樣式的。在Ext JS應(yīng)用程序中，這是行不通的，這需要通過修改app.json文件來實(shí)現(xiàn)。這是因?yàn)镋xt JS在index.html中會通過微加載來加載bootstrap.css文件以加載正確的樣式。bootstrap.css會指向一個使用Sass主 題生成的CSS版本。這種方式有一個巨大的優(yōu)勢，就是所有圖像和字體的路徑在任何環(huán)境中都是一樣的，武磊是開發(fā)、測試或者發(fā)布。

可以通過打開演示應(yīng)用程序的app.json文件并修改theme行來連接到新的Spotifext主題：

"theme": "theme-spotifext"

下一步要做的是使用sencha app build或sencha app build development來生產(chǎn)應(yīng)用程序（只是生成主題而不是整個應(yīng)用程序），然后繼續(xù)。

如果你運(yùn)行的是通用應(yīng)用程序，而且希望在classic工具包中使用Spotifext主題，就需要將主題連接到生成配置，例如：

"builds": {   "myclassicprofile": {      "toolkit": "classic",       "theme": "theme-spotifext"
    },   "mymodernprofile": {      "toolkit": "modern",      "theme": "theme-cupertino"
   }
 },1234567891011

變量

要做的第一件事就是去創(chuàng)建一些文件，在package文件夾（packages/local/theme-spotifext）創(chuàng)建以下文件：

sass/var/_config.scss
sass/var/Component.scss
sass/var/button/Button.scss
sass/var/form/field/Base.scss
sass/var/grid/Panel.scss
sass/var/tab/Panel.scss

要注意文件的名稱。在這里，除了_config.scss之外，都是與框架組件對應(yīng)的。Component.scss對應(yīng)的是 Ext.Component，grid/Panel.scss對應(yīng)的是Ext.grid.Panel.scss。這種對應(yīng)是在app.json文件中作為 sass命名空間設(shè)置好的。不需要對這進(jìn)行修改。

Sass的一個重要特點(diǎn)是可以定義變量。還記得使用習(xí)慣的普通的舊CSS時的情形嗎？當(dāng)編寫好完整的樣式表，在最后時刻，公司希望你修改應(yīng)用程序的顏色。這時候，就可能出現(xiàn)大問題了，因?yàn)椴坏貌蝗ゲ檎也⑻鎿Q所有有關(guān)的顏色值，還包括與之相關(guān)的較亮或較暗的對比。

使用Sass，這就不是什么大問題了?？梢栽谖募捻敳慷x一個變量，然后在CSS規(guī)則中，指向這些預(yù)定義的變量。由于Sass樣式表是需要編譯的，它會使樣式變得更動態(tài)。

先來試下這個，在Component.scss文件，加入自定義的顏色配置表（也就是_configt.scss文件），這需要在var/Component.scss文件的定義加入以下代碼：

@import ‘_config.scss’;

現(xiàn)在，在_config.scss文件中，需要定義一些貫穿整個樣式表的變量。在文件頂部定義以下這些變量：

//my own variables$dark-bg: #000;$dark-bg2: #121314;$dark-bg3: #222326;$dark-bg4: darken(#88898C, 15%);$front-color: #adafb2;$front-color2: #fff;$highlight-color: $base-color;$highlight-color2: lighten($highlight-color, 20%);$highlight-color3: darken($highlight-color, 20%);$font-family: 'Montserrat', helvetica , arial , verdana , sans-serif;$font-size: 12px;123456789101112131415

要注意$highlight-color2和3，這些是在內(nèi)置的Sass函數(shù)中用來將高亮顏色改變?yōu)?0%較亮或較暗色調(diào)的。

要清楚Sass變量是極其重要的Sass功能，因?yàn)?，Ext JS就是使用Sass變量的。實(shí)際上，有兩種類型的變量：全局變量和組件變量。

全局變量

第一個定義的變量basecolor就是一個全局的ExtJSSass變量。當(dāng)修改改變量，它的效果會應(yīng)用到全局范圍，許多其他的顏色都是基于base-color進(jìn)行計(jì)算的。

在API文檔中搜索Global_CSS就可以找到所有這些全局變量，更好的辦法是使用Sencha App Inspector，下面會看到更多介紹。

對于當(dāng)前主題，可以使用這些全局變量并將他們放在var/Component.scss：

$base-color: #639000;$body-background-color: $dark-bg3;$color: $front-color;$enable-font-smoothing: true;12345

組件變量

在Component.scss，也已經(jīng)設(shè)置了一組組件變量，可以在Git的packages/local/theme-spotifext/sass/var/文件夾中查看這些文件。

我已將這些組件變量中的一部分移動到他們的scss文件，正如對grid/Panel.scss所做的哪樣。這樣做我就只需要維護(hù)小量文件。通過使 用變量，就可以樣式化應(yīng)用程序的80%了，而這不會出現(xiàn)CSS重寫所遇到的問題。對于組件的樣式，可在API文檔中查找組件的Sass變量，例如，搜索 grid，然后單擊CSS變量按鈕，會發(fā)現(xiàn)有大量的變量可供選擇。在Ext JS 6之前，就必須去試并找出錯誤?，F(xiàn)在，使用Ext JS 6和App Inspector，要弄清楚要使用那些變量，就像吃一塊蛋糕那么容易。

{.aligncenter}

Sencha Inspector

Sencha Inspector是一個新的獨(dú)立工具。使用該工具，可以檢查Ext JS代碼，包括MVVM模式。它可以檢查運(yùn)行在任何瀏覽器或設(shè)備上的應(yīng)用程序，甚至是運(yùn)行在Sencha Web Application Manager上的應(yīng)用程序。

不但可以檢查javascript代碼還可以檢查所有Ext JS Sass變量。結(jié)合Fashion，Ext JS編譯樣式的新方式，會超級強(qiáng)大。

在本教程，可以去嘗試這些棒極了的主題功能。下載Sencha Inspector早期訪問版本。

在主題面板搜索Ext JS組件時，它會展示所有可用的Sass變量。這可節(jié)省從文檔中手動瀏覽的時間。

使用Fashion（下面會講述），可以為所以變量輸入值，而且還能在屏幕立刻看到效果。這在不知道需要使用哪一個變量的時候會相當(dāng)有用，因?yàn)檫@不 再需要等待app build或主題編譯，這會大大節(jié)省主題的開發(fā)時間。我通常會在一個屏幕內(nèi)使用IDE和Inspector，而在另一個屏幕上在瀏覽器內(nèi)運(yùn)行應(yīng)用程序。只 要在Sencha Inspector找到合適的Sass變量，我就會將它復(fù)制到主題包。

花點(diǎn)時間在Github上查看包內(nèi)sass/var中的代碼。我花了幾個小時，就已經(jīng)完成了主題的80%。

如果希望獲取這些代碼并運(yùn)行它，需要安裝Inspector和Sencha Cmd。

查看文檔。

在Sencha Cmd內(nèi)，可以運(yùn)行內(nèi)置的Web服務(wù)器（它就是Jetty Web服務(wù)器）。

打開Sencha Cmd并運(yùn)行以下命令：

sencha  app watch

在sencha  app watch開啟Web服務(wù)器后（默認(rèn)端口未1841），Sencha Cmd會輪詢更改。接下來，在瀏覽器打開以下地址：

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

一旦應(yīng)用程序被加載并完成對主題的第一次編譯，就可以在瀏覽器控制臺復(fù)制并粘貼以下書簽來創(chuàng)建App Inspector和應(yīng)用程序直接的連接。

javascript:!function(a,b){var a=a||3e3,b=b||"http://localhost",c=b+":"+a+"/inspector.js",d=function(a,c){var d=document.createElement("script");d.type="text/javascript",d.src=a,document.addEventListener("load",function(){"undefined"!=typeof Ext&&"undefined"!=typeof Ext.onReady&&Ext.onReady(function(){if(window.SenchaInspector){var a=document.head.getAttribute(“data-senchainspectorport");SenchaInspector.init(b+":"+a)}})},!0),c?document.head.insertBefore(d,document.head.firstChild):document.body.appendChild(d)};document.head.setAttribute("data-senchainspectorport",a),d(c,!0)}();1

如果對如何實(shí)現(xiàn)這個有興趣，會發(fā)現(xiàn)App Inspector使用的是WebSockets。App inspector的腳本會運(yùn)行在端口3000。這就是獨(dú)立的應(yīng)用程序?yàn)槭裁茨軝z查應(yīng)用程序代碼的原因。現(xiàn)在來看看編譯的主題。

Fashion

在上面已經(jīng)提交過Fashion了，它不是最新的服裝風(fēng)格，而是一直內(nèi)置于Sencha Cmd的編譯主題的新方式。

要在Ext JS編譯主題，需要使用Sencha Cmd并運(yùn)行以下命令：

sencha app build [development]

或者

sencha app watch [toolkit]

兩者的區(qū)別是watch會輪詢修改，并馬上進(jìn)行編譯，而sencha app build只是手動編譯一次。

在早期版本的Ext JS和Sencha Touch，Sass樣式表是使用Ruby進(jìn)行編譯的（在Windows，需要使用管理員權(quán)限來安裝Ruby）。只要準(zhǔn)備好一起，就可以開始編譯主題了， 不過，編譯需要花費(fèi)一點(diǎn)時間，尤其是在做一個大的代碼庫和高級主題的時候。這就是我為什么對Fashion那么高興的原因。

使用Fashion，可以使用Javascript來編譯主題。它相當(dāng)?shù)目?，?dāng)我在左邊屏幕修改了一行代碼的時候，在我轉(zhuǎn)動頭部的時候，右邊屏幕已經(jīng)改變了?，F(xiàn)在，不再需要等待編譯（除了啟動服務(wù)器時），也不需要刷新瀏覽器窗口。

所有這些都是在底層發(fā)生。Sencha Cmd會在后臺運(yùn)行PhantomJS，它基本上是一個可以運(yùn)行在命令行沒有顯示的瀏覽器，可編譯主題并將它推入一個大的的Javascript函數(shù)。所 做的每一個改變，無論是在IDE/編輯器，是classic或modern工具包，又或者是Sencha Inspector，它都會通過javascript來處理DOM中修改過的樣式。它還有更多優(yōu)點(diǎn)，例如，可以在頂層擴(kuò)展Fashion 并創(chuàng)建自己的樣式函數(shù)（如Sass函數(shù)），還能調(diào)試樣式代碼。在設(shè)計(jì)主題的時候，還可以在開發(fā)機(jī)器上看到它的更多有點(diǎn)。

要啟動并運(yùn)行Fashion，需要在命令行運(yùn)行sencha app watch clkassic，并在URL中添加參數(shù)“?platformTags=fashion:true ”，最后的結(jié)果類似以下URL：

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

走起

在這里，還為spotifext主題做了一些事情，以便讓它看上去更棒。在按鈕懸停上編寫了一些CSS來實(shí)現(xiàn)動畫，使用了自定義的字體，并創(chuàng)建了自己的按鈕和標(biāo)簽面板變量來讓它看上去比較獨(dú)特。

在該文的第二部分，將介紹混入與css重寫以及字體和圖標(biāo)。

有了這些信息，就可以創(chuàng)建好看的主題了。

報(bào)名參加Sencha應(yīng)用程序主題大賽吧，第一名的獎金2500美元！

{.aligncenter}

{.aligncenter}

作者： 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.