Yii - 小部件

  • 简述

    小部件是可重用的客户端代码,其中包含 HTML、CSS 和 JS。这段代码包含最少的逻辑并且被包装在一个yii\base\Widget对象中。我们可以轻松地在任何视图中插入和应用此对象。
    第 1 步- 要查看正在运行的小部件,请使用以下代码在SiteController中创建一个actionTestWidget函数。
    
    public function actionTestWidget() { 
       return $this->render('testwidget'); 
    }
    
    在上面的示例中,我们只返回了一个名为“testwidget”的视图
    第 2 步- 现在,在 views/site 文件夹中,创建一个名为testwidget.php 的视图文件。
    
    <?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 模式创建。您应该在小部件类中的视图和逻辑中保留表示层。
    • 设计成独立的。最终开发人员应该能够将其设计为视图。