How to create a reusable widget in Yii2

Question

I have made a simple widget in my current project of yii2. Simply, it creates a select options list for all jui themes and allow the user to change the theme and save it by the mean of cookies.

This widget need two javascript files, -they are registered in run()- one of them is the jquery cookies plugin. I ask about the being of way to save integrity of this widget and its js files to make it easy to be reused in other Yii2 projects without the need for, maunally, copying all the needed js files?

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

Solution 1

Finally I have found the solution. It depends on Yii2 Extensions and AssetBundles. The story is simple, just make all files in one folder placed in one of default Yii2 folders, for example: common, vendor.-By the way, vendor is found in both basic and advanced yii2 application's template-.

In addition to all files, i.e for my case, the widget class php file and the javascripts files, you have to create YourWidgetNameAsset php class file. Indeed, the master key of the solution lies in that class.

My case

I have a widget named JuiThemeSelectWidget I placed it inside a folder named saidbakr under vendor directory so we have vendor\saidbakr namespace. That folder contains the following four files:

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

The file number 3 depends on the file number 4 for creating cookies to save the last user's choice.

Now lets we see the code of file number 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. [email protected]
 * 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',
    ];
}

Here we defined AssetBundle for the widget something similar to described in this official source.

Now we will take a look at the header of the widget class itself and its run() method:

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

It is clear that we used the asset bundle as described in this link but here we used $this->getView() instead of $this because the method does not invoked from a view.

I have compressed the folder named saidbakr and uploaded it to this location or checkout this GitHub Repository , to check what have I made which its name is Yii2 Extension. Just extract the contents of the archive to folder named saidbakr directly under vendor folder, So the file structure must be `vendor\saidbakr(the four files regarded in the list above), and use the widget in your views something like the following:

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

Solution 2

Add Widget in yii2 Create components folder inside root directory.then create php file. use namespace components in that file(namespace app\components). include widget (use app\base\widget). Create class that extends Widget class namespace app\components; use yii\base\Widget; Create a views folder that contains view file calling from widget.