Application Window

This page describes how to create, customize, show, activate, and close an application window.

Overview

Each Molybden application window represents a browser window that can render any modern web page including HTML5, CSS3, JavaScript, WebGL, etc.

It is possible to create multiple application windows and display them simultaneously.

Creating a window

To create and show a new application window with the initial default size and location on screen, use the following approach:

#include "molybden.hpp"

using namespace molybden;

void launch() {
  App::init([](std::shared_ptr<App> app) {
    auto browser = Browser::create(app);
    browser->loadUrl(app->baseUrl());
    browser->show();
  });
}

Hiding and showing a window

You can hide a window and then show it later using the following approach:

browser->hide();
browser->show();

If it’s necessary, you can activate the window after showing it to ensure that the window is on top of other windows:

browser->activate();

Closing a window

You can close a window manually or programmatically using the following approach:

browser->close();

This method hides and destroys the browser window and releases all allocated resources. If the browser window is already closed, then this method does nothing.

To check if the browser window is closed use the following approach:

if (browser->isClosed()) {
  // ...
}

Initial window size and location

If you don’t specify the initial window size and location, they will be the following:

• Window size: 900x700
• Window location: center of the primary screen.

Changing window size and location

You can change the window size and location programmatically using the following approach:

browser->setSize(1200, 800);
browser->setPosition(100, 100);
browser->setBounds(Rect(Point(100, 100), Size(1200, 800)));

To center the window on the primary screen, use the following approach:

browser->centerWindow();

Customizing window title

By default, the window title corresponds to the title of the displayed web page. It means that if you load a web page with the title tag “MyApp”, the window title will be “MyApp”. If you dynamically change the title of the web page, the window title will be changed accordingly.

You can set your own title using the following approach:

browser->setTitle("MyApp");

To reset the title to the default value, simply pass an empty string:

browser->setTitle("");

Hiding window title

By default, the browser window has a title bar that displays the window title. The window title contains the title of the displayed web page.

You can control the visibility of the window title using the following approach:

browser->setWindowTitleVisible(false);

It will keep the window title bar, but hide the window title:

Hiding window title bar

Most of the modern desktop apps hides the standard window title bar to provide a custom title bar. You can hide the standard window title bar using the following approach:

browser->setWindowTitlebarVisible(false);

It will keep the window title, but hide the standard window title bar:

If you want to hide the window title too, see Hiding window title.

Note: if you hide the standard window title bar, you won’t be able to move/drag the window. You will need to implement your own title bar with draggable region and make the window draggable.

Hiding standard window buttons

Molybden allows you to control the visibility of the standard window buttons (minimize, zoom/maximize, close). The following code hides the minimize and zoom buttons, and keep only the close button:

browser->setWindowButtonVisible(WindowButtonType::kMinimize, false);
browser->setWindowButtonVisible(WindowButtonType::kZoom, false);

The window on macOS will look like this:

Draggable regions

By default, the window has a title bar that can be used to drag the window. The frameless window doesn’t have a title bar, so it can’t be dragged.

To make the frameless window draggable, you need to specify -webkit-app-region: drag in CSS to tell Molybden which regions of the window can be dragged. For example:

<div style="-webkit-app-region: drag">
  <h1>Drag me</h1>
</div>

To make the whole window draggable, use the following approach:

body {
  -webkit-app-region: drag;
}

Tip: When you make the whole window draggable, you can’t interact with the web page using the mouse, click buttons, links, etc. To avoid this issue, we recommend that you make the window draggable only in the title bar area.

If you need to make the whole window draggable and still be able to click buttons, then you need to mark buttons as non-draggable using the following approach:

button {
  -webkit-app-region: no-drag;
}

If you set only a custom title bar as draggable, and it contains buttons, then you need to mark the buttons as non-draggable to be able to click them.

Fullscreen mode

To programmatically enter the fullscreen mode, use the following approach:

browser->enterFullScreen();

To programmatically exit the fullscreen mode, use the following approach:

browser->exitFullScreen();

To check if the browser window is in the fullscreen mode, use the following approach:

if (browser->isFullScreen()) {
  // ...
}

Always on top

You can configure the window to always be displayed on top of other windows using the following approach:

browser->setAlwaysOnTop(true);

Disable window animations

By default, window animations is always active on macOS. you can disable them with the following code:

browser->setWindowAnimationEnabled(false);