Web App 行動開發 (8) – Sencha Touch Component 介紹

Sencha Touch User Interface

使用 Sencha Touch Framework 開發，最大的好處就是可以使用現成的 UI 元件。不論是 iOS, Android 或者其他行動作業系統，Native (原生) 提供的 UI 元件都已經擁有基本的能力，但是 Web 就不同了，許多特別的效果與使用者經驗都必須自行實作，像是列表滑動效果、複合觸控行為、頁籤變換等等。Sencha Touch 已經提供了大部分行動介面常用的典型元件，不但擁有跨平台能力，而對於不同的作業系統也在效能上下了不少功夫。

使用 WebApp 製作出來的 App，在速度上絕對是吃虧的，與 Native App 進行效能比較的話沒有太大意義。在使用 WebApp 進行開發前就要先思考這個議題，如果沒有跨平台的需要，那麼我覺得 WebApp 將會是一個吃力不討好的開發方式。

Ext Component

今天的主題是要介紹 Sencha Touch User Interface，在 Sencha Application 中這些視覺元件的集合可以統稱為 View (視圖)，也就是 MVC 中的 View。前面介紹過 Sencha Framework 是一種「偽物件導向」的架構，其中所有的視覺化介面都需要繼承 Ext.Component 這一個 Class，在 Sencha Framework 中所有的操作都是透過 Ext 物件，最大是目的是隱藏 DOM (Document Object Model) 的實作細節，因此一旦使用了 Sencha Framework 我們也要盡力避免直接操作 DOM，比較不會脫離的 Sencha Framework 的控制。回到正題，Ext.Component 擁有了以下幾種基本能力 (Component Features)：

• • Template - 樣板能力，可以透過樣板 Render 畫面
  • Show/Hide - 隱藏或顯示能力
  • Center - 置中對齊
  • Enable/Disable - 啟用或關閉，這個能力與顯示隱藏有些不同，講簡單點就是看的到吃不到
  • Float - 相對於父節點可以進行空間版面配置
  • Change with animation - 動畫的變換效果
  • Dock other Components - 可以靠齊（上下左右）在其他的元件中
  • Scrollable - 可以捲動，這裡的捲動是包含滑動的效果 (那種慢慢減速的感覺)

其實 Sencha Framework 的 UI 設計與大多數的 UI Framework 是相同的 (不僅僅是網頁)，如果有學過其他 UI Framework 要上手 Sencha Touch 並不困難。此外 Sencha 將 Component 分為四大類，以下大致列出重要的元件：

• • Navigation components - 基本的導引元件
    • Ext.Toolbar
    • Ext.Button
    • Ext.TitleBar
    • Ext.SegmentedButton
    • Ext.Title
    • Ext.Spacer

• • Store-bound components - 可以與 Store 進行 Binding 的元件
    • Ext.dataview.DataView
    • Ext.Carousel
    • Ext.List
    • Ext.NestedList

• • Form components - 表單元件，主要是實作輸入視覺元件，內部也是用 Form 與 Input 實現
    • Ext.form.Panel
    • Ext.form.FieldSet
    • Ext.field.Checkbox
    • Ext.field.Hidden
    • Ext.field.Slider
    • Ext.field.Text
    • Ext.picker.Picker
    • Ext.picker.Date

• • General components - 泛用一般性元件，有些透過 HTML5 的能力來實現
    • Ext.Panel
    • Ext.tab.Panel
    • Ext.Viewport
    • Ext.Img
    • Ext.Map
    • Ext.Audio
    • Ext.Video
    • Ext.Sheet
    • Ext.ActionSheet
    • Ext.MessageBox

Component xtype

xtype 是 Sencha Touch 特有的一種設計，說穿了只是 Class Name 縮寫，讓我們在使用 Component 時比較方便。Sencha 在 xtype 設計上可以搭配 Controller, Component Query 與 CSS 渲染進行操作，細節後面會再介紹到。個人對於 xtype 比較反感，覺得這樣多餘的設計會讓使用者混淆，所有 Sencha Touch 內建的 Component 都有 xtype，各位可以自行斟酌使用。以下為 Sencha Touch 提供的元件與 xtype 的對照表：

系列文章

• Web App 行動開發 (1) - Web App 開發介紹
• Web App 行動開發 (2) - 如何設計出一個好用的 Web App？
• Web App 行動開發 (3) – Sencha Touch 開發環境建置
• Web App 行動開發 (4) – Sencha Touch 基本架構介紹
• Web App 行動開發 (5) – Sencha Touch 物件導向類別系統介紹
• Web App 行動開發 (6) – Sencha Touch 初探 Application
• Web App 行動開發 (7) – Sencha Touch Device Profile 實作教學
• Web App 行動開發 (8) – Sencha Touch Component 介紹

參考文件

• Sencha Touch Ext.Component API Document