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: | ||
+ | |||
+ | <source lang="php" line> | ||
+ | <?php echo render_partial('menu') ?> | ||
+ | </source> | ||
+ | De esta forma estaríamos mostrando el archivo _menu.phtml del directorio del | ||
+ | controlador actual. | ||
=Uso de CSS en Kumbia= | =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/'''. | + | 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/'''. | + | 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)... | + | 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''' | + | Ahora editamos el archivo que contiene los estilos en este caso sera |
+ | '''public/css/style.css''' | ||
− | <source lang="css"> | + | <source lang="css" line> |
body { | body { | ||
backgroundimage: url("/nombre_mi_aplicacion/img/error.gif"); | backgroundimage: url("/nombre_mi_aplicacion/img/error.gif"); | ||
} | } | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
</source> | </source> |