Electron - создание пользовательского интерфейса
Пользовательский интерфейс приложений Electron построен с использованием HTML, CSS и JS. Таким образом, здесь мы можем использовать все доступные инструменты для интерфейсной веб-разработки. Вы можете использовать такие инструменты, как Angular, Backbone, React, Bootstrap и Foundation, для создания приложений.
Вы можете использовать Bower для управления этими интерфейсными зависимостями. Установите беседку, используя -
$ npm install -g bower
Теперь вы можете получить все доступные JS- и CSS-фреймворки, библиотеки, плагины и т. Д. С помощью bower. Например, чтобы получить последнюю стабильную версию начальной загрузки, введите следующую команду -
$ bower install bootstrap
Это загрузит bootstrap в bower_components . Теперь вы можете ссылаться на эту библиотеку в своем HTML. Давайте создадим простую страницу, используя эти библиотеки.
Давайте теперь установим jquery с помощью команды npm -
$ npm install --save jquery
Далее это потребуется в нашем файле view.js. У нас уже есть настройка main.js следующим образом:
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)
Откройте свой index.html файл и введите в него следующий код -
<!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>
Создайте view.js и введите в него логику счетчика кликов -
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)
})
Запустите приложение, используя следующую команду -
$ electron ./main.js
Приведенная выше команда сгенерирует вывод, как на следующем снимке экрана -
Вы можете создавать собственное приложение так же, как и веб-сайты. Если вы не хотите, чтобы пользователи были ограничены точным размером окна, вы можете использовать адаптивный дизайн и позволить пользователям гибко использовать ваше приложение.