Yii - Widget

Un widget è un codice lato client riutilizzabile, che contiene HTML, CSS e JS. Questo codice include una logica minima ed è racchiuso in un fileyii\base\Widgetoggetto. Possiamo facilmente inserire e applicare questo oggetto in qualsiasi vista.

Step 1 - Per vedere i widget in azione, crea un file actionTestWidget funzione in SiteController con il seguente codice.

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

Nell'esempio sopra, abbiamo appena restituito un file View chiamato “testwidget”.

Step 2 - Ora, all'interno della cartella views / site, crea un file View chiamato testwidget.php.

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

Step 3 - Se vai a http://localhost:8080/index.php?r=site/test-widget, vedrai il widget della barra di avanzamento.

Utilizzo dei widget

Per utilizzare un widget in un file View, dovresti chiamare il yii\base\Widget::widget()funzione. Questa funzione accetta un array di configurazione per inizializzare il widget. Nell'esempio precedente, abbiamo inserito una barra di avanzamento con la percentuale e i parametri etichettati dell'oggetto di configurazione.

Alcuni widget richiedono un blocco di contenuto. Dovrebbe essere racchiuso trayii\base\Widget::begin() e yii\base\Widget::end()funzioni. Ad esempio, il widget seguente mostra un modulo di contatto:

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

Creazione di widget

Per creare un widget, dovresti estendere da yii\base\Widget. Quindi dovresti sovrascrivere il fileyii\base\Widget::init() e yii\base\Widget::run()funzioni. Ilrun()la funzione dovrebbe restituire il risultato del rendering. Ilinit() la funzione dovrebbe normalizzare le proprietà del widget.

Step 1- Crea una cartella dei componenti nella radice del progetto. All'interno di quella cartella, crea un file chiamatoFirstWidget.php con il seguente codice.

<?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 il testwidget visualizzare nel modo seguente.

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

Step 3 - Vai a http://localhost:8080/index.php?r=site/test-widget. Vedrai quanto segue.

Step 4 - Per racchiudere il contenuto tra i file begin() e end() chiamate, è necessario modificare il file FirstWidget.php file.

<?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- Ora i tag h1 circonderanno tutto il contenuto. Si noti che utilizziamo l'estensioneob_start()funzione per bufferizzare l'output. Modificare la visualizzazione del testwidget come indicato nel codice seguente.

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

Vedrai il seguente output:

Punti importanti

I widget dovrebbero:

  • Essere creato seguendo lo schema MVC. È necessario mantenere i livelli di presentazione nelle viste e la logica nelle classi di widget.

  • Essere progettato per essere autonomo. Lo sviluppatore finale dovrebbe essere in grado di progettarlo in una vista.