Electron - interfejs użytkownika budynku
Interfejs użytkownika aplikacji Electron jest zbudowany przy użyciu HTML, CSS i JS. Dzięki temu możemy wykorzystać wszystkie dostępne narzędzia do tworzenia front-endowych stron internetowych również tutaj. Do tworzenia aplikacji możesz użyć narzędzi takich jak Angular, Backbone, React, Bootstrap i Foundation.
Możesz użyć Bower do zarządzania tymi zależnościami frontonu. Zainstaluj altankę za pomocą -
$ npm install -g bowerTeraz możesz pobrać wszystkie dostępne frameworki JS i CSS, biblioteki, wtyczki itp. Za pomocą bower. Na przykład, aby uzyskać najnowszą stabilną wersję programu ładującego, wprowadź następujące polecenie -
$ bower install bootstrapSpowoduje to pobranie bootstrap w bower_components . Teraz możesz odwołać się do tej biblioteki w swoim HTML. Stwórzmy prostą stronę korzystając z tych bibliotek.
Zainstalujmy teraz jquery za pomocą polecenia npm -
$ npm install --save jqueryPonadto będzie to wymagane w naszym pliku view.js. Mamy już konfigurację main.js w następujący sposób -
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)Otwórz swoje index.html plik i wprowadź w nim następujący kod -
<!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>Stwórz view.js i wprowadź w nim logikę licznika kliknięć -
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)
})Uruchom aplikację za pomocą następującego polecenia -
$ electron ./main.jsPowyższe polecenie wygeneruje dane wyjściowe jak na poniższym zrzucie ekranu -
Możesz stworzyć swoją natywną aplikację tak samo jak strony internetowe. Jeśli nie chcesz, aby użytkownicy byli ograniczani do konkretnego rozmiaru okna, możesz wykorzystać responsywny projekt i pozwolić użytkownikom na elastyczne korzystanie z aplikacji.