Electron - การสร้าง UI

ส่วนต่อประสานผู้ใช้ของแอป Electron สร้างขึ้นโดยใช้ HTML, CSS และ JS ดังนั้นเราจึงสามารถใช้ประโยชน์จากเครื่องมือทั้งหมดที่มีอยู่สำหรับการพัฒนาเว็บส่วนหน้าได้ที่นี่เช่นกัน คุณสามารถใช้เครื่องมือเช่น Angular, Backbone, React, Bootstrap และ Foundation เพื่อสร้างแอป

คุณสามารถใช้ Bower เพื่อจัดการการอ้างอิงส่วนหน้าเหล่านี้ ติดตั้ง bower โดยใช้ -

$ npm install -g bower

ตอนนี้คุณสามารถรับเฟรมเวิร์ก JS และ CSS ไลบรารีปลั๊กอิน ฯลฯ ที่มีอยู่ทั้งหมดได้โดยใช้ bower ตัวอย่างเช่นหากต้องการรับ bootstrap เวอร์ชันเสถียรล่าสุดให้ป้อนคำสั่งต่อไปนี้ -

$ 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

คำสั่งดังกล่าวจะสร้างผลลัพธ์ดังภาพหน้าจอต่อไปนี้ -

คุณสามารถสร้างแอปเนทีฟของคุณได้เช่นเดียวกับการสร้างเว็บไซต์ หากคุณไม่ต้องการให้ผู้ใช้ถูก จำกัด ขนาดหน้าต่างที่แน่นอนคุณสามารถใช้ประโยชน์จากการออกแบบที่ตอบสนองและอนุญาตให้ผู้ใช้ใช้แอปของคุณได้อย่างยืดหยุ่น