Electron JS je popularni okvir za izradu desktop aplikacija koristeći web tehnologije poput HTML-a, CSS-a i JavaScript-a. Jedna od zanimljivih značajki koju nudi Electron je mogućnost otvaranja više prozora unutar iste aplikacije. Ova funkcionalnost može biti korisna za razne aplikacije, od chat klijenata do uredskih alata. U ovom članku istražit ćemo kako se mogu implementirati višestruki prozori u Electron aplikaciji.
Prvo, potrebno je postaviti osnovnu Electron aplikaciju. Ovo se može učiniti instalacijom Electron paketa putem npm-a. Kada instalirate Electron, možete započeti s izradom osnovnog projekta. Jednom kada imate osnovnu strukturu aplikacije, možete početi dodavati više prozora.
Za stvaranje novog prozora u Electronu, koristimo klasu BrowserWindow. Ova klasa omogućuje otvaranje novih prozora s različitim postavkama. Na primjer, možete definirati veličinu prozora, veličinu i položaj, kao i druge opcije. Kada se novi prozor otvori, može učitati bilo koji HTML sadržaj koji želite.
Evo jednostavan primjer kako otvoriti novi prozor:
const { app, BrowserWindow } = require('electron'); let mainWindow; function createWindow () { mainWindow = new BrowserWindow({ width: 800, height: 600 }); mainWindow.loadFile('index.html'); } app.whenReady().then(createWindow); app.on('window-all-closed', () => { if (process.platform !== 'darwin') app.quit(); }); app.on('activate', () => { if (BrowserWindow.getAllWindows().length === 0) createWindow(); }); U ovom primjeru, kreiramo glavni prozor aplikacije. Da bismo otvorili dodatni prozor, možemo dodati još jednu funkciju koja će se zvati, na primjer, na klik gumba. U toj funkciji možemo instancirati novi BrowserWindow i učitati drugi HTML dokument ili sadržaj u njega.
Na primjer:
function openNewWindow() { let newWindow = new BrowserWindow({ width: 400, height: 300 }); newWindow.loadFile('new.html'); } Ovu funkciju možemo povezati s nekim događajem, kao što je klik gumba u glavnom prozoru. Kada se taj gumb pritisne, otvorit će se novi prozor s sadržajem iz new.html. Na taj način možete otvoriti koliko god prozora želite, svaki s različitim sadržajem.
Jedna od prednosti korištenja višestrukih prozora je ta što omogućuje korisnicima da rade s više dokumenata ili funkcionalnosti istovremeno. Na primjer, u aplikaciji za chat, jedan prozor može prikazivati popis razgovora, dok drugi prozor može biti otvoren za pojedinačni razgovor. To poboljšava korisničko iskustvo i omogućuje veću produktivnost.
Kada koristite više prozora, važno je razmisliti o komunikaciji između njih. Electron nudi mogućnosti za međusobnu komunikaciju putem IPC (Inter-Process Communication). Ovo omogućuje različitim prozorima da razmjenjuju poruke i podatke. Na primjer, ako se u jednom prozoru dogodi neka akcija, možete poslati obavijest drugom prozoru kako bi se on mogao ažurirati ili reagirati na tu akciju.
Za implementaciju IPC-a, možete koristiti ipcMain i ipcRenderer module. ipcMain se koristi za primanje poruka u glavnom procesu, dok se ipcRenderer koristi za slanje poruka iz render procesa. Na taj način možete osigurati da vaši prozori budu sinkronizirani i da razmjenjuju informacije na učinkovit način.
U zaključku, Electron JS omogućuje jednostavno stvaranje višestrukih prozora u desktop aplikacijama. Ova značajka ne samo da poboljšava korisničko iskustvo, već i omogućuje veću funkcionalnost aplikacije. Korištenje BrowserWindow klase, uz mogućnosti komunikacije putem IPC-a, čini razvoj aplikacija s višestrukim prozorima jednostavnim i efikasnim. Ako planirate raditi s Electron-om, istražite ovu značajku i iskoristite je za poboljšanje svojih aplikacija.
