Le applicazioni create con Electron, arrivano già con un menu "pre-confezionato".

Ovviamente è possibile crearne uno personalizzato.

Vediamo come crearne uno (se volete avere una base su Electron, leggete questo articolo):

const {app, BrowserWindow, Menu, dialog} = require('electron');
const path = require('path');
const url = require('url');
let win;

const template = [
    {
        label: 'File',
        submenu: [
            {
                label: 'Apri',
                click() {
                    dialog.showOpenDialog({properties:
                                [
                                    'openFile',
                                    'openDirectory',
                                    'multiSelections'
                                ]}
                    )
                }
            }
        ]
    },
    {
        label: 'Edit',
        submenu: [
            {role: 'undo'},
            {role: 'redo'},
            {type: 'separator'},
            {role: 'cut'},
            {role: 'copy'},
            {role: 'paste'},
            {role: 'pasteandmatchstyle'},
            {role: 'delete'},
            {role: 'selectall'}
        ]
    },
    {
        label: 'View',
        submenu: [
            {role: 'reload'},
            {role: 'forcereload'},
            {role: 'toggledevtools'},
            {type: 'separator'},
            {role: 'resetzoom'},
            {role: 'zoomin'},
            {role: 'zoomout'},
            {type: 'separator'},
            {role: 'togglefullscreen'}
        ]
    },
    {
        role: 'window',
        submenu: [
            {role: 'minimize'},
            {role: 'close'}
        ]
    },
    {
        role: 'help',
        submenu: [
            {
                label: 'My Blog',
                click() {
                    require('electron').shell.openExternal('https://www.mattepuffo.com')
                }
            }
        ]
    }
];

if (process.platform === 'darwin') {
    template.unshift({
        label: app.getName(),
        submenu: [
            {role: 'about'},
            {type: 'separator'},
            {role: 'services', submenu: []},
            {type: 'separator'},
            {role: 'hide'},
            {role: 'hideothers'},
            {role: 'unhide'},
            {type: 'separator'},
            {role: 'quit'}
        ]
    });

    // Edit menu
    template[1].submenu.push(
            {type: 'separator'},
            {
                label: 'Speech',
                submenu: [
                    {role: 'startspeaking'},
                    {role: 'stopspeaking'}
                ]
            }
    );

    // Window menu
    template[3].submenu = [
        {role: 'close'},
        {role: 'minimize'},
        {role: 'zoom'},
        {type: 'separator'},
        {role: 'front'}
    ];
}

const menu = Menu.buildFromTemplate(template);
Menu.setApplicationMenu(menu);

function createWindow() {
    win = new BrowserWindow({width: 800, height: 600});
    win.loadURL(url.format({
        pathname: path.join(__dirname, 'index.html'),
        protocol: 'file:',
        slashes: true
    }));

//    win.webContents.openDevTools();

    win.on('closed', () => {
        win = null;
    });
}

app.on('ready', createWindow);

app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') {
        app.quit();
    }
});

app.on('activate', () => {
    if (win === null) {
        createWindow();
    }
});

Attivate e disattivate il menu per vedere le differenze con quello base.

Ovviamente potete modificarlo a vostro piacimento.

Enjoy!

Electron è un framework, basato su Node.js, per la creazione di applicazione desktop usando Javascript e HTML.

Se pensate che su questo framework si basano programmi del callibro di Atom.io, Visual Studio Code e GitHub Desktop, vi renderete conto delle sue potenzialità.

Oggi vediamo un'introduzione basica.

Prima di tutto installiamo Electron (conviene farlo a livello globale):

# npm -g install electron

L'oggetto Map, è un oggetto composto da record key/value, ed esiste in quasi tutti i linguaggi.

In Javascript è simile a Object, ma con alcune differenze.

Di cui, una delle più importanti, è che in Map è possibile usare valori primitivi, oggetti e funzioni, sia come chiave che come valore.

Inoltre dispone di alcuni metodi specifici che Object non ha.

Spulciandomi la documentazione ufficiale, ho visto che è possibile disegnare su Google Maps includendo nelle nostre pagina una libreria apposita: drawing!

Viene inclusa direttamente con Google Maps, passandolo come parametro:

<script
src="https://maps.googleapis.com/maps/api/js?libraries=drawing">
</script>

Più sotto vi ho messo un esempio di pagina tutto incluso:

• richiamare la libreria
• attivare il disegno di:
  • circle
  • rectangle
  • polygon
  • polyline
  • marker
• settare alcune opzioni generali
• settare opzioni specifiche per un tipo di disegno (il rettangolo in questo caso)
• intercettare tre eventi:
  • fine disegno circle
  • fine disegno rectangle
  • fine disegno in generale

Ho trovato una libreria che permette di generare PDF direttamente in Javascript: pdfmake!

Potete scaricarla da GitHub.

Includete nella vostra pagina questi due file:

<script src="pdfmake.min.js"></script>
<script src="vfs_fonts.js"></script>

Bene, cominciamo con qualche esempio.

Una delle cose che mi piace di più di Node.js, è che ci stanno tantissime librerie / framework disponibili!

Uno di questi, che trovo molto interessante, è Hapi.js!

Vediamo come creare un esempio per fare qualche test.

Plyr è un'ottima e leggera libreria per Javascript per la creazione di un player audio / video.

Non ha dipendenze, in quanto è scritto in vanilla Javascript.

Ed è possibile visualizzare / ascoltare file presenti sul server, o usare Youtube e Vimeo.

Qui potete vederne una demo.

Ho trovato una libreria che permette di manipolare file ZIP in Javascript: JSZip!

E' possibile usarla sia in Node.js che in un browser "classico" (quindi lato client).

Noi vedremo un esempio per il secondo caso.

Ad essere sincero ci ho messo un pò a capirne il funzionamento, in quanto la documentazione non è molto chiara.

Ho trovato un plugin per jQuery che permette di creare pannelli dentro una pagina web in maniera veramente easy: jsPanel!

Se guardate gli esempi e la documentazione, potete notare che le possibilità sono veramente tante.

C'è anche l'integrazione con la prossima versione di Bootstrap, ed è possibile creare pannelli espandibili, finestre modali, toolbar, menu contestuali, ecc.

Insomma tanta roba.

Mi sono imbattutto per sbaglio in questa libreria, ed ho deciso che dovrò assolutamente usarla: List.js!

In pratica permette di impostare filtri, ordinamenti e ricerche su liste e tabelle; il tutto in Javascript standard, senza usare altre librerie esterne (tipo jQuery).

Inoltre il suo utilizzo è veramente semplice, oltre ad essere leggerissimo.