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