16. Виджеты
Виджет – это часть представления, которую можно использовать повторно, которая не просто отображает данные, а делает это в соответствии с некой логикой.
Мы можетм либо использовать готовые, либо создавать собственные виджеты.
Чтобы вызвать готовый виджет, необходимо через ключевое слово $this вызывать метод widget, и передать один либо два параметра (первый параметр – это путь к файлу, второй – массив значений для виджета).
-
Вызов виджета. Листинг 16.1
$this->widget('zii.widgets.CMenu',array())
Создание виджета в Yii состоит из трех основных этапов:
1. В директории компонентов «components» создаем файл класса с именем нашего виджета components/Banners.php:
-
Импорт виджета. Листинг 16.2
<?php
Yii::import('zii.widgets.CPortlet');
class Banners extends CPortlet
{
public function init()
{
parent::init();
}
protected function renderContent()
{
$this->render('banners');
}
}
2. В той же директории в подпапке views создаем файл, содержащий html-код нашего виджета components/views/banners.php. Например, с отображением какого-то изображения:
-
Файл шаблона. Листинг 16.3
<img src="<?php echo Yii::app()->request->baseUrl;?> /images/my_image.jpg" alt="my_image">
Подключение виджета в файле представления:
-
Подключение виджета. Листинг 16.4
<?php $this->widget('Banners'); ?>
17. Создание виджета круговой диограммы
В папке создаем папку chart, в которой создаем файл. В виджете создадим экшн run(). Метод run() – основной метод виджета.
В виджете мы генерируем URL для построения графика и передаем полученные параметры по нужной ссылке.
-
Виджет. Листинг 17.1
<?php
class EChartWidget extends CWidget{
public $title;
public $data = array();
public $labels = array();
public function run(){
echo "<p align=center>
<img src='http://chart.apis.google.com/chart?chtt=
".urlencode($this->title)."
&cht=pc&chs=650x400&chd=t:
".(int)$this->data[0].",
".(int)$this->data[1]."
&chl=".implode('|', $this->labels)."'>
</p>";
}
}
После того, как виджет готов, выводим его в шаблоне и передаем нужные параметры.
-
Вывод виджета. Листинг 17.2
<div style="box-shadow: 1px 1px 10px black">
тут будет результат
<?
$this->widget('ext.chart.EChartWidget', array(
'title'=>'Результаты голосования',
'data'=>array($value, 100-$value),
'labels'=>array('Против', 'За')
));
;?>
</div>
После чего увидим такую диограмму:
