Site icon Soul & Shell Blog

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

Sencha 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