Skip to main content

WindowTitleBar

To install, run yarn template WindowTitleBar.

The WindowTitleBar component is the window header that allows users to move their apps on screen. It contains buttons to minimize and maximize the app's window and can contain other buttons and controls, such as the FDC3 linker.

note

Finsemble uses the WindowTitleBar in two ways. By default, most apps are loaded into an Electron BrowserView. In this case, the WindowTitleBar's index.html file is loaded into a window and the app is "framed" into the BrowserView. This configuration gives the best user responsiveness.

In other situations, the WindowTitleBar is injected into the app, becoming the topmost DOM element. In this case, Finsemble adds the WindowTitleBar's index.js file as an Electron preload. This configuration is used to support affinity and apps that are opened by using calls to window.open().

The WindowTitleBar template is divided into three sections, designated by CSS classes fsbl-header-left, fsbl-header-center, and fsbl-header-right, respectively. You can add or remove child components from any section, but keep in mind that removing sections can negatively impact features such as tabbing.

info

When you select injection in the config or anytime you use a window.open to spawn an app, Finsemble injects the WindowTitleBar into apps using a preload. Preloads are loaded before the DOM exists, which means the WindowTitleBar can't become a DOM element. As a result, import "yourfile.css fails with a runtime error. To avoid this, use the pattern provided in the WindowTitleBar/index.tsx template.

    React.useEffect(() => {
        require("./yourfile.css");
    }, []);

This dynamically loads your CSS, adding it as a <style> section to your app's <head>.

Example - Adding a Button​

Let's add a button to the left section of the window title bar. We will use Font Finance to give it a nice icon. When the button is clicked, we'll fire an alert. Here's the code:

...
<div className="fsbl-header-left">
    <LinkerButton />
    <div className="fsbl-icon ff-finsemble" onClick={() => alert("Hello Finsemble!")}></div>
</div>
...

Interop (FDC3)​

The <LinkerButton> component opens the Linker Menu, allowing users to select data channels for the window to share data on. The button is hidden for any component with linking disabled. You can read more about interop in the Interop tutorial.

API​

The following React components are used from the Finsemble UI API library.

ControlSummary
AlwaysOnTopButtonA control for enabling always-on-top.
GroupingButtonA control for forming and disbanding window groups.
LinkerButtonA control opening the Linker Menu and displaying active Linker channels.
ShareButton(Deprecated) A control for sharing data with other windows via drag-and-drop.
TabRegionA control for forming and rearranging tabs of windows. Also displays the window's title.
CloseButtonA control for closing the window.
MaximizeButtonA control for maximizing the window.
MinimizeButtonA control for minimizing the window.
WindowShellA higher-order React component that provides the low-level title bar functionality.