Как создать многоразовый виджет в Yii2

Question

Я создал простой виджет в своем текущем проекте yii2. Просто он создает список опций выбора для всех тем jui и позволяет пользователю изменять тему и сохранять ее в виде файлов cookie.

Этот виджет нуждается в двух файлах javascript, - они зарегистрированы в run() - одним из них является плагин jquery cookie. Я спрашиваю о том, как сохранить целостность этого виджета и его js-файлов, чтобы упростить повторное использование в других проектах Yii2 без необходимости, maunally, копировать все необходимые 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.

В дополнение ко всем файлам, например для моего случая, php-файл класса виджета и файлы javascripts, вам необходимо создать файл класса php YourWidgetNameAsset. Действительно, главный ключ решения лежит в этом классе.

Мой случай

У меня есть виджет с именем JuiThemeSelectWidget Я поместил его в папку с именем 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 для виджета нечто подобное описано в this official source.

Теперь мы посмотрим на заголовок самого и его 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 link, но здесь мы использовали $this->getView() вместо $this, потому что метод не вызывается из представления.

Я сжимал папку с именем saidbakr и загрузив его на this location или оформить этот GitHub Repository, чтобы проверить, что у меня из которой его имя 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();") ;?> 

Answer 2

Добавить виджет в yii2 Создать папку компонентов внутри корневой directory.then создать файл PHP. использовать компоненты пространства имен в этом файле (приложение пространства имен \ компоненты). включают виджет (используйте приложение \ base \ widget). Создать класс, который расширяет класс виджета namespace app \ components; использование yii \ base \ Widget; Создайте папку представлений, содержащую вызов файла вида из виджета.