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

我就是我 2023-10-16 19:14 56阅读 0赞

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

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

**\[php\]** [ view plain][view plain] [copy][view plain] [print][view plain] [?][view plain]

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 plain][view plain] [copy][view plain] [print][view plain] [?][view plain]

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 plain][view plain] [copy][view plain] [print][view plain] [?][view plain]

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 plain][view plain] [copy][view plain] [print][view plain] [?][view plain]

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 plain][view plain] [copy][view plain] [print][view plain] [?][view plain]

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

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

运行这个例子

[![201212122003][]][201212122003 1]

本例[下载][Link 1]

[view plain]: http://blog.csdn.net/mapdigit/article/details/8374130#
[201212122003]: http://www.imobilebbs.com/wordpress/wp-content/uploads/2012/12/201212122003.png
[201212122003 1]: http://www.imobilebbs.com/wordpress/archives/3946/attachment/201212122003
[Link 1]: http://www.imobilebbs.com/download/yii/CustomWidgetDemo.zip