Dialogbokse og notifikationer
Anvend native dialogbokse til filvalg, meddelelsesbokse og systemnotifikationer for at give en ensartet og diskret brugeroplevelse.
Dialogbokse og notifikationer er en gratis Udvikling af desktopapps med Electron-lektion på CoddyKit. Dette er lektion 2 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i Udvikling af desktopapps med Electron, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Udvikling af desktopapps med Electron-kurset indeholder 4 lektioner i alt.
Forbindelse mellem web og desktop
Velkommen til lektion 2! I denne lektion lærer du, hvordan du får din Electron-app til at føles virkelig indbygget ved at interagere med operativsystemet.
Desktop-apps har ofte brug for at bede brugere om at vælge filer, bekræfte handlinger eller få rettidige opdateringer. Electron indeholder dedikerede moduler til disse opgaver: dialoger og meddelelser.
Electrons `dialog`-modul
dialog-modulet gør det muligt for din Electron-app at vise indbyggede systemdialoger til åbning og lagring af filer eller visning af advarsler.
- Indbygget udseende: Disse dialoger matcher udseendet og funktionaliteten i brugerens operativsystem (Windows, macOS, Linux).
- Blokerende interaktion: Dialoger blokerer typisk appens brugerflade, indtil brugeren interagerer med dem.
- Kun hovedprocessen: Af hensyn til sikkerhed og ensartethed kan
dialog-modulet kun bruges fra hovedprocessen.
Valg af filer med `showOpenDialog`
Metoden dialog.showOpenDialog() lader brugere vælge filer eller mapper på deres system. Den returnerer et Promise, som opfyldes med de valgte stier eller angiver, om dialogen blev annulleret.
Vigtige indstillinger omfatter:
properties: En array som['openFile', 'multiSelections'], der styrer valgtypen.filters: En array af objekter som{ name: 'Images', extensions: ['jpg', 'png'] }, der begrænser filtyperne.
Kodedemonstration: Dialog til åbning af filer
Prøv at køre dette eksempel. Det starter et enkelt Electron-vindue og viser straks en indbygget dialog med titlen 'Åbn fil'. Vælg en fil, og se outputtet i konsollen!
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();
}
});Lagring af brugerdata med `showSaveDialog`
Når din app skal gemme brugeroprettet indhold, er dialog.showSaveDialog() det oplagte valg. Den beder brugeren om en placering og et filnavn til lagring af en fil.
Nyttige indstillinger omfatter:
defaultPath: En foreslået sti eller et foreslået filnavn (f.eks.app.getPath('documents') + '/untitled.txt').filters: Svarer tilshowOpenDialogog bruges til at foreslå filtyper.
Dialogen returnerer den valgte filsti eller undefined, hvis dialogen blev annulleret.
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();
});Visning af advarsler med `showMessageBox`
Til generelle advarsler, bekræftelser eller fejlmeddelelser skal du bruge dialog.showMessageBox(). Den viser en indbygget meddelelsesboks med knapper og tekst, der kan tilpasses.
Vigtige indstillinger:
type: 'none', 'info', 'warning', 'error', 'question'.buttons: En array med knaptekster (f.eks.['Save', 'Discard', 'Cancel']).message: Hovedteksten i meddelelsen.detail: Yderligere, mere detaljerede oplysninger.
Den returnerer indekset for den knap, brugeren klikkede på.
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();
});Systemmeddelelser med `Notification`
Mens dialoger kræver øjeblikkelig opmærksomhed, giver Notification-modulet en diskret måde at informere brugere om hændelser på. De vises i operativsystemets meddelelsescenter.
- Blokerer ikke: Meddelelser afbryder ikke brugerens arbejdsgang.
- Rettidig information: Ideelt til afslutning af baggrundsopgaver, nye beskeder eller statusopdateringer.
- Hoved- eller renderer-proces: Kan bruges fra begge processer.
Afsendelse af en enkel meddelelse
Det er enkelt at sende en meddelelse. Du opretter en ny Notification-instans og kalder dens show()-metode.
Almindelige indstillinger omfatter:
title: Meddelelsens hovedtitel.body: Detaljeret tekstindhold.icon: En valgfri sti til et ikonbillede.
Det er god praksis at kontrollere Notification.isSupported(), før du forsøger at vise en meddelelse.
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();
});Interaktive meddelelser
Meddelelser behøver ikke kun være statiske beskeder. Du kan tilføje interaktivitet ved at lytte efter hændelser som click eller close. Det gør det muligt for brugere at handle direkte fra selve meddelelsen.
Hvis brugeren f.eks. klikker på en meddelelse om 'Ny besked', kan appvinduet bringes frem eller en bestemt chat åbnes.
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();
});Dialoger kontra meddelelser: Hvornår skal du bruge hvad?
Valget mellem en dialog og en meddelelse afhænger af, hvor presserende situationen er, og hvilken interaktion der kræves fra brugeren:
- Dialoger: Brug dem til kritiske oplysninger, brugerinput (filvalg, lagringsplacering) eller handlinger, der blokerer appen, indtil de er afsluttet. De kræver øjeblikkelig opmærksomhed.
- Meddelelser: Brug dem til ikke-kritiske, tidsfølsomme oplysninger, der ikke kræver øjeblikkelig handling. De informerer uden at afbryde brugerens arbejdsgang.
Stræb altid efter en problemfri og intuitiv brugeroplevelse ved at vælge den passende interaktionsmetode.
Hurtig kontrol: Dialoger eller meddelelser?
Hvilke af følgende scenarier egner sig bedst til at bruge Electrons dialog-modul? Vælg alle relevante muligheder.
Opsummering og næste trin
Godt gået! Du har lært, hvordan du interagerer med det indbyggede operativsystem ved hjælp af Electrons dialog- og Notification-moduler.
dialog: Til kritiske, blokerende interaktioner som filvalg, lagring og meddelelsesbokse. Kun i hovedprocessen.Notification: Til ikke-blokerende, informative advarsler, der vises i systemets meddelelsescenter. Kan bruges i begge processer.
Når du mestrer disse funktioner, føles din Electron-app bedre integreret i brugerens desktopmiljø. Som det næste undersøger vi, hvordan du åbner eksterne links og filer ved hjælp af shell-modulet!
Lær JavaScript med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 12
- Lektioner
- 47
Ofte stillede spørgsmål
Er lektionen “Dialogbokse og notifikationer” gratis?
Ja — hele teksten til “Dialogbokse og notifikationer” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af Udvikling af desktopapps med Electron-kurset, skal du opgradere til CoddyKit PRO. Udvikling af desktopapps med Electron-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “Dialogbokse og notifikationer”?
Anvend native dialogbokse til filvalg, meddelelsesbokse og systemnotifikationer for at give en ensartet og diskret brugeroplevelse. Du øver dig i Udvikling af desktopapps med Electron med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på Udvikling af desktopapps med Electron?
Der kræves ingen tidligere erfaring. Udvikling af desktopapps med Electron på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 2 af 4.
Hvor lang tid tager lektionen “Dialogbokse og notifikationer”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne Udvikling af desktopapps med Electron-lektion?
Ja. Alle Udvikling af desktopapps med Electron-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- Native menuer og kontekstmenuer
- Dialogbokse og notifikationer
- Shell-integration
- Globale genveje og adgang til udklipsholderen