آشنایی با widget یا ابزارک ها در فریمورک Yii

ویجت یا ابزارک (widget)، یک کدِ سمتِ client با قابلیت استفاده ی مجدد است که حاوی HTML، CSS و JS می باشد. این کد ، کد منطقی کوچکی است که در شیء yii\base\Widget قرار گرفته شده است. ما به راحتی می توانیم این شی را در هر view یی اضافه و اعمال کنیم.

مرحله 1 - برای دیدن widget ها در اکشن، تابع actionTestWidget را در SiteController با کد زیر ایجاد کنید.

public function actionTestWidget() {

   return $this->render('testwidget');

}

در مثال بالا، ما یک view به نام "testwidget" را برگرداندیم.

مرحله 2 - در داخل پوشه views/site، یک فایل view به نام testwidget.php ایجاد کنید.

<?php 
   use yii\bootstrap\Progress; 
?> 
<?= Progress::widget(['percent' => 60, 'label' => 'Progress 60%']) ?>

مرحله 3 - اگر به آدرس http://localhost:8080/index.php?r=site/test-widget بروید، ویجت نوار پیشرفت را خواهید دید.

طرز استفاده از ابزارک یا widget ها

برای استفاده از یک widget در یک view، شما باید تابع yii\base\Widget::widget() را فراخوانی کنید. این تابع یک آرایه ی پیکربندی برای مقداردهی اولیه ویجت (initializing) را می گیرد. در مثال قبلی، یک نوار پیشرفت با درصد و پارامترهای برچسب شده، در شیء پیکربندی را اضافه نمودیم.

بعضی از widget ها یک بلوک از محتوا را می گیرند.که باید بین توابع yii\base\Widget::begin() و yii\base\Widget::end() محصور شوند. به عنوان مثال، widget زیر فرم تماس را نشان می دهد -

<?php $form = ActiveForm::begin(['id' => 'contact-form']); ?> 
   <?= $form->field($model, 'name') ?> 
   <?= $form->field($model, 'email') ?> 
   <?= $form->field($model, 'subject') ?> 
   <?= $form->field($model, 'body')->textArea(['rows' => 6]) ?> 
   <?= $form->field($model, 'verifyCode')->widget(Captcha::className(), [ 
      'template' =>
         '<div class="row">
            <div class = "col-lg-3">{image}</div>
            <div class = "col-lg-6">{input}</div>
         </div>', 
   ]) ?> 
   <div class = "form-group"> 
      <?= Html::submitButton('Submit', ['class' => 'btn btn-primary',
         'name' => 'contact-button']) ?> 
   </div> 
<?php ActiveForm::end(); ?> 

ایجاد ابزارک

برای ایجاد یک widget باید yii\base\Widget را گسترش دهید. سپس شما باید توابع yii\base\Widget::init() و yii\base\Widget::run() را بازنویسی یا override کنید. تابع run() باید نتیجه رندر را بازگرداند. تابع init() باید property های widget را نرمال سازی کند.

مرحله 1 - یک پوشه به نام components را در ریشه پروژه ایجاد کنید. داخل آن پوشه، یک فایل با نام FirstWidget.php با کد زیر ایجاد کنید.

<?php 
   namespace app\components; 
   use yii\base\Widget; 
   class FirstWidget extends Widget { 
      public $mes; 
      public function init() { 
         parent::init(); 
         if ($this->mes === null) { 
            $this->mes = 'First Widget'; 
         } 
      }  
      public function run() { 
         return "<h1>$this->mes</h1>"; 
      } 
   } 
?>

مرحله 2 - ویو testwidget را به شیوه زیر ویرایش کنید.

<?php 
   use app\components\FirstWidget; 
?> 
<?= FirstWidget∷widget() ?>

مرحله 3 – در مرورگرتان به آدرس http://localhost:8080/index.php?r=site/test-widget بروید. آنچه که مشاهده می کنید مطابق با تصویر زیر است.

مرحله 4 - برای محصور کردن محتوا بین begin() و end() ، باید فایل FirstWidget.php را ویرایش کنید.

<?php
   namespace app\components;
   use yii\base\Widget;
   class FirstWidget extends Widget {
      public function init() {
         parent::init();
         ob_start();
      }
      public function run() {
         $content = ob_get_clean();
         return "<h1>$content</h1>";
      }
   }
?> 

مرحله 5 - در حال حاضر برچسب h1 تمام محتوا را احاطه کرده است. توجه داشته باشید که ما از تابع ob_start() برای ذخیره موقت خروجی، استفاده می کنیم. ویو testwidget همانطور که در کد زیر آمده است، تغییر دهید.

<?php
   use app\components\FirstWidget;
?>
<?php FirstWidget::begin(); ?>
   First Widget in H1
<?php FirstWidget::end(); ?>

آنچه که در خروجی مشاهده می کنید مطابق با تصویر زیر می باشد -

نکات مهم

widget ها باید -

باید با استفاده از الگوی MVC ایجاد شوند. شما باید لایه های نمایشی را در view ها و لایه های منطقی یا logic را در کلاس های widget نگه دارید.

به طور جامع و مستقل طراحی شوند. یک توسعه دهنده وب باید بتواند هر طرح دلخواهی را درفایل های view ایجاد کند.