Как создать многоразовый виджет в Yii2
Я сделал простой виджет в моем текущем проекте 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";
}
}
Решение
Наконец-то я нашел решение. Это зависит от Расширения Yii2 а также AssetBundles. История проста: просто поместите все файлы в одной папке в одну из стандартных папок Yii2, например: common, vendor.-Кстати, в шаблоне базового и расширенного приложения yii2 можно найти вендора-.
В дополнение ко всем файлам, т.е. для моего случая, php-файл класса виджетов и файлы javascripts, вы должны создать php-файл YourWidgetNameAsset. Действительно, главный ключ решения лежит в этом классе.
Мое дело
У меня есть виджет с именем JuiThemeSelectWidget Я поместил его в папку с именем saidbakr под vendor каталог, поэтому мы имеем vendor\saidbakr Пространство имен. Эта папка содержит следующие четыре файла:
- JuiThemeSelectWidget.php
- JuiThemeSelectAsset.php
- JuiThemeSelect.js
- jquery.cookie.js
Файл № 3 зависит от файла № 4 для создания куки, чтобы сохранить выбор последнего пользователя.
Теперь давайте посмотрим код файла № 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',
];
}
Здесь мы определили AssetBundle для виджета что-то похожее на описанное в этот официальный источник.
Теперь мы посмотрим на заголовок самого класса виджета и его 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 Repository , чтобы проверить, что я сделал, что его зовут Расширение Yii2. Просто распакуйте содержимое архива в папку saidbakr прямо в папке vendor, Таким образом, файловая структура должна быть `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();") ;?>
Другие решения
Добавить виджет в yii2
Создайте папку компонентов внутри корневого каталога. Затем создайте файл php.
использовать компоненты пространства имен в этом файле (пространство имен приложение \ компоненты).
включить виджет (используйте app \ base \ widget).
Создать класс, который расширяет класс Widget
пространство имен приложение \ компоненты;
используйте yii \ base \ Widget;
Создайте папку представлений, содержащую вызов файла представления из виджета.