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.
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 (esimerkiksiapp.getPath('documents') + '/untitled.txt').filters: VastaashowOpenDialog-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!
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
- Natiivivalikot ja kontekstivalikot
- Valintaikkunat ja ilmoitukset
- Shell-integraatio
- Globaalit pikanäppäimet ja leikepöydän käyttö