Yii Framework 開發(fā)教程(10) UI 組件 自定義組件

在介紹 Yii 內(nèi)置 UI 組件之前，先介紹一下如何自定義組件，這樣也有助于理解 CWidget 的用法， 自定義組件就是重載 CWidget的init() 和 run() 方法。

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

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

本例通過擴展 CInputWidget，定義一個值域輸入 UI 組件-RangeInputField，也就是允許用戶輸入兩個數(shù)字定義一個值域范圍。CInputWidget 支持使用 CModel 或者直接使用變量，RangeInputField 也保留了這一傳統(tǒng)。 RangeInputField 定義了三組屬性。 $attributeFrom 和 $attributeTo 用于 CModel，配合 CHtml 的 activeXXX 方法，activeXXX 可以自動生成文本框的標簽和文本框。 屬性$nameFrom，$nameTo，$valueFrom，$valueTo 程序員可以自行定義文本框的標簽。

按照 Yii 應用的缺省目錄結(jié)構，新創(chuàng)建的 RangeInputField 放在 protected/components 目錄下，因此創(chuàng)建 protected/components/RangeInputField.php

    class RangeInputField extends CInputWidget
    {
        public $attributeFrom;
        public $attributeTo;

        public $nameFrom;
        public $nameTo;

        public $valueFrom;
        public $valueTo;

        function run()
        {
            if($this->hasModel())
            {
                echo CHtml::activeTextField($this->model,
                    $this->attributeFrom);
                echo ' -> ';
                echo CHtml::activeTextField($this->model,
                    $this->attributeTo);
            }else
            {
                echo CHtml::textField($this->nameFrom,
                    $this->valueFrom);
                echo ' -> ';
                echo CHtml::textField($this->nameTo,
                    $this->valueTo);
            }
        }

        /**
         * @return boolean whether this widget
         * is associated with a data model.
         */
        protected function hasModel()
        {
            return $this->model instanceof CModel
                && $this->attributeFrom!==null
                && $this->attributeTo!==null;
        }
    }

這樣就自定義了一個新的 UI 組件 RangeInputField ，只重載了 run 方法， init 使用其父類中的方法。

下面就可以來測試這個新創(chuàng)建的自定義 UI 組件 RangeInputField， 我們使用 FormModel （使用 CModel)的方法來使用這個 UI 組件。

在 protected/models 下創(chuàng)建 RangeFrom.php

    class RangeForm extends CFormModel
    {
        public $from;
        public $to;

        function rules()
        {
            return array(
                array('from,to','numerical','integerOnly' =>true),
                array('from','compare','compareAttribute'=>'to',
                        'operator'=> '<=','skipOnError' => true),
            );
        }
    }

然后修改缺省 Controller 的缺省方法， protected/controllers/siteController.php 中 actionIndex 方法。

    public function actionIndex()
    {
        $success=false;
        $model=new RangeForm();

        if(!empty($_POST['RangeForm']))
        {
            $model->attributes=$_POST['RangeForm'];

            if($model->validate()) $success=true;

        }

        $this->render('index', array(
                'model' => $model,
                'success' => $success,
                ));
    }

創(chuàng)建對應的 View

    <!--?php if($success) : ?-->

    Success!

    <!--?php endif ?--></pre>
    <div class="form"><!--?php $form=$this--->beginWidget('CActiveForm'); ?>

     <!--?php echo $form--->errorSummary($model); ?>
    <div class="row"><!--?php $this--->widget('RangeInputField',array(
     'model'=>$model,
     'attributeFrom' => 'from',
     'attributeTo' => 'to',
     )) ?></div>
    <div class="row submit"></div>
    <!--?php $this--->endWidget(); ?></div>
    <pre>
    <!-- form -->

運行這個例子

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

本例下載