#3 NWJs Manipulando a janela com JavaScript.

Fala galera, mais um post da série, se você não viu o primeiro Primeiros passos com NWJs ou o segundo #2 NWJs Propriedades das janelas (mudei o título do post, porque na verdade estávamos trabalhando com as propriedades das janelas e não de certa forma manipulando) vai lá da uma sacada e vamos que vamos, como falei, agora sim vamos manipular uma janela com JavaScript.

Nossa janela atualmente está nesse formato.

Convenhamos que uma janela assim, apesar de personalizada ainda não está tão bem assim, ela precisa dos botões, minimizar, maximizar e fechar como na frame nativa, sem os quais não se pode manipular a janela, nesse momento eu vou usar o VueJs❤ em sua atual versão, se quiser já pode pegar aqui e colocar em seu código.

<script src=”https://unpkg.com/vue"></script>

Então nosso index.html vai ficar assim.

Perceba que eu estou referenciando mais dois arquivos JavaScript, o nw.js e o main.js e coloquei os elementos que vão funcionar como a barra de uma frame nativa, não vou me deter em explicar o CSS pois isso vai de cada um e se você já sabe CSS vai tirar de letra, apenas vou deixar uma boa dica.

perceba que #bar_win receber a propriedade para agir como frame nativa -webkit-app-region: drag; ele aplica as propriedades no elemento principal e consequentemente em seus filhos, mas não só isso, ele meio que “buga” algum elemento que esteja por “cima” dele mesmo não tendo ligação alguma com ele, então, para resolver esse problema é só colocar -webkit-app-region: no-drag; no elemento filho para que ele não herde as propriedades do pai ou em algum elemento que esteja por “cima” dele.

Vamos ao nw.js, a separação desses dois arquivos se da apenas pelo fato da organização, e nesse arquivo vamos colocar uma chama para a janela principal, veja.

Ai você pode se perguntar, mas só pra isso!? Bem, o interessante é que você tenha arquivos de finalidade diferentes separados, pela organização e pela legibilidade de código, mas vamos lá, agora vamos ver a mágica acontecer o código de manipulação que vai ficar em main.js, se você já manja de VueJs❤ essa vai ser fácil, vamos ao código.

Defini como elemento root a tag main, logo em seguida defini uma variável statusWindow para definir quando a janela está maximizada ou não, a primeira função minimize ao executar vai chamar win.minimize(), claro, para minimizar a janela, o win diz respeito a instância da janela atribuída a variável no arquivo nw.js do projeto, a função maximize executa o trecho de código win.on(“maximize”, […], nesse momento ele está “ouvindo” se o evento maximize foi disparado, se sim, logo em seguida faz a atribuição do statusWindow, e ao clicar novamente ele verifica a condição do statusWindow e executa o win.restore() para fazer a janela voltar ao seu estado anterior, por fim a função close o que não tem muito o que explicar hehe.

E nossa janela está assim no momento:

Dei uma melhorada no CSS :), mais um detalhe, o botão para minimizar e maximizar ainda não muda, ele permanece apenas um “quadradinho”, que no caso dele maximizado deveria aparecer um ícone diferente, como no sprite a seguir.

Bom, ficamos por aqui, como sempre sugestões e críticas são mais que bem vindas, e tá tudo no meu github, vlw.

Show your support

Clapping shows how much you appreciated Edvaldo Lima’s story.