Electron - UI'ler Oluşturma
Electron uygulamalarının Kullanıcı Arayüzü HTML, CSS ve JS kullanılarak oluşturulmuştur. Böylece, ön uç web geliştirme için mevcut tüm araçlardan burada da yararlanabiliriz. Uygulamaları oluşturmak için Angular, Backbone, React, Bootstrap ve Foundation gibi araçları kullanabilirsiniz.
Bu ön uç bağımlılıklarını yönetmek için Bower'ı kullanabilirsiniz. Bower'ı kullanarak yükleyin -
$ npm install -g bower
Artık bower kullanarak mevcut tüm JS ve CSS çerçevelerini, kitaplıkları, eklentileri vb. Edinebilirsiniz. Örneğin, bootstrap'in en son kararlı sürümünü almak için aşağıdaki komutu girin -
$ bower install bootstrap
Bu, bower_components içindeki önyüklemeyi indirecektir . Artık bu kitaplığa HTML'nizde başvurabilirsiniz. Bu kütüphaneleri kullanarak basit bir sayfa oluşturalım.
Şimdi npm komutunu kullanarak jquery kuralım -
$ npm install --save jquery
Ayrıca bu, view.js dosyamızda da gerekli olacaktır . Zaten aşağıdaki gibi bir main.js kurulumumuz var -
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)
Açın index.html dosyasını açın ve içine aşağıdaki kodu girin -
<!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>
Oluşturmak view.js ve buna tıklama sayacı mantığını girin -
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)
})
Aşağıdaki komutu kullanarak uygulamayı çalıştırın -
$ electron ./main.js
Yukarıdaki komut, çıktıyı aşağıdaki ekran görüntüsündeki gibi oluşturacaktır -
Yerel uygulamanızı, tıpkı web siteleri oluşturduğunuz gibi oluşturabilirsiniz. Kullanıcıların tam bir pencere boyutuyla sınırlandırılmasını istemiyorsanız, duyarlı tasarımdan yararlanabilir ve kullanıcıların uygulamanızı esnek bir şekilde kullanmasına izin verebilirsiniz.