PHP开发框架Yii Framework教程(10) UI组件 自定义组件

在介绍Yii内置UI组件之前，先介绍一下如何自定义组件，这样也有助于理解CWidget的用法，自定义组件就是重载 CWidget 的init() 和 run() 方法。

class MyWidget extends CWidget    
{    
    public function init()
    {
        // 此方法会被 CController::beginWidget() 调用    
    }    

    public function run()    
    {
        // 此方法会被 CController::endWidget() 调用    
    }
}本例通过扩展CInputWidget，定义一个值域输入UI组件-RangeInputField，也就是允许用户输入两个数字定义一个值 域范围。CInputWidget 支持使用CModel或者直接使用变量，RangeInputField 也保留了这一传统。

RangeInputField定义了 三组属性。

$attributeFrom 和 $attributeTo 用于CModel，配合CHtml的 activeXXX 方法，activeXXX可以自动生成文本框 的标签和文本框。

属性$nameFrom，$nameTo，$valueFrom，$valueTo 程序员可以自行定义文本框的标签。

按照Yii 应用的缺省目录结构，新创建的RangeInputField 放在 protected/components 目录下，因此创建 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 使用其父类中的方法。

下面 就可以来测试这个新创建的自定义UI组件RangeInputField， 我们使用FormModel （使用CModel)的方法来使用这个UI组件。

在protected/models下创建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(!emptyempty($_POST['RangeForm']))    
    {    
        $model->attributes=$_POST['RangeForm'];    
        
        if($model->validate()) $success=true;    

    }    

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

创建对应的View

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

Success!    

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

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