Yii小部件(Widget)

widget是可重複使用的客戶端代碼，它包含HTML，CSS 和 JS。此代碼包含最少邏輯並被包裝在一個 yii\base\Widget 對象。我們可以很容易地此對象插入到在任意視圖中應用。

public function actionTestWidget() {
   return $this->render('testwidget');
}

<?php
   use yii\bootstrap\Progress;
?>
<?= Progress::widget(['percent' => 60, 'label' => 'Progress 60%']) ?>

使用Widgets

要在視圖中使用一個小部件，您應該調用 yii\base\Widget::widget() 函數。 這個函數使用的配置數組來初始化窗口小部件。在前面的例子中，我們用插入百分比進度條和配置對象標記參數。

一些小部件需要內容塊，應該封閉在yii\base\Widget::begin() 和 yii\base\Widget::end()函數之間。 例如，下麵的 widget 顯示一個聯繫的表單 -

<?php $form = ActiveForm::begin(['id' => 'contact-form']); ?>
   <?= $form->field($model, 'name') ?>
   <?= $form->field($model, 'email') ?>
   <?= $form->field($model, 'subject') ?>
   <?= $form->field($model, 'body')->textArea(['rows' => 6]) ?>
   <?= $form->field($model, 'verifyCode')->widget(Captcha::className(), [
      'template' =>
         '<div class="row">
            <div class = "col-lg-3">{image}</div>
            <div class = "col-lg-6">{input}</div>
         </div>',
   ]) ?>
   <div class = "form-group">
      <?= Html::submitButton('Submit', ['class' => 'btn btn-primary',
         'name' => 'contact-button']) ?>
   </div>
<?php ActiveForm::end(); ?>

創建Widgets

要創建一個窗口小部件，應該擴展類 yii\base\Widget。那麼需要重寫 yii\base\Widget::init() 和 yii\base\Widget::run() 函數。run()函數將返回渲染的結果。 init()函數將標準化小部件的屬性。

init()函數將標準化小部件的屬性。 在 components 檔夾內，創建一個名為 FirstWidget.php 檔，並使用下麵的代碼。

<?php
   namespace app\components;
   use yii\base\Widget;
   class FirstWidget extends Widget {
      public $mes;
      public function init() {
         parent::init();
         if ($this->mes === null) {
            $this->mes = '第一個Widget';
         }
      }
      public function run() {
         return "<h1>$this->mes</h1>";
      }
   }
?>

<?php
   use app\components\FirstWidget;
?>
<?= FirstWidget∷widget() ?>

<?php
   namespace app\components;
   use yii\base\Widget;
   class FirstWidget extends Widget {
      public function init() {
         parent::init();
         ob_start();
      }
      public function run() {
         $content = ob_get_clean();
         return "<h1>$content</h1>";
      }
   }
?>  

第5步 - 現在H1標籤將環繞的所有內容。請注意，我們使用 ob_start()函數來緩衝輸出。修改  views/site/testwidget.php 視圖使用如下面給出的代碼。

<?php
   use app\components\FirstWidget;
?>
<?php FirstWidget::begin(); ?>
   第一個Widget在H1標籤中

<?php FirstWidget::end(); ?>

要點

• 要在MVC模式下創建。應該保持表現層在視圖，邏輯在窗口小部件(widget)類。
• 設計成自包含的。最終開發人員應該能夠將它設計到一個視圖。

上一篇： Yii模型 下一篇： Yii模組(Modules)