Lecture 11. Introduction to Electron Framework Cross-Platform Application Development
Total Page:16
File Type:pdf, Size:1020Kb
Beginning Getting started Title Developing Applications Basic Concepts Advanced Examples Lecture 11. Introduction to Electron Framework Cross-Platform Application Development December 27, 2016 Lecture 11 1 / 40 Beginning Getting started Title Developing Applications Basic Concepts Advanced Examples Concepts Definitions Electron: a framework for developing desktop applications (2013). Features: Development by GitHub; Open-Source, cross-plaform; Uses Node.js runtime and Chromium browser. Node.js: a runtime environment for server and web applications (2009). Features: Development by Node.js Foundation; Open-Source, cross-plaform; Asynchronous I/0; Event-driven concept; Uses Google V8 engine to interpret JavaScript. Lecture 11 2 / 40 Beginning Getting started Title Developing Applications Basic Concepts Advanced Examples Concepts (end) Definitions npm: a package manager for Node.js. Features: Works with remote repositories (default: https://registry.npmjs.org/); Installs packages locally (current directory)/globally (system-wide directories); Manages the local project dependencies (read from package.json); Optionally searches for packages with particular version ranges. Lecture 11 3 / 40 Beginning Getting started Title Developing Applications Basic Concepts Advanced Examples Example Applications Year Title Developer 2014 Atom GitHub 2015 Visual Studio Code Microsoft 2015 GitKraken Axosoft Table 1: applications using Electron framework Lecture 11 4 / 40 Beginning Downloading Getting started Writing an application Developing Applications Debugging Advanced Examples Deploying Downloading Electron Package Example > npm install --global electron ... > electron Lecture 11 5 / 40 Beginning Downloading Getting started Writing an application Developing Applications Debugging Advanced Examples Deploying Hello Example Example (package.json) { hworking_directoryi "name":"01-hello", 01-hello "version":"0.0.1", index.html ..main window contents "main":"index.js" index.js ...............start script } package.json ...project description Figure 1: a directory structure for a simple Electron Example (running) project > cd 01-hello > electron . Lecture 11 6 / 40 Beginning Downloading Getting started Writing an application Developing Applications Debugging Advanced Examples Deploying Hello Example (cont.) Example (index.js) const {app, BrowserWindow} = require(’electron’) const path = require(’path’) const url = require(’url’) let win function createWindow() { win = new BrowserWindow( { width: 400, height: 200 }) Lecture 11 7 / 40 Beginning Downloading Getting started Writing an application Developing Applications Debugging Advanced Examples Deploying Hello Example (cont.) Example (index.js, cont.) win.loadURL( url.format( { pathname: path.join(__dirname,’index.html’), protocol:’file:’, slashes: true })) // win.webContents.openDevTools() Lecture 11 8 / 40 Beginning Downloading Getting started Writing an application Developing Applications Debugging Advanced Examples Deploying Hello Example (cont.) Example (index.js, cont.) Example (index.js, cont.) win.on( app.on( ’closed’, ’ready’, createWindow) () => { app.on( win = null ’window-all-closed’, }) () => } // createWindow() { if (process.platform !==’darwin’) app.quit() }) Lecture 11 9 / 40 Beginning Downloading Getting started Writing an application Developing Applications Debugging Advanced Examples Deploying Hello Example (end) Example (index.js, end) Example (index.html) app.on( <!DOCTYPE html> ’activate’, <html> () => <head> { <meta charset ="UTF-8"> if (win === null) <title>Hello App</title> createWindow() </head> }) <body> <center> // ... Hello World! </center> </body> </html> Lecture 11 10 / 40 Beginning Downloading Getting started Writing an application Developing Applications Debugging Advanced Examples Deploying Electron Processes Definitions Main Process: runs the main script (index.js). Renderer Process: runs each web page with Chromium (index.html). Main Process Renderer Process Started/terminated with the Started when the main process whole application; creates a BrowserWindow instance; Has access to the native GUI API; terminated when it is destroyed; Has no access to the native API, isolated with its page. Lecture 11 11 / 40 Beginning Downloading Getting started Writing an application Developing Applications Debugging Advanced Examples Deploying Debugging the Main Process Using Electron Inspector 1 npm install --global node-gyp 2 On Windows, either: npm install --global --production windows-build-tools (admin) or manually: 1 Install Visual Studio 2015 or Visual C++ Build Tools; 2 Install Python 2.7 3 npm config set python python2.7 4 npm config set msvs_version 2015 3 npm install electron-rebuild --save-dev 4 npm install electron-inspector --save-dev 5 npm install yargs --save-dev 6 npm install node-pre-gyp --save-dev 7 npm install electron --save-dev Lecture 11 12 / 40 Beginning Downloading Getting started Writing an application Developing Applications Debugging Advanced Examples Deploying Debugging the Main Process (end) Using Electron Inspector 1 Either: electron --debug=5858 . or: electron --debug-brk=5858 . 2 node_modules\.bin\electron-inspector 3 ...\chrome http://127.0.0.1:8080/?port=5858 Lecture 11 13 / 40 Beginning Downloading Getting started Writing an application Developing Applications Debugging Advanced Examples Deploying Deploying an Application happlication_directoryi locales resources app ..............create happlication_directoryi index.html locales index.js resources package.json app.asar ..........asar ... ... electron.exe electron.exe Figure 2: a directory structure for a Figure 3: another option for a directory deployed Electron project structure Lecture 11 14 / 40 Beginning Using External Modules Getting started Managing Windows Developing Applications Using Menus Advanced Examples External Module Example Example (index.js) const {app, BrowserWindow} = require(’electron’) const path = require(’path’) const url = require(’url’) require(’./functionality.js’) // ... Lecture 11 15 / 40 Beginning Using External Modules Getting started Managing Windows Developing Applications Using Menus Advanced Examples External Module Example (cont.) Example (functionality.js) var chalk = require(’chalk’); var my_style = chalk.green.bold.underline chalk.enabled = true if (chalk.supportsColor) console.log( chalk.bgRed.dim(’Warning:’) + my_style(’starting’) + ’ an application’) else console.log(’No color support’) Lecture 11 16 / 40 Beginning Using External Modules Getting started Managing Windows Developing Applications Using Menus Advanced Examples External Module Example (cont.) Example (console output) > electron . App threw an error during load Error: Cannot find module ’chalk’ at Module._resolveFilename (module.js:455:15) > npm install --save chalk Lecture 11 17 / 40 Beginning Using External Modules Getting started Managing Windows Developing Applications Using Menus Advanced Examples External Module Example (end) Example (package.json) Example { > npm install "name":"02-module", "version":"0.0.1", "main":"index.js", "dependencies":{ "chalk":"^1.1.3" } } Lecture 11 18 / 40 Beginning Using External Modules Getting started Managing Windows Developing Applications Using Menus Advanced Examples Managing Windows Example Example (index.js) Example (index.js, end) function createWindow() { { win.show() win = new BrowserWindow( }) { // ... width: 400, child = new BrowserWindow( height: 200, { show: false parent: win, }) modal: true, win.once( width: 300, ’ready-to-show’, height: 300 () => }) } // createWindow() Lecture 11 19 / 40 Beginning Using External Modules Getting started Managing Windows Developing Applications Using Menus Advanced Examples Menu Example Example (index.js) const {app, BrowserWindow, Menu, dialog} = require(’electron’) Lecture 11 20 / 40 Beginning Using External Modules Getting started Managing Windows Developing Applications Using Menus Advanced Examples Menu Example (cont.) Example (index.js, cont.) Example (index.js, cont.) const template = { [ label:’View’, { submenu: label:’File’, [ submenu: { [ role:’reload’ { }, role:’quit’ { } role:’toggledevtools’ ] } }, ] }, Lecture 11 21 / 40 Beginning Using External Modules Getting started Managing Windows Developing Applications Using Menus Advanced Examples Menu Example (cont.) Example (index.js, cont.) Example (index.js, cont.) { dialog.showMessageBox( label:’Help’, { submenu: type:’info’, [ title:’About my app’, { message:’My elaborate app’, label:’About’, buttons: [’OK’] click() }) { } // click() } ] } ] Lecture 11 22 / 40 Beginning Using External Modules Getting started Managing Windows Developing Applications Using Menus Advanced Examples Menu Example (end) Example (index.js, end) const menu = Menu.buildFromTemplate(template) Menu.setApplicationMenu(menu) let win function createWindow() { // ... } // ... Lecture 11 23 / 40 Beginning Implementing a Text Editor Getting started Using System Tray Icons Developing Applications Using Network Requests Advanced Examples Editor Example Example (index.html) Example (index.html, cont) <!DOCTYPE html> textarea <html> { <head> width: 100%; <meta charset ="UTF-8"> height: 90%; <title>My Editor</title> min-height: 90%; <style type ="text/css"> } html, body </style> { </head> height: 100%; } Lecture 11 24 / 40 Beginning Implementing a Text Editor Getting started Using System Tray Icons Developing Applications Using Network Requests Advanced Examples Editor Example (cont.) Example (index.html, end) <body> <script src ="./renderer.js"></ script> <textarea id ="editor", autofocus