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

自定义组件就是重载 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),		);	}}

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