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:
{{Obsoleto|version=0.5}}
 
 
 
= Introducción =
 
= Introducción =
 
KumbiaPHP posee un sistema de presentación basado en vistas (views) que viene siendo el tercer componente del sistema '''MVC''' (Model View Controller).
 
KumbiaPHP posee un sistema de presentación basado en vistas (views) que viene siendo el tercer componente del sistema '''MVC''' (Model View Controller).
Línea 19: Línea 17:
 
=¿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
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.
+
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 42:
 
=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 63:
 
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 94:
  
  
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 117: Línea 122:
 
'''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");
Línea 135: Línea 159:
 
</source>
 
</source>
  
Donde nombre_mi_aplicacion es el nombre de tu carpeta donde esta el framework, esta es una utilización básica...
+
Donde nombre_mi_aplicacion es el nombre de tu carpeta donde esta el framework,
 +
esta es una utilización básica...
  
Sin embargo kumbia maneja unas variables para evitar cambios grandes a nivel de los archivos CSS, un escenario posible es si cambiamos el nombre de la carpeta raiz del framework porque?... sencillo si cámbianos el nombre de la aplicación (en este caso el nombre de la carpeta raíz), esto conlleva a cambiar estas rutas en todos los CSS...
+
Sin embargo kumbia maneja unas variables para evitar cambios grandes a nivel de los
 +
archivos CSS, un escenario posible es si cambiamos el nombre de la carpeta raiz del
 +
framework porque?... sencillo si cámbianos el nombre de la aplicación (en este caso el
 +
nombre de la carpeta raíz), esto conlleva a cambiar estas rutas en todos los CSS...
  
En la versión 0.5 de Kumbia hemos encontrado una solución a este problema la cual cuando incluyes los archivos css que contengan alguna ruta de archivo como fue en el ejemplo anterior una imagen, lo ideal seria incluir este archivo CSS como se muestra abajo...
+
En la versión 0.5 de Kumbia hemos encontrado una solución a este problema la cual
 +
cuando incluyes los archivos css que contengan alguna ruta de archivo como fue en el
 +
ejemplo anterior una imagen, lo ideal seria incluir este archivo CSS como se muestra
 +
abajo...
  
<source lang="css">
+
<source lang="css" line>
 
<?php echo stylesheet_link_tag('style', 'use_variables: true')?>
 
<?php echo stylesheet_link_tag('style', 'use_variables: true')?>
 
</source>
 
</source>
  
Observen el parámetro use_variables, con este parámetro podemos hacer en el algo como se muestra a continuación en los archivos CSS y nos basamos en el mismo ejemplo anterior...
+
Observen el parámetro use_variables, con este parámetro podemos hacer en el algo
 +
como se muestra a continuación en los archivos CSS y nos basamos en el mismo ejemplo
 +
anterior...
  
<source lang="css">
+
<source lang="css" line>
 
backgroundimage: url("@path/img/error.gif");
 
backgroundimage: url("@path/img/error.gif");
 
</source>
 
</source>
  
 
'''@path''' contiene el nombre de la carpeta raíz del framework.<br/>
 
'''@path''' contiene el nombre de la carpeta raíz del framework.<br/>
'''@img_path''' contiene la ruta hasta la carpeta '''public/img''', es decir que el mismo ejemplo anterior tendría un funcionamiento igual de la siguiente manera..
+
'''@img_path''' contiene la ruta hasta la carpeta '''public/img''', es decir que el mismo ejemplo
 
+
anterior tendría un funcionamiento igual de la siguiente manera..
<source lang="css">
+
<source lang="css" line>
 
backgroundimage: url("@img_path/error.gif");
 
backgroundimage: url("@img_path/error.gif");
 
</source>
 
</source>
  
'''@css_path''' contiene la ruta hasta la carpeta public/css, esto tiene una utilidad si en nuestro archivo CSS se hiciera una inclusión de otro archivo CSS.
+
'''@css_path''' contiene la ruta hasta la carpeta public/css, esto tiene una utilidad si en
 +
nuestro archivo CSS se hiciera una inclusión de otro archivo CSS.
  
<source lang="css">
+
<source lang="css" line>
 
@import url("@css_path/otro_css.css");
 
@import url("@css_path/otro_css.css");
 
</source>
 
</source>
Línea 166: Línea 200:
 
=Uso de content()=
 
=Uso de content()=
  
Esta función tiene como objetivo indicar al sistema de plantillas en que parte de la vista se va a visualizar el siguiente nivel de vista. Si por ejemplo se pretende visualizar una vista y el llamado a content() no esta presente en el layout, entonces la vista no se va a visualizar.
+
Esta función tiene como objetivo indicar al sistema de plantillas en que parte de la vista
 +
se va a visualizar el siguiente nivel de vista. Si por ejemplo se pretende visualizar una
 +
vista y el llamado a content() no esta presente en el layout, entonces la vista no se va a
 +
visualizar.
  
 
=Helpers=
 
=Helpers=
Línea 218: Línea 255:
  
 
<source lang="php" line>
 
<source lang="php" line>
<?php echo link_to_remote(“Borrar Producto”, “update: midiv”, “action: productos/borrar/11”,  
+
<?php echo link_to_remote(“Borrar Producto”, “update: midiv”, “action: productos/borrar/11”, “confirm: Esta seguro desea borrar el producto?”) ?>
“confirm: Esta seguro desea borrar el producto?”) ?>
 
 
<div id=’midiv’>Este texto será actualizado</div>;
 
<div id=’midiv’>Este texto será actualizado</div>;
 
</source>
 
</source>
Línea 225: Línea 261:
 
link_to_remote puede recibir n parámetros adicionales que corresponden a atributos html
 
link_to_remote puede recibir n parámetros adicionales que corresponden a atributos html
 
correspondientes a la etiqueta 'a'.
 
correspondientes a la etiqueta 'a'.
 +
  
 
==button_to_remote_action($accion, $texto, $objeto_a_actualizar,[$parametros])==
 
==button_to_remote_action($accion, $texto, $objeto_a_actualizar,[$parametros])==
Línea 313: Línea 350:
  
 
<source lang="php" line>
 
<source lang="php" line>
<?php echo form_remote_tag(“saludo/hola”, “update: midiv”, “before:alert('Se ha enviado
+
<?php echo form_remote_tag(“saludo/hola”, “update: midiv”, “before:alert('Se ha enviado el Formulario')”) ?>
el Formulario')”) ?>
 
 
  Tu Nombre?: <?php echo text_field_tag(“nombre”) ?>
 
  Tu Nombre?: <?php echo text_field_tag(“nombre”) ?>
 
  <?php echo submit_tag("Envio") ?>
 
  <?php echo submit_tag("Envio") ?>
Línea 363: Línea 399:
  
 
<source lang="php" line>
 
<source lang="php" line>
<?php echo submit_image_tag("Enviar Formulario", "img/button.gif") ?>
+
<?php echo submit_tag("Enviar Formulario") ?>
 
</source>
 
</source>

Ten en cuenta que todas las contribuciones a KumbiaPHP Framework Wiki pueden ser editadas, modificadas o eliminadas por otros colaboradores. Si no deseas que las modifiquen sin limitaciones, no las publiques aquí.
Al mismo tiempo, asumimos que eres el autor de lo que escribiste, o lo copiaste de una fuente en el dominio público o con licencia libre (véase Proyecto:Derechos de autor para más detalles). ¡No uses textos con copyright sin permiso!

Para editar esta página, responde la pregunta que aparece abajo (más información):

Cancelar Ayuda de edición (se abre en una ventana nueva)

Plantillas usadas en esta página: