Cách tạo tiện ích có thể sử dụng lại trong Yii2

Question

Tôi đã tạo một tiện ích đơn giản trong dự án hiện tại của mình là yii2. Đơn giản, nó tạo ra một danh sách tùy chọn lựa chọn cho tất cả các chủ đề jui và cho phép người dùng thay đổi chủ đề và lưu nó theo ý nghĩa của cookie.

Tiện ích này cần hai tệp javascript, - chúng được đăng ký chạy() - một trong số đó là plugin cookie jquery. Tôi hỏi về cách để tiết kiệm tính toàn vẹn của widget này và các tập tin js của nó để làm cho nó dễ dàng được tái sử dụng trong các dự án Yii2 khác mà không cần, maunally, sao chép tất cả các file js cần thiết?

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

Cuối cùng tôi đã tìm ra giải pháp. Nó phụ thuộc vào Yii2 Extensions và AssetBundles. Câu chuyện rất đơn giản, chỉ cần tạo tất cả các tệp trong một thư mục được đặt trong một thư mục Yii2 mặc định, ví dụ: common, vendor.- Nhân tiện, nhà cung cấp được tìm thấy trong cả mẫu ứng dụng yii2 cơ bản và nâng cao -.

Ngoài tất cả các tệp, ví dụ: cho trường hợp của tôi, tệp lớp tiện ích php và tệp javascripts, bạn phải tạo tệp lớp php YourWidgetNameAsset. Thật vậy, chìa khóa chủ của giải pháp nằm trong lớp đó.

trường hợp của tôi

Tôi có một widget tên JuiThemeSelectWidget tôi đặt nó bên trong một thư mục có tên saidbakr dưới vendor thư mục vì vậy chúng tôi có vendor\saidbakr namespace. thư mục chứa bốn file sau:

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

Các tập tin số 3 phụ thuộc vào tệp số 4 để tạo cookie để lưu lựa chọn của người dùng cuối cùng.

Bây giờ cho phép chúng ta nhìn thấy mã của file số 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', 
    ]; 
} 

Ở đây chúng ta định nghĩa AssetBundle cho một cái gì đó tương tự như phụ tùng được mô tả trong this official source.

Bây giờ chúng ta sẽ xem xét ở phần đầu của lớp phụ tùng chính nó và run() phương pháp của nó:

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

Rõ ràng là chúng tôi sử dụng gói tài sản như mô tả trong this link nhưng ở đây chúng tôi sử dụng $this->getView() thay vì $this vì phương thức không được gọi từ chế độ xem.

Tôi đã nén thư mục có tên saidbakr và tải lên nó để this location hay kiểm này GitHub Repository, để kiểm tra những gì có tôi làm mà tên của nó là Yii2 mở rộng.Chỉ cần trích xuất nội dung của tệp nén vào thư mục có tên là saidbakr ngay dưới thư mục vendor, Vì vậy, cấu trúc tệp phải là `vendor \ saidbakr (bốn tệp được xem trong danh sách ở trên) và sử dụng tiện ích con trong chế độ xem của bạn như sau :

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

Thêm tiện ích trong yii2 Tạo thư mục thành phần bên trong thư mục gốc.hãy tạo tệp php. sử dụng các thành phần không gian tên trong tệp đó (không gian tên ứng dụng \ thành phần). bao gồm tiện ích (sử dụng app \ base \ widget). Tạo lớp mở rộng lớp Widget ứng dụng không gian tên \ thành phần; sử dụng yii \ base \ Widget; Tạo thư mục chế độ xem có chứa chức năng gọi tệp xem từ tiện ích con.