Учебники

Электрон — Строительные интерфейсы

Февраль 4, 2019

Пользовательский интерфейс приложений Electron построен с использованием HTML, CSS и JS. Таким образом, мы также можем использовать все доступные инструменты для веб-разработки. Вы можете использовать такие инструменты, как Angular, Backbone, React, Bootstrap и Foundation, для создания приложений.

Вы можете использовать Bower для управления этими внешними зависимостями. Установите беседку, используя — 

$ npm install -g bower

Теперь вы можете получить все доступные JS и CSS-фреймворки, библиотеки, плагины и т. Д., Используя bower. Например, чтобы получить последнюю стабильную версию начальной загрузки, введите следующую команду — 

$ bower install 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

Приведенная выше команда сгенерирует вывод, как на следующем скриншоте —

UI

Вы можете создать свое собственное приложение так же, как вы создаете веб-сайты. Если вы не хотите, чтобы пользователи ограничивались точным размером окна, вы можете использовать адаптивный дизайн и позволить пользователям гибко использовать ваше приложение.

43
Share: