Merge pull request electron#144 from electron/app-demo

Add App Path Demo

Author: zeke

main-process/system/app-information.js

@@ -0,0 +1,6 @@
+const app = require('electron').app
+const ipc = require('electron').ipcMain
+
+ipc.on('get-app-path', function (event) {
+  event.sender.send('got-app-path', app.getAppPath())
+})

renderer-process/system/app-information.js

@@ -1,8 +1,12 @@
-var appInfoBtn = document.getElementById('app-info')
+const ipc = require('electron').ipcRenderer
 
-var electronVersion = process.versions.electron
+const appInfoBtn = document.getElementById('app-info')
 
 appInfoBtn.addEventListener('click', function () {
-  var message = 'This app is using Electron version: ' + electronVersion
+  ipc.send('get-app-path')
+})
+
+ipc.on('got-app-path', function (event, path) {
+  let message = `This app is located at: ${path}`
   document.getElementById('got-app-info').innerHTML = message
 })

renderer-process/system/version-information.js

@@ -0,0 +1,8 @@
+var versionInfoBtn = document.getElementById('version-info')
+
+var electronVersion = process.versions.electron
+
+versionInfoBtn.addEventListener('click', function () {
+  var message = 'This app is using Electron version: ' + electronVersion
+  document.getElementById('got-version-info').innerHTML = message
+})

sections/system/app-sys-information.html

@@ -21,11 +21,32 @@ <h3>With a few Node.js and Electron modules you can gather information about the
             <button class="demo-button" id="app-info">View Demo</button>
             <span class="demo-response" id="got-app-info"></span>
           </div>
+          <p>The main process <code>app</code> module can be used to get the path at which your app is located on the user's computer.</p>
+          <p>In this example, to get that information from the renderer process, we use the <code>ipc</code> module to send a message to the main process requesting the app's path.</p>
+          <p>See the <a class="u-exlink" href="http://electron.atom.io/docs/latest/api/app">app module documentation</a> for more.</p>
+          <h5>Renderer Process</h5>
+          <pre><code data-path="renderer-process/system/app-information.js"></pre></code>
+          <h5>Main Process</h5>
+          <pre><code data-path="main-process/system/app-information.js"></pre></code>
+        </div>
+      </div>
+    </div>
+
+    <div class="demo">
+      <div class="demo-wrapper">
+        <button id="app-info-demo-toggle" class="js-container-target demo-toggle-button">Get version information
+          <div class="demo-meta u-avoid-clicks">Supports: Win, OS X, Linux <span class="demo-meta-divider">|</span> Process: Both</div>
+        </button>
+        <div class="demo-box">
+          <div class="demo-controls">
+            <button class="demo-button" id="version-info">View Demo</button>
+            <span class="demo-response" id="got-version-info"></span>
+          </div>
           <p>The <code>process</code> module is built into Node.js (therefore you can use this in both the main and renderer processes) and in Electron apps this object has a few more useful properties on it.</p>
           <p>The example below gets the version of Electron in use by the app.</p>
           <p>See the <a class="u-exlink" href="http://electron.atom.io/docs/latest/api/process">process documentation</a> for more.</p>
           <h5>Renderer Process</h5>
-          <pre><code data-path="renderer-process/system/app-information.js"></pre></code>
+          <pre><code data-path="renderer-process/system/version-information.js"></pre></code>
 
           <div class="demo-protip">
             <h2>ProTip</h2>
@@ -83,6 +104,7 @@ <h5>Renderer Process</h5>
 
     <script type="text/javascript">
       require('./renderer-process/system/app-information')
+      require('./renderer-process/system/version-information')
       require('./renderer-process/system/sys-information')
       require('./renderer-process/system/screen-information')
     </script>