title: How to create a reusable widget in Yii2
body: <p>I have made a simple widget in my current project of <a href="/questions/tagged/yii2" class="post-tag" title="show questions tagged 'yii2'" rel="tag">yii2</a>. 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.</p>
  
  <p>This widget need two javascript files, -<em>they are registered in run()</em>- 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?</p>
  
  <pre><code>&lt;?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-&gt;themeListId)   self::$juiThemeSelectId = $this-&gt;themeListId;
      $this-&gt;list = $this-&gt;createSelectList($this-&gt;getThemesList());
      $this-&gt;makeScript();
    }
    public static function getThemesList()
    {
      $themesPath =  dirname(Yii::$app-&gt;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) &amp;&amp; ($item != '.' &amp;&amp; $item !='..')) $output[] = $item;
      }
      return $output;
    }
  
    public static function createSelectList($items)
    { 
      $juiThemeSelectId = self::$juiThemeSelectId;    
      $output = '';
      $output .= "&lt;select id=\"$juiThemeSelectId\"&gt;"."\n";
      foreach ($items as $item){
        $output .= "&lt;option value='$item'&gt;$item&lt;/option&gt;\n";
      }
      $output .= "&lt;/select&gt;\n";
      return $output;
    }
  
    /**
     * Making the client-side script for the list   */
  
    private  function makeScript()
    {
  
      $t = self::$juiThemeSelectId;
      $this-&gt;script = &lt;&lt;&lt;EOD
  
  &lt;script&gt;
      var juiThemeSelectId = "$t"   
  &lt;/script&gt;           
  EOD;
  
    }
    public function run() {
      parent::run();
      $this-&gt;getView()-&gt;registerJsFile('/myjs/jquery.cookie.js', ['depends' =&gt; [JqueryAsset::className()]]);
      $this-&gt;getView()-&gt;registerJsFile('/myjs/JuiThemeSelect.js', ['depends' =&gt; [JqueryAsset::className()]]);
      return "$this-&gt;label $this-&gt;list \n $this-&gt;script";
    }
  }
  </code></pre>