Electron - Xây dựng giao diện người dùng
Giao diện người dùng của ứng dụng Electron được xây dựng bằng HTML, CSS và JS. Vì vậy, chúng tôi cũng có thể tận dụng tất cả các công cụ có sẵn để phát triển web front-end tại đây. Bạn có thể sử dụng các công cụ như Angular, Backbone, React, Bootstrap và Foundation để xây dựng ứng dụng.
Bạn có thể sử dụng Bower để quản lý các phụ thuộc front-end này. Cài đặt bower bằng -
$ npm install -g bowerGiờ đây, bạn có thể lấy tất cả các khung JS và CSS, thư viện, plugin, v.v. có sẵn bằng bower. Ví dụ: để tải phiên bản bootstrap ổn định mới nhất, hãy nhập lệnh sau:
$ bower install bootstrapThao tác này sẽ tải xuống bootstrap trong bower_components . Bây giờ bạn có thể tham khảo thư viện này trong HTML của mình. Hãy để chúng tôi tạo một trang đơn giản bằng các thư viện này.
Bây giờ chúng ta hãy cài đặt jquery bằng lệnh npm -
$ npm install --save jqueryHơn nữa, điều này sẽ được yêu cầu trong tệp view.js của chúng tôi. Chúng tôi đã có một thiết lập main.js như sau:
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)Mở của bạn index.html và nhập mã sau vào đó:
<!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>Tạo nên view.js và nhập logic bộ đếm nhấp chuột vào đó -
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)
})Chạy ứng dụng bằng lệnh sau:
$ electron ./main.jsLệnh trên sẽ tạo ra kết quả như trong ảnh chụp màn hình sau:
Bạn có thể xây dựng ứng dụng gốc của mình giống như bạn tạo trang web. Nếu bạn không muốn người dùng bị giới hạn ở một kích thước cửa sổ chính xác, bạn có thể tận dụng thiết kế đáp ứng và cho phép người dùng sử dụng ứng dụng của bạn một cách linh hoạt.