Widgets are reusable units used in views to create complex and configurable user interface units using an object-oriented approach. For example, the date picker widget can generate an elegant date picker that allows users to select dates. You only need to insert the following code in the view:

<?php 
use yii\jui\DatePicker;
?>
<?= DatePicker::widget([&#39;name&#39; => &#39;date&#39;]) ?>

Yii provides many excellent widgets, such as [[yiiwidgetsActiveForm|active form] ], [yiiwidgetsMenu|menu]], jQuery UI widgets, Twitter Bootstrap widgets. Next, we will introduce the basic knowledge of widgets. If you want to know more about a certain widget, please refer to the corresponding class API document.

Using widgets

Widgets are basically used in views. In views, you can call the [[yiibaseWidget::widget()]] method to use widgets. This method initializes the widget using the configuration array and returns the result of the widget being rendered. For example, the following code inserts a date picker widget, which is configured to use Russian, and the input box content is the value of the from_date attribute of $model.

<?php
use yii\jui\DatePicker;
?>
<?= DatePicker::widget([    
&#39;model&#39; => $model,    
&#39;attribute&#39; => &#39;from_date&#39;,    
&#39;language&#39; => &#39;ru&#39;,    
&#39;clientOptions&#39; => [        
&#39;dateFormat&#39; => &#39;yy-mm-dd&#39;,    
],]) 
?>

Some widgets can use data content in [[yiibaseWidget::begin()]] and [[yiibaseWidget::end()]] calls. Some widgets can take a block of content which should be enclosed between the invocation of For example, the following code uses the [[yiiwidgetsActiveForm]] widget to generate a login form. The widget will generate< The opening and closing tags of form>, and any code in between will also be rendered.

<?php
use yii\widgets\ActiveForm;
use yii\helpers\Html;
?>
<?php $form = ActiveForm::begin([&#39;id&#39; => &#39;login-form&#39;]); ?>

    <?= $form->field($model, &#39;username&#39;) ?>

    <?= $form->field($model, &#39;password&#39;)->passwordInput() ?>

    <div class="form-group">
        <?= Html::submitButton(&#39;Login&#39;) ?>
    </div><?php ActiveForm::end(); ?>

Note that the rendering result returned by calling [[yiibaseWidget::widget()]] is different. Calling the [[yiibaseWidget::begin()]] method returns a widget instance that can be used to construct the widget content.

Create widgets

Inherit the [[yiibaseWidget]] class and override the [[yiibaseWidget::init()]] and/or [[yiibaseWidget::run()]] methods to create widgets. Typically the init() method handles widget properties, and the run() method contains the code for the widget to generate rendering results. The rendering result can be directly "echoed" output in the run() method or returned as a string.

The HelloWidget in the following code encodes and displays the value assigned to the message attribute. If the attribute is not assigned a value, "Hello World" will be displayed by default.

namespace app\components;
use yii\base\Widget;
use yii\helpers\Html;
class HelloWidget extends Widget{
   public $message;

   public function init()
   {
       parent::init();
       if ($this->message === null) {
           $this->message = 'Hello World';
       }
   }

   public function run()
   {
       return Html::encode($this->message);
   }}

To use this widget simply use the following code in your view:

<?php
use app\components\HelloWidget;
?>
<?= HelloWidget::widget([&#39;message&#39; => &#39;Good morning&#39;]) ?>

The following is another HelloWidget that can be used in begin() and end() calls, and the HTML-encoded content is then displayed.

namespace app\components;
use yii\base\Widget;
use yii\helpers\Html;
class HelloWidget extends Widget{
   public function init()
   {
       parent::init();
       ob_start();
   }

   public function run()
   {
       $content = ob_get_clean();
       return Html::encode($content);
   }}

As shown above, PHP output buffering is started in init(), and all output content between the init() and run() methods will be obtained, processed and returned in run().

Supplement: When you call [[yiibaseWidget::begin()]], a new widget instance will be created and the init() method will be called at the end of the construction. The run() method will be called and output at end() Return results.

The following code shows how to use this HelloWidget:

<?php
use app\components\HelloWidget;
?>
<?php HelloWidget::begin(); ?>
       content that may contain <tag>&#39;s
<?php HelloWidget::end(); ?>

Sometimes the widget needs to render a lot of content, a better way is to put the content into a view file, and then call the [[yiibaseWidget::render()]] method Render the view file, for example:

public function run(){
    return $this->render('hello');}

The view file of the widget is stored in the WidgetPath/views directory by default, and WidgetPath represents the directory where the widget class file is located. If the above example widget class file is under @app/components, the @app/components/views/hello.php view file will be rendered. You may override the [[yiibaseWidget::getViewPath()]] method to customize the path of the view file.

Best Practices

Widgets are an object-oriented way to reuse view code.

You still need to follow the MVC pattern when creating widgets. Usually the logic code is in the widget class and the display content is in the view.

Widgets should be designed to be independent, which means that when using a widget, you can discard it directly without additional processing. But it can be tricky when widgets require external resources such as CSS, JavaScript, images, etc. Fortunately, Yii provides resource packages to solve this problem.

When a widget only contains view code, it is very similar to a view. In fact, in this case, the only difference is that the widget is a reusable class and the view is just a normal PHP script used in the application.