Electron - Mendefinisikan Pintasan
Kami biasanya mengingat pintasan tertentu untuk semua aplikasi yang kami gunakan di PC setiap hari. Untuk membuat aplikasi Anda terasa intuitif dan mudah diakses oleh pengguna, Anda harus mengizinkan pengguna untuk menggunakan pintasan.
Kami akan menggunakan modul globalShortcut untuk menentukan pintasan di aplikasi kami. Catat ituAcceleratorsadalah String yang dapat berisi beberapa pengubah dan kode kunci, dikombinasikan dengan karakter +. Akselerator ini digunakan untuk menentukan pintasan keyboard di seluruh aplikasi kita.
Mari kita perhatikan contoh dan buat jalan pintas. Untuk ini, kami akan mengikuti contoh kotak dialog tempat kami menggunakan kotak dialog terbuka untuk membuka file. Kami akan mendaftarkanCommandOrControl+O pintasan untuk memunculkan kotak dialog.
Kami main.jskode akan tetap sama seperti sebelumnya. Jadi buat yang barumain.js file dan masukkan kode berikut di dalamnya -
const {app, BrowserWindow} = require('electron')
const url = require('url')
const path = require('path')
const {ipcMain} = require('electron')
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
}))
}
ipcMain.on('openFile', (event, path) => {
const {dialog} = require('electron')
const fs = require('fs')
dialog.showOpenDialog(function (fileNames) {
// fileNames is an array that contains all the selected
if(fileNames === undefined)
console.log("No file selected")
else
readFile(fileNames[0])
})
function readFile(filepath){
fs.readFile(filepath, 'utf-8', (err, data) => {
if(err){
alert("An error ocurred reading the file :" + err.message)
return
}
// handle the file content
event.sender.send('fileData', data)
})
}
})
app.on('ready', createWindow)Kode ini akan membuka kotak dialog terbuka setiap kali proses utama kami menerima pesan 'openFile' dari proses renderer. Sebelumnya kotak dialog ini muncul setiap kali aplikasi dijalankan. Sekarang mari kita batasi untuk membuka hanya ketika kita menekanCommandOrControl+O.
Sekarang buat yang baru index.html file dengan konten berikut -
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>File read using system dialogs</title>
</head>
<body>
<p>Press CTRL/CMD + O to open a file. </p>
<script type = "text/javascript">
const {ipcRenderer, remote} = require('electron')
const {globalShortcut} = remote
globalShortcut.register('CommandOrControl+O', () => {
ipcRenderer.send('openFile', () => {
console.log("Event sent.");
})
ipcRenderer.on('fileData', (event, data) => {
document.write(data)
})
})
</script>
</body>
</html>Kami mendaftarkan pintasan baru dan memberikan panggilan balik yang akan dijalankan setiap kali kami menekan pintasan ini. Kami dapat membatalkan pendaftaran pintasan jika dan saat kami tidak membutuhkannya.
Sekarang setelah aplikasi dibuka, kita akan mendapatkan pesan untuk membuka file menggunakan pintasan yang baru saja kita tentukan.
Pintasan ini dapat dibuat dapat disesuaikan dengan memungkinkan pengguna memilih pintasannya sendiri untuk tindakan yang ditentukan.