Friendly Open Space é um framework muito jovem, mas já sabe como executar :-)
Neste artigo sobre o desenvolvimento de "Espaço aberto amigável", dominaremos a renderização do modelo no navegador e iniciaremos o aplicativo no banco de dados de arquivos local.
O núcleo da estrutura suporta dois tipos de montagem de modelo no cliente:
- Renderização completa do lado do cliente
- É feita uma solicitação para renderizar o modelo no servidor, seguido por sua saída em uma janela do navegador.
O primeiro modo possui um recurso, os dados necessários para renderizar o modelo são solicitados ao servidor, ou seja, o cliente executa consultas FSQL. Não há perigo particular nisso se você usar a restrição de acesso e o módulo fosAccess, mas há a possibilidade de descarregar dados brutos por cópia pasteur. No entanto, essa abordagem reduz significativamente a carga no servidor.
O segundo tipo de renderização já não possui esse recurso. O cliente envia os parâmetros do modelo e já recebe do servidor HTML. Sim, a carga no servidor certamente aumentará, mas esse método é mais adequado para soluções abertas da Internet.
Preparando o aplicativo e configurando-o
E assim, somos confrontados com a tarefa de criar um aplicativo de uma página que renderizará 2 modelos (janelas) no lado do cliente. Em vista de uma tarefa bastante simples, ficaremos sem um banco de dados e projeções do MySQL; portanto, direcionaremos todo o trabalho do FSQL para um arquivo, ou seja, usaremos o banco de dados no arquivo para trabalhar com os mecanismos internos da estrutura. Bem, vamos começar.
Crie os diretórios:
modelos - diretório de modelos
css - diretório de arquivos css
fos - faça o download da versão beta mais recente
friendlyopenspace.site/en/downloadColoque o favicon.ico irritante no diretório raiz do aplicativo:
favicon.icoAlém disso, colocamos imediatamente os arquivos de estilo no diretório css:
window.css e
styles.cssEm seguida, crie o próprio arquivo do aplicativo 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(); } });
Agora, vamos ver o conteúdo do arquivo application.js
Desabilitamos todos os pacotes, pois eles não eram necessários (o parâmetro packages do método setSettings):
... application.setSettings({ port: 3001, packages: [], dynamicLoading: true, clientRenderingMode: "client", ...
O parâmetro do aplicativo clientRenderingMode, novo para nós, é responsável pelo tipo de renderização no cliente e possui dois valores:
"Cliente" - a renderização é realizada inteiramente pelo navegador. O cliente carrega independentemente as dependências e executa consultas FSQL no servidor, após o qual coleta o próprio HTML
"Servidor" - o cliente faz uma solicitação ao servidor para renderizar o modelo e recebe HTML pronto como resposta
... packages: [], dynamicLoading: true, clientRenderingMode: "client", dataClient: { defaultConnection: "default", ...
E a última inovação para nós é conectar um banco de dados em um arquivo. A estrutura não pode funcionar completamente sem a capacidade de processar variáveis de configuração que possuem uma estrutura de tabela. Portanto, em vez do MYSQL, usaremos um arquivo regular.
... defaultConnection: "default", connections: { default: { type: "file", file: "data.fosdb" } }, }, ...
Como pode ser visto no trecho acima, nesse caso, o tipo de banco de dados (parâmetro type) é "file" e o único parâmetro de conexão do arquivo deve conter o caminho para o arquivo de dados. Se o arquivo estiver ausente, o aplicativo o criará sozinho.
Criar modelo de página
Agora é hora de criar um arquivo de modelo de página de aplicativo templates / page.tmpl, que registramos na rota do URL raiz.
//~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>
O modelo da página possui dois links, "Renderização do lado do cliente" e "Renderização do lado do servidor". Clicar em qual exibirá janelas que ainda não estão disponíveis. Mas há um código para chamá-los. E então, vamos lidar com o código do modelo.
Quando clicamos no link "Renderização do lado do cliente", chamamos a função onClientSideRendering (), que renderiza o modelo "templates / window.tmpl". Completamente no lado do cliente, como nas configurações do aplicativo, o parâmetro clientRenderingMode foi definido como "client". Apesar do fato de esse ser o valor padrão :-).
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){ } }); }
O método render, na verdade, renderiza nossa janela e a coloca no corpo da página, conforme especificado na propriedade do argumento do proprietário. Passamos 2 argumentos para o modelo da janela: título e contexto, na verdade o que será exibido na janela exibida. Para obter mais informações sobre o método, consulte
fos :: NClient :: Application :: renderO segundo link chama a função onServerSideRendering (), que também gera o mesmo modelo, mas no lado do servidor, e o cliente recebe HTML pronto. Este modo é definido na propriedade do argumento renderMode do método render com o valor "server".
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){ } }); }
Criando um modelo pop-up e gravando um modelo de wrapper
O próprio modelo de janela pop-up é muito simples. Crie o arquivo templates / window.tmpl. A seguir está o seu conteúdo.
//~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>
Aqui para você, existem dois novos parâmetros fosWrapper e fosClass.
Vamos começar com fosWrapper. Se esse sinalizador estiver definido como true, o modelo HTML será colocado no contêiner de extensão e um objeto wrapper fos :: NRender :: Wrapper será criado para ele.
Inicie o aplicativo, vá para
localhost : 3001 e clique no link "Renderização no lado do cliente". A janela pop-up é o nosso modelo. O pop-up da janela é implementado inteiramente por css (arquivo css / window.css) - acabei de mencionar que você não procuraria por JS :-) oculto.
Abra o navegador DevTools (Ctrl + Alt + i), vá para a guia Elementos e revise a estrutura de nossa janela.
A linha azul na figura marca nosso contêiner de quebra automática de extensão com o qual o objeto fos :: NRender :: Wrapper está conectado.
O próximo argumento do sistema para o modelo é fosClass. Ele simplesmente adiciona uma classe CSS ao contêiner de extensão do wrapper.
E assim, tudo foi bem feito, mas se tentarmos fechar nossos pop-ups, nada resultará disso. Sim, ainda não escrevemos uma operação de fechamento!
Como dissemos anteriormente, se o argumento do sistema fosWrapper for verdadeiro, o objeto wrapper fos :: NRender :: Wrapper será criado para o modelo. Ele fornece uma interface padrão para interagir com o modelo no cliente. Para redefinir o wrapper padrão para um modelo, basta criar um módulo com o nome correspondente ao seguinte formato [PATTERN NAME] .wrapper.js, e o módulo deve ser herdado da classe fos :: NRender :: Wrapper.
Agora crie um arquivo wrapper para o modelo templates / window.tmpl. A nova classe terá que fechar nossa janela pop-up, quando você clicar no símbolo "x".
Modelos de arquivo / 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(); }); } } } });
Vamos analisar o conteúdo do nosso módulo. Primeiro, conectamos a classe base fos :: NRender :: Wrapper e a herdamos através do método de chamada.
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); ...
Após redefinir o método fos :: NRender :: Wrapper :: _ attach, chamado quando o modelo está associado ao objeto. Nesse método, conectaremos o evento de clicar no link para fechar a janela. A substituição é feita simplesmente declarando o método, mas no início devemos manter a referência à implementação pai. O método tem uma "natureza assíncrona", portanto, colocamos a implementação de nossas ações na função de retorno de chamada da implementação pai.
... 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-se ao evento de clicar no símbolo "x", realizamos chamando fos :: addDomListener, que não redefine os eventos conectados ao alterar o pai do elemento DOM.
No manipulador de eventos, fechamos a janela. Primeiro, removemos bem a janela da tela adicionando a classe CSS "window-hide". Após a conclusão da animação, chamamos o método fos :: NRender :: Wrapper :: destroy, que remove o modelo e o objeto wrapper.
TODAS AS APLICAÇÕES ESCRITAS, LANÇADAS E REJOINT !!!
node application.js
Site oficial de desenvolvimentoLink para um exemplo