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

---

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

---

我已經展現瞭如何去開發一個精緻的暗黑主題，看起來就像Spotify。在本文的第一部分，瞭解了Fashion、Sencha Inspector、主題和變量。在第二部分，將重點介紹更高級的概念，使用Ext JS UI和CSS重寫製做獨特的組件以及如何去合併自定義字體或圖標。

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

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

如今就報名吧。

自定義CSS規則和混入

在作Spotifext主題的時候，我作了幾樣東西讓它看起來更棒，如編寫了一些CSS規則來實現按鈕懸停動畫，使用了自定義字體，並建立了本身的按鈕和標籤面板變量以給它一個獨特的外觀。

剛纔所說的變量，能夠用來修改應用程序及其全部組件的的總體外觀。不過，有時候只是但願有些組件顯得特別而已。看看下面已完成的 Spotifinder應用程序的圖片，會發現標籤面板不像默認的Ext JS標籤。按鈕能夠是方形的或是圓角的，而顏色能夠是綠色或灰色。這個是在底層使用Ext JS UI的Sass混入來實現的。一個混入就是一個CSS規則塊，能夠在整個應用程序中重複使用。

如下是示例的Sass混入：

@mixin my-border-radius($radius) {  -webkit-border-radius: $radius;     -moz-border-radius: $radius;      -ms-border-radius: $radius;
          border-radius: $radius;
}123456

以上Sass混入能夠用來建立圓角，因爲編寫時使用了實驗過的瀏覽器前綴，所以該CSS3功能可跨瀏覽器支持。因爲不是去編寫每個CSS規則，只是包含了my-border-radiu混入並給它傳遞一個參數，於是全部的CSS規則在編譯後都會被修改：

.box { @include border-radius(10px); }

在編譯後的CSS，看起來就像如下代碼（除了minified）：

.box {-webkit-border-radius: 10px;     -moz-border-radius: 10px;      -ms-border-radius: 10px;          border-radius: 10px;}123456

Sass混入是一個偉大的概念，並且能夠在Ext JS中使用。咱們通常稱它爲UI，並且他們基本上就是皮膚。Ext JS包含了開箱即用的UI，例如，在modern工具包，對於後退按鈕、圓角按鈕甚至更多其餘東西，都有UI，並且這些提供的UI，可使用本身的參數來 重用。

在Sencha AIP的文檔能夠找到這些混入，例如，找到Ext.button.Button，會在按鈕在不一樣狀態中的Sass混入。未了實現這些混入，要使用@include，而後在Ext JS中混入名稱並傳遞參數。

要建立更漂亮的圓角按鈕，能夠看看這裏。

我使用瞭如下混入代碼來建立了一個新的「scale:small」按鈕，對於參數，傳遞了UI名稱「round」，這樣，在視圖中就可使用「ui:’round’」來定義。參數中還傳遞了font-weight、padding和背景顏色。

@include extjs-button-small-ui(    $ui: 'round',    $font-weight: bold,    $padding: 5px,    $background-color: $highlight-color );123456

你能夠已經注意到按鈕是帶動畫的，而相似Spotify的標籤面板的外觀與Ext JS混入提供的有點不一樣。查看一下sass/src文件夾，在該文件夾中，會看到我所編寫的因此Ext JS混入與自定義的Sass規則。

獨特的按鈕

正如在應用程序中所看到的，按鈕會比API提供的配置項多了一些自定義的配置項。應用程序所包含的代碼讓動畫更平滑。在每一次翻轉，按鈕會緩慢的加亮ups。實現這個使用了自定義的Sass/CSS代碼。

來看一下代碼：

.x-btn-round-large,.x-btn-round-medium,.x-btn-round-small {    &:hover {
      background-color: $highlight-color2;      -webkit-transition: background-color 2s ease-out;      -moz-transition: background-color 2s ease-out;      -o-transition: background-color 2s ease-out;
      transition: background-color 2s ease-out;
    }
}1234567891011

CSS的類名來自於混入。小按鈕的ui名稱被定義爲「round」。當將該UI應用到視圖的時候，在瀏覽器的DOM中會看到UI賦予組件的類名是「.x-btn-ui-name-small」。

全部的Sencha組件會經過默認的.x前綴來獲取CSS類名。在前綴以後，就是組件（btn）的名稱，而後是UI的名稱。對於按鈕，它還要包含比例，若是沒有，它可能在工具欄中。請參閱extjs-button-toolbar-small-ui混入。

所提供的自定義代碼監聽了按鈕的懸停，當將鼠標移動到按鈕上方時，它會轉換背景色，從默認背景色（黑色）轉換爲新顏色（在背景色規則中看到的綠色）。

獨特的標籤

有時候，並不想使用自定義的CSS代碼來添加更多功能，而是但願重寫默認的外觀和感受，例如，當UI混入不提供所需的配置的時候。

下圖是使用了該方式實現的獨特外觀的標籤：

所需代碼能夠在這裏找到，查看文件中的CSS類.x-tab-bar-alternative。

你可能很想知道使用UI混入與混入有什麼不一樣。UI混入很偉大，是由於它能夠樣式化整個應用程序，並且經過Ext JS所包含的代碼支持任何瀏覽器。缺點是，樣式表的代碼會增加。這也是UI混入一般用於在整個應用程序中實現樣式和規則複用的緣由。

CSS規則和重寫也很偉大，由於它是一種快速解決方案。缺點是，它很複雜，由於這須要進行跨瀏覽器測試，並且須要瞭解如何去生成DOM。當UI混入沒有提供所需配置，又或者只須要在啊幾個地方使用CSS規則的時候，纔會使用CSS重寫和規則。

合併字體

自定義主題最後要作的是合併自定義字體和圖標（圖標字體），請參考這個文件。

這裏包含了兩種自定義字體，一個是谷歌字體（由谷歌字體提供），另外一個是爲網站建立的名爲Spotifinder的圖標字體。這個是一個自選的圖標集，並生成出來的。

這兩種字體都是@font-face字體，於是須要在樣式表中針對不一樣的瀏覽器定義不一樣的字體擴展。對於圖標字體，只能手動加入。請參閱這4種字體擴展。一般，在相似icomoon這樣的圖標網站建立自定義圖標字體的時候，能夠直接下載樣式表並使用它。在示例中，須要的只是複製和粘貼而已，而在某些時候，就須要本身去編寫它了。

谷歌字體就很簡單了，由於Sencha提供了一個全局的UI混入。該混入會從谷歌經過導入代碼的方式將代碼推送到編譯的CSS代碼中的全部擴展中。請參閱這篇文檔。要注意的是，從一個字體提供者（如谷歌字體）中使用自定義字體的，須要一個額外的請求來請求字體。替代的方法是從一個本身的@font-face字體網站（如http://www.fontsquirrel.com/）下載並提供完整導入代碼，就像我所作的圖標字體。

一旦字體導入正確，就可使用它了。在這裏，經過指向$font-family就可使用谷歌字體了。

小結

就是這樣！我已經講述了有關建立一個很棒主題的一切，如Spotifext主題。看看下面的截圖，並考慮一下如何將它應用到現實中的應用程序中。

千萬不要忘記報名參加Sencha主題大賽。第一名獲獎者將會贏得2500美金！

---

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