Electron-메뉴

데스크톱 앱에는 두 가지 유형의 메뉴가 있습니다. application menu(상단 표시 줄) 및 context menu(오른쪽 클릭 메뉴). 이 장에서는이 두 가지를 모두 만드는 방법을 배웁니다.

우리는 메뉴 와 MenuItem 모듈 이라는 두 개의 모듈을 사용할 것 입니다. 점을 유의 메뉴 와 의 MenuItem 모듈은 주요 공정에서만 사용할 수 있습니다. 렌더러 프로세스에서 이러한 모듈을 사용하려면 원격 모듈 이 필요합니다 . 상황에 맞는 메뉴를 만들 때 이것을 보게 될 것입니다.

이제 새로운 main.js 주요 프로세스 파일-

const {app, BrowserWindow, Menu, MenuItem} = 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
   }))
}

const template = [
   {
      label: 'Edit',
      submenu: [
         {
            role: 'undo'
         },
         {
            role: 'redo'
         },
         {
            type: 'separator'
         },
         {
            role: 'cut'
         },
         {
            role: 'copy'
         },
         {
            role: 'paste'
         }
      ]
   },
   
   {
      label: 'View',
      submenu: [
         {
            role: 'reload'
         },
         {
            role: 'toggledevtools'
         },
         {
            type: 'separator'
         },
         {
            role: 'resetzoom'
         },
         {
            role: 'zoomin'
         },
         {
            role: 'zoomout'
         },
         {
            type: 'separator'
         },
         {
            role: 'togglefullscreen'
         }
      ]
   },
   
   {
      role: 'window',
      submenu: [
         {
            role: 'minimize'
         },
         {
            role: 'close'
         }
      ]
   },
   
   {
      role: 'help',
      submenu: [
         {
            label: 'Learn More'
         }
      ]
   }
]

const menu = Menu.buildFromTemplate(template)
Menu.setApplicationMenu(menu)
app.on('ready', createWindow)

여기서 템플릿으로 메뉴를 만들고 있습니다. 즉, 메뉴를 JSON으로 함수에 제공하고 나머지는 알아서 처리합니다. 이제이 메뉴를 Application 메뉴로 설정해야합니다.

이제 index.html이라는 빈 HTML 파일을 만들고 다음을 사용하여이 응용 프로그램을 실행합니다.

$ electron ./main.js

응용 프로그램 메뉴의 정상적인 위치에 위 템플릿을 기반으로 한 메뉴가 표시됩니다.

우리는 메인 프로세스에서이 메뉴를 만들었습니다. 이제 앱의 상황에 맞는 메뉴를 만들어 보겠습니다. HTML 파일에서이 작업을 수행합니다.

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "UTF-8">
      <title>Menus</title>
   </head>
   
   <body>
      <script type = "text/javascript">
         const {remote} = require('electron')
         const {Menu, MenuItem} = remote

         const menu = new Menu()

         // Build menu one item at a time, unlike
         menu.append(new MenuItem ({
            label: 'MenuItem1',
            click() { 
               console.log('item 1 clicked')
            }
         }))
         
         menu.append(new MenuItem({type: 'separator'}))
         menu.append(new MenuItem({label: 'MenuItem2', type: 'checkbox', checked: true}))
         menu.append(new MenuItem ({
            label: 'MenuItem3',
            click() {
               console.log('item 3 clicked')
            }
         }))

         // Prevent default action of right click in chromium. Replace with our menu.
         window.addEventListener('contextmenu', (e) => {
            e.preventDefault()
            menu.popup(remote.getCurrentWindow())
         }, false)
      </script>
   </body>
</html>

원격 모듈을 사용하여 Menu 및 MenuItem 모듈을 가져 왔습니다. 그런 다음 메뉴를 만들고 메뉴 항목을 하나씩 추가했습니다. 또한 크롬에서 마우스 오른쪽 버튼을 클릭하는 기본 동작을 방지하고 메뉴로 대체했습니다.

Electron에서 메뉴를 만드는 것은 매우 간단한 작업입니다. 이제 이러한 항목에 이벤트 처리기를 연결하고 필요에 따라 이벤트를 처리 할 수 있습니다.