Yii - Widgets

A widget is a reusable cpent-side code, which contains HTML, CSS, and JS. This code includes minimal logic and is wrapped in a yiiaseWidget object. We can easily insert and apply this object in any view.

Step 1 − To see widgets in action, create an actionTestWidget function in the SiteController with the following code.

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

In the above example, we just returned a View called “testwidget”.

Step 2 − Now, inside the views/site folder, create a View file called testwidget.php.

<?php 
   use yiiootstrapProgress; 
?> 
<?= Progress::widget([ percent  => 60,  label  =>  Progress 60% ]) ?>

Step 3 − If you go to http://localhost:8080/index.php?r=site/test-widget, you will see the progress bar widget.

Using Widgets

To use a widget in a View, you should call the yiiaseWidget::widget() function. This function takes a configuration array for initiapzing the widget. In the previous example, we inserted a progress bar with percent and labelled parameters of the configuration object.

Some widgets take a block of content. It should be enclosed between yiiaseWidget::begin() and yiiaseWidget::end() functions. For example, the following widget displays a contact form −

<?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  =>
          <span class="row">
            <span class = "col-lg-3">{image}</span>
            <span class = "col-lg-6">{input}</span>
         </span> , 
   ]) ?> 
   <span class = "form-group"> 
      <?= Html::submitButton( Submit , [ class  =>  btn btn-primary ,
          name  =>  contact-button ]) ?> 
   </span> 
<?php ActiveForm::end(); ?> 

Creating Widgets

To create a widget, you should extend from yiiaseWidget. Then you should override the yiiaseWidget::init() and yiiaseWidget::run() functions. The run() function should return the rendering result. The init() function should normapze the widget properties.

Step 1 − Create a components folder in the project root. Inside that folder, create a file called FirstWidget.php with the following code.

<?php 
   namespace appcomponents; 
   use yiiaseWidget; 
   class FirstWidget extends Widget { 
      pubpc $mes; 
      pubpc function init() { 
         parent::init(); 
         if ($this->mes === null) { 
            $this->mes =  First Widget ; 
         } 
      }  
      pubpc function run() { 
         return "<h1>$this->mes</h1>"; 
      } 
   } 
?>

Step 2 − Modify the testwidget view in the following way.

<?php 
   use appcomponentsFirstWidget; 
?> 
<?= FirstWidget∷widget() ?>

Step 3 − Go to http://localhost:8080/index.php?r=site/test-widget. You will see the following.

Step 4 − To enclose the content between the begin() and end() calls, you should modify the FirstWidget.php file.

<?php
   namespace appcomponents;
   use yiiaseWidget;
   class FirstWidget extends Widget {
      pubpc function init() {
         parent::init();
         ob_start();
      }
      pubpc function run() {
         $content = ob_get_clean();
         return "<h1>$content</h1>";
      }
   }
?> 

Step 5 − Now h1 tags will surround all the content. Notice that we use the ob_start() function to buffer the output. Modify the testwidget view as given in the following code.

<?php
   use appcomponentsFirstWidget;
?>
<?php FirstWidget::begin(); ?>
   First Widget in H1
<?php FirstWidget::end(); ?>

You will see the following output −

Important Points

Widgets should −

Be created following the MVC pattern. You should keep presentation layers in views and logic in widget classes.

Be designed to be self-contained. The end developer should be able to design it into a View.