일렉트론기초-06.일렉트론 메뉴 추가하기

동영상 강좌

https://youtu.be/ojDfxv_EU1k

일렉트론의 메뉴는 다음 API 문서를 참조하시면 됩니다.

https://www.electronjs.org/docs/latest/api/menu

Menu | Electron

소스는 지난시간에 만든 react-electron을 계속 사용합니다.

• src/main.js

가장 먼저 menu를 사용하기 위해서 electron의 menu를 선언 합니다.

const { app, BrowserWindow, Menu } = require('electron');

다음과 같이 template을 이용하여 menu를 setting 합니다.

• createWindow function 다음에 아래 코드를 작성합니다.

const template = []; 
const menu = Menu.buildFromTemplate(template); 
Menu.setApplicationMenu(menu);

• 현재는 template에 값이 없기 때문에 메뉴가 나타나지 않는 것을 볼 수 있습니다.

menu가 없이 실행됨.

• template에 다음과 같이 메뉴를 추가합니다.

const template = [
  { 
    label: "File",
  }
]

File 메뉴 추가

• submenu는 다음과 같이 추가합니다.

  { 
    label: "File", 
    submenu: [ 
      { 
        label: "Open" 
      }
    ] 
  }

submenu 추가

Role 메뉴

• 일렉트론 menu에서는 일반적인 메뉴를 role 메뉴로 만들어 제공합니다.
• role 메뉴는 다음 url을 참조하시면 자세히 볼 수 있습니다.
  • https://www.electronjs.org/docs/api/menu-item#roles

MenuItem | Electron

• 개발자 화면을 toggle 하는 'toggleDevTools' role을 다음과 같이 추가합니다.

{ 
    role: 'toggleDevTools', 
}

role 추가

메뉴 클릭시 이벤트 처리하기

• 다음과 같이 Open 메뉴를 클릭했을때 console 로그를 출력하는 이벤트를 추가합니다.

{ 
    label: "Open" , 
    click: function(){ 
      console.log('Clicked Menu Open!!!');
    }
},

Type 메뉴

• 일렉트론에서는 여러가지 type의 메뉴를 제공합니다.
• 그 중 가장 많이 사용하는 separator를 추가해 봅니다.

{ type: 'separator' },

separator 추가

• 'checkbox' type을 추가합니다.

{ label: 'Menu Item 2', type: 'checkbox', checked: true },

checkbox type 추가

외부 사이트 열기

• 메뉴를 클릭했을 때 기본브라우저로 외부 URL을 호출하는 예제입니다.
• 우선 electron의 shell을 선언 합니다.

const { app, BrowserWindow, Menu, shell } = require('electron')

• shell.openExternal을 사용해 사이트를 호출합니다.

click: function(){
  shell.openExternal("https://www.electronjs.org/docs/api") 
}

외부 url 호출

이상으로 일렉트론의 메뉴 사용법을 알아보았습니다.

보다 자세한 사항들은 API 문서를 참조하시기 바랍니다.