【翻譯】如何建立Ext JS暗黑主題之一

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

概述

我是否是都要演示個人Spotifinder Ext JS應用程序。它是一個很酷的應用程序，可鏈接到LastFm和Spotify。建立它的目的，是未了在培訓課程中演示Ext JS的概念。它還展現了Ext JS中偉大的主題功能。

今年，我在SenchaCon展現了高級主題功能，並收到了一些關於如何建立Spotifinder應用程序主題的諮詢。所以，我以爲編寫一個教程來講明如何建立這個至關酷，且很好看的暗黑主題。

你可使用該教程來幫助你建立Sencha應用程序主題大賽的參賽做品。

第一名的獲獎者將得到2500美金！

如今就報名吧。

本教程所使用到的文件能夠在這裏找到。它基本上只是一個簡單的帶有許多組件的Ext JS應用程序（視圖），如Grid以及其餘組件。你也可使用任何其餘的Ext JS（四、5或6）應用程序，我使用這個只是昨晚一個參考，並且使用的是Ext JS 6。主題化一個「全部組件」的應用程序指的是什麼呢？它就是一個可讓你查看新主題的外觀而不須要經過單擊實際在線應用程序的東西。

另外一個先決條件是：Sencha Cmd必須能夠在命令行上運行。能夠在命令行上使用sencha命令進行測試。它將會輸出一個版本號，對於Ext JS 6，Cmd的版本號將會是6.x。

{.aligncenter}

Ext JS主題使用的是Sass，是創建在棒極了的樣式表語法之上的，並且確實，它棒極了。它能夠經過更多的動態方式來編寫CSS代碼，例如，能夠在樣式表中使用變量或運算。瀏覽器是不能理解Sass的，它只會CSS，隱藏，這些Sass主題須要被編譯爲生產所用的CSS代碼，這樣，瀏覽器才能讀懂它。在Ext JS應用程序中要編譯主題，須要使用Sencha Cmd。

Ext JS附帶了一個開箱即用的主題，能夠直接切換到其中任何一個主題並使用它，或者，還能夠擴展它或編輯它。本文是講述如何建立自定義主題的，最好的方式去編輯海王星或新的海衛一主題。它提供了一些變量，可使用他們去改變外觀和感官。因爲它的背景是有顏色的，而前端文章是白色的，於是它是用來建立好看的暗黑主題的理想主題。好了，基本理論已經說完，下面開始來實現它吧。

{.aligncenter}

{.aligncenter}

下面開始建立一個新的主題。在這裏，將建立一個主題包，這樣，就能夠在其餘項目中使用它了。

打開Sencha Cmd並運行如下命令：

sencha generate theme theme-spotifext

這將在工做區（workspace）的packages/local文件夾中建立一個主題包。它包含有一個sass/var文件夾，用來存放Sass樣式表的變量文件，這些文件會先編譯。它還包含一個sass/src文件夾，用來存放使用了混入（mixins）和CSS規則的Sass樣式表文件，這些文件的編譯時間在後，以便使用預約義的變量。主題包還包含了一個resources文件夾，它能夠用來存放諸如圖片或字體等文件。包裏還包含一個package.json文件，它保存了主題包的元數據，例如，它將包的類型設置爲「主題」。此外，還能夠編寫聯繫信息和描述。這裏還有一件事須要去作，就是建立新的海衛一主題的變種，須要將extend行修改成：

"extend": "theme-triton"

要注意的是，Ext JS 6的主題再也不有「ext-」前綴。

如今，能夠在主題示例應用程序中查看海衛一的變種主題了，這須要使用正確的方式來將它綁定到應用程序。

切換主題

剛纔特別特到「正確方式」是由於傳統的Web設計是經過修改Index.html頁並切換STYLE標記來改變樣式的。在Ext JS應用程序中，這是行不通的，這須要經過修改app.json文件來實現。這是由於Ext JS在index.html中會經過微加載來加載bootstrap.css文件以加載正確的樣式。bootstrap.css會指向一個使用Sass主題生成的CSS版本。這種方式有一個巨大的優點，就是全部圖像和字體的路徑在任何環境中都是同樣的，武磊是開發、測試或者發佈。

能夠經過打開演示應用程序的app.json文件並修改theme行來鏈接到新的Spotifext主題：

"theme": "theme-spotifext"

下一步要作的是使用sencha app build或sencha app build development來生產應用程序（只是生成主題而不是整個應用程序），而後繼續。

若是你運行的是通用應用程序，並且但願在classic工具包中使用Spotifext主題，就須要將主題鏈接到生成配置，例如：

"builds": {
   "myclassicprofile": {
      "toolkit": "classic",
       "theme": "theme-spotifext"
    },

   "mymodernprofile": {
      "toolkit": "modern",
      "theme": "theme-cupertino"
   }
 },

變量

要作的第一件事就是去建立一些文件，在package文件夾（packages/local/theme-spotifext）建立如下文件：

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以外，都是與框架組件對應的。Component.scss對應的是Ext.Component，grid/Panel.scss對應的是Ext.grid.Panel.scss。這種對應是在app.json文件中做爲sass命名空間設置好的。不須要對這進行修改。

Sass的一個重要特色是能夠定義變量。還記得使用習慣的普通的舊CSS時的情形嗎？當編寫好完整的樣式表，在最後時刻，公司但願你修改應用程序的顏色。這時候，就可能出現大問題了，由於不得不去查找並替換全部有關的顏色值，還包括與之相關的較亮或較暗的對比。

使用Sass，這就不是什麼大問題了。能夠在文件的頂部定義一個變量，而後在CSS規則中，指向這些預約義的變量。因爲Sass樣式表是須要編譯的，它會使樣式變得更動態。

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

@import ‘_config.scss’;

如今，在_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;

要注意$highlight-color2和3，這些是在內置的Sass函數中用來將高亮顏色改變爲20%較亮或較暗色調的。

要清楚Sass變量是極其重要的Sass功能，由於，Ext JS就是使用Sass變量的。實際上，有兩種類型的變量：全局變量和組件變量。

全局變量

第一個定義的變量 base−color就是一個全局的ExtJSSass變量。當修改改變量，它的效果會應用到全局範圍，許多其他的顏色都是基於 base-color進行計算的。

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

對於當前主題，可使用這些全局變量並將他們放在var/Component.scss：

$base-color: #639000;

$body-background-color: $dark-bg3;
$color: $front-color;
$enable-font-smoothing: true;

組件變量

在Component.scss，也已經設置了一組組件變量，能夠在Git的packages/local/theme-spotifext/sass/var/文件夾中查看這些文件。

我已將這些組件變量中的一部分移動到他們的scss文件，正如對grid/Panel.scss所作的哪樣。這樣作我就只須要維護小量文件。經過使用變量，就能夠樣式化應用程序的80%了，而這不會出現CSS重寫所遇到的問題。對於組件的樣式，可在API文檔中查找組件的Sass變量，例如，搜索grid，而後單擊CSS變量按鈕，會發現有大量的變量可供選擇。在Ext JS 6以前，就必須去試並找出錯誤。如今，使用Ext JS 6和App Inspector，要弄清楚要使用那些變量，就像吃一塊蛋糕那麼容易。

{.aligncenter}

Sencha Inspector

Sencha Inspector是一個新的獨立工具。使用該工具，能夠檢查Ext JS代碼，包括MVVM模式。它能夠檢查運行在任何瀏覽器或設備上的應用程序，甚至是運行在Sencha Web Application Manager上的應用程序。

不但能夠檢查javascript代碼還能夠檢查全部Ext JS Sass變量。結合Fashion，Ext JS編譯樣式的新方式，會超級強大。

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

在主題面板搜索Ext JS組件時，它會展現全部可用的Sass變量。這可節省從文檔中手動瀏覽的時間。

{.aligncenter}

使用Fashion（下面會講述），能夠爲因此變量輸入值，並且還能在屏幕馬上看到效果。這在不知道須要使用哪個變量的時候會至關有用，由於這再也不須要等待app build或主題編譯，這會大大節省主題的開發時間。我一般會在一個屏幕內使用IDE和Inspector，而在另外一個屏幕上在瀏覽器內運行應用程序。只要在Sencha Inspector找到合適的Sass變量，我就會將它複製到主題包。

花點時間在Github上查看包內sass/var中的代碼。我花了幾個小時，就已經完成了主題的80%。

若是但願獲取這些代碼並運行它，須要安裝Inspector和Sencha Cmd。

查看文檔。

在Sencha Cmd內，能夠運行內置的Web服務器（它就是Jetty Web服務器）。

打開Sencha Cmd並運行如下命令：

sencha app watch

在sencha app watch開啓Web服務器後（默認端口未1841），Sencha Cmd會輪詢更改。接下來，在瀏覽器打開如下地址：

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

一旦應用程序被加載並完成對主題的第一次編譯，就能夠在瀏覽器控制檯複製並粘貼如下書籤來建立App Inspector和應用程序直接的鏈接。

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)}();

若是對如何實現這個有興趣，會發現App Inspector使用的是WebSockets。App inspector的腳本會運行在端口3000。這就是獨立的應用程序爲何能檢查應用程序代碼的緣由。如今來看看編譯的主題。

{.aligncenter}

Fashion

在上面已經提交過Fashion了，它不是最新的服裝風格，而是一直內置於Sencha Cmd的編譯主題的新方式。

要在Ext JS編譯主題，須要使用Sencha Cmd並運行如下命令：

sencha app build [development]

或者

sencha app watch [toolkit]

二者的區別是watch會輪詢修改，並立刻進行編譯，而sencha app build只是手動編譯一次。

在早期版本的Ext JS和Sencha Touch，Sass樣式表是使用Ruby進行編譯的（在Windows，須要使用管理員權限來安裝Ruby）。只要準備好一塊兒，就能夠開始編譯主題了，不過，編譯須要花費一點時間，尤爲是在作一個大的代碼庫和高級主題的時候。這就是我爲何對Fashion那麼高興的緣由。

使用Fashion，可使用Javascript來編譯主題。它至關的快，當我在左邊屏幕修改了一行代碼的時候，在我轉動頭部的時候，右邊屏幕已經改變了。如今，再也不須要等待編譯（除了啓動服務器時），也不須要刷新瀏覽器窗口。

全部這些都是在底層發生。Sencha Cmd會在後臺運行PhantomJS，它基本上是一個能夠運行在命令行沒有顯示的瀏覽器，可編譯主題並將它推入一個大的的Javascript函數。所作的每個改變，不管是在IDE/編輯器，是classic或modern工具包，又或者是Sencha Inspector，它都會經過javascript來處理DOM中修改過的樣式。它還有更多優勢，例如，能夠在頂層擴展Fashion 並建立本身的樣式函數（如Sass函數），還能調試樣式代碼。在設計主題的時候，還能夠在開發機器上看到它的更多有點。

要啓動並運行Fashion，須要在命令行運行sencha app watch clkassic，並在URL中添加參數「?platformTags=fashion:true 」，最後的結果相似如下URL：

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

走起

在這裏，還爲spotifext主題作了一些事情，以便讓它看上去更棒。在按鈕懸停上編寫了一些CSS來實現動畫，使用了自定義的字體，並建立了本身的按鈕和標籤面板變量來讓它看上去比較獨特。

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

有了這些信息，就能夠建立好看的主題了。

報名參加Sencha應用程序主題大賽吧，第一名的獎金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.