Site icon Soul & Shell Blog

Sencha Touch 透過整合 Font Awesome 來擴充圖示

SJ

awesome&senchatouch該擴充 Sencha Touch 圖示 了嗎？

Sencha Touch 雖然好用，但是內建的圖示實在少的可憐，預設的內建圖示可以參考這一篇文章。然而 Sencha Touch 2.1 之後將圖示以向量方式實現，好讓我們在 Retina 螢幕也能有最好的顯示效果，以前圖示不夠用時就會透過設定掛上自己想顯示的 PNG 圖片，但是 PNG 圖片並不是向量實做，在不同的硬體解析度有時候會出現巨齒、馬賽克、毛邊等等鳥問題。

當內建這 18 個圖示不夠用時，那要如何擴充 Sencha Touch 既有的圖示呢？想到向量圖示，第一個就是想到 Bootstrap 的好朋友 Font Awesome，Awesome 是透過 Wen Font 技術實做的向量圖示，多達 300+ 以上的圖示可以使用 (所有 Icon 可以參考 Example)，不但免費而且開放原始碼。

當 Sencha 遇上 Awesome

Sencha Touch Project 有自己的專案架構，我們可要想個方法在不破壞既有架構上額外掛上 Awesome。

第一步：安裝 Font Awesome

首先我們先到「Font Awesome 官方網站」下載最新的版本，然後將壓縮檔中的 /css/font-awesome.min.css 檔案複製到 Sencha 專案目錄中的 /resources/css 目錄中，接著再將壓縮檔中的 /fonts 資料夾複製到 Sencha 專案目錄中的 /resources，完成後的結構如下：

SenchaProject
 |-.sencha
 |-app
 |-resources
 |  |-css
 |  |  |-app.css
 |  |  |-font-awesome.min.css
 |  |-fonts
 |  |  |-FontAwesome.otf
 |  |  |-fontawesome-webfont.eot
 |  |  |-fontawesome-webfont.svg
 |  |  |-fontawesome-webfont.ttf
 |  |  |-fontawesome-webfont.woff
 |  |-images
 |  ...
 |-app.js
 |-app.json
 |-index.html
 ...

第二步：修改 app.json 加入 Awesome CSS

編輯 app.json 檔案，請先找到載入 app.css 的設定位置，然後在後面新增 Font Awesome CSS (font-awesome.min.css)，程式碼範例如下：

{
    // ...
    "css": [
        {
            "path": "resources/css/app.css",
            "update": "delta"
        },
        {
            "path": "resources/css/font-awesome.min.css",
            "update": "delta"
        }
    ],
    // ...
}

第三步：外掛 Sencha Touch 既有的圖示字型

請在 Sencha Touch 專案目錄中的 /resources/sass/app.scss 檔案加入以下 CSS Style，用「.fa」這樣的串接方式即可保存 Sencha 原有的那幾組圖示，達到併存的效果，儲存後記得重新編譯 SASS 來生成新的 app.css，範例如下：

// The following two lines import the default Sencha Touch theme. If you are building
// a new theme, remove them and the add your own CSS on top of the base CSS (which
// is already included in your app.json file).
@import 'sencha-touch/default';
@import 'sencha-touch/default/all';

// Awesome CSS (請加入這幾行)
.x-tab .x-button-icon.fa::before, .x-button .x-button-icon.fa::before {
  font-family: FontAwesome;
}

如果您不想重新編譯 SASS (可能懶得安裝 ruby)，當然也可以手動將上面的程式碼新增在 /resources/css/app.css 檔案中，或者建立一支新的 CSS 在 app.json 中直接設定引用也是可以的。

第四步：透過 iconCls 替 Ext.Button 掛上 Awesome 圖示

最後可以嘗試用以下程式碼來設定 Awesome 所提供的圖示，以下範例我們透過 iconCls 這個參數來指定 Awesome CSS，Ext.Button 變更圖示的範例如下：

Ext.define('App.view.Main', {
    extend: 'Ext.Container',
    requires: [
        'Ext.Button',
    ],
    config: {
        layout: {
            type: 'hbox',
            align: 'start',
            pack: 'start'
        },
        items: [
            {
                xtype: 'button',
                iconCls: 'fa fa-flag'
            }
        ]
    }
});

 Awesome Icon 整合結果

為了呈現 Awesome 強大且豐富的向量圖示，因此我寫了一個無聊的程式自動解析 Font Awesome CSS 然後自動產生所有按鈕，執行結果如下：

奇怪的程式碼在這：

Ext.define('App.view.Awesome', {
    extend: 'Ext.Container',
    requires: [
        'Ext.Ajax'
    ],
    config: {
        width: 1024,
        height: 748,
        scrollable: true,
        defaults: {
            xtype: 'button',
            style: {
                float: 'left'
            }
        },
        listeners: {
            initialize: function (cmp) {
                Ext.Ajax.request({
                    url: 'resources/css/font-awesome.min.css',
                    success: function(response) {
                        var allIcons = response.responseText.match(/fa\-[a-z\-]+?(?=:before)/g);
                        for (var i = 0; i < allIcons.length; i++) {
                            cmp.add(
                                {
                                    iconCls: 'fa ' + allIcons[i]
                                }
                            )
                        }
                    }
                });
            }
        }
    }
});
Exit mobile version