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

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

第3步 - 如果在瀏覽器中打開URL=> http://localhost:8080/index.php?r=site/test-widget ，就會(huì)看到進(jìn)度條部件如下所示,。

使用Widgets

要在視圖中使用一個(gè)小部件,，您應(yīng)該調(diào)用 yii\base\Widget::widget() 函數(shù)。 這個(gè)函數(shù)使用的配置數(shù)組來初始化窗口小部件,。在前面的例子中,，我們用插入百分比進(jìn)度條和配置對(duì)象標(biāo)記參數(shù)。

一些小部件需要內(nèi)容塊,，應(yīng)該封閉在yii\base\Widget::begin() 和 yii\base\Widget::end()函數(shù)之間,。 例如，下面的 widget 顯示一個(gè)聯(lián)系的表單 -

<?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(); ?> 

創(chuàng)建Widgets

要?jiǎng)?chuàng)建一個(gè)窗口小部件,，應(yīng)該擴(kuò)展類 yii\base\Widget,。那么需要重寫 yii\base\Widget::init() 和 yii\base\Widget::run() 函數(shù)。run()函數(shù)將返回渲染的結(jié)果,。 init()函數(shù)將標(biāo)準(zhǔn)化小部件的屬性,。

init()函數(shù)將標(biāo)準(zhǔn)化小部件的屬性。 在 components 文件夾內(nèi),，創(chuàng)建一個(gè)名為 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 = '第一個(gè)Widget'; 
         } 
      }  
      public function run() { 
         return "<h1>$this->mes</h1>"; 
      } 
   } 
?>

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

第3步 - 訪問URL=> http://localhost:8080/index.php?r=site/test-widget ,，將會(huì)看到以下內(nèi)容輸出。

<?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步 - 現(xiàn)在H1標(biāo)簽將環(huán)繞的所有內(nèi)容。請(qǐng)注意,，我們使用 ob_start()函數(shù)來緩沖輸出,。修改  views/site/testwidget.php 視圖使用如下面給出的代碼。

<?php
   use app\components\FirstWidget;
?>
<?php FirstWidget::begin(); ?>
   第一個(gè)Widget在H1標(biāo)簽中
<?php FirstWidget::end(); ?>

將會(huì)看到下面的輸出 -

要點(diǎn)

• 要在MVC模式下創(chuàng)建,。應(yīng)該保持表現(xiàn)層在視圖,，邏輯在窗口小部件(widget)類。
• 設(shè)計(jì)成自包含的,。最終開發(fā)人員應(yīng)該能夠?qū)⑺O(shè)計(jì)到一個(gè)視圖,。