Skip to content

Latest commit

 

History

History
25 lines (18 loc) · 1.5 KB

README.md

File metadata and controls

25 lines (18 loc) · 1.5 KB
Raw

Electron Tabbed

This is a sample app that demonstrates multiple windows and multiple tabs functionality in Electron. Tabbing functionality is provided by electron-tabs

Running

$ npm i
$ npm start

File Structure Overview

  • tabs\ folder containing sample pages that are open within tabs
  • windows\ folder with sample pages that are open as new windows
    • windows\main\ window displayed when app first starts and shows a menu with links to all tabs
    • windows\tabs\ window that contains all tabs that are opened from the main menu
  • main.js main process of the application. Responsible for opening the windows and handling communication between the windows

Overall Approach

  1. When the app first starts, a new window (window\main\index.html) is opened. The main window has a menu with three links. The links can reference other pages within this application (see Link 1 and Link 2) or link outside (see Link 3)
  2. When a link is selected from the menu, the window requests the main process to open a new tab with the title and URL parameters.
  3. The main process checks if a window with tabs already exists. If it does, it sends a message to the tabbed window to add a tab. If not, it first creates a tabbed window and then sends a message to it to add a tab.
  4. The tabbed window listens for requests from the main process, and adds new tabs to the tab group when the new tab events are dispatched from the main process.