和通常的應(yīng)用程序開發(fā)框架一樣，Yii Framework 也提供了一組 UI 小組件（CWidget）來幫助程序員設(shè)計(jì)用戶界面，小組是 CWidget 或其子類的實(shí)例.它是一個(gè)主要用于表現(xiàn)數(shù)據(jù)的組件.小組通常內(nèi)嵌于一個(gè)視圖來產(chǎn)生一些復(fù)雜而獨(dú)立的用戶界面.例如,一個(gè)日歷小物件可用于渲染一個(gè)復(fù)雜的日歷界面.小組件使用戶界面更加可復(fù)用.

我們可以按如下視圖腳本來使用一個(gè)小物件:

    <?php $this->beginWidget('path.to.WidgetClass'); ?>
    ...可能會(huì)由小物件獲取的內(nèi)容主體...
    <?php $this->endWidget();  >

或者

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

后者用于不需要任何 body 內(nèi)容的組件.

小組件可通過配置來定制它的表現(xiàn).這是通過調(diào)用 CBaseController::beginWidget 或 CBaseController::widget 設(shè)置其初始化屬性值來完成的.例如,當(dāng)使用 CMaskedTextField 小物件時(shí),我們想指定被使用的 mask .我們通過傳遞一個(gè)攜帶這些屬性初始化值的數(shù)組來實(shí)現(xiàn).這里的數(shù)組的鍵是屬性的名稱,而數(shù)組的值則是小物件屬性所對(duì)應(yīng)的值.正如以下所示 :

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

繼承 CWidget 并覆蓋其 init() 和 run() 方法,可以定義一個(gè)新的小物件:

   class MyWidget extends CWidget
    {
        public function init()
        {
            // 此方法會(huì)被 CController::beginWidget() 調(diào)用
        }

        public function run()
        {
            // 此方法會(huì)被 CController::endWidget() 調(diào)用
        }
    }

小組件可以像一個(gè)控制器一樣擁有它自己的視圖.默認(rèn)情況下,小物件的視圖文件位于包含了小組件類文件目錄的 views 子目錄之下.這些視圖可以通過調(diào)用 CWidget::render() 渲染,這一點(diǎn)和控制器很相似.唯一不同的是,小組件的視圖沒有布局文件支持。另外，小組件視圖中的$this指向小物件實(shí)例而不是控制器實(shí)例。

在上一篇文章 Yii Framework 開發(fā)簡(jiǎn)明教程(8)使用 FormModel 說通過 CController 來處理用戶提交事件，和 Windows 桌面應(yīng)用或 ASP.Net 做個(gè)類比， Yii 中視圖 View (HTML Form) 類似于 WinForm 或是 Asp.Net 的 Page。控制類 Controller 類似 Windows 桌面應(yīng)用或 Asp.Net 的事件處理（Code-Behind)類。嚴(yán)格上來說，把 Yii 中視圖 View (HTML Form)比作 Windows 桌面中的 WinFrom 或是 Asp.Net 的 Page 并不十分恰當(dāng)，實(shí)際上 Yii 中視圖的整個(gè) HTML （或是 body）對(duì)等于 WinForm 或是 Page。 HTML Form 也只是 CWidget 的一個(gè)子類，對(duì)應(yīng)到 CActiveForm UI 組件，此外，Yii 內(nèi)置了下面 CWidget 類型：

http://wiki.jikexueyuan.com/project/yii-development-tutorial/images/9.1.jpg" alt="picture9.1" />

其中 CJuiWidget (封裝 JQuery）和 CInputWidget 進(jìn)一步分為：

http://wiki.jikexueyuan.com/project/yii-development-tutorial/images/9.2.jpg" alt="picture9.2" />

后面的教程將逐個(gè)介紹 Yii 提供的 UI 小組件的用法，除了這些內(nèi)置的 UI 小組件外，Yii 也支持自定義 UI 小組件。

上一篇：Yii Framework 開發(fā)教程(12) UI 組件 ClipWidget 示例下一篇：Yii Framework 開發(fā)教程(32) Zii 組件-GridView 示例