Yii - Widgets
Un widget es un código reutilizable del lado del cliente, que contiene HTML, CSS y JS. Este código incluye una lógica mínima y está envuelto en unyii\base\Widgetobjeto. Podemos insertar y aplicar fácilmente este objeto en cualquier vista.
Step 1 - Para ver los widgets en acción, cree un actionTestWidget función en el SiteController con el siguiente código.
public function actionTestWidget() {
return $this->render('testwidget');
}
En el ejemplo anterior, acabamos de devolver un View llamado “testwidget”.
Step 2 - Ahora, dentro de la carpeta vistas / sitio, cree un archivo de vista llamado testwidget.php.
<?php
use yii\bootstrap\Progress;
?>
<?= Progress::widget(['percent' => 60, 'label' => 'Progress 60%']) ?>
Step 3 - Si vas a http://localhost:8080/index.php?r=site/test-widget, verá el widget de la barra de progreso.
Usar widgets
Para usar un widget en un View, deberías llamar al yii\base\Widget::widget()función. Esta función toma una matriz de configuración para inicializar el widget. En el ejemplo anterior, insertamos una barra de progreso con porcentaje y parámetros etiquetados del objeto de configuración.
Algunos widgets toman un bloque de contenido. Debe estar encerrado entreyii\base\Widget::begin() y yii\base\Widget::end()funciones. Por ejemplo, el siguiente widget muestra un formulario de contacto:
<?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(); ?>
Crear widgets
Para crear un widget, debes extender desde yii\base\Widget. Entonces deberías anular elyii\base\Widget::init() y yii\base\Widget::run()funciones. losrun()La función debería devolver el resultado de la representación. losinit() La función debería normalizar las propiedades del widget.
Step 1- Cree una carpeta de componentes en la raíz del proyecto. Dentro de esa carpeta, cree un archivo llamadoFirstWidget.php con el siguiente código.
<?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>";
}
}
?>
Step 2 - Modify la testwidget ver de la siguiente manera.
<?php
use app\components\FirstWidget;
?>
<?= FirstWidget∷widget() ?>
Step 3 - Ir a http://localhost:8080/index.php?r=site/test-widget. Verá lo siguiente.
Step 4 - Incluir el contenido entre los begin() y end() llamadas, debe modificar el FirstWidget.php archivo.
<?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>";
}
}
?>
Step 5- Ahora las etiquetas h1 rodearán todo el contenido. Tenga en cuenta que usamos elob_start()función para almacenar en búfer la salida. Modifique la vista del widget de prueba como se indica en el siguiente código.
<?php
use app\components\FirstWidget;
?>
<?php FirstWidget::begin(); ?>
First Widget in H1
<?php FirstWidget::end(); ?>
Verá la siguiente salida:
Puntos importantes
Los widgets deberían:
Ser creado siguiendo el patrón MVC. Debe mantener las capas de presentación en las vistas y la lógica en las clases de widgets.
Estar diseñado para ser autónomo. El desarrollador final debería poder diseñarlo en una Vista.