Get best of the week

Como fazer amigos Electron e Webix

Introdução


Boa hora do dia! Gostaria de compartilhar com você minha experiência pessoal na criação de um aplicativo JavaScript para desktop usando uma combinação de Electron e Webix. Esse pacote permite acelerar o processo de layout da interface, especialmente sem perder tempo com o layout e outras coisas da Web que a estrutura Webix pode fazer.

Ferramentas


Então, vamos começar, precisaremos das seguintes ferramentas:

  1. Um editor no qual escreveremos nosso código diretamente. Vou usar o código do visual studio (VSC), que pode ser obtido daqui ;
  2. Servidor Node.js, que pode ser obtido a partir daqui . Faça o download e instale;
  3. O Webix Framework é uma versão gratuita (o Webix Standard é uma biblioteca de interface do usuário gratuita sob a licença GNU GPLv3), que retiramos daqui webix.com/get-webix-gpl . Para fazer o download, você precisa acessar o link acima, inserir um email, nome e sobrenome, colocar três marcas de seleção, clicar em enviar e, em seguida, um link de download será enviado para o seu e-mail.

Em geral, é tudo o que precisamos.

Instale as ferramentas necessárias


Portanto, prosseguimos diretamente para a criação:

1. Instale "node.js". Não vou parar por aqui. Tenho certeza de que você pode fazer isso sem mim.

2. Crie uma pasta na qual escreveremos nosso código - por exemplo, electron_webix (Fig. 1).


FIG. 1 - Criando uma pasta de trabalho

3. Inicie o VSC e abra esta pasta (Fig. 2).


FIG. 2 - Abra a pasta de trabalho

4. Abra o terminal VSC com a combinação de teclas "Ctrl + '" e digite o comando "npm init", que inicializará o projeto "node.js". Depois disso, o sistema solicitará um monte de perguntas diferentes e muito úteis, que não precisam ser respondidas. Em seguida, pressionamos o tempo todo com confiança no botão "Enter" e não pensamos em nada de ruim (Fig. 3).


FIG. 3 - Inicialização do projeto

5. Instale diretamente o próprio elétron. Por que inserimos o comando “npm install --save-dev electron” no console do VSC, então sentamos e esperamos até que tudo esteja instalado (Fig. 4).


FIG. 4 - Instalação do elétron

Organização do espaço de trabalho


Agora nos voltamos para a organização do espaço de trabalho. A primeira coisa que precisamos fazer é criar várias pastas e arquivos que não podemos ficar sem (Figura 5):

  • a pasta “libs”, aqui colocamos os arquivos baixados do site “Webix”;
  • a pasta “.vscode”, aqui colocamos o arquivo json que executará nosso aplicativo no VSC;
  • arquivo "main.js", o arquivo principal que executará nosso aplicativo Electron;
  • o arquivo "index.html" conterá nosso conteúdo e marcação;
  • arquivo "renderer.js", o manipulador de eventos de nosso aplicativo. Funciona em conjunto com index.html;
  • arquivo "launch.json", na pasta ".vscode", o arquivo necessário para executar nosso código no ambiente "VSC" usando o botão "F5";
  • arquivo "style.css", neste arquivo ainda precisamos registrar alguns estilos para que nossa janela pareça decente.


FIG. 5 - Pastas e arquivos necessários

Preencher a área de trabalho com conteúdo inicial


Vamos começar a preencher a área de trabalho com o arquivo "launch.json", que é usado para iniciar nosso aplicativo no ambiente "VSC" sem nenhum comando adicional do console.
O conteúdo do arquivo "launch.json" foi retirado daqui . Aqui não vamos nos aprofundar no conteúdo deste arquivo, apenas copie-o e salve-o. O conteúdo do arquivo é apresentado abaixo (Fig. 6).

  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug Main Process",
      "type": "node",
      "request": "launch",
      "cwd": "${workspaceFolder}",
      "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
      "windows": {
        "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron.cmd"
      },
      "args" : ["."],
      "outputCapture": "std"
    }
  ]
}


FIG. 6 - O arquivo “launch.json” no ambiente “VSC”

Em seguida, precisamos corrigir o arquivo “package.json”, que foi criado automaticamente quando o comando “npm init” foi executado. Ele precisa ser alterado em duas linhas, como mostrado abaixo (Fig. 7):

Havia um “pacote.json”:

  "name": "electron_webix",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
  "test": "echo \"Error: no test specified\" && exit 1
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "electron": "^8.2.3"
  }
}

Aqui está um package.json:

{
  "name": "electron_webix",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
   "start": "electron ."
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "electron": "^8.2.3"
  }
}


FIG. 7 - O arquivo “package.json” no ambiente “VSC”

Agora passamos a preencher o arquivo “main.js”, copie seu conteúdo daqui . Insira e salve.

const { app, BrowserWindow } = require('electron')

function createWindow () {
  //   .
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })

  // and load the index.html of the app.
  win.loadFile('index.html')

  //   .
  win.webContents.openDevTools()
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
//  API       .
app.whenReady().then(createWindow)

// Quit when all windows are closed.
app.on('window-all-closed', () => {
  //       macOS    
  //    ,       Cmd + Q
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
   //  MacOS     ,
   //  ,           .
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow()
  }
})

// In this file you can include the rest of your app's specific main process
// code.            require.


FIG. 8 - O arquivo “main.js” no ambiente “VSC”.

Depois disso, finalmente podemos finalmente executar o primeiro lançamento da “tecla F5” do nosso aplicativo. Então, pressione “F5” e aqui está a nossa janela (Fig. 9).


FIG. 9 - Arquivo “main.js” no ambiente “VSC”, o

que vemos na Fig. 9? Esta é a área de trabalho do nosso aplicativo à esquerda e as ferramentas de depuração à direita.

Agora crie a marcação inicial no arquivo index.html. Por que fazer o seguinte em "VSC": abra o arquivo "index.html" => digite "!" => e clique em "Enter" => e depois a mágica e o seguinte resultado:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

Bem, como na melhor tradição de escrever código entre as tags "", insira o texto "Olá, mundo !!!"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    Hello world!!!
</body>
</html>

Depois disso, tentamos pressionar “F5” novamente e verificar se tudo funciona para nós (Fig. 10)


Fig. 10 - Janela "Olá, mundo !!!"

Agora precisamos extrair todo o conteúdo da pasta “codebase” do arquivo webix.zip que baixamos e transferi-lo para a nossa pasta libs (Fig. 11).

Abra o arquivo morto, vá para a pasta codebase, pegue seu conteúdo e transfira-o para o pacote libs.


FIG. 11 - O conteúdo da pasta “libs”

Depois de preencher o conteúdo da pasta “libs”, abra o arquivo “renderer.js” e escreva o seguinte:

//   
const { remote } = require('electron')
//           
let WIN = remote.getCurrentWindow()
//   webix
const webix = require('./libs/webix.min.js')
//  JQuery
$ = require('jquery')
// ,              
webix.ui({
})

Em seguida, vamos digitar nossa interface. Por que acessar aqui designer.webix.com/welcome, clique no botão "Início rápido" e avance para o layout da interface. por exemplo, como mostrado na Figura 12.


Fig. 12 - Layout da interface no Webix Web Designer O layout

mostrado na Figura 12 é muito simples e consiste em arrastar e soltar o elemento desejado na área de trabalho do designer. A parte certa do construtor é para editar as propriedades dos elementos. Quando o layout estiver concluído (Fig. 13), você precisará transferi-lo para o arquivo renderer.js. Por que clicar no botão "Código" e obter um layout pronto na forma de texto. Selecione este texto e copie-o.


FIG. 13 - Converter layout em texto

Depois disso, abrimos o arquivo “renderer.js” no “VSC” e colamos o texto copiado na função “webix.ui” preparada (Fig. 14).

//   
const { remote } = require('electron')
//           
let WIN = remote.getCurrentWindow()
//   webix
const webix = require('./libs/webix.min.js')
//  JQuery
$ = require('jquery')
//               
webix.ui(
    {
        "id": 1587908357897,
        "rows": [
            {
                "css": "webix_dark",
                "view": "toolbar",
                "height": 0,
                "cols": [
                    { "view": "label", "label": "Elcetron +Webix its cool!"},
                    { "label": "-", "view": "button", "height": 38, "width": 40},
                    { "label": "+", "view": "button", "height": 38, "width": 40},
                    { "label": "x", "view": "button", "height": 38, "width": 40}
                ]
            },
            {
                "width": 0,
                "height": 0,
                "cols": [
                    { "url": "demo->5ea58f0e73f4cf00126e3769", "view": "sidebar", "width": 177 },
                    {
                        "width": 0,
                        "height": 0,
                        "rows": [
                            { "template": "Hello WORLD! ", "view": "template" },
                            {
                                "url": "demo->5ea58f0e73f4cf00126e376d",
                                "type": "bar",
                                "xAxis": "#value#",
                                "yAxis": {},
                                "view": "chart"
                            }
                        ]
                    }
                ]
            }
        ]
    }
)


FIG. 14 - Adicionando um layout criado com o designer

Suffer pouco mais. Em seguida, pegue e abra no “VSC” nosso arquivo index.html pré-preparado e anexe literalmente as três linhas a seguir :, e o
arquivo index.html terá o seguinte formato:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./libs/webix.css">
    <link rel="stylesheet" href="./style.css">
    <title>Document</title>
</head>
<body>
    <script src="./renderer.js"></script>
</body>
</html>

Em seguida, clique em "F5" e obtenha nosso aplicativo com o layout do Webix (Fig. 15)


Fig. 15 - A janela de trabalho do aplicativo com layout da Webix

Adicione algumas fichas.


Tudo parece funcionar. Mas eu gostaria de remover a moldura da janela que não precisamos, que realmente não se encaixa no nosso design. Usaremos uma solução personalizada com você. Por que abrimos o arquivo “main.js” e adicionamos o parâmetro frame: false ao criar o BrowserWindow, esse sinalizador remove o menu padrão e a borda da janela. Deve ficar assim:

const win = new BrowserWindow({
    width: 800,
    height: 600,
    frame:false,
    webPreferences: {
      nodeIntegration: true
    }
  })

Clique em “F5” e veja o resultado sem uma janela de quadro (Fig. 16).


FIG. 16 - A janela de trabalho do aplicativo com layout da Webix

Resta ensinar a nossa janela a responder ao evento pelo mouse. No começo, ativaremos o título para que ele possa mover nossa janela pela tela do monitor. Por que abrir o arquivo “renderer.js”, localize o elemento view: label nele e adicione a propriedade css: ”head_win” a ele, como mostrado na Figura 17.

   { "view": "label", "label": "Elcetron +Webix its cool!", css:"head_win" },
                    { "label": "-", "view": "button", "height": 38, "width": 40},
                    { "label": "+", "view": "button", "height": 38, "width": 40 },
                    { "label": "x", "view": "button", "height": 38, "width": 40}


FIG. 17 - Adicionando um estilo à view: label element

Agora você precisa registrar esse estilo em um arquivo criado especificamente para esta finalidade. Abra o arquivo "style.css" e crie o seguinte estilo:

.head_win {
    -webkit-app-region: drag;
}

Depois disso, lançamos o aplicativo “F5” e tentamos arrastar nossa janela pelo título. Tudo deve funcionar.

Por fim, nosso aplicativo responderá ao clicar nos botões de título da janela “-, +, x”. Por que adicionar o seguinte código ao final do arquivo renderer.js:

//  
$$("close-bt").attachEvent("onItemClick", () => {
    const window = remote.getCurrentWindow();
    window.close();
})

//  
$$("min-bt").attachEvent("onItemClick", () => {
    const window = remote.getCurrentWindow();
    window.minimize();
})

//  
$$("max-bt").attachEvent("onItemClick", () => {
    const window = remote.getCurrentWindow();
    if (!window.isMaximized()) {
        window.maximize();
    } else {
        window.unmaximize();
    }
})

Neste código, uma entrada no formato "$$ (" max-bt ")" significa acesso ao elemento "Webix" por seu "id". Portanto, é necessário que os botões do cabeçalho especifiquem esse ID no arquivo "renderer.js", o que faremos conforme mostrado na Figura 18:

   { "view": "label", "label": "Elcetron +Webix its cool!", css:"head_win" },
                    { "label": "-", "view": "button", "height": 38, "width": 40, id:"min-bt" },
                    { "label": "+", "view": "button", "height": 38, "width": 40, id:"max-bt" },
                    { "label": "x", "view": "button", "height": 38, "width": 40, id:"close-bt" }


FIG. 18 - Adicionando um estilo à view: label element

Isso é tudo por enquanto. Experimente deve funcionar. O código fonte pode ser baixado no github, aqui está o link . Obrigado pela atenção.

More articles:


All Articles