Electron-UI 구축

Electron 앱의 사용자 인터페이스는 HTML, CSS 및 JS를 사용하여 구축되었습니다. 따라서 여기에서도 프런트 엔드 웹 개발에 사용 가능한 모든 도구를 활용할 수 있습니다. Angular, Backbone, React, Bootstrap 및 Foundation과 같은 도구를 사용하여 앱을 빌드 할 수 있습니다.

Bower를 사용하여 이러한 프런트 엔드 종속성을 관리 할 수 있습니다. −를 사용하여 정자 설치

$ npm install -g bower

이제 bower를 사용하여 사용 가능한 모든 JS 및 CSS 프레임 워크, 라이브러리, 플러그인 등을 얻을 수 있습니다. 예를 들어, 안정적인 최신 버전의 부트 스트랩을 얻으려면 다음 명령을 입력하십시오.

$ bower install bootstrap

bower_components에 부트 스트랩이 다운로드됩니다 . 이제 HTML에서이 라이브러리를 참조 할 수 있습니다. 이 라이브러리를 사용하여 간단한 페이지를 만들어 보겠습니다.

이제 npm 명령을 사용하여 jquery를 설치하겠습니다.

$ 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

위의 명령은 다음 스크린 샷과 같이 출력을 생성합니다.

웹 사이트를 구축하는 것처럼 네이티브 앱을 구축 할 수 있습니다. 사용자가 정확한 창 크기로 제한되는 것을 원하지 않는 경우 반응 형 디자인을 활용하여 사용자가 유연한 방식으로 앱을 사용할 수 있도록 할 수 있습니다.