Edición de «VISTAS Y HELPERS»
De KumbiaPHP Framework Wiki
Advertencia: no has iniciado sesión. Tu dirección IP se hará pública si haces cualquier edición. Si inicias sesión o creas una cuenta, tus ediciones se atribuirán a tu nombre de usuario, además de otros beneficios.
Puedes deshacer la edición. Antes de deshacer la edición, comprueba la siguiente comparación para verificar que realmente es lo que quieres hacer, y entonces guarda los cambios para así efectuar la reversión.
Revisión actual | Tu texto | ||
Línea 1: | Línea 1: | ||
− | |||
− | |||
= Introducción = | = Introducción = | ||
− | + | Kumbia posee un sistema de presentación basado en vistas (views) que viene siendo el | |
− | + | tercer componente del sistema MVC (Model View Controller). | |
− | El framework aplica un patrón de diseño llamado TemplateView que permite utilizar un sistema de plantillas y vistas que son reutilizables para no repetir código | + | El framework aplica un patrón de diseño llamado TemplateView que permite utilizar un |
− | + | sistema de plantillas y vistas que son reutilizables para no repetir código y darle más | |
+ | poder a nuestra presentación. | ||
Las vistas deberían contener una cantidad mínima de código en PHP para que fuese | Las vistas deberían contener una cantidad mínima de código en PHP para que fuese | ||
− | suficientemente entendible por un diseñador Web y además, para | + | suficientemente entendible por un diseñador Web y además, para dejar a las vistas sólo |
− | + | las tareas de visualizar los resultados generados por los controladores y presentar las | |
− | También proporciona unas ayudas (Vistas Helpers) que generan cierto código muy común en aplicaciones Web aumentando la productividad. | + | capturas de datos para usuarios. |
+ | También proporciona unas ayudas (Vistas Helpers) que generan cierto código muy | ||
+ | común en aplicaciones Web aumentando la productividad. | ||
− | + | >> Visualizar información de los modelos, mensajes de los controladores e interfaz de | |
− | + | usuario | |
− | + | >> Deben gestionar cualquier salida de la Aplicación | |
− | + | >> Permiten reutilizar código utilizado para presentación en forma de plantillas. | |
− | + | >> Permiten cachear las vistas para acelerar el rendimiento. | |
+ | >> Permiten el uso de Smarty como motor de Plantillas | ||
=¿Porque usar Vistas?= | =¿Porque usar Vistas?= | ||
− | Las aplicaciones Web y Sitios generalmente tienen una estructura en la cual se puede identificar una cabecera, unas barras de navegación y un pie de pagina. | + | Las aplicaciones Web y Sitios generalmente tienen una estructura en la cual se puede |
− | + | identificar una cabecera, unas barras de navegación y un pie de pagina. Y si tuviéramos | |
− | Y si tuviéramos muchas páginas entonces tendríamos que repetir el código de los encabezados y del diseño inicial tantas veces como páginas tuviéramos. Las vistas son una solución a esto. | + | muchas páginas entonces tendríamos que repetir el código de los encabezados y del |
+ | diseño inicial tantas veces como páginas tuviéramos. Las vistas son una solución a esto. | ||
[[Archivo:Web.PNG]] | [[Archivo:Web.PNG]] | ||
− | En la figura podemos observar la estructura de un sitio o aplicación Web. Cada bloque representa en nuestro caso una vista que debe ser abstraída para que no sea repetida en cada visualización | + | En la figura podemos observar la estructura de un sitio o aplicación Web. Cada bloque |
− | + | representa en nuestro caso una vista que debe ser abstraída para que no sea repetida en | |
− | + | cada visualización. | |
+ | Como lateral, pie de página y cabecera se repiten siempre, entonces podríamos ubicarlos | ||
+ | a nivel de layout en donde serian común a cualquier acción del controlador al cual | ||
+ | pertenezca el layout. | ||
Otra alternativa es crear un partial para estos 3 bloques y reutilizarlos en otros layouts. | Otra alternativa es crear un partial para estos 3 bloques y reutilizarlos en otros layouts. | ||
− | + | Los partials representan pequeñas unidades de vistas y son utilizados pare representar | |
− | Los partials representan pequeñas unidades de vistas y son utilizados pare representar pequeños fragmentos de código. | + | pequeños fragmentos de código. |
− | + | La vista principal '''views/index.phtml''' representa la vista superior donde cualquier cambio | |
− | La vista principal '''views/index.phtml''' representa la vista superior donde cualquier cambio a esta vista afecta las capas inferiores. | + | a esta vista afecta las capas inferiores. |
− | |||
La estructura del sistema de vistas es el siguiente: | La estructura del sistema de vistas es el siguiente: | ||
Línea 41: | Línea 46: | ||
=Uso de Vistas= | =Uso de Vistas= | ||
− | Tal y como se vio en la [[Primera Aplicación en Kumbia]], las vistas son automáticamente visualizadas si se sigue la convención de nombrarlas con el mismo nombre de la acción dentro de un directorio con el nombre del controlador en views. | + | Tal y como se vio en la [[Primera Aplicación en Kumbia]], las vistas son automáticamente |
− | + | visualizadas si se sigue la convención de nombrarlas con el mismo nombre de la acción | |
− | Las vistas, layouts, templates y partiales tienen la extensión .phtml que indica que es php con html. | + | dentro de un directorio con el nombre del controlador en views. |
− | + | Las vistas, layouts, templates y partiales tienen la extensión .phtml que indica que | |
+ | es php con html. | ||
Ejemplo: Si tuviéramos un controlador Clientes y queremos mostrar una vista para su | Ejemplo: Si tuviéramos un controlador Clientes y queremos mostrar una vista para su | ||
acción adicionar entonces hacemos lo siguiente: | acción adicionar entonces hacemos lo siguiente: | ||
− | <source lang="php"> | + | <source lang="php" line> |
<?php | <?php | ||
class ClientesController extends ApplicationController { | class ClientesController extends ApplicationController { | ||
Línea 61: | Línea 67: | ||
y la vista sería el archivo views/clientes/adicionar.phtml: | y la vista sería el archivo views/clientes/adicionar.phtml: | ||
− | <source lang="html4strict"> | + | <source lang="html4strict" line> |
<h2>Hola desde Acción Adicionar</h2> | <h2>Hola desde Acción Adicionar</h2> | ||
</source> | </source> | ||
− | No es necesario definir una vista para cada acción en un controlador, esto debe hacerse sólo para aquéllas que requieran presentar información al usuario. | + | No es necesario definir una vista para cada acción en un controlador, esto debe hacerse |
− | + | sólo para aquéllas que requieran presentar información al usuario. | |
− | Las vistas que sean presentadas mediante AJAX deben realizar un llamado a $this->set_response('view') en su respectivo método del controlador. Así lograremos una salida optimizada para AJAX. | + | Las vistas que sean presentadas mediante AJAX deben realizar un llamado a $this- |
+ | >set_response('view') en su respectivo método del controlador. Así lograremos una | ||
+ | salida optimizada para AJAX. | ||
=Uso de Layouts= | =Uso de Layouts= | ||
− | Kumbia también permite opcionalmente el uso de una plantilla superior a nivel de controlador que se encuentra en el directorio '''views/layouts''' . | + | Kumbia también permite opcionalmente el uso de una plantilla superior a nivel de |
− | + | controlador que se encuentra en el directorio '''views/layouts''' . | |
Para nuestro ejemplo anterior tenemos el archivo '''views/layouts/clientes.phtml''':: | Para nuestro ejemplo anterior tenemos el archivo '''views/layouts/clientes.phtml''':: | ||
− | <source lang="html4strict"> | + | <source lang="html4strict" line> |
<h1>Este es el Controlador | <h1>Este es el Controlador | ||
<? content() ?> | <? content() ?> | ||
</source> | </source> | ||
− | El llamado a content() hace que el contenido de la vista para acción se muestre en esa parte del layout. | + | El llamado a content() hace que el contenido de la vista para acción se muestre en esa |
− | + | parte del layout. | |
Un llamado a clientes/adicionar nos visualizaría: | Un llamado a clientes/adicionar nos visualizaría: | ||
Línea 90: | Línea 98: | ||
− | No es obligatorio definir un layout para todos los controladores, si este no existe Kumbia, va a simularlo. | + | No es obligatorio definir un layout para todos los controladores, si este no existe Kumbia, |
+ | va a simularlo. | ||
=Uso de Templates= | =Uso de Templates= | ||
Línea 98: | Línea 107: | ||
podemos usar el mismo layout en varios controladores. | podemos usar el mismo layout en varios controladores. | ||
− | <source lang="php"> | + | <source lang="php" line> |
<?php | <?php | ||
Línea 117: | Línea 126: | ||
'''views/layouts/administracion.phtml''' | '''views/layouts/administracion.phtml''' | ||
+ | =Uso de Partials= | ||
− | + | Los partials (parciales) son pequeñas vistas que pueden incluirse dentro de otra vista y | |
− | + | que evitan repetir código. | |
− | + | Un partial se reconoce porque empieza con _ (underscore) antes del nombre de la vista. | |
− | + | Se puede hacer el llamado a visualizar un partial usando la función render_partial de | |
− | + | esta forma: | |
− | |||
− | |||
− | Un | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
<source lang="php" line> | <source lang="php" line> | ||
− | <?php echo | + | <?php echo render_partial('menu') ?> |
</source> | </source> | ||
− | + | De esta forma estaríamos mostrando el archivo _menu.phtml del directorio del | |
+ | controlador actual. | ||
− | + | =Uso de CSS en Kumbia= | |
− | |||
− | + | Kumbia todo su entorno se ejecuta en la carpeta '''public/''' a pesar que cuando nos | |
− | + | encontramos desarrollando las vistas de nuestra aplicación la vamos dejando en el | |
− | + | directorio '''apps/default/views/'''. | |
− | + | Esto significa que cuando se le indica alguna ruta de alguna imagen por decir algo a tus | |
+ | CSS estas deberían estar respecto a '''public/'''. | ||
− | + | Un ejemplo sencillo, imaginemos que deseas incluir una imagen como background y | |
− | + | nuestra imagen se encuentra en la carpeta public/img/. Nuestra vista esta en | |
− | + | apps/default/views/index.phtml (esta en la vista principal de todo el framework)... | |
− | + | Ahora editamos el archivo que contiene los estilos en este caso sera | |
− | + | '''public/css/style.css''' | |
− | |||
− | |||
− | + | <source lang="css" line> | |
− | + | body { | |
− | + | backgroundimage: | |
− | + | url("/nombre_mi_aplicacion/img/error.gif"); | |
− | + | } | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | <source lang=" | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
</source> | </source> |