Yii - Widgets

Un widget est un code côté client réutilisable, qui contient du HTML, du CSS et du JS. Ce code comprend une logique minimale et est enveloppé dans unyii\base\Widgetobjet. Nous pouvons facilement insérer et appliquer cet objet dans n'importe quelle vue.

Step 1 - Pour voir les widgets en action, créez un actionTestWidget fonction dans le SiteController avec le code suivant.

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

Dans l'exemple ci-dessus, nous venons de renvoyer un View appelé “testwidget”.

Step 2 - Maintenant, dans le dossier views / site, créez un fichier View appelé testwidget.php.

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

Step 3 - Si vous allez à http://localhost:8080/index.php?r=site/test-widget, vous verrez le widget de la barre de progression.

Utilisation des widgets

Pour utiliser un widget dans un View, vous devriez appeler le yii\base\Widget::widget()fonction. Cette fonction prend un tableau de configuration pour initialiser le widget. Dans l'exemple précédent, nous avons inséré une barre de progression avec des pourcentages et des paramètres étiquetés de l'objet de configuration.

Certains widgets prennent un bloc de contenu. Il doit être placé entreyii\base\Widget::begin() et yii\base\Widget::end()les fonctions. Par exemple, le widget suivant affiche un formulaire de contact -

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

Créer des widgets

Pour créer un widget, vous devez étendre de yii\base\Widget. Ensuite, vous devez remplacer leyii\base\Widget::init() et yii\base\Widget::run()les fonctions. lerun()La fonction doit renvoyer le résultat du rendu. leinit() La fonction devrait normaliser les propriétés du widget.

Step 1- Créez un dossier de composants à la racine du projet. Dans ce dossier, créez un fichier appeléFirstWidget.php avec le code suivant.

<?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 voir de la manière suivante.

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

Step 3 - Aller à http://localhost:8080/index.php?r=site/test-widget. Vous verrez ce qui suit.

Step 4 - Pour placer le contenu entre les begin() et end() appels, vous devez modifier le FirstWidget.php fichier.

<?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- Désormais, les balises h1 entoureront tout le contenu. Notez que nous utilisons leob_start()fonction pour tamponner la sortie. Modifiez la vue du testwidget comme indiqué dans le code suivant.

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

Vous verrez la sortie suivante -

Les points importants

Les widgets devraient -

  • Être créé selon le modèle MVC. Vous devez conserver les couches de présentation dans les vues et la logique dans les classes de widgets.

  • Être conçu pour être autonome. Le développeur final doit être en mesure de le concevoir dans une vue.