Electron - Construindo UIs

A interface do usuário de aplicativos Electron é construída usando HTML, CSS e JS. Portanto, podemos aproveitar todas as ferramentas disponíveis para o desenvolvimento front-end da web aqui também. Você pode usar ferramentas como Angular, Backbone, React, Bootstrap e Foundation para construir os aplicativos.

Você pode usar o Bower para gerenciar essas dependências de front-end. Instale o caramanchão usando -

$ npm install -g bower

Agora você pode obter todos os frameworks JS e CSS disponíveis, bibliotecas, plug-ins, etc. usando o bower. Por exemplo, para obter a versão estável mais recente do bootstrap, digite o seguinte comando -

$ bower install bootstrap

Isso fará o download do bootstrap em bower_components . Agora você pode fazer referência a essa biblioteca em seu HTML. Vamos criar uma página simples usando essas bibliotecas.

Vamos agora instalar o jquery usando o comando npm -

$ npm install --save jquery

Além disso, isso será necessário em nosso arquivo view.js. Já temos uma configuração main.js da seguinte forma -

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

let win

function createWindow() {
   win = new BrowserWindow({width: 800, height: 600})
   win.loadURL(url.format ({
      pathname: path.join(__dirname, 'index.html'),
      protocol: 'file:',
      slashes: true
   }))
}

app.on('ready', createWindow)

Abre o teu index.html arquivo e digite o seguinte código nele -

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "UTF-8">
      <title>Hello World!</title>
      <link rel = "stylesheet" 
         href = "./bower_components/bootstrap/dist/css/bootstrap.min.css" />
   </head>
   
   <body>
      <div class = "container">
         <h1>This page is using Bootstrap and jQuery!</h1>
         <h3 id = "click-counter"></h3>
         <button class = "btn btn-success" id = "countbtn">Click here</button>
         <script src = "./view.js" ></script>
      </div>
   </body>
</html>

Crio view.js e insira a lógica do contador de cliques nele -

let $ = require('jquery')  // jQuery now loaded and assigned to $
let count = 0
$('#click-counter').text(count.toString())
$('#countbtn').on('click', () => {
   count ++ 
   $('#click-counter').text(count)
})

Execute o aplicativo usando o seguinte comando -

$ electron ./main.js

O comando acima irá gerar a saída como na imagem a seguir -

Você pode criar seu aplicativo nativo da mesma forma que cria sites. Se você não deseja que os usuários fiquem restritos a um tamanho de janela exato, você pode aproveitar o design responsivo e permitir que os usuários usem seu aplicativo de maneira flexível.

↰ Previous page Next page ↱