Vistas - Heavyblade/cirrus GitHub Wiki

Desde la version 1.4 de Cirrus las vistas y assets css y javascript no serán almacenados en tablas del vserver sino en un folder en disco que deberá ser configurado desde la UI cirrus, el resto de convenciones aquí citadas funcionan exactamente igual.

Las vistas corresponde a archivos html asociados con acciones de controladores o archivos estáticos Javascript y Css, que siguen la siguiente estructura:

1. Dentro de views se almacenará una carpeta por cada controlador y dentro de esta carpeta un item por cada acción

2. (Version >= 1.4): En las vistas los archivos que serán templates a procesar pro handlebars terminaran en *.html.hbs, si terminan solo en *.html el motor de renderizado solo tomará la información y la servirá tal cual esta en el archivo.

3. Dentro de la carpeta layout van aquellos archivos html que servirán como layouts o marcos, los cuales tendrán como punto de inserción el texto "#yield"

4. Dentro de la carpeta "públic" se almacenan los archivos css y javascript que será servidos directamente sin necesidad de pasar por todo el esquema de rutas y controllers, simplemente se accede:

• /public/javascripts/archivo.js
• /public/css/archivo.css

en el caso de la app de demo vPedidos se ve así:

Como se puede ver en el modo de edición en el tipo de archivo existe el tipo "template", esto implica que al momento de leer el codigo html para servirlo en lugar de servirlo directamente será pre-procesado usando Handlebars como template engine, lo que permite inducir el response JSON que sale del return de los controladores y procesar el archivo html como una plantilla, haciendo entonces el contenido HTMl dinámico, ejemplo:

Codigo Javascript del controller

wApp.pedidosController = {
	index: function(params) {
		var registros = new VRegisterList(theRoot);
		registros.setTable("3b3uk7ol.vcd/PEDIDOS");
		registros.load("ID", [])
		var resultado = []
			
		for(i=0; i < 100; i++) {
		  var record = registros.readAt(z)
		  var a = record.fieldToDate("FECHA")
		  var fecha = a.getFullYear() + "/" + (a.getMonth() + 1) + "/" + a.getDate()
		  resultado.push({fecha: fecha, 
				  valor: record.fieldToInt("TOTAL_PEDIDO"),
				  cliente: record.readMaster("CLIENTES").fieldToString("NAME"),
				  id: record.fieldToInt("ID")
				})

		}
			
		return({pedidos: resultado})
}

Codigo HTML del template:

En este caso la salida del controlador "{pedidos: resultado}", le será entregada al template para ser procesada y como puede verse se usa la sintaxys {{}} propia de handlebars para iterar por el contenido que hay en el elemento "pedidos":

<table class="table table-striped">
    <thead>
        <th>Cliente</th>
        <th>Fecha</th>
        <th>Valor</th>
        <th>action</th>
    </thead>
    <tbody>
        {{#each pedidos}}
        <tr>
            <td>{{cliente}}</td>
            <td>{{fecha}}</td>
            <td>{{valor}}</td>
        </tr>
        {{/each}}        
    </tbody>
</table>

Los layouts permiten reutilizar marcos generales para tu aplicación web, de tal forma que se mantenga el mismo contenido en barras de menú, barras laterales, footers, funcionalidades globales, etc. de esta forma el contenido proveniente del renderizado de la acción en particular será insertado dentro de un mismo marco.

Si deseas utilizar funciones personalizadas en tus plantillas handlebars, tambíen llamados helpers puedes escribirlos dentro de /app/helpers.js

Por defecto el layout a utilizar estará en "layouts/application" pero puede especificarse otro identificando en el return de la acción del controllador el key layout: "otro", así las posibilidades son:

1. Por defecto => se renderiza el layout que hay en "layouts/application"
2. Personalizado => renderiza el layout que haya en "layouts/tu_layout", return({layout: "tu_layout"})
3. Sin layout => se renderiza la salida html del controllador sin layout, return({layout: false})

Cirrus.js almacena las vistas en la tabla Files de una forma estructurada pero para servirlos estos se pasan a una tabla en memoria con una estructura idéntica "Files_mem" desde donde serán leidas cada vez que se procese un request, esta tabla en memoria será llenada cada vez que inicie el vServer y cada vez que se den altas, modificaciones o bajas en la tabla Files.

Si deseas servir datos en formato XML en lugar de JSON, puedes usar la clase vXMLWritter de Velneo para construir el xml y guardarlo en un string, después en el return del la acción del controlador incluyes dicho string en el key 'xml' y Cirrus.js entregará el response con los headers apropiados:

wApp.pedidosController = {
        index_xml: function(params) {
                   // Tu lógica de negocios y construcción del xml aqui
                   return({xml: resultado});
        }

}