Photon est une librairie CSS qui permet d’obtenir un aspect conforme au visuel de l’interface du système dans lequel on fait tourner notre application. On peut voir Photon comme Bootstrap ou Matérialize, mais l’avantage c’est qu’il est très léger et offre un aspect qui s’intègre parfaitement au système, que ce soit sur un Mac ou un PC.

Le seul bémol est que le projet sur Github semble un peu au point mort et on ne sait pas trop quel avenir aura cette librairie, mais telle qu’elle se présente on peut quand même l’utiliser de façon très utile.

Xel quant à lui semble plus actif. c’est aussi une librairie légère destiner à donner un aspect natif à une application.

Photon

Installation

Puisqu’on a Node on peut charger la librairie avec npm :

npm install photonkit --save

 

Et on déclare classiquement la librairie dans index.html :

<link rel="stylesheet" href="node_modules/photonkit/dist/css/photon.css">

Une autre chose à faire est de rendre les fenêtres générées par Electron sans bordure parce que Photon va se charger de dessiner des bordures conformes au système en place. On a déjà vu comment faire dans un précédent chapitre. Il suffit de prévoir la valeur false pour la propriété frame :

mainWindow = new BrowserWindow({
  ...
  frame: false
})

Au niveau de index.html il faut englober le code avec ces classes :

<div class="window">
  <div class="window-content">
    ...
  </div>
</div>

Le layout

Photon propose 3 types de layouts.

Panneaux

On peut avoir des panneaux :

<div class="window">
  <div class="window-content">
    <div class="pane-group">
      <div class="pane">Panneau 1</div>
      <div class="pane">Panneau 2</div>
      <div class="pane">Panneau 3</div>
    </div>
  </div>
</div>

Barre latérale

Une barre latérale est pratique pour par exemple positionner un menu de navigation :

<div class="window">
  <div class="window-content">
    <div class="pane-group">
      <div class="pane-sm sidebar">Barre latérale</div>
      <div class="pane">Panneau principal</div>
    </div>
  </div>
</div>

On peut prévoir une version moins large de la barre latérale :

<div class="pane-mini sidebar">Barre latérale</div>

Version classique

Enfin on peut avoir la version classique avec en-tête, zone centrale et pied de page :

<div class="window">
  <header class="toolbar toolbar-header">
    <h1 class="title">En-tête</h1>
  </header>
  <div class="window-content">
    <div class="pane-group">
      <div class="pane-sm sidebar">Barre latérale</div>
      <div class="pane">Panneau principal</div>
    </div>
  </div>
  <footer class="toolbar toolbar-footer">
    <h1 class="title">Pied de page</h1>
  </footer>
</div>

Déplacer la fenêtre

Vous avez sans doute remarqué qu’une fenêtre sans bordure n’est pas déplaçable. pour arranger ça on va ajouter cette règle :

body { -webkit-app-region: drag; }

Et maintenant on peut déplacer la fenêtre ! Là j’ai choisi body mais on pourrait limiter à une zone particulière de la fenêtre.

Les composants

Photon propose plusieurs composants pour garnir la fenêtre.

Voici un exemple qui regroupe l’utilisation de boutons en groupe et détaché dans la barre supérieure, d’une navigation et d’un tableau :

<div class="window">
  <header class="toolbar toolbar-header">
    <h1 class="title">Titre</h1>

    <div class="toolbar-actions">
      <div class="btn-group">
        <button class="btn btn-default">
          <span class="icon icon-home"></span>
        </button>
        <button class="btn btn-default">
          <span class="icon icon-folder"></span>
        </button>
        <button class="btn btn-default active">
          <span class="icon icon-cloud"></span>
        </button>
        <button class="btn btn-default">
          <span class="icon icon-popup"></span>
        </button>
        <button class="btn btn-default">
          <span class="icon icon-shuffle"></span>
        </button>
      </div>
      <button class="btn btn-default">
        <span class="icon icon-home icon-text"></span>
        Filters
      </button>
    </div>

  </header>
  <div class="window-content">
    <div class="pane-group">
      <div class="pane-sm sidebar">
        <nav class="nav-group">
          <h5 class="nav-group-title">Favoris</h5>
          <a class="nav-group-item active">
            <span class="icon icon-home"></span>
            Accueil
          </a>
          <span class="nav-group-item">
            <span class="icon icon-download"></span>
            Téléchargements
          </span>
          <span class="nav-group-item">
            <span class="icon icon-folder"></span>
            Documents
          </span>
          <span class="nav-group-item">
            <span class="icon icon-print"></span>
            Applications
          </span>
        </nav>
      </div>
      <div class="pane">
        <table class="table-striped">
          <thead>
            <tr>
              <th>Nom</th>
              <th>Genre</th>
              <th>Taille</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>photon.css</td>
              <td>CSS</td>
              <td>28K</td>
            </tr>
            <tr>
              <td>photon.css</td>
              <td>CSS</td>
              <td>28K</td>
            </tr>
            <tr>
              <td>photon.css</td>
              <td>CSS</td>
              <td>28K</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
  <footer class="toolbar toolbar-footer">
    <h1 class="title">Bas de page</h1>
  </footer>
</div>

Vous pouvez trouver tous les composants disponibles dans la documentation de la librairie.

Xel

Installation

Là aussi on va utiliser npm :

npm install xel --save

On a ensuite le choix entre 3 thèmes :

• MacOS
• Material
• Vanilla

Prenons Material et ajoutons le fichier Javascript :

<link rel="stylesheet" href="node_modules/xel/stylesheets/material.theme.css">
<script src="node_modules/xel/xel.min.js"></script>

Contrairement à Photon on ne dispose pas d’un layout mais comme on sait que Flexbox fonctionne ce n’est pas vraiment un souci. On peut utiliser une grille basée sur Flexbox comme celle-ci :

npm i flexboxgrid --save

Et on la déclare :

<link rel="stylesheet" href="node_modules/flexboxgrid/dist/flexboxgrid.css">

Utilisation

On trouve tous les composants disponibles sur le site.

Je ne vais pas entrer dans le détail, voici juste un exemple de formulaire :

<div class="row">
  <div class="col-xs-4">
    <x-card>
      <form>
        <h3>Votre identité :</h3>
        <div class="row">            
          <x-input>
            <x-icon name="receipt"></x-icon>
            <x-label for="first_name">Nom</x-label>
          </x-input>
          <x-input>
            <x-icon name="receipt"></x-icon>
            <x-label for="first_name">Prénom</x-label>
          </x-input>
        </div>
        <h3>Vos choix :</h3>
        <div class="row">
          <x-box>
            <x-checkbox id="checkbox"></x-checkbox>
            <x-label for="checkbox" id="label-1">Choix 1</x-label>
          </x-box>
        </div>
        <div class="row">
          <x-box>
            <x-checkbox id="checkbox" toggled></x-checkbox>
            <x-label for="checkbox" id="label-1">Choix 2</x-label>
          </x-box>
        </div>
        <div class="row end-xs">
          <x-button>
            <x-box>
              <x-icon name="launch"></x-icon>
              <x-label>Envoyer</x-label>
            </x-box>
          </x-button>
        </div>
      </form>
    </x-card>
  </div>
</div>

On doit pouvoir faire un truc plus esthétique…

On a donc vu les deux librairies conseillées pour Electron pour que le visuel se rapproche de celui du système utilisé. Mais évidemment rien n’empêche de s’en éloigner en adoptant d’autres librairies plus ou moins exotiques. On a toute liberté étant donné que les standard du web sont assez bien respectés par Chromium.

Dans le prochain article on verra plus en détail le module ipc pour la communication entre les deux processus.