Come creare un widget riutilizzabile in Yii2

Question

Ho realizzato un semplice widget nel mio progetto corrente di yii2. Semplicemente, crea un elenco di opzioni selezionate per tutti i temi di jui e consente all'utente di modificare il tema e salvarlo tramite i cookie.

Questo widget richiede due file javascript, - sono registrati in run() - uno di questi è il plug-in jquery dei cookie. Chiedo informazioni sull'essere in grado di salvare l'integrità di questo widget e dei suoi file js per renderlo facile da riutilizzare in altri progetti Yii2 senza la necessità, maunalmente, di copiare tutti i file js necessari?

<?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

Finalmente ho trovato la soluzione. Dipende da Yii2 Extensions e AssetBundles. La storia è semplice, basta fare tutti i file in una cartella collocati in una delle cartelle Yii2 predefinite, ad esempio: comune, fornitore.- A proposito, il fornitore si trova in entrambi i modelli dell'applicazione di base yii2 avanzata -.

Oltre a tutti i file, vale a dire per il mio caso, il file php di classe widget ei file javascripts, è necessario creare il file di classe php YourWidgetNameAsset. In effetti, la chiave principale della soluzione risiede in quella classe.

Il mio caso

ho un widget chiamato JuiThemeSelectWidget ho messo dentro una cartella denominata saidbakr sotto vendor directory in modo abbiamo vendor\saidbakr namespace. Quella cartella contiene i seguenti quattro file:

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

Il file numero 3 dipende dalla numero di file 4 per la creazione di cookie per salvare l'ultima scelta dell'utente.

Ora lascia vediamo il codice del numero di file 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', 
    ]; 
} 

Qui abbiamo definito AssetBundle per il widget qualcosa di simile a descritto nel this official source.

Ora ci prenderemo uno sguardo alla intestazione della classe widget stesso e la sua run() metodo:

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

E 'chiaro che abbiamo usato il fascio di asset come descritto nella this link ma qui abbiamo usato $this->getView() invece di $this perché il metodo non viene richiamato da una vista.

ho compressa la cartella denominata saidbakr e caricato a this location o checkout questo GitHub Repository, per controllare che cosa ho fatto, che il suo nome è Yii2 estensione.Basta estrarre il contenuto dell'archivio nella cartella denominata saidbakr direttamente nella cartella del fornitore, Quindi la struttura del file deve essere `vendor \ saidbakr (i quattro file considerati nell'elenco in alto) e utilizzare il widget nelle visualizzazioni come il seguente :

<?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

Aggiungi widget nella yii2 Crea cartella componenti all'interno directory.then radice creano file php. utilizza i componenti dello spazio dei nomi in quel file (app dello spazio dei nomi \ componenti). include widget (usa app \ base \ widget). Creazione di una classe che estende l'app dello spazio dei nomi dello spazio dei nomi \ componenti; use yii \ base \ Widget; Creare una cartella di viste che contiene il file di visualizzazione che chiama dal widget.