Yii - Widgets

Um widget é um código reutilizável do lado do cliente, que contém HTML, CSS e JS. Este código inclui lógica mínima e está envolvido em umyii\base\Widgetobjeto. Podemos inserir e aplicar facilmente este objeto em qualquer visualização.

Step 1 - Para ver os widgets em ação, crie um actionTestWidget função no SiteController com o seguinte código.

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

No exemplo acima, acabamos de retornar um View chamado “testwidget”.

Step 2 - Agora, dentro da pasta views / site, crie um arquivo View chamado testwidget.php.

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

Step 3 - Se você for para http://localhost:8080/index.php?r=site/test-widget, você verá o widget da barra de progresso.

Usando Widgets

Para usar um widget em um View, você deve ligar para o yii\base\Widget::widget()função. Esta função usa uma matriz de configuração para inicializar o widget. No exemplo anterior, inserimos uma barra de progresso com parâmetros percentuais e rotulados do objeto de configuração.

Alguns widgets possuem um bloco de conteúdo. Deve ser colocado entreyii\base\Widget::begin() e yii\base\Widget::end()funções. Por exemplo, o seguinte widget exibe um formulário de contato -

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

Criação de widgets

Para criar um widget, você deve estender de yii\base\Widget. Então você deve substituir oyii\base\Widget::init() e yii\base\Widget::run()funções. orun()função deve retornar o resultado da renderização. oinit() função deve normalizar as propriedades do widget.

Step 1- Crie uma pasta de componentes na raiz do projeto. Dentro dessa pasta, crie um arquivo chamadoFirstWidget.php com o seguinte 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 a testwidget ver da seguinte maneira.

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

Step 3 - Vá para http://localhost:8080/index.php?r=site/test-widget. Você verá o seguinte.

Step 4 - Para delimitar o conteúdo entre o begin() e end() chamadas, você deve modificar o FirstWidget.php Arquivo.

<?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- Agora as tags h1 envolverão todo o conteúdo. Observe que usamos oob_start()função para armazenar a saída. Modifique a visualização testwidget conforme fornecido no código a seguir.

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

Você verá a seguinte saída -

Pontos importantes

Widgets devem -

Ser criado seguindo o padrão MVC. Você deve manter camadas de apresentação em visualizações e lógica em classes de widget.
Ser projetado para ser independente. O desenvolvedor final deve ser capaz de projetá-lo em uma Visualização.

↰ Previous page Next page ↱