Lecture 11. Introduction to Electron Framework Cross-Platform Application Development

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

Lecture 11. Introduction to Electron Framework Cross-Platform Application Development

Details

Download

Copyright

We respect the copyrights and intellectual property rights of all users. All uploaded documents are either original works of the uploader or authorized works of the rightful owners.

Support