Yii Framework 教程（9）：UI 元件 Widget 概述

同一般應用程式開發框架一樣，Yii Framework 提供了一組 UI 小元件（CWidget）協助程式設計師設計使用者介面。小元件是 CWidget 或其子類別的實例，主要用於呈現資料的元件。小元件通常內嵌於視圖中，產生複雜且獨立的使用者介面，例如日曆小元件可渲染複雜的日曆介面，讓介面更具可重用性。

使用小元件的方式

在視圖腳本中可用以下方式使用小元件：

<?php $this->beginWidget('path.to.WidgetClass'); ?>
...可能會由小元件取得的內容主體...
<?php $this->endWidget(); ?>

或是不需要主體內容的元件：

<?php $this->widget('path.to.WidgetClass'); ?>

透過配置客製化外觀

小元件可透過配置來客製化外觀，透過呼叫 CBaseController::beginWidget 或 CBaseController::widget 設定初始化屬性值。例如使用 CMaskedTextField 時指定 mask：

<?php $this->widget('CMaskedTextField', array(
    'mask' => '99/99/9999'
)); ?>

自訂小元件

繼承 CWidget 並覆寫 init() 和 run() 方法即可定義新小元件：

class MyWidget extends CWidget {
    public function init() {
        // 此方法會被 CController::beginWidget() 呼叫
    }
    public function run() {
        // 此方法會被 CController::endWidget() 呼叫
    }
}

小元件的視圖

小元件可像控制器一樣擁有自己的視圖。預設情況下，小元件視圖檔案位於包含小元件類別檔案目錄下的 views 子目錄。可透過 CWidget::render() 渲染，與控制器相似，但小元件視圖沒有版面配置檔支援，且視圖中的 $this 指向小元件實例而非控制器實例。

內建小元件類型

Yii 視圖的整個 HTML（或 body）對等於 WinForm 或 Page，HTML Form 只是 CWidget 的子類別，對應到 CActiveForm UI 元件。此外，Yii 內建了以下 CWidget 類型：