Виджеты в Yii2 — это готовые строительные блоки для вашего веб-приложения. Они позволяют быстро создавать формы, меню, таблицы и другие элементы интерфейса, не изобретая велосипед. Если вы устали писать однотипный HTML и хотите ускорить разработку, эта статья для вас.

Digital-студия WNDER

Что такое виджет и зачем он нужен

Виджет — это класс, который инкапсулирует логику отображения какого-то элемента. По сути, это мини-контроллер, который возвращает HTML. Вместо того чтобы в каждом представлении писать кучу кода для выпадающего списка или календаря, вы просто вызываете виджет.

Представьте, что вы собираете мебель. Можно выпиливать каждую доску вручную, а можно использовать готовые детали с инструкцией. Виджеты — это те самые готовые детали. Они экономят время и уменьшают количество ошибок.

Встроенные виджеты Yii2: швейцарский нож разработчика

Yii2 из коробки предлагает множество полезных виджетов. Вот основные:

  • ActiveForm — для создания форм, связанных с моделями.
  • GridView — для отображения табличных данных с сортировкой и фильтрацией.
  • ListView — для вывода списков с постраничной навигацией.
  • DetailView — для показа свойств одной записи.
  • Menu — для генерации навигационных меню.
  • Breadcrumbs — для хлебных крошек.
  • Pjax — для асинхронной загрузки контента без перезагрузки страницы.

Все они находятся в пространстве имён yii\widgets. Использовать их просто: достаточно вызвать статический метод widget() или открыть/закрыть виджет вручную.

Как использовать виджеты: примеры кода

Начнём с простого — виджет Menu. Допустим, нам нужно главное меню сайта.

 [
        ['label' => 'Главная', 'url' => ['/site/index']],
        ['label' => 'О нас', 'url' => ['/site/about']],
        ['label' => 'Контакты', 'url' => ['/site/contact']],
    ],
    'options' => ['class' => 'navbar-nav'],
]);
?>

Этот код сгенерирует HTML-список с ссылками. Обратите внимание на параметр options — он позволяет задать CSS-классы для тега <ul>.

Теперь посмотрим на ActiveForm. Это, пожалуй, самый часто используемый виджет.

 'login-form',
    'options' => ['class' => 'form-horizontal'],
]);

echo $form->field($model, 'username')->textInput(['autofocus' => true]);
echo $form->field($model, 'password')->passwordInput();
echo $form->field($model, 'rememberMe')->checkbox();

echo Html::submitButton('Войти', ['class' => 'btn btn-primary']);

ActiveForm::end();
?>

Здесь $model — это экземпляр модели формы. Виджет сам сгенерирует нужные поля, добавит валидацию и метки.

А вот пример GridView для вывода списка пользователей:

 $dataProvider,
    'filterModel' => $searchModel,
    'columns' => [
        ['class' => 'yii\grid\SerialColumn'],
        'id',
        'username',
        'email:email',
        ['class' => 'yii\grid\ActionColumn'],
    ],
]);
?>

Этот код создаст таблицу с сортировкой, фильтрацией и кнопками действий. Согласитесь, писать такое вручную — долго и муторно.

Правило: Если виджет используется в нескольких местах, оберните его в свой класс-обёртку. Так вы сможете централизованно менять настройки и избежите дублирования кода.

Создание собственного виджета: шаг за шагом

Иногда встроенных виджетов не хватает. Тогда на помощь приходит создание своего. Это не так сложно, как кажется.

Допустим, мы хотим сделать виджет для вывода приветствия с именем пользователя. Создадим файл GreetingWidget.php в папке widgets.

render('greeting', [
            'name' => $this->name,
            'greeting' => $this->greeting,
        ]);
    }
}
?>

Теперь создадим представление greeting.php в папке widgets/views:


    
, !

Использовать виджет можно так:

 'Вася']) ?>

Или в формате open/close, если нужно обернуть контент:

 'Вася']); ?>
    
Дополнительный контент

Внутри метода init() можно выполнять дополнительную инициализацию, а в run() — возвращать HTML.

Полезные параметры виджетов: таблица настроек

У каждого виджета есть набор свойств, которые можно настроить. Вот наиболее часто используемые для ActiveForm и GridView:

Виджет Параметр Описание
ActiveForm action URL для отправки формы
ActiveForm method Метод отправки (post или get)
ActiveForm options HTML-атрибуты для тега form
GridView dataProvider Источник данных (ActiveDataProvider)
GridView filterModel Модель для фильтрации
GridView columns Массив колонок
Menu items Массив пунктов меню
Menu options Атрибуты для ul
Лайфхак: Чтобы не запоминать все параметры, используйте автодополнение в IDE. В PhpStorm, например, можно нажать Ctrl+Space внутри массива конфигурации и увидеть все доступные свойства виджета.

Виджеты и Pjax: динамика без перезагрузки

Отдельно стоит упомянуть Pjax. Это виджет, который позволяет обновлять часть страницы асинхронно. Он очень полезен для форм, таблиц и комментариев.

Пример: обернём GridView в Pjax, чтобы при фильтрации страница не перезагружалась полностью.

 'grid-pjax']);
echo GridView::widget([
    'dataProvider' => $dataProvider,
    'filterModel' => $searchModel,
    'columns' => ['id', 'username', 'email'],
]);
Pjax::end();
?>

Теперь при вводе в фильтр запрос будет уходить на сервер, а обновится только таблица. Удобно, правда?

Советы по работе с виджетами

  • Не бойтесь переопределять стандартные виджеты. Иногда проще создать свой на основе существующего, чем бороться с настройками.
  • Используйте begin() и end(), когда нужно обернуть контент между виджетами.
  • Помните, что виджеты можно вкладывать друг в друга. Например, внутри ActiveForm можно использовать DatePicker.
  • Для отладки виджетов удобно использовать Yii::debug() или просто выводить содержимое переменных.
  • Старайтесь не пихать в виджеты бизнес-логику. Они должны только отображать данные.

Что в итоге

Виджеты в Yii2 — это мощный инструмент, который ускоряет разработку и делает код чище. Встроенные виджеты покрывают большинство задач: формы, таблицы, меню, навигация. Если чего-то не хватает, всегда можно создать свой виджет, следуя простым правилам.

Главное — не забывайте про параметры и используйте Pjax для динамики. Тогда ваш интерфейс будет быстрым и отзывчивым, а код — поддерживаемым.

Экспериментируйте, комбинируйте, и пусть вёрстка перестанет быть рутиной.

Студия WNDER