Site icon Soul & Shell Blog

Sencha Touch 2 教學 – CSS 渲染與 UI 套版

SJ

SenchaTouch_PreviewSencha Touch CSS 渲染

在 Sencha Touch 的環境中，所有的畫面顯示與配置都是統一透過 CSS 進行渲染。當然在使用 Sencha Touch 時我們也需要盡可能地遵循「使用 CSS 渲染設計模式」。一般來說在網頁中使用 CSS 語法可以分為內部套用 (Inline) 與外部套用兩種主要的方式，內部套用就是透過 style 參數進行設定，彈性低不推薦使用；而外部套用就是將 CSS 語法寫在另一個地方（通常是獨立的 CSS 檔案），然後載入進行串接與渲染。

我們可以在最原始的 app.json 看到預設就載入的 app.css（），如下：

...
    "css": [
        {
            "path": "resources/css/app.css",
            "update": "delta"
        }
    ],
...

使用外部套用 CSS 是最推薦的方式，因此在套用時就需要 CSS Query，然而 CSS Query 最依賴的設計就是 ID 與 Class。那麼在 Sencha Touch 中要如何指定 Class 與 ID 呢？查閱一下文件，其實所有的 Ext.Component 都支援 id 與 class 的指定，我們可以透過以下方法在 config.id 中指定 ID：

Ext.define('Demo.view.Main', {
    extend: 'Ext.Component',
    config: {
        id: 'my-super-id'
    }
});

若是要指定 Class 可以透過 config.cls 或者 Ext.Component.setCls() / addCls() 來完成，如下所示：

Ext.define('Demo.view.Main', {
    extend: 'Ext.Component',
    config: {
        cls: 'my-super-cls',
        listeners: {
            initialize: function () {
                this.addCls('my-super-cls-add');
            }
        },
    }
});

從上面的程式看來，這個元件一開始被指定了「my-super-cls」，此外在 initialize 又被新增了「my-super-cls-add」，因此擁有了這兩個 Class，Dom 結構如下圖：

上圖中我們可以看到確實有出現我們程式中指定的 Class，而由於我們沒有指定 id，因此 id 由 Sencha Touch 自行產生。注意看一下 class 還出現了其他莫名其妙的名稱，這些都是 Ext 既有的機制，這些機制是很有用的，可以應用在設計 CSS Query 上。

如果你想要使用內部套用直接指定 CSS 給元件也可以透過 config.style 來達成，當然這種方法上面提過彈性不高不建議使用。

Ext.define('Demo.view.Main', {
    extend: 'Ext.Component',
    config: {
        style: 'border: 1px solid #000;'
    }
});

Sencha Touch UI 機制

接下來我們來介紹 Sencha Touch 既有的 UI 機制，與其說是 UI 機制倒不如解釋為「預設自動將元件加入 Class 的機制」比較容易了解。原生的 Ext 元件都有一個 alias 名稱叫做 xtype，所有的元件也會依據這個特性自動加入 Class。此外除了上一節提到的 ID 與 Class 之外，Sencha Touch 還提供了 UI 設計模式，這個設計有點類似 Theme 的感覺，既有的元件很多都已經提供許多不同的 UI 來讓我們套用（例如: Ext.Button 等等），當然我們也可以自行定義自己需要的 UI。先來整理一下 Sencha Touch 自動加入Class 有哪些機制：

下圖說明了 xtype Class 與 UI Class 的命名規則：

假設我們使用了 button 這個 xtype 元件，並且指定了 ui 為 custom，那麼這個元件最少就會擁有 x-button 與 x-button-custom 這兩個 Class，配合 CSS 的設計我們就能夠搭配出適合的版面與顯示畫面了。

實作範例介紹

我們先在在 app.json 中加入自訂的 CSS 檔案 (custom.css)，如下：

...
    "css": [
        {
            "path": "resources/css/app.css",
            "update": "delta"
        },
        {
            "path": "resources/css/custom.css",
            "update": "delta"
        }
    ],
...

建立 custom.css 檔案，來覆蓋預設樣式。內容如下：

/* 覆寫預設按鈕的邊框為黑色 */
.x-button {
    border-color: #000;
}
/* 指定id=my-button-id邊框為紅色 */
#my-button-id {
    border-color: #f00;
}
/* 指定class=my-button邊框為綠色 */
.my-button {
    border-color: #0f0;
}
/* 指定ui=my-ui邊框為藍色 */
.x-button-my-ui {
    border-color: #00f;
}

寫一個測試的 Panel 來套用我們自定的 CSS，程式碼如下：

Ext.define('Demo.view.Main', {
    extend: 'Ext.Panel',
    config: {
        padding: 20,
        items: [
            {
                xtype: 'button',
                text: 'Default'
            },
            {
                xtype: 'spacer',
                height: 20
            },
            {
                xtype: 'button',
                text: 'id: \'my-button-id\'',
                id: 'my-button-id'
            },
            {
                xtype: 'spacer',
                height: 20
            },
            {
                xtype: 'button',
                text: 'cls: \'my-button\'',
                cls: 'my-button'
            },
            {
                xtype: 'spacer',
                height: 20
            },
            {
                xtype: 'button',
                text: 'ui: \'action\'',
                ui: 'action'
            },
            {
                xtype: 'spacer',
                height: 20
            },
            {
                xtype: 'button',
                text: 'ui: \'my-ui\'',
                ui: 'my-ui'
            }
        ]
    }
});

執行結果：

參考資料

Exit mobile version