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



在介绍Yii内置UI组件之前，先介绍一下如何自定义组件，这样也有助于理解CWidget的用法，

自定义组件就是重载 CWidget的init() 和 run() 方法。

[php] view plaincopyprint?

1. class MyWidget extends CWidget  
2. {  
3.     public function init()  
4.     {  
5.         // 此方法会被 CController::beginWidget() 调用  
6.     }  
7.   
8.     public function run()  
9.     {  
10.         // 此方法会被 CController::endWidget() 调用  
11.     }  
12. }  

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

[php] view plaincopyprint?

1. class RangeInputField extends CInputWidget  
2. {  
3.     public $attributeFrom;  
4.     public $attributeTo;  
5.   
6.     public $nameFrom;  
7.     public $nameTo;  
8.   
9.     public $valueFrom;  
10.     public $valueTo;  
11.   
12.     function run()  
13.     {  
14.         if($this->hasModel())  
15.         {  
16.             echo CHtml::activeTextField($this->model,  
17.                 $this->attributeFrom);  
18.             echo ' -> ';  
19.             echo CHtml::activeTextField($this->model,  
20.                 $this->attributeTo);  
21.         }else  
22.         {  
23.             echo CHtml::textField($this->nameFrom,  
24.                 $this->valueFrom);  
25.             echo ' -> ';  
26.             echo CHtml::textField($this->nameTo,  
27.                 $this->valueTo);  
28.         }  
29.     }  
30.   
31.     /** 
32.      * @return boolean whether this widget 
33.      * is associated with a data model. 
34.      */  
35.     protected function hasModel()  
36.     {  
37.         return $this->model instanceof CModel  
38.             && $this->attributeFrom!==null  
39.             && $this->attributeTo!==null;  
40.     }  
41. }  

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

[php] view plaincopyprint?

1. class RangeForm extends CFormModel  
2. {  
3.     public $from;  
4.     public $to;  
5.   
6.     function rules()  
7.     {  
8.         return array(  
9.             array('from,to','numerical','integerOnly' =>true),  
10.             array('from','compare','compareAttribute'=>'to',  
11.                     'operator'=> '<=','skipOnError' => true),  
12.         );  
13.     }  
14. }  

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 方法。

[php] view plaincopyprint?

1. public function actionIndex()  
2. {  
3.     $success=false;  
4.     $model=new RangeForm();  
5.   
6.     if(!empty($_POST['RangeForm']))  
7.     {  
8.         $model->attributes=$_POST['RangeForm'];  
9.   
10.         if($model->validate()) $success=true;  
11.   
12.     }  
13.   
14.     $this->render('index', array(  
15.             'model' => $model,  
16.             'success' => $success,  
17.             ));  
18. }  

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,));}

创建对应的View

[php] view plaincopyprint?

1. <!--?php if($success) : ?-->  
2.   
3. Success!  
4.   
5. <!--?php endif ?--></pre>  
6. <div class="form"><!--?php $form=$this--->beginWidget('CActiveForm'); ?>  
7.   
8.  <!--?php echo $form--->errorSummary($model); ?>  
9. <div class="row"><!--?php $this--->widget('RangeInputField',array(  
10.  'model'=>$model,  
11.  'attributeFrom' => 'from',  
12.  'attributeTo' => 'to',  
13.  )) ?></div>  
14. <div class="row submit"></div>  
15. <!--?php $this--->endWidget(); ?></div>  
16. <pre>  
17. <!-- form -->  

<!--?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 -->

运行这个例子

本例下载