Home Explore 引导页 在线工具 Blog
Register Sign In
Pchen0
/
electron
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

docs: Adds Dialogs Fiddle example (#20473)

Yaser 5 years ago
parent
2bbf32a18b
commit
b060cbf4ec
12 changed files with 773 additions and 0 deletions
Split View Show Diff Stats
  1. 81 0
      docs/fiddles/native-ui/dialogs/error-dialog/index.html
  2. 95 0
      docs/fiddles/native-ui/dialogs/error-dialog/main.js
  3. 18 0
      docs/fiddles/native-ui/dialogs/error-dialog/renderer.js
  4. 104 0
      docs/fiddles/native-ui/dialogs/information-dialog/index.html
  5. 70 0
      docs/fiddles/native-ui/dialogs/information-dialog/main.js
  6. 25 0
      docs/fiddles/native-ui/dialogs/information-dialog/renderer.js
  7. 108 0
      docs/fiddles/native-ui/dialogs/open-file-or-directory/index.html
  8. 70 0
      docs/fiddles/native-ui/dialogs/open-file-or-directory/main.js
  9. 22 0
      docs/fiddles/native-ui/dialogs/open-file-or-directory/renderer.js
  10. 91 0
      docs/fiddles/native-ui/dialogs/save-dialog/index.html
  11. 66 0
      docs/fiddles/native-ui/dialogs/save-dialog/main.js
  12. 23 0
      docs/fiddles/native-ui/dialogs/save-dialog/renderer.js

+ 81 - 0
docs/fiddles/native-ui/dialogs/error-dialog/index.html
View File 

@@ -0,0 +1,81 @@
 
+<!DOCTYPE html>

+<html>

+  <head>

+    <meta charset="UTF-8" />

+    <title>Error Dialog</title>

+  </head>

+

+  <body>

+    <div>

+      <h1>Use system dialogs</h1>

+

+      <h3>

+        The <code>dialog</code> module in Electron allows you to use native

+        system dialogs for opening files or directories, saving a file or

+        displaying informational messages.

+      </h3>

+

+      <p>

+        This is a main process module because this process is more efficient

+        with native utilities and it allows the call to happen without

+        interrupting the visible elements in your page's renderer process.

+      </p>

+

+      <p>

+        Open the

+        <a href="http://electron.atom.io/docs/api/dialog/">

+          full API documentation (opens in new window)

+          </a>

+        in your browser.

+      </p>

+    </div>

+

+    <div>

+      <div>

+        <h2>Error Dialog</h2>

+        <div>

+          <div>

+            <button id="error-dialog">View Demo</button>

+          </div>

+          <p>

+            In this demo, the <code>ipc</code> module is used to send a message

+            from the renderer process instructing the main process to launch the

+            error dialog.

+          </p>

+

+          <p>

+            You can use an error dialog before the app's

+            <code>ready</code> event, which is useful for showing errors upon

+            startup.

+          </p>

+          <h5>Renderer Process</h5>

+          <pre>

+          <code>

+const {ipcRenderer} = require('electron')

+

+const errorBtn = document.getElementById('error-dialog')

+

+errorBtn.addEventListener('click', (event) => {

+  ipcRenderer.send('open-error-dialog')

+})

+          </code></pre>

+          <h5>Main Process</h5>

+          <pre>

+          <code>

+const {ipcMain, dialog} = require('electron')

+

+ipcMain.on('open-error-dialog', (event) => {

+  dialog.showErrorBox('An Error Message', 'Demonstrating an error message.')

+})

+          </code>

+        </pre>

+        </div>

+      </div>

+    </div>

+

+    <script>

+      // You can also require other files to run in this process

+      require("./renderer.js");

+    </script>

+  </body>

+</html>

+ 95 - 0
docs/fiddles/native-ui/dialogs/error-dialog/main.js
View File 

@@ -0,0 +1,95 @@
 
+// Modules to control application life and create native browser window

+const { app, BrowserWindow, ipcMain, dialog } = require('electron')

+

+// 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,

+    webPreferences: {

+      nodeIntegration: true

+    }

+  })

+

+  // and load the index.html of the app.

+  mainWindow.loadFile('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)

+

+// 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()

+  }

+})

+

+ipcMain.on('open-error-dialog', event => {

+  dialog.showErrorBox('An Error Message', 'Demonstrating an error message.')

+})

+

+ipcMain.on('open-information-dialog', event => {

+  const options = {

+    type: 'info',

+    title: 'Information',

+    message: "This is an information dialog. Isn't it nice?",

+    buttons: ['Yes', 'No']

+  }

+  dialog.showMessageBox(options, index => {

+    event.sender.send('information-dialog-selection', index)

+  })

+})

+

+ipcMain.on('open-file-dialog', event => {

+  dialog.showOpenDialog(

+    {

+      properties: ['openFile', 'openDirectory']

+    },

+    files => {

+      if (files) {

+        event.sender.send('selected-directory', files)

+      }

+    }

+  )

+})

+

+ipcMain.on('save-dialog', event => {

+  const options = {

+    title: 'Save an Image',

+    filters: [{ name: 'Images', extensions: ['jpg', 'png', 'gif'] }]

+  }

+  dialog.showSaveDialog(options, filename => {

+    event.sender.send('saved-file', filename)

+  })

+})

+

+// 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.

+ 18 - 0
docs/fiddles/native-ui/dialogs/error-dialog/renderer.js
View File 

@@ -0,0 +1,18 @@
 
+const { ipcRenderer, shell } = require('electron')

+

+const links = document.querySelectorAll('a[href]')

+const errorBtn = document.getElementById('error-dialog')

+

+errorBtn.addEventListener('click', event => {

+  ipcRenderer.send('open-error-dialog')

+})

+

+Array.prototype.forEach.call(links, (link) => {

+  const url = link.getAttribute('href')

+  if (url.indexOf('http') === 0) {

+    link.addEventListener('click', (e) => {

+      e.preventDefault()

+      shell.openExternal(url)

+    })

+  }

+})

+ 104 - 0
docs/fiddles/native-ui/dialogs/information-dialog/index.html
View File 

@@ -0,0 +1,104 @@
 
+<!DOCTYPE html>

+<html>

+  <head>

+    <meta charset="UTF-8" />

+    <title>Information Dialog</title>

+  </head>

+

+  <body>

+    <div class="section-wrapper">

+      <h1>Use system dialogs</h1>

+

+      <h3>

+        The <code>dialog</code> module in Electron allows you to use native

+        system dialogs for opening files or directories, saving a file or

+        displaying informational messages.

+      </h3>

+

+      <p>

+        This is a main process module because this process is more efficient

+        with native utilities and it allows the call to happen without

+        interrupting the visible elements in your page's renderer process.

+      </p>

+

+      <p>

+        Open the

+        <a href="http://electron.atom.io/docs/api/dialog/">

+          full API documentation (opens in new window)

+        </a>

+        in your browser.

+      </p>

+    </div>

+

+    <div>

+      <div>

+        <h2>Information Dialog</h2>

+        <div>

+          <div>

+            <button id="information-dialog">

+              View Demo

+            </button>

+            <span id="info-selection"></span>

+          </div>

+          <p>

+            In this demo, the <code>ipc</code> module is used to send a message

+            from the renderer process instructing the main process to launch the

+            information dialog. Options may be provided for responses which can

+            then be relayed back to the renderer process.

+          </p>

+

+          <p>

+            Note: The <code>title</code> property is not displayed in macOS.

+          </p>

+

+          <p>

+            An information dialog can contain an icon, your choice of buttons,

+            title and message.

+          </p>

+          <h5>Renderer Process</h5>

+          <pre>

+            <code>

+const {ipcRenderer} = require('electron')

+

+const informationBtn = document.getElementById('information-dialog')

+

+informationBtn.addEventListener('click', (event) => {

+  ipcRenderer.send('open-information-dialog')

+})

+

+ipcRenderer.on('information-dialog-selection', (event, index) => {

+  let message = 'You selected '

+  if (index === 0) message += 'yes.'

+  else message += 'no.'

+  document.getElementById('info-selection').innerHTML = message

+})

+            </code>

+          </pre>

+          <h5>Main Process</h5>

+          <pre>

+            <code>

+const {ipcMain, dialog} = require('electron')

+

+ipcMain.on('open-information-dialog', (event) => {

+  const options = {

+    type: 'info',

+    title: 'Information',

+    message: "This is an information dialog. Isn't it nice?",

+    buttons: ['Yes', 'No']

+  }

+  dialog.showMessageBox(options, (index) => {

+    event.sender.send('information-dialog-selection', index)

+  })

+})

+            </code>

+          </pre>

+        </div>

+      </div>

+    </div>

+

+    <script>

+      // You can also require other files to run in this process

+      require("./renderer.js");

+    </script>

+  </body>

+</html>

+ 70 - 0
docs/fiddles/native-ui/dialogs/information-dialog/main.js
View File 

@@ -0,0 +1,70 @@
 
+// Modules to control application life and create native browser window

+const { app, BrowserWindow, ipcMain, dialog } = require('electron')

+

+// 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,

+    webPreferences: {

+      nodeIntegration: true

+    }

+  })

+

+  // and load the index.html of the app.

+  mainWindow.loadFile('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)

+

+// 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()

+  }

+})

+

+

+ipcMain.on('open-information-dialog', event => {

+  const options = {

+    type: 'info',

+    title: 'Information',

+    message: "This is an information dialog. Isn't it nice?",

+    buttons: ['Yes', 'No']

+  }

+  dialog.showMessageBox(options, index => {

+    event.sender.send('information-dialog-selection', index)

+  })

+})

+

+

+// 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.

+ 25 - 0
docs/fiddles/native-ui/dialogs/information-dialog/renderer.js
View File 

@@ -0,0 +1,25 @@
 
+const { ipcRenderer, shell } = require('electron')

+

+const informationBtn = document.getElementById('information-dialog')

+const links = document.querySelectorAll('a[href]')

+

+informationBtn.addEventListener('click', event => {

+  ipcRenderer.send('open-information-dialog')

+})

+

+ipcRenderer.on('information-dialog-selection', (event, index) => {

+  let message = 'You selected '

+  if (index === 0) message += 'yes.'

+  else message += 'no.'

+  document.getElementById('info-selection').innerHTML = message

+})

+

+Array.prototype.forEach.call(links, (link) => {

+  const url = link.getAttribute('href')

+  if (url.indexOf('http') === 0) {

+    link.addEventListener('click', (e) => {

+      e.preventDefault()

+      shell.openExternal(url)

+    })

+  }

+})

+ 108 - 0
docs/fiddles/native-ui/dialogs/open-file-or-directory/index.html
View File 

@@ -0,0 +1,108 @@
 
+<!DOCTYPE html>

+<html>

+  <head>

+    <meta charset="UTF-8" />

+    <title>Open File or Directory</title>

+  </head>

+

+  <body>

+    <div class="section-wrapper">

+      <h1>Use system dialogs</h1>

+

+      <h3>

+        The <code>dialog</code> module in Electron allows you to use native

+        system dialogs for opening files or directories, saving a file or

+        displaying informational messages.

+      </h3>

+

+      <p>

+        This is a main process module because this process is more efficient

+        with native utilities and it allows the call to happen without

+        interrupting the visible elements in your page's renderer process.

+      </p>

+

+      <p>

+        Open the

+        <a href="http://electron.atom.io/docs/api/dialog/">

+          full API documentation (opens in new window)

+        </a>

+        in your browser.

+      </p>

+    </div>

+

+    <div>

+      <div>

+        <h2>Open a File or Directory</h2>

+        <div>

+          <div>

+            <button id="select-directory">View Demo</button>

+            <span id="selected-file"></span>

+          </div>

+          <p>

+            In this demo, the <code>ipc</code> module is used to send a message

+            from the renderer process instructing the main process to launch the

+            open file (or directory) dialog. If a file is selected, the main

+            process can send that information back to the renderer process.

+          </p>

+          <h5>Renderer Process</h5>

+          <pre>

+          <code>

+const {ipcRenderer} = require('electron')

+

+const selectDirBtn = document.getElementById('select-directory')

+

+selectDirBtn.addEventListener('click', (event) => {

+  ipcRenderer.send('open-file-dialog')

+})

+

+ipcRenderer.on('selected-directory', (event, path) => {

+  document.getElementById('selected-file').innerHTML = `You selected: ${path}`

+})

+          </code>

+        </pre>

+          <h5>Main Process</h5>

+          <pre>

+          <code>

+const {ipcMain, dialog} = require('electron')

+

+ipcMain.on('open-file-dialog', (event) => {

+  dialog.showOpenDialog({

+    properties: ['openFile', 'openDirectory']

+  }, (files) => {

+    if (files) {

+      event.sender.send('selected-directory', files)

+    }

+  })

+})

+          </code>

+        </pre>

+

+          <div>

+            <h2>ProTip</h2>

+            <strong>The sheet-style dialog on macOS.</strong>

+            <p>

+              On macOS you can choose between a "sheet" dialog or a default

+              dialog. The sheet version descends from the top of the window. To

+              use sheet version, pass the <code>window</code> as the first

+              argument in the dialog method.

+            </p>

+            <pre><code class="language-js">const ipc = require('electron').ipcMain

+const dialog = require('electron').dialog

+const BrowserWindow = require('electron').BrowserWindow

+

+

+ipc.on('open-file-dialog-sheet', function (event) {

+  const window = BrowserWindow.fromWebContents(event.sender)

+  const files = dialog.showOpenDialog(window, { properties: [ 'openFile' ]})

+})</code></pre>

+          </div>

+        </div>

+      </div>

+    </div>

+

+    <script>

+      // You can also require other files to run in this process

+      require("./renderer.js");

+    </script>

+  </body>

+</html>

+ 70 - 0
docs/fiddles/native-ui/dialogs/open-file-or-directory/main.js
View File 

@@ -0,0 +1,70 @@
 
+// Modules to control application life and create native browser window

+const { app, BrowserWindow, ipcMain, dialog } = require('electron')

+

+// 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,

+    webPreferences: {

+      nodeIntegration: true

+    }

+  })

+

+  // and load the index.html of the app.

+  mainWindow.loadFile('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)

+

+// 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()

+  }

+})

+

+

+ipcMain.on('open-file-dialog', event => {

+  dialog.showOpenDialog(

+    {

+      properties: ['openFile', 'openDirectory']

+    },

+    files => {

+      if (files) {

+        event.sender.send('selected-directory', files)

+      }

+    }

+  )

+})

+

+// 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.

+ 22 - 0
docs/fiddles/native-ui/dialogs/open-file-or-directory/renderer.js
View File 

@@ -0,0 +1,22 @@
 
+const { ipcRenderer, shell } = require('electron')

+

+const selectDirBtn = document.getElementById('select-directory')

+const links = document.querySelectorAll('a[href]')

+

+selectDirBtn.addEventListener('click', event => {

+  ipcRenderer.send('open-file-dialog')

+})

+

+ipcRenderer.on('selected-directory', (event, path) => {

+  document.getElementById('selected-file').innerHTML = `You selected: ${path}`

+})

+

+Array.prototype.forEach.call(links, (link) => {

+  const url = link.getAttribute('href')

+  if (url.indexOf('http') === 0) {

+    link.addEventListener('click', (e) => {

+      e.preventDefault()

+      shell.openExternal(url)

+    })

+  }

+})

+ 91 - 0
docs/fiddles/native-ui/dialogs/save-dialog/index.html
View File 

@@ -0,0 +1,91 @@
 
+<!DOCTYPE html>

+<html>

+  <head>

+    <meta charset="UTF-8" />

+    <title>Save Dialog</title>

+  </head>

+

+  <body>

+    <div>

+      <h1>Use system dialogs</h1>

+

+      <h3>

+        The <code>dialog</code> module in Electron allows you to use native

+        system dialogs for opening files or directories, saving a file or

+        displaying informational messages.

+      </h3>

+

+      <p>

+        This is a main process module because this process is more efficient

+        with native utilities and it allows the call to happen without

+        interrupting the visible elements in your page's renderer process.

+      </p>

+

+      <p>

+        Open the

+        <a href="http://electron.atom.io/docs/api/dialog/">

+          full API documentation (opens in new window)

+        </a>

+        in your browser.

+      </p>

+    </div>

+

+    <div>

+      <div>

+        <h2>Save Dialog</h2>

+        <div>

+          <div>

+            <button button id="save-dialog">View Demo</button>

+            <span id="file-saved"></span>

+          </div>

+          <p>

+            In this demo, the <code>ipc</code> module is used to send a message

+            from the renderer process instructing the main process to launch the

+            save dialog. It returns the path selected by the user which can be

+            relayed back to the renderer process.

+          </p>

+          <h5>Renderer Process</h5>

+          <pre>

+            <code>

+const {ipcRenderer} = require('electron')

+

+const saveBtn = document.getElementById('save-dialog')

+

+saveBtn.addEventListener('click', (event) => {

+  ipcRenderer.send('save-dialog')

+})

+

+ipcRenderer.on('saved-file', (event, path) => {

+  if (!path) path = 'No path'

+  document.getElementById('file-saved').innerHTML = `Path selected: ${path}`

+})

+            </code>

+          </pre>

+          <h5>Main Process</h5>

+          <pre>

+            <code>

+const {ipcMain, dialog} = require('electron')

+

+ipcMain.on('save-dialog', (event) => {

+  const options = {

+    title: 'Save an Image',

+    filters: [

+      { name: 'Images', extensions: ['jpg', 'png', 'gif'] }

+    ]

+  }

+  dialog.showSaveDialog(options, (filename) => {

+    event.sender.send('saved-file', filename)

+  })

+})

+            </code>

+          </pre>

+        </div>

+      </div>

+    </div>

+

+    <script>

+      // You can also require other files to run in this process

+      require("./renderer.js");

+    </script>

+  </body>

+</html>

+ 66 - 0
docs/fiddles/native-ui/dialogs/save-dialog/main.js
View File 

@@ -0,0 +1,66 @@
 
+// Modules to control application life and create native browser window

+const { app, BrowserWindow, ipcMain, dialog } = require('electron')

+

+// 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,

+    webPreferences: {

+      nodeIntegration: true

+    }

+  })

+

+  // and load the index.html of the app.

+  mainWindow.loadFile('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)

+

+// 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()

+  }

+})

+

+ipcMain.on('save-dialog', event => {

+  const options = {

+    title: 'Save an Image',

+    filters: [{ name: 'Images', extensions: ['jpg', 'png', 'gif'] }]

+  }

+  dialog.showSaveDialog(options, filename => {

+    event.sender.send('saved-file', filename)

+  })

+})

+

+// 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.

+ 23 - 0
docs/fiddles/native-ui/dialogs/save-dialog/renderer.js
View File 

@@ -0,0 +1,23 @@
 
+const { ipcRenderer, shell } = require('electron')

+

+const saveBtn = document.getElementById('save-dialog')

+const links = document.querySelectorAll('a[href]')

+

+saveBtn.addEventListener('click', event => {

+  ipcRenderer.send('save-dialog')

+})

+

+ipcRenderer.on('saved-file', (event, path) => {

+  if (!path) path = 'No path'

+  document.getElementById('file-saved').innerHTML = `Path selected: ${path}`

+})

+

+Array.prototype.forEach.call(links, (link) => {

+  const url = link.getAttribute('href')

+  if (url.indexOf('http') === 0) {

+    link.addEventListener('click', (e) => {

+      e.preventDefault()

+      shell.openExternal(url)

+    })

+  }

+})