Electron-työpöytäsovellusten kehitys · Oppitunti

Valintaikkunat ja ilmoitukset

Hyödyntäkää natiiveja valintaikkunoita tiedostojen valintaan, viestiruutuihin ja järjestelmäilmoituksiin yhtenäisen ja häiriöttömän käyttökokemuksen tarjoamiseksi.

Oppitunti 2/412 vaihetta

Valintaikkunat ja ilmoitukset on ilmainen Electron-työpöytäsovellusten kehitys-oppitunti CoddyKitissä. Tämä on oppitunti 2/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu Electron-työpöytäsovellusten kehitys-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Electron-työpöytäsovellusten kehitys-kurssilla on yhteensä 4 oppituntia.

Verkon ja työpöydän yhdistäminen

Tervetuloa oppitunnille 2! Tällä oppitunnilla opit tekemään Electron-sovelluksestasi aidosti natiivin tuntuisen kommunikoimalla käyttöjärjestelmän kanssa.

Työpöytäsovellusten on usein pyydettävä käyttäjää valitsemaan tiedostoja, vahvistamaan toimintoja tai saatava aikaan oikea-aikaisia päivityksiä. Electron tarjoaa näitä tehtäviä varten omat moduulinsa: valintaikkunat ja ilmoitukset.

Electronin `dialog`-moduuli

dialog-moduulin avulla Electron-sovellus voi näyttää natiiveja järjestelmän valintaikkunoita tiedostojen avaamiseen ja tallentamiseen sekä hälytysviestien näyttämiseen.

  • Natiivin tuntu: Valintaikkunat vastaavat käyttäjän käyttöjärjestelmän (Windows, macOS, Linux) ulkoasua ja toimintatapaa.
  • Vuorovaikutuksen estäminen: Valintaikkunat estävät yleensä sovelluksen käyttöliittymän käytön, kunnes käyttäjä käsittelee niitä.
  • Vain pääprosessissa: Turvallisuuden ja yhdenmukaisuuden vuoksi dialog-moduulia voi käyttää vain pääprosessista.

Tiedostojen valitseminen `showOpenDialog`-metodilla

dialog.showOpenDialog()-metodilla käyttäjä voi valita tiedostoja tai hakemistoja järjestelmästään. Se palauttaa Promisen, joka valmistuu valittujen polkujen kanssa tai ilmaisee, että valintaikkuna peruutettiin.

Tärkeitä asetuksia ovat:

  • properties: Taulukko, kuten ['openFile', 'multiSelections'], jolla hallitaan valinnan tyyppiä.
  • filters: Oliotaulukko, kuten { name: 'Images', extensions: ['jpg', 'png'] }, jolla rajoitetaan tiedostotyyppejä.

Koodiesimerkki: tiedoston avausvalintaikkuna

Kokeile suorittaa tämä esimerkki. Se avaa yksinkertaisen Electron-ikkunan ja näyttää heti natiivin ”Open File” -valintaikkunan. Valitse tiedosto ja tarkista konsolin tuloste!

const { app, BrowserWindow, dialog } = require('electron');
const path = require('path');

function createWindow() {
  const mainWindow = new BrowserWindow({
    width: 600,
    height: 400,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      contextIsolation: true
    }
  });

  mainWindow.loadURL('about:blank'); // Load a blank page

  mainWindow.webContents.on('did-finish-load', async () => {
    const result = await dialog.showOpenDialog(mainWindow, {
      title: 'Select a File',
      properties: ['openFile'],
      filters: [
        { name: 'Text Files', extensions: ['txt'] },
        { name: 'All Files', extensions: ['*'] }
      ]
    });
    if (!result.canceled) {
      console.log('Selected file:', result.filePaths[0]);
    } else {
      console.log('File selection canceled.');
    }
  });
}

app.whenReady().then(() => {
  createWindow();

  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow();
    }
  });
});

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

Käyttäjätietojen tallentaminen `showSaveDialog`-metodilla

Kun sovelluksen on tallennettava käyttäjän luomaa sisältöä, dialog.showSaveDialog() on oikea valinta. Se pyytää käyttäjältä tallennussijainnin ja tiedostonimen.

Hyödyllisiä asetuksia ovat:

  • defaultPath: Ehdotettu polku tai tiedostonimi (esimerkiksi app.getPath('documents') + '/untitled.txt').
  • filters: Vastaa showOpenDialog-asetusta ja ehdottaa tiedostotyyppejä.

Valintaikkuna palauttaa valitun tiedostopolun tai peruutustapauksessa arvon undefined.

const { app, BrowserWindow, dialog } = require('electron');
const path = require('path');

function createWindow() {
  const mainWindow = new BrowserWindow({ width: 600, height: 400 });
  mainWindow.loadURL('about:blank');

  mainWindow.webContents.on('did-finish-load', async () => {
    const result = await dialog.showSaveDialog(mainWindow, {
      title: 'Save Your File',
      defaultPath: app.getPath('documents') + '/my_document.txt',
      filters: [
        { name: 'Text Files', extensions: ['txt'] },
        { name: 'All Files', extensions: ['*'] }
      ]
    });
    if (!result.canceled) {
      console.log('File will be saved to:', result.filePath);
      // In a real app, you'd write content to result.filePath here
    } else {
      console.log('Save operation canceled.');
    }
  });
}

app.whenReady().then(createWindow);

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

Käyttäjien hälyttäminen `showMessageBox`-metodilla

Yleisiä hälytyksiä, vahvistuksia tai virheilmoituksia varten käytä metodia dialog.showMessageBox(). Se näyttää natiivin viestiruudun, jonka painikkeet ja teksti voidaan määrittää.

Tärkeitä asetuksia:

  • type: 'none', 'info', 'warning', 'error', 'question'.
  • buttons: Taulukko painikkeiden tekstejä (esimerkiksi ['Save', 'Discard', 'Cancel']).
  • message: Pääviestin teksti.
  • detail: Lisätietoja tarkemmassa muodossa.

Se palauttaa käyttäjän napsauttaman painikkeen indeksin.

const { app, BrowserWindow, dialog } = require('electron');
const path = require('path');

function createWindow() {
  const mainWindow = new BrowserWindow({ width: 600, height: 400 });
  mainWindow.loadURL('about:blank');

  mainWindow.webContents.on('did-finish-load', async () => {
    const result = await dialog.showMessageBox(mainWindow, {
      type: 'question',
      title: 'Exit Application',
      message: 'Do you want to save your changes?',
      detail: 'Unsaved changes will be lost if you proceed without saving.',
      buttons: ['Save', 'Discard', 'Cancel'],
      defaultId: 0,
      cancelId: 2
    });

    if (result.response === 0) {
      console.log('User chose to Save.');
    } else if (result.response === 1) {
      console.log('User chose to Discard.');
    } else {
      console.log('User chose to Cancel.');
    }
  });
}

app.whenReady().then(createWindow);

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

Järjestelmäilmoitukset `Notification`-moduulilla

Valintaikkunat vaativat välitöntä huomiota, mutta Notification-moduuli tarjoaa huomaamattoman tavan ilmoittaa käyttäjälle tapahtumista. Ilmoitukset näkyvät käyttöjärjestelmän ilmoituskeskuksessa.

  • Ei keskeytä työskentelyä: Ilmoitukset eivät keskeytä käyttäjän työnkulkua.
  • Oikea-aikaiset tiedot: Ne sopivat taustatehtävien valmistumisesta, uusista viesteistä tai tilapäivityksistä ilmoittamiseen.
  • Pää- tai renderöintiprosessi: Niitä voi käyttää kummastakin prosessista.

Yksinkertaisen ilmoituksen lähettäminen

Ilmoituksen lähettäminen on helppoa. Luo uusi Notification-instanssi ja kutsu sen show()-metodia.

Yleisiä asetuksia ovat:

  • title: Ilmoituksen pääotsikko.
  • body: Yksityiskohtainen tekstisisältö.
  • icon: Valinnainen polku kuvaketiedostoon.

On hyvä tarkistaa Notification.isSupported() ennen ilmoituksen näyttämistä.

const { app, BrowserWindow, Notification } = require('electron');
const path = require('path');

function createWindow() {
  const mainWindow = new BrowserWindow({ width: 600, height: 400 });
  mainWindow.loadURL('about:blank');

  mainWindow.webContents.on('did-finish-load', () => {
    if (Notification.isSupported()) {
      new Notification({
        title: 'Electron App Update',
        body: 'A new version is available! Click to install.',
        // icon: path.join(__dirname, 'icon.png') // Optional
      }).show();
      console.log('Notification sent!');
    } else {
      console.log('Notifications are not supported on this system.');
    }
  });
}

app.whenReady().then(createWindow);

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

Vuorovaikutteiset ilmoitukset

Ilmoitukset voivat olla muutakin kuin staattisia viestejä. Voit lisätä vuorovaikutteisuutta kuuntelemalla esimerkiksi click- tai close-tapahtumia. Näin käyttäjä voi toimia suoraan ilmoituksesta.

Esimerkiksi ”New Message” -ilmoituksen napsauttaminen voi tuoda sovellusikkunan etualalle tai avata tietyn keskustelun.

const { app, BrowserWindow, Notification } = require('electron');
const path = require('path');

function createWindow() {
  const mainWindow = new BrowserWindow({ width: 600, height: 400 });
  mainWindow.loadURL('about:blank');

  mainWindow.webContents.on('did-finish-load', () => {
    if (Notification.isSupported()) {
      const myNotification = new Notification({
        title: 'New Message!',
        body: 'You have 3 unread messages.',
        silent: false // Play a sound
      });

      myNotification.on('click', () => {
        console.log('Notification clicked! Opening messages...');
        mainWindow.show(); // Bring the window to front
      });

      myNotification.show();
      console.log('Interactive notification sent.');
    } else {
      console.log('Notifications not supported.');
    }
  });
}

app.whenReady().then(createWindow);

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

Valintaikkunat vai ilmoitukset: milloin kumpaakin käytetään?

Valintaikkunan ja ilmoituksen valinta riippuu asian kiireellisyydestä ja tarvittavasta käyttäjän vuorovaikutuksesta:

  • Valintaikkunat: Käytä kriittisiin tietoihin, käyttäjän syötteisiin (tiedoston valinta, tallennussijainti) tai toimintoihin, jotka estävät sovelluksen käytön, kunnes ne on käsitelty. Ne vaativat välitöntä huomiota.
  • Ilmoitukset: Käytä ei-kriittisiin mutta oikea-aikaisiin tietoihin, jotka eivät vaadi välitöntä toimintaa. Ne tiedottavat keskeyttämättä käyttäjän työskentelyä.

Tavoittele aina saumatonta ja intuitiivista käyttökokemusta valitsemalla tarkoitukseen sopiva vuorovaikutustapa.

Pikatarkistus: valintaikkunat vai ilmoitukset?

Missä seuraavista tilanteista Electronin dialog-moduuli soveltuu parhaiten käytettäväksi? Valitse kaikki sopivat vaihtoehdot.

Kertaus ja seuraavat vaiheet

Hienoa työtä! Olet oppinut kommunikoimaan natiivin käyttöjärjestelmän kanssa Electronin dialog- ja Notification-moduuleilla.

  • dialog: Kriittisiä ja sovelluksen käytön estäviä toimintoja, kuten tiedostojen valintaa, tallentamista ja viestiruutuja varten. Vain pääprosessissa.
  • Notification: Ei-sovelluksen käyttöä estäviä, tiedottavia ilmoituksia varten. Ne näkyvät järjestelmän ilmoituskeskuksessa, ja niitä voi käyttää kummassakin prosessissa.

Näiden ominaisuuksien hallinta auttaa Electron-sovellustasi integroitumaan aidosti käyttäjän työpöytäympäristöön. Seuraavaksi tutustumme siihen, miten ulkoisia linkkejä ja tiedostoja avataan shell-moduulilla!

Aloita maksutta

Opi JavaScript tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit
12
Oppitunnit
47

Usein kysytyt kysymykset

Onko oppitunti ”Valintaikkunat ja ilmoitukset” ilmainen?

Kyllä – oppitunnin ”Valintaikkunat ja ilmoitukset” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko Electron-työpöytäsovellusten kehitys-kurssin, päivitä CoddyKit PROhon. Electron-työpöytäsovellusten kehitys-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Valintaikkunat ja ilmoitukset”?

Hyödyntäkää natiiveja valintaikkunoita tiedostojen valintaan, viestiruutuihin ja järjestelmäilmoituksiin yhtenäisen ja häiriöttömän käyttökokemuksen tarjoamiseksi. Harjoittelet Electron-työpöytäsovellusten kehitys-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni Electron-työpöytäsovellusten kehitys-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin Electron-työpöytäsovellusten kehitys-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 2/4.

Kuinka kauan ”Valintaikkunat ja ilmoitukset”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä Electron-työpöytäsovellusten kehitys-oppitunnilla?

Kyllä. Jokainen Electron-työpöytäsovellusten kehitys-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

  1. Natiivivalikot ja kontekstivalikot
  2. Valintaikkunat ja ilmoitukset
  3. Shell-integraatio
  4. Globaalit pikanäppäimet ja leikepöydän käyttö
← Takaisin: Electron-työpöytäsovellusten kehitys