O'Reilly logo

Cross-platform Desktop Application Development: Electron, Node, NW.js, and React by Dmitry Sheiko

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Revitalizing the title bar

Until now, our title bar was not really useful. Thanks to the Photon framework, we can already use it as a handle to drag and drop the window across the viewport, yet we are missing windowing actions such as close, maximize, and restore window.

Let's implement them:

./app/js/Components/Header.jsx

import { remote } from "electron"; const win = remote.getCurrentWindow();  export default class 

Header extends React.Component { //....  onRestore = () => {     win.restore();   }     onMaximize = () => {     win.maximize();   }     onClose = () => {     win.close(); 

  } //... } 
We do not go with methods, with properties keeping anonymous functions bound to the object scope. This trick is possible, thanks to babel-plugin-transform-class-properties ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required