quickbuild/templates/Electron App (Advanced)/sections/native-ui/ex-links-file-manager.html

A mature, feature-complete application generator with an emphasis on speed

<template class="task-template">
  <section id="ex-links-file-manager-section" class="section js-section u-category-native-ui">
    <header class="section-header">
      <div class="section-wrapper">
        <h1>
          <svg class="section-icon"><use xlink:href="assets/img/icons.svg#icon-native-ui"></use></svg>
          Open external links and the file manager
        </h1>
        <h3>The <code>shell</code> module in Electron allows you to access certain native elements like the file manager and default web browser.</h3>

        <p>This module works in both the main and renderer process.</p>
        <p>Open the <a href="http://electron.atom.io/docs/api/shell">full API documentation<span class="u-visible-to-screen-reader">(opens in new window)</span></a> in your browser.</p>
      </div>
    </header>

    <div class="demo">
      <div class="demo-wrapper">
        <button id="open-file-manager-demo-toggle" class="js-container-target demo-toggle-button">Open Path in File Manager
          <div class="demo-meta u-avoid-clicks">Supports: Win, macOS, Linux <span class="demo-meta-divider">|</span> Process: Both</div>
        </button>
        <div class="demo-box">
          <div class="demo-controls">
            <button class="demo-button" id="open-file-manager">View Demo</button>
          </div>
          <p>This demonstrates using the <code>shell</code> module to open the system file manager at a particular location.</p>
          <p>Clicking the demo button will open your file manager at the root.</p>
          <h5>Renderer Process</h5>
          <pre><code data-path="renderer-process/native-ui/ex-links-file-manager/file-manager.js"></code></pre>
        </div>
      </div>
    </div>

    <div class="demo">
      <div class="demo-wrapper">
        <button id="open-ex-links-demo-toggle" class="js-container-target demo-toggle-button">Open External Links
          <div class="demo-meta u-avoid-clicks">Supports: Win, macOS, Linux <span class="demo-meta-divider">|</span> Process: Both</div>
        </button>
        <div class="demo-box">
          <div class="demo-controls">
            <button class="demo-button" id="open-ex-links">View Demo</button>
          </div>
          <p>If you do not want your app to open website links <em>within</em> the app, you can use the <code>shell</code> module to open them externally. When clicked, the links will open outside of your app and in the user's default web browser.</p>
          <p>When the demo button is clicked, the electron website will open in your browser.<p>
          <h5>Renderer Process</h5>
          <pre><code data-path="renderer-process/native-ui/ex-links-file-manager/ex-links.js"></code></pre>

          <div class="demo-protip">
            <h2>ProTip</h2>
            <strong>Open all outbound links externally.</strong>
            <p>You may want to open all <code>http</code> and <code>https</code> links outside of your app. To do this, query the document and loop through each link and add a listener. This app uses the code below which is located in <code>assets/ex-links.js</code>.</p>
            <h5>Renderer Process</h5>
            <pre><code data-path="assets/ex-links.js"></code></pre>
          </div>
        </div>
      </div>
    </div>

    <script type="text/javascript">
      require('./renderer-process/native-ui/ex-links-file-manager/file-manager')
      require('./renderer-process/native-ui/ex-links-file-manager/ex-links')
    </script>

  </section>
</template>