quartz/content/01-Sessions/Session 3 - Windows Menus & Native Features.md

tags	session	duration	status
electron BrowserWindow menus dialogs filesystem	3	2 hours	ready

Session 3 — Windows, Menus & Native Features

🎯 Objectives

• Configure BrowserWindow with different options
• Build a native application menu
• Open and save files using system dialogs
• Read and write files with Node.js fs

---

🧠 Concepts Covered

BrowserWindow Options

const win = new BrowserWindow({
  width: 1000,
  height: 700,
  minWidth: 400,
  title: "My App",
  backgroundColor: '#1e1e1e',
  frame: true,           // set false for frameless window
  resizable: true,
  webPreferences: {
    preload: path.join(__dirname, 'preload.js')
  }
})

App Lifecycle Events

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

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

Native Menus

const { Menu, MenuItem } = require('electron')

const menu = Menu.buildFromTemplate([
  {
    label: 'File',
    submenu: [
      { label: 'Open', accelerator: 'CmdOrCtrl+O', click: openFile },
      { label: 'Save', accelerator: 'CmdOrCtrl+S', click: saveFile },
      { type: 'separator' },
      { role: 'quit' }
    ]
  },
  { role: 'editMenu' },
  { role: 'viewMenu' }
])

Menu.setApplicationMenu(menu)

File Dialogs & fs

const { dialog } = require('electron')
const fs = require('fs')

async function openFile() {
  const result = await dialog.showOpenDialog({
    filters: [{ name: 'Text Files', extensions: ['txt', 'md'] }]
  })
  if (!result.canceled) {
    const content = fs.readFileSync(result.filePaths[0], 'utf-8')
    // send content to renderer via IPC (next session!)
  }
}

---

🛠 Hands-on Exercise — Markdown Notepad (60 min)

Build a simple text editor:

Features to implement:

1. A <textarea> that fills the window
2. File → Open loads a .txt file into the textarea
3. File → Save writes the textarea content back to disk
4. Title bar shows the filename

Starter structure:

notepad/
├── main.js
├── preload.js
├── index.html
└── package.json

⚠️ Note: Full IPC wiring comes in Session 4 — for now, students can use remote module or handle everything in main.js as a simplified demo

---

📦 Resources

• BrowserWindow Docs
• dialog Docs
• Session 4 - IPC Communication ← next (this is where it all clicks)