Yii - Widgets

Un widget es un código reutilizable del lado del cliente, que contiene HTML, CSS y JS. Este código incluye una lógica mínima y está envuelto en unyii\base\Widgetobjeto. Podemos insertar y aplicar fácilmente este objeto en cualquier vista.

Step 1 - Para ver los widgets en acción, cree un actionTestWidget función en el SiteController con el siguiente código.

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

En el ejemplo anterior, acabamos de devolver un View llamado “testwidget”.

Step 2 - Ahora, dentro de la carpeta vistas / sitio, cree un archivo de vista llamado testwidget.php.

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

Step 3 - Si vas a http://localhost:8080/index.php?r=site/test-widget, verá el widget de la barra de progreso.

Usar widgets

Para usar un widget en un View, deberías llamar al yii\base\Widget::widget()función. Esta función toma una matriz de configuración para inicializar el widget. En el ejemplo anterior, insertamos una barra de progreso con porcentaje y parámetros etiquetados del objeto de configuración.

Algunos widgets toman un bloque de contenido. Debe estar encerrado entreyii\base\Widget::begin() y yii\base\Widget::end()funciones. Por ejemplo, el siguiente widget muestra un formulario de contacto:

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

Crear widgets

Para crear un widget, debes extender desde yii\base\Widget. Entonces deberías anular elyii\base\Widget::init() y yii\base\Widget::run()funciones. losrun()La función debería devolver el resultado de la representación. losinit() La función debería normalizar las propiedades del widget.

Step 1- Cree una carpeta de componentes en la raíz del proyecto. Dentro de esa carpeta, cree un archivo llamadoFirstWidget.php con el siguiente código.

<?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 = 'First Widget'; 
         } 
      }  
      public function run() { 
         return "<h1>$this->mes</h1>"; 
      } 
   } 
?>

Step 2 - Modify la testwidget ver de la siguiente manera.

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

Step 3 - Ir a http://localhost:8080/index.php?r=site/test-widget. Verá lo siguiente.

Step 4 - Incluir el contenido entre los begin() y end() llamadas, debe modificar el FirstWidget.php archivo.

<?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>";
      }
   }
?>

Step 5- Ahora las etiquetas h1 rodearán todo el contenido. Tenga en cuenta que usamos elob_start()función para almacenar en búfer la salida. Modifique la vista del widget de prueba como se indica en el siguiente código.

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

Verá la siguiente salida:

Puntos importantes

Los widgets deberían:

  • Ser creado siguiendo el patrón MVC. Debe mantener las capas de presentación en las vistas y la lógica en las clases de widgets.

  • Estar diseñado para ser autónomo. El desarrollador final debería poder diseñarlo en una Vista.