Vistas

Las vistas son la parte no lógica de la aplicación, todo lo referente con la maquetación web, el frontend de la aplicación. La ubicación de las vistas está en ./app/templates/ y para mantener cierta coherencia y orden, es recomendable que cada vista esté almacenada en una carpeta con el nombre del controlador principal que la llama.

Ruta Finalidad
app/templates/ Plantillas en general.
app/templates/.cache/ Directorio de caché destinado a las vistas de twig renderizadas ya previamente, es de vital importancia la existencia de ésta carpeta y que posea permisos de escritura y lectura.
app/templates/overall/layout.twig Capa principal, que contiene todos los elementos reutilizables como plantilla del diseño web. Todas las vistas, por lo general heredan de ésta vista.

Ocrend Framework implementa TWIG como motor de plantillas, su sintaxis origina de Jinja y las plantillas Django.

Algunas características

  • Twig compila las plantillas hasta el código PHP optimizado. La sobrecarga en comparación con el código PHP normal se redujo al mínimo.
  • Twig tiene un modo de sandbox para evaluar el código de plantilla no confiable. Esto permite que Twig se utilice como un lenguaje de plantilla para aplicaciones en las que los usuarios puedan modificar el diseño de la plantilla.
  • Twig es alimentado por un lexer y parser flexible. Esto permite al desarrollador definir sus propias etiquetas y filtros personalizados y crear su propia DSL.

Crear una vista

Simplemente debemos crear un archivo en la ruta ./app/templates/mi_vista/mi_vista.twig y su contenido puede ser HTML, CSS ó JavaScript además de las etiquetas propias que brinda TWIG.

NOTA: el nombre de la carpeta no debe ser exactamente el mismo del archivo.

Pasar información hacia las vistas

Para pasar información hacia una vista, al momento de renderizar la vista desde el controlador, pasamos un arreglo como parámetro con toda la información que querramos poner a disposición de twig.


echo $this->template->render('mi_vista/mi_vista', array(
    'mi_variable' => 'Hola Mundo, hoy es ' . date('d/m/Y', time()),
    'un_arreglo' => array('a' => 1, 'b' => 2),
    'entero' => 1,
    'booleana' => true,
    'flotante' => 1.5,
    # Para que esta instrucción no de error, obviamente debe existir Miclase en algún sitio
    'objeto' => new Miclase
));					
					

Se puede hacer lo siguiente:

{{ mi_variable }}
En el arreglo {{ un_arreglo.a }} ó también {{ un_arreglo['a'] }}
Uno mas dos es {{ entero + 2 }}

Simplemente usamos el operador ternario sobre la variable

¿Es verdad?: {{ booleana ? 'Sí' : 'No' }}
Uno coma cinco por 10 es {{ flotante * 10 }}
	
En el objeto que estamos instanciando, el metodo test(): {{ objeto.test() }}
					

Si en algún momento queremos escapar HTML, podemos hacer algo cómo

{{ '<b>no saldré en negrilla</b>'|e }}

Herencia y bloques

Se define una vista padre, se puede tomar de ejemplo ./app/templates/overall/layout.twig, dicha vista posee adentro tres bloques, appHeader, appBody y appFooter

El concepto es sencillo, cualquier vista que realice la herencia:

{% extends 'overall/layout' %}

Renderizará todo el HTML, CSS y JavaScript escrito en ./app/templates/overall/layout.twig y, en la plantilla que hace la herencia, se sobreescribirá el valor de los bloques, por el que se defina en la nueva plantilla


{% extends 'overall/layout' %}
{% block appBody %}
	Ésto será reemplazado en layout.twig, justamente donde éste tenga definido el bloque appBody y luego se renderizará todo en conjunto.
{% endblock %}
					

Incluir vistas dentro de vistas

Debemos proceder a escribir en el punto exacto donde necesitamos que se renderice luego la vista incluída:

{% include 'direccion/de/la/vista' %}

Definir elementos dentro de la plantilla

Definir una variable

{% set miVariable = 1 %}

Para definir una variable que contenga una sección de código entero


{% set variable %}
    <div>
        <p>Esto es HTML</p>
    </div>
{% endset %}					
					

Definir un arreglo secuencial

{% set miArreglo = ['Hola','Mundo'] %}

Definir un arreglo asociativo

{% set miArreglo = {'indice':'valor'} %}

Estructura selectiva IF


{% if true %}
    Hola es verdadero
{% elseif (1 + 1) == 2 %}
	Esto también es verdadero
{% else %}
    Hola es falso
{% endif %}

Operadores lógicos


Y condicional: {{ A and B }} 
O condicional: {{ A or B }}
Negación: {{ not A }}
Xor Condicional: {{ (A or B) and not (A and B) }} 

Comparadores lógicos


{{ A == B }} A igual que B
{{ A != B }} A distinto que B
{{ A < B }} A menor que B
{{ A > B }} A mayor que B
{{ A <= B }} A menor o igual que B
{{ A >= B }} A mayor o igual que B

Estructuras Repetitivas


For desde el 0 al 10, repite 11 veces
{% for i in 0..10 %}
    {{ i }}
{% endfor %}

Foreach, iterando sobre el arreglo llamado "elemento".
{% for e in elemento %}
    {{ e }}
{% endfor %}

Foreach, iterando sobre el arreglo llamado "elemento" y mostrando sus índices.
{% for key, e in elemento %}
    La key es {{ key }} y el valor es {{ e }}
{% endfor %}

For con else
{% for e in elemento %}
    {{ e }}
{% else %}

No hay nada en el arreglo elemento.

{% endfor %}

Sólamente itera elemento, si elemento está definido. (isset)
{% for e in elemento if elemento is defined %}
    {{ e }}
{% endif %}

Acceder a variables globales

Por defecto, Ocrend Framework brinda la posibilidad de obtener información de las siguientes variables globales desde las plantillas:

PHP TWIG
$_GET['indice'] {{ get.indice }}
$_SERVER['indice'] {{ server.indice }}
$_SESSION['indice'] {{ session.indice }}
$config['indice'] en Ocrend.ini.yml {{ config.indice }}
private $this->is_logged {{ is_logged }} para saber si un usuario está logeado
protected $this->user['atributo'] {{ owner_user.propiedad }} atributo del usuario conectado

Añadir variables de forma global

Para añadir variables de forma global a todas las vistas existentes en la aplicación debemos proceder en ./Ocrend/Kernel/Controllers/Controllers.php y en el grupo comentado como "# Request global" añadir:

$this->template->addGlobal('mi_variable_global', 'contenido');

NOTA: si realizamos lo mismo, pero en un controlador antes de renderiza cualquier vista, se define dicha variable global sólamente entre las vistas que sean llamadas desde dicho controlador.

Utilizar helpers en las vistas

En el controlador que lanza la vista, debe existir el namespace del helper correspondiente y luego se procede antes de renderizar la vista en el controlador:


$this->template->addExtension(new NombreDelHelper);
					

Desde nuestra plantilla, solo bastará con hacer el llamado de las funciones


{{ funcion_del_helper('parámetros') }}
					

NOTA: para que el helper pueda funcionar correctamente, éste debe ser compatible con Twig, la forma de revisar ello es viendo si éste hereda de Twig_Extension

La importancia de {{ base_assets()|raw }}

Para que los estilos, imágenes y scripts de la aplicación carguen correctamente y el navegador no indexe mal las rutas por culpa de las URL amigables, es de suma importancia hacer el llamado a dicha función dentro de las etiquetas head


<head>
{{ base_assets()|raw }}
</head>					
					

Crear vista usando el generador

Simplemente con escribir el comando

php gen.php app:v Nombre

Más acerca de Twig

Para una documentación extensa acerca del uso de TWIG como motor de plantillas, podemos acudir a una documentación en español ó una lista de reproducción en YouTube que presenta el manejo de éste motor bajo Ocrend Framework.