首頁  >  文章  >  後端開發  >  PHP開發框架Yii Framework教學(10) UI元件 自訂元件

PHP開發框架Yii Framework教學(10) UI元件 自訂元件

黄舟
黄舟原創
2017-01-21 10:05:181158瀏覽

在介紹Yii內建UI元件之前,先介紹如何自訂元件,這樣也有助於理解CWidget的用法,自訂元件就是重載 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;}}

了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(&#39;from&#39;,&#39;compare&#39;,&#39;compareAttribute&#39;=>&#39;to&#39;,&#39;operator&#39;=> &#39;<=&#39;,&#39;skipOnError&#39; => true),);}}

然後修改缺省Controller的缺省方法,protected/controllers/siteController.php 中 actionIndex 方法。

public function actionIndex(){$success=false;$model=new RangeForm();
if(!emptyempty($_POST[&#39;RangeForm&#39;])){$model->attributes=$_POST[&#39;RangeForm&#39;];if($model->validate()) $success=true;
}
$this->render(&#39;index&#39;, array(&#39;model&#39; => $model,&#39;success&#39; => $success,));}

建立對應的View

Success!
beginWidget(&#39;CActiveForm&#39;); ?>
errorSummary($model); ?>
widget(&#39;RangeInputField&#39;,array(&#39;model&#39;=>$model,&#39;attributeFrom&#39; => &#39;from&#39;,&#39;attributeTo&#39; => &#39;to&#39;,)) ?>endWidget(); ?>

運行這個範例

PHP開發框架Yii Framework教學(10) UI元件 自訂元件

以上就是PHP開發框架Yii Framework教學(10) UI元件自訂元件的內容,更多相關內容請關注PHP開發框架Yii Framework教學(10) UI元件自訂元件的內容,更多相關內容請注意PHP網(www.php .cn)!


陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn