Friendly Open Space JS: renderizado del lado del cliente y creación de envoltorios

Friendly Open Space es un marco muy joven, pero ya sabe cómo ejecutar :-)

En este artículo sobre el desarrollo de "Friendly Open Space", dominaremos la representación de la plantilla en el navegador e iniciaremos la aplicación en la base de datos de archivos local.

El núcleo del marco admite dos tipos de ensamblaje de plantillas en el cliente:

1. Representación completa del lado del cliente
2. Se realiza una solicitud para representar la plantilla en el servidor, seguida de su salida en una ventana del navegador.

El primer modo tiene una característica, los datos necesarios para representar la plantilla se solicitan al servidor, es decir El cliente ejecuta consultas FSQL. No hay ningún peligro particular en esto si utiliza la restricción de acceso y el módulo fosAccess, pero existe la posibilidad de descargar datos sin procesar mediante copia pasteur. Sin embargo, este enfoque reduce significativamente la carga en el servidor.

El segundo tipo de renderizado ya carece de esta característica. El cliente envía los parámetros de la plantilla y ya los recibe del servidor HTML. Sí, la carga en el servidor ciertamente aumentará, pero este método es más adecuado para soluciones de Internet abiertas.

Preparando la aplicación y configurándola

Y así, nos enfrentamos a la tarea de crear una aplicación de una página que represente 2 plantillas (ventanas) en el lado del cliente. En vista de una tarea bastante simple, prescindiremos de una base de datos MySQL y proyecciones, por lo que dirigiremos todo el trabajo FSQL a un archivo, es decir. Utilizaremos la base de datos en el archivo para trabajar con los mecanismos internos del marco. Bueno, empecemos.

Crea los directorios:

plantillas - directorio de plantillas
css - directorio de archivos css
fos - descargue la última versión beta de friendlyopenspace.site/en/download
Coloque el favicon.ico molesto en el directorio raíz de la aplicación: favicon.ico

Además, colocamos inmediatamente los archivos de estilo en el directorio css: window.css y styles.css

A continuación, cree el archivo de aplicación application.js:

var fos = require("./fos/fos"); fos.module({ name: "application.js", dependencies: [ "fos:NServer/Application.js", ], module: function(application) { application.setSettings({ port: 3001, packages: [], dynamicLoading: true, clientRenderingMode: "client", dataClient: { defaultConnection: "default", connections: { default: { type: "file", file: "data.fosdb" } }, }, onInitialize: function(a_event) { if (!a_event.error) { application.run(); } else { console.error(a_event.error); } } }); application.getRouter().add([ { route: "", controller: "fos:NServer/NControllers/Tmpl.js", source: "templates/page.tmpl", }, { route: "/css/*", controller: "fos:NServer/NControllers/File.js", source: "css", }, { route: "/templates/*", controller: "fos:NServer/NControllers/File.js", source: "templates", }, { route: "favicon.ico", controller: "fos:NServer/NControllers/File.js", source: "favicon.ico", }, ]); application.initialize(); } }); 

Ahora veamos el contenido del archivo application.js

Deshabilitamos todos los paquetes, ya que no eran necesarios (el parámetro de paquetes del método setSettings):

  ... application.setSettings({ port: 3001, packages: [], dynamicLoading: true, clientRenderingMode: "client", ... 

El parámetro de aplicación clientRenderingMode, nuevo para nosotros, es responsable del tipo de representación en el cliente y tiene dos valores:

"Cliente": la representación se realiza en su totalidad por el navegador. El cliente carga de forma independiente las dependencias y ejecuta consultas FSQL en el servidor, después de lo cual recopila el HTML en sí

"Servidor": el cliente realiza una solicitud al servidor para representar la plantilla y recibe HTML listo como respuesta

  ... packages: [], dynamicLoading: true, clientRenderingMode: "client", dataClient: { defaultConnection: "default", ... 

Y la última innovación para nosotros es conectar una base de datos en un archivo. El marco no puede funcionar completamente sin la capacidad de procesar variables de configuración que tienen una estructura de tabla. Por lo tanto, en lugar de MYSQL, utilizaremos un archivo normal.

 ... defaultConnection: "default", connections: { default: { type: "file", file: "data.fosdb" } }, }, ... 

Como se puede ver en el extracto anterior, en este caso el tipo de base de datos (parámetro de tipo) es "archivo", y el único parámetro de conexión de archivo debe contener la ruta al archivo de datos. Si falta el archivo, la aplicación lo creará solo.

Crear plantilla de página

Ahora es el momento de crear un archivo de plantilla de página de aplicación templates / page.tmpl, que hemos registrado en la ruta URL raíz.

 //~OPTIONS { args:{ fosInclude: ["css/styles.css"], } } //~BLOCK main default <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> %{{ render.renderHTMLHeader(); }}% <script> function onClientSideRendering(a_event){ a_event.preventDefault(); fos.application.render({ template: "templates/window.tmpl", owner: document.body, args: { title: "Client side rendering", context: "Simple example of client side rendering" }, onResult: function(a_error, a_template){ } }); } function onServerSideRendering(a_event){ a_event.preventDefault(); fos.application.render({ template: "templates/window.tmpl", owner: document.body, renderMode: "server", args: { title: "Server side rendering", context: "Simple example of server side rendering" }, onResult: function(a_error, a_template){ } }); } </script> </head> <body> <div class="mainwrapper"> <div class="header markup"> Client Side Rendering </div> <div class="body-wrapper markup"> <div class="body markup"> <p class="example-link--container"><a onclick="onClientSideRendering(event);">Client side rendering</a></p> <p class="example-link--container"><a onclick="onServerSideRendering(event);">Server side rendering</a></p> </div> <div class="clear-body"></div> </div> </div> </body> </html> 

La plantilla de página tiene dos enlaces, "Representación del lado del cliente" y "Representación del lado del servidor". Al hacer clic en el que se mostrarán ventanas que aún no están disponibles. Pero hay un código para llamarlos. Y entonces tratemos con el código de la plantilla.

Cuando hacemos clic en el enlace "Representación del lado del cliente", llamamos a la función onClientSideRendering (), que representa la plantilla "templates / window.tmpl". Completamente del lado del cliente, como en la configuración de la aplicación, el parámetro clientRenderingMode se estableció en "cliente". A pesar de que este es el valor predeterminado :-).

 function onClientSideRendering(a_event){ a_event.preventDefault(); fos.application.render({ template: "templates/window.tmpl", owner: document.body, args: { title: "Client side rendering", context: "Simple example of client side rendering" }, onResult: function(a_error, a_template){ } }); } 

El método de representación en realidad representa nuestra ventana y la coloca en el cuerpo de la página, como se especifica en la propiedad del argumento del propietario. Pasamos 2 argumentos a la plantilla de la ventana: título y contexto, en realidad lo que se mostrará en la ventana mostrada. Para obtener más información sobre el método, consulte fos :: NClient :: Application :: render

El segundo enlace llama a la función onServerSideRendering (), que representa de manera similar la misma plantilla, pero en el lado del servidor, y el cliente recibe HTML listo para usar. Este modo se establece en la propiedad del argumento renderMode del método de representación con el valor "servidor".

 function onServerSideRendering(a_event){ a_event.preventDefault(); fos.application.render({ template: "templates/window.tmpl", owner: document.body, renderMode: "server", args: { title: "Server side rendering", context: "Simple example of server side rendering" }, onResult: function(a_error, a_template){ } }); } 

Crear una plantilla emergente y escribir una plantilla de contenedor

La plantilla de ventana emergente en sí es muy simple. Cree el archivo templates / window.tmpl. El siguiente es su contenido.

 //~OPTIONS { args:{ fosWrapper: true, fosClass: "window", fosInclude: ["css/window.css"], title: "", context: "", } } //~BLOCK main default <div class="window-container"> <div class="window-close" name="close">x</div> <div class="window-title">${{args.title}}$</div> <div class="window-context">${{args.context}}$</div> </div> 

Aquí para usted hay dos nuevos parámetros fosWrapper y fosClass.

Comencemos con fosWrapper. Si este indicador se establece en verdadero, la plantilla HTML se coloca en el contenedor de expansión y se crea un objeto contenedor fos :: NRender :: Wrapper.

Inicie la aplicación, vaya a localhost : 3001 y haga clic en el enlace "Representación del lado del cliente". La ventana emergente es nuestra plantilla. La ventana emergente está implementada completamente por css (archivo css / window.css): acabo de mencionar que no buscaría JS oculto :-).

Abra el navegador DevTools (Ctrl + Alt + i), vaya a la pestaña Elementos y revise la estructura de nuestra ventana.



La línea azul en la figura marca nuestro contenedor de ajuste de tramo con el que está conectado el objeto fos :: NRender :: Wrapper.

El siguiente argumento del sistema para la plantilla es fosClass. Simplemente agrega una clase CSS al contenedor del contenedor.

Y así, todo se hizo bien, pero si tratamos de cerrar nuestras ventanas emergentes, no saldrá nada. Sí, todavía no hemos escrito una operación de cierre.

Como dijimos anteriormente, si el argumento del sistema fosWrapper es verdadero, entonces el objeto contenedor fos :: NRender :: Wrapper se crea para la plantilla. Proporciona una interfaz estándar para interactuar con la plantilla en el cliente. Para redefinir el contenedor estándar para una plantilla, es suficiente crear un módulo con el nombre correspondiente al siguiente formato [PATTERN NAME] .wrapper.js, y el módulo debe heredarse de la clase fos :: NRender :: Wrapper.

Ahora cree un archivo contenedor para la plantilla templates / window.tmpl. La nueva clase tendrá que cerrar nuestra ventana emergente, cuando haga clic en el símbolo "x".

Plantillas de archivo / window.wrapper.js:

 fos.module({ name: "templates/window.wrapper.js", dependencies: ["fos:NRender/Wrapper.js"], module: function(Wrapper){ return function(a_initializeOptions) { var self = this; Wrapper.call(this, a_initializeOptions); var parentAttach = this._attach; this._attach = function(a_cb) { parentAttach.call(this, function(){ fos.addDomListener(fos.select(self.getDomElement(), "[name=close]")[0], "click", function(){ self.getDomElement().classList.add("window-hide"); setTimeout(function() { self.destroy(); }, 2000); }); a_cb(); }); } } } }); 

Analicemos los contenidos de nuestro módulo. Primero, conectamos la clase base fos :: NRender :: Wrapper y heredamos de ella a través del método de llamada.

 fos.module({ name: "templates/window.wrapper.js", dependencies: ["fos:NRender/Wrapper.js"], module: function(Wrapper){ return function(a_initializeOptions) { var self = this; Wrapper.call(this, a_initializeOptions); ... 

Después de redefinir el método fos :: NRender :: Wrapper :: _ attach, que se llama cuando la plantilla está asociada con el objeto. En este método, conectaremos el evento de hacer clic en el enlace para cerrar la ventana. La anulación se realiza simplemente declarando el método, pero al principio debemos mantener la referencia a la implementación principal. El método tiene una "naturaleza asincrónica", por lo que colocamos la implementación de nuestras acciones en la función de devolución de llamada de la implementación principal.

  ... var parentAttach = this._attach; this._attach = function(a_cb) { parentAttach.call(this, function(){ fos.addDomListener(fos.select(self.getDomElement(), "[name=close]")[0], "click", function(){ self.getDomElement().classList.add("window-hide"); setTimeout(function() { self.destroy(); }, 2000); }); a_cb(); }); } ... 

Conectando al evento de hacer clic en el símbolo "x" lo realizamos llamando a fos :: addDomListener, que no restablece los eventos conectados al cambiar el elemento primario del elemento DOM.

En el controlador de eventos, cerramos la ventana. Primero, eliminamos la ventana de la pantalla agregando la clase CSS "window-hide". Una vez completada la animación, llamamos al método fos :: NRender :: Wrapper :: destroy, que elimina la plantilla y el objeto contenedor.

TODAS LAS APLICACIONES ESCRITAS, LANZADAS Y REJUJADAS !!!

 node application.js 

Sitio oficial de desarrollo

Enlace a un ejemplo