Home >Backend Development >PHP Tutorial >PHP development framework Yii Framework tutorial (10) UI components custom components
Before introducing Yii's built-in UI components, let's first introduce how to customize the components. This will also help to understand the usage of CWidget. Customizing the component is to overload the init() and run() methods of CWidget.
class MyWidget extends CWidget{public function init(){// 此方法会被 CController::beginWidget() 调用} public function run(){// 此方法会被 CController::endWidget() 调用}}
This example defines a value range input UI component-RangeInputField by extending CInputWidget, which allows the user to enter two numbers to define a value range. CInputWidget supports using CModel or directly using variables, and RangeInputField also retains this tradition.
RangeInputField defines three sets of properties.
$attributeFrom and $attributeTo are used in CModel. With the activeXXX method of CHtml, activeXXX can automatically generate the label and text box of the text box.
Properties $nameFrom, $nameTo, $valueFrom, $valueTo programmers can define the label of the text box by themselves.
According to the default directory structure of the Yii application, the newly created RangeInputField is placed in the protected/components directory, so create 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;}}
This way you customize a new The UI component RangeInputField only overloads the run method, and uses the init method in its parent class.
Now you can test this newly created custom UI component RangeInputField. We use the FormModel (using CModel) method to use this UI component.
Create RangeFrom.php under protected/models
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),);}}
Then modify the default method of the default Controller, the actionIndex method in protected/controllers/siteController.php.
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,));}
Create the corresponding View
Success! beginWidget('CActiveForm'); ?> errorSummary($model); ?> widget('RangeInputField',array('model'=>$model,'attributeFrom' => 'from','attributeTo' => 'to',)) ?>endWidget(); ?>
Run this example
The above is the PHP development framework Yii Framework tutorial (10) UI component self- Define the content of the component. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!