[WebApp / Electron] Electron App Template

05-01 10:05

Notice

Recent Posts

Recent Comments

Link

« 2024/05 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

Tags more

Archives

Today

Total

관리 메뉴

Scientific Computing & Data Science

[WebApp / Electron] Electron App Template 본문

Programming/Web App

[WebApp / Electron] Electron App Template

cinema4dr12 2016. 7. 9. 08:51

이번 글을 통해 Electron App의 기본 기능을 포함하는 Template을 제공하고자 한다.

기본적인 기능 구현을 생략함으로써 빠르게 Electron App을 만드는 데 있어 불필요한 시간 낭비를 줄이는 것이 목표이다.

[Electron App Template 다운로드]

electron-app.zip

package.json

package.json 파일에 만들고자 하는 App의 정보를 채워넣도록 한다.

main.js

Electron App의 진입점이 되는 파일이다.

이 파일은 Node.js의 메인 프로세싱을 담당한다.

const electron = require('electron');
// Module to control application life.
const {app, BrowserWindow} = electron;
// Module to create native browser window.

// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let mainWindow;

function createWindow () {
  // Create the browser window.
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    frame: true,
    fullscreen: false
  });

// and load the index.html of the app.
  mainWindow.loadURL('file://' + __dirname + '/index.html');

// Open the DevTools.
  mainWindow.webContents.openDevTools();

// Emitted when the window is closed.
  mainWindow.on('closed', function () {
    // Dereference the window object, usually you would store windows
    // in an array if your app supports multi windows, this is the time
    // when you should delete the corresponding element.
    mainWindow = null;
  })
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
//app.on('ready', createWindow);
app.on('ready', createWindow);

// Quit when all windows are closed.
app.on('window-all-closed', function () {
  // On OS X it is common for applications and their menu bar
  // to stay active until the user quits explicitly with Cmd + Q
  if (process.platform !== 'darwin') {
    app.quit();
  }
})

app.on('activate', function () {
  // On OS X it's common to re-create a window in the app when the
  // dock icon is clicked and there are no other windows open.
  if (mainWindow === null) {
    createWindow();
  }
})

// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.

exports.openWindow = () => {
  let win = new BrowserWindow({
    width: 400,
    height: 200
  });

win.loadURL('http://www.naver.com');
}

index.html

App 메인화면을 정의하는 html 파일이다.

renderer.js

위의 html 파일의 <script> 태그에 포함된 renderer.js 파일을 정의한다.

이 파일에는 App의 렌더링 프로세스에 대한 기능을 정의하도록 한다.

const remote = require('electron').remote;
const {Menu} = remote;
const main = remote.require('./main.js');

var button = document.createElement('button');
button.textContent = 'Open Window';
button.addEventListener('click', () => {
  main.openWindow();
}, false);
document.body.appendChild(button);

var onPrefsClicked1 = function() {
  alert('You clicked Prefs-1');
}

var onPrefsClicked2 = function() {
  alert('You clicked Prefs-2');
}

var onPrefsClicked3 = function() {
  alert('You clicked Prefs-3');
}

// define template
const template = [
  {
    label: 'Electron-1',
    submenu: [
      {
        label: 'Prefs-1',
        click: function() {
          onPrefsClicked1();
        },
        accelerator: process.platform === 'darwin' ? 'Alt+Command+I' : 'Ctrl+Shift+I'
      }
    ]
  },
  {
    type: 'separator'
  },
  {
    label: 'Electron-2',
    submenu: [
      {
        label: 'Prefs-2',
        click: function() {
          onPrefsClicked2();
        }
      },
      {
        label: 'Prefs-3',
        click: function() {
          onPrefsClicked3();
        }
      }
    ]
  }
];

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

Template을 생성한 후에는 Command Line Tool을 통해 Node Module을 설치하도록 한다:

> sudo npm install electron-prebuilt

'Programming > Web App' 카테고리의 다른 글

[WebApp / CSS] Image Reflection (0)	2016.07.16
[WebApp / Electron] Electron App Packaging (0)	2016.07.09
[WebApp / Node.js] How to setup Visual Studio to write Node.js C++ Addons (0)	2016.07.02
[WebApp / Electron] Menu 만들기 (1)	2016.07.01
[WebApp / Electron] Creating Desktop Apps with Electron (0)	2016.06.29