Yii-widgets

提供:Dev Guides
移動先:案内検索

Yii-ウィジェット

ウィジェットは、HTML、CSS、およびJSを含む再利用可能なクライアント側コードです。 このコードには最小限のロジックが含まれており、 yii \ base \ Widget オブジェクトにラップされています。 このオブジェクトを任意のビューに簡単に挿入して適用できます。

ステップ1 *-ウィジェットの動作を確認するには、次のコードを使用して *SiteControlleractionTestWidget 関数を作成します。

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

上記の例では、“ testwidget” *という *View を返しました。

ステップ2 *-次に、views/siteフォルダー内に、 testwidget.php。*という名前のViewファイルを作成します。

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

ステップ3 *- *http://localhost:8080/index.php?r = site/test-widget にアクセスすると、プログレスバーウィジェットが表示されます。

プログレスバー

ウィジェットを使用する

View でウィジェットを使用するには、* yii \ base \ Widget
widget()*関数を呼び出す必要があります。 この関数は、ウィジェットを初期化するための構成配列を受け取ります。 前の例では、構成オブジェクトのパーセントおよびラベル付きパラメーターを含む進行状況バーを挿入しました。
一部のウィジェットはコンテンツのブロックを受け取ります。 * yii \ base \ Widget
begin()関数と yii \ base \ Widget :: end()*関数で囲む必要があります。 たとえば、次のウィジェットは連絡先フォームを表示します-
<?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(); ?>

ウィジェットを作成する

ウィジェットを作成するには、 yii \ base \ Widget から拡張する必要があります。 次に、* yii \ base \ Widget
init()および yii \ base \ Widget :: run()*関数をオーバーライドする必要があります。 * run()*関数はレンダリング結果を返すはずです。 * init()*関数は、ウィジェットのプロパティを正規化する必要があります。

ステップ1 *-プロジェクトルートにコンポーネントフォルダを作成します。 そのフォルダー内で、 *FirstWidget.php というファイルを次のコードで作成します。

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

ステップ2 *- *testwidget ビューを次の方法で変更*します。

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

ステップ3 *- *http://localhost:8080/index.php?r = site/test-widget に移動します。 以下が表示されます。

最初のウィジェット

ステップ4 *- begin()呼び出しと end()呼び出しの間でコンテンツを囲むには、 *FirstWidget.php ファイルを変更する必要があります。

<?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>";
      }
   }
?>
  • ステップ5 *-すべてのコンテンツをh1タグで囲みます。 * ob_start()*関数を使用して出力をバッファリングすることに注意してください。 次のコードに示すように、testwidgetビューを変更します。
<?php
   use app\components\FirstWidget;
?>
<?php FirstWidget::begin(); ?>
   First Widget in H1
<?php FirstWidget::end(); ?>

次の出力が表示されます-

H1の最初のウィジェット

重要なポイント

ウィジェットは-

  • MVCパターンに従って作成されます。 プレゼンテーション層をビューに、ウィジェットクラスにロジックを保持する必要があります。
  • 自己完結型になるように設計されている。 最終開発者はそれをビューに設計できるはずです。