Friendly Open Space JS: Clientseitiges Rendern und Erstellen von Wrappern

Friendly Open Space ist ein sehr junges Framework, weiß aber bereits, wie man läuft :-)

In diesem Artikel über die Entwicklung von "Friendly Open Space" werden wir das Rendern der Vorlage im Browser und das Starten der Anwendung in der lokalen Dateidatenbank beherrschen.

Der Kern des Frameworks unterstützt zwei Arten der Vorlagenassemblierung auf dem Client:

1. Vollständiges clientseitiges Rendern
2. Es wird eine Anforderung zum Rendern der Vorlage auf dem Server gestellt, gefolgt von ihrer Ausgabe in einem Browserfenster.

Der erste Modus hat eine Funktion: Die zum Rendern der Vorlage erforderlichen Daten werden vom Server angefordert, d. H. Der Client führt FSQL-Abfragen aus. Dies birgt keine besondere Gefahr, wenn Sie die Zugriffsbeschränkung und das Modul fosAccess verwenden. Es besteht jedoch die Möglichkeit, Rohdaten per Kopierpasteur zu entladen. Dieser Ansatz reduziert jedoch die Belastung des Servers erheblich.

Bei der zweiten Art des Renderns fehlt diese Funktion bereits. Der Client sendet die Vorlagenparameter und empfängt bereits vom HTML-Server. Ja, die Belastung des Servers wird sicherlich zunehmen, aber diese Methode eignet sich besser für offene Internetlösungen.

Vorbereiten und Einrichten der Anwendung

Wir stehen also vor der Aufgabe, eine einseitige Anwendung zu erstellen, die auf der Clientseite zwei Vorlagen (Fenster) rendert. Angesichts einer ziemlich einfachen Aufgabe werden wir auf eine MySQL-Datenbank und Projektionen verzichten, sodass wir alle FSQL-Arbeiten in eine Datei leiten, d. H. Wir werden die Datenbank in der Datei verwenden, um mit den internen Mechanismen des Frameworks zu arbeiten. Nun, fangen wir an.

Erstellen Sie die Verzeichnisse:

Vorlagen - Vorlagenverzeichnis
CSS - Verzeichnis der CSS-Dateien
fos - Laden Sie die neueste Beta-Version von Friendlyopenspace.site/de/download herunter
Platzieren Sie die nervige Datei favicon.ico im Stammverzeichnis der Anwendung: favicon.ico

Außerdem legen wir die Stildateien sofort im CSS-Verzeichnis ab: window.css und styles.css

Erstellen Sie als Nächstes die Anwendungsdatei application.js selbst:

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(); } }); 

Schauen wir uns nun den Inhalt der Datei application.js an

Wir haben alle Pakete deaktiviert, da sie nicht benötigt wurden (der Paketparameter der setSettings-Methode):

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

Der für uns neue Anwendungsparameter clientRenderingMode ist für die Art des Renderns auf dem Client verantwortlich und hat zwei Werte:

"Client" - Das Rendern wird vollständig vom Browser durchgeführt. Der Client lädt die Abhängigkeiten unabhängig voneinander und führt FSQL-Abfragen auf dem Server aus. Anschließend sammelt er den HTML-Code selbst

"Server" - Der Client fordert den Server auf, die Vorlage zu rendern, und erhält als Antwort fertiges HTML

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

Und die letzte Neuerung für uns ist das Verbinden einer Datenbank mit einer Datei. Das Framework kann nicht vollständig funktionieren, ohne Konfigurationsvariablen mit einer Tabellenstruktur verarbeiten zu können. Daher verwenden wir anstelle von MYSQL eine reguläre Datei.

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

Wie aus dem obigen Auszug ersichtlich ist, ist in diesem Fall der Datenbanktyp (Typparameter) "Datei", und der einzige Dateiverbindungsparameter sollte den Pfad zur Datendatei enthalten. Wenn die Datei fehlt, wird sie von der Anwendung selbst erstellt.

Seitenvorlage erstellen

Jetzt ist es Zeit, eine Anwendungsseitenvorlagendatei templates / page.tmpl zu erstellen, die wir in der Root-URL-Route registriert haben.

 //~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> 

Die Seitenvorlage enthält zwei Links: "Clientseitiges Rendern" und "Serverseitiges Rendern". Wenn Sie darauf klicken, werden Fenster angezeigt, die noch nicht verfügbar sind. Aber es gibt einen Code, um sie aufzurufen. Und so wollen wir uns mit dem Vorlagencode befassen.

Wenn wir auf den Link "Client Side Rendering" klicken, rufen wir die Funktion onClientSideRendering () auf, die die Vorlage "templates / window.tmpl" rendert. Ganz auf der Client-Seite, as In den Anwendungseinstellungen wurde der Parameter clientRenderingMode auf "client" gesetzt. Trotz der Tatsache, dass dies der Standardwert ist :-).

 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){ } }); } 

Die Render-Methode rendert unser Fenster tatsächlich und platziert es im Hauptteil der Seite, wie in der Eigenschaft des Eigentümerarguments angegeben. Wir übergeben 2 Argumente an die Fenstervorlage: Titel & Kontext, tatsächlich das, was im angezeigten Fenster angezeigt wird. Weitere Informationen zur Methode finden Sie unter fos :: NClient :: Application :: render

Der zweite Link ruft die Funktion onServerSideRendering () auf, die auf ähnliche Weise dieselbe Vorlage rendert, jedoch auf der Serverseite, und der Client erhält vorgefertigtes HTML. Dieser Modus wird in der Eigenschaft des renderMode-Arguments der Rendermethode mit dem Wert "server" festgelegt.

 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){ } }); } 

Erstellen einer Popup-Vorlage und Schreiben einer Wrapper-Vorlage

Die Popup-Fenstervorlage selbst ist sehr einfach. Erstellen Sie die Datei templates / window.tmpl. Das Folgende ist sein Inhalt.

 //~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> 

Hier für Sie gibt es zwei neue Parameter fosWrapper und fosClass.

Beginnen wir mit fosWrapper. Wenn dieses Flag auf true gesetzt ist, wird die HTML-Vorlage in den Span-Container gestellt und ein Wrapper-Objekt fos :: NRender :: Wrapper dafür erstellt.

Starten Sie die Anwendung, gehen Sie zu localhost : 3001 und klicken Sie auf den Link "Client-seitiges Rendern". Das Popup-Fenster ist unsere Vorlage. Das Fenster-Popup wird vollständig von CSS (Datei css / window.css) implementiert. Ich habe gerade erwähnt, dass Sie nicht nach verstecktem JS suchen würden :-).

Öffnen Sie den DevTools-Browser (Strg + Alt + i), wechseln Sie zur Registerkarte Elemente und überprüfen Sie die Struktur unseres Fensters.



Die blaue Linie in der Abbildung markiert unseren Span-Wrapping-Container, mit dem das Objekt fos :: NRender :: Wrapper verbunden ist.

Das nächste Systemargument für die Vorlage ist fosClass. Es wird einfach eine CSS-Klasse zum Wrapper-Span-Container hinzugefügt.

Und so wurde alles gut gemacht, aber wenn wir versuchen, unsere Popups zu schließen, wird nichts daraus. Ja, wir haben noch keine Abschlussoperation geschrieben!

Wie bereits erwähnt, wird das Wrapper-Objekt fos :: NRender :: Wrapper für die Vorlage erstellt, wenn das Systemargument fosWrapper true ist. Es bietet eine Standardschnittstelle für die Interaktion mit der Vorlage auf dem Client. Um den Standard-Wrapper für eine Vorlage neu zu definieren, reicht es aus, ein Modul mit dem Namen zu erstellen, der dem folgenden Format [PATTERN NAME] .wrapper.js entspricht. Das Modul sollte von der Klasse fos :: NRender :: Wrapper geerbt werden.

Erstellen Sie nun eine Wrapper-Datei für die Vorlage templates / window.tmpl. Die neue Klasse muss unser Popup-Fenster schließen, wenn Sie auf das Symbol "x" klicken.

Dateivorlagen / 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(); }); } } } }); 

Lassen Sie uns den Inhalt unseres Moduls analysieren. Zuerst verbinden wir die Basisklasse fos :: NRender :: Wrapper und erben von ihr über die Aufrufmethode.

 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); ... 

Nachdem wir die Methode fos :: NRender :: Wrapper :: _ attach neu definiert haben, wird sie aufgerufen, wenn die Vorlage dem Objekt zugeordnet ist. Bei dieser Methode verbinden wir das Ereignis des Klickens auf den Link, um das Fenster zu schließen. Das Überschreiben erfolgt einfach durch Deklarieren der Methode, aber am Anfang müssen wir den Verweis auf die übergeordnete Implementierung beibehalten. Die Methode ist „asynchron“, daher setzen wir die Implementierung unserer Aktionen in die Rückruffunktion der übergeordneten Implementierung.

  ... 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(); }); } ... 

Wenn Sie eine Verbindung zum Ereignis herstellen, indem Sie auf das Symbol "x" klicken, rufen Sie fos :: addDomListener auf, wodurch die verbundenen Ereignisse beim Ändern des übergeordneten Elements des DOM-Elements nicht zurückgesetzt werden.

Im Event-Handler schließen wir das Fenster. Zuerst entfernen wir das Fenster schön vom Bildschirm, indem wir die CSS-Klasse "window-hide" hinzufügen. Nachdem die Animation abgeschlossen ist, rufen wir die Methode fos :: NRender :: Wrapper :: destroy auf, mit der die Vorlage und das Wrapper-Objekt entfernt werden.

ALLE ANWENDUNGEN SCHRIFTLICH, GESTARTET UND WIEDERVERBINDEN !!!

 node application.js 

Offizielle Entwicklungsseite

Link zu einem Beispiel