如何在Yii2中创建可重用的小部件

Question

我在当前的yii2项目中创建了一个简单的小部件.简单地说,它为所有jui主题创建一个选择选项列表,并允许用户更改主题并将其保存为cookie的意思.

这个小部件需要两个javascript文件, - 它们在run()中注册 - 其中一个是jquery cookies插件.我问的是如何保存这个小部件及其js文件的完整性,以便在其他Yii2项目中轻松重用,而不需要复制所有需要的js文件？

<?php
namespace common\libs;

use yii;
use yii\base\Widget;
use yii\web\View;
use yii\web\JqueryAsset;
/*
 * To change this license header, choose License Headers in Project Properties.
 * To change this template file, choose Tools | Templates
 * and open the template in the editor.
 */

/**
 * Description of JuiThemeSelectWidget
 *
 * @author Said Bakr
 */
class JuiThemeSelectWidget extends Widget
{
  private $list;
  private $script;
  private static $juiThemeSelectId = 'JuiThemesList';
  public $themeListId;
  public $label;
  public function init() {
    parent::init();
    if ($this->themeListId)   self::$juiThemeSelectId = $this->themeListId;
    $this->list = $this->createSelectList($this->getThemesList());
    $this->makeScript();
  }
  public static function getThemesList()
  {
    $themesPath =  dirname(Yii::$app->basePath).DIRECTORY_SEPARATOR."vendor".DIRECTORY_SEPARATOR."bower".DIRECTORY_SEPARATOR."jquery-ui".DIRECTORY_SEPARATOR."themes";
    $output = [];
    foreach (scandir($themesPath) as $item){
      if (is_dir($themesPath.DIRECTORY_SEPARATOR.$item) && ($item != '.' && $item !='..')) $output[] = $item;
    }
    return $output;
  }

  public static function createSelectList($items)
  { 
    $juiThemeSelectId = self::$juiThemeSelectId;    
    $output = '';
    $output .= "<select id=\"$juiThemeSelectId\">"."\n";
    foreach ($items as $item){
      $output .= "<option value='$item'>$item</option>\n";
    }
    $output .= "</select>\n";
    return $output;
  }

  /**
   * Making the client-side script for the list   */

  private  function makeScript()
  {

    $t = self::$juiThemeSelectId;
    $this->script = <<<EOD

<script>
    var juiThemeSelectId = "$t"   
</script>           
EOD;

  }
  public function run() {
    parent::run();
    $this->getView()->registerJsFile('/myjs/jquery.cookie.js', ['depends' => [JqueryAsset::className()]]);
    $this->getView()->registerJsFile('/myjs/JuiThemeSelect.js', ['depends' => [JqueryAsset::className()]]);
    return "$this->label $this->list \n $this->script";
  }
}

Answer 1

最后我找到了解决方案.它取决于Yii2 Extensions和AssetBundles.故事很简单,只需将一个文件夹中的所有文件放在一个默认的Yii2文件夹中,例如:common,vendor.- 顺便说一下,供应商可以在基本和高级yii2应用程序的模板中找到 - .

除了所有文件,即我的情况,widget类php文件和javascripts文件,你必须创建YourWidgetNameAsset php类文件.实际上,解决方案的主要关键在于该类.

我的情况

我有一个名为JuiThemeSelectWidget的小部件我把它放在一个名为directory 的文件夹中saidbakr,vendor所以我们有了vendor\saidbakr命名空间.该文件夹包含以下四个文件:

1. JuiThemeSelectWidget.php
2. JuiThemeSelectAsset.php
3. JuiThemeSelect.js
4. jquery.cookie.js

文件号3取决于文件号4,用于创建cookie以保存最后一个用户的选择.

现在让我们看看文件编号2的代码JuiThemeSelectAsset.php:

<?php
namespace vendor\saidbakr;
use yii\web\AssetBundle;

/*
 * It is free for use and modify with one simple rule:
 * regarding credits for the author either it modified or not
 * Author: Said Bakr. said_fox@yahoo.com
 * http://2index.net
 */

/**
 * Description of Kabb
 *
 * @author Said
 */
class JuiThemeSelectAsset extends AssetBundle
{
  public $sourcePath = '@vendor/saidbakr';

    public $autoGenerate = true;
    /**
     * @inheritdoc
     */
    public $js = ['jquery.cookie.js','JuiThemeSelect.js'];
    public $depends = [
        'yii\jui\JuiAsset',
    ];
}

在这里,我们为小部件定义了AssetBundle,类似于官方来源中描述的内容.

现在我们来看看widget类本身的标题及其run()方法:

<?php
namespace vendor\saidbakr;

use yii;
use yii\base\Widget;
//use yii\web\View;
//use yii\web\JqueryAsset;
class JuiThemeSelectWidget extends Widget
{
  // ...... Class code....

public function run() {
    parent::run();
    JuiThemeSelectAsset::register($this->getView());    
    return "$this->label $this->list \n $this->script";
  }
}

很明显,我们使用了此链接中描述的资产包,但在这里我们使用$this->getView()而不是$this因为该方法不是从视图中调用的.

我已压缩名为的文件夹saidbakr并将其上传到此位置或检出此GitHub存储库,以检查我做了什么,其名称为Yii2 Extension.只需将存档的内容直接提取到供应商文件夹下名为saidbakr的文件夹,因此文件结构必须是`vendor\saidbakr(上面列表中的四个文件),并在您的视图中使用小部件,如下所示:

<?php
use yii\helpers\Html;
use yii\widgets\ActiveForm;
use yii\jui\DatePicker;
use vendor\saidbakr\JuiThemeSelectWidget;
?>
<div>
<?= JuiThemeSelectWidget::widget(['label' => 'Select New JUI Theme', 'themeListId' => 'fox']) ;?>
<div class="profile-form">
</div> 
<h2>Testing Elements for the JUI</h2>
<form>
<select id="sel">
 <option value="1">One</option>
 <option value="2">Two</option>
 <option value="3">Three</option>
</select>
</form>
<?php $this->registerJs("$('#sel').selectmenu();") ;?>