Finsemble: Understanding UIComponents

The Toolbar


Overview

Occupying the top portion of every monitor, this component is the hub of the Finsemble Application. Whenever a user wants to launch a component or manage their windows, they use the toolbar.

Uses

WorkspaceClient, LauncherClient, StorageClient, WindowClient. RouterClient

Notes

The toolbar is spawned by the WorkspaceService and is available on every monitor. When monitors are added or removed, toolbars are also spawned or removed. Toolbars are workspace independent.

The toolbar is an important part of the experience in using your application. In our sample app, we've included several core features.

Features

  • Launches any component that's pinned to the toolbar.
  • Houses users workspaces.
  • Provides a 'file' menu for users to create new workspaces, save workspaces, or quit the application.
  • Provides an app launcher.
  • Brings all windows to the foreground with the click of a button.
  • Auto-arranges windows.
  • Launches/shows chat windows.

Customizing The Toolbar

The toolbar items can be customized using the "menuItems" property in the toolbar config. Each item in the menuItems property needs at least these properties

  • align: left or right
  • component: name of the component

Either a label or icon or both.

  • label: Text of the Menu
  • icon: URL to an icon. Can be a data URL.

Here is a sample entry:

"menuItems": [
    {
        "align": "left",
        "label": "My Component",
        "component": "My Component"
    },
    {
        "align": "right",
        "icon": "My Component Icon URL",
        "label": "My Other Component",
        "component": "My Component"
    }
]

Add-ons

Window Manager

The Window Manager is the top bar most commonly seen on components. It is very similar to the Windows bar you would normally see on top of any application; however, it was built specifically with UI in mind. The desktop has changed over time but the top bar in windows has not. This top bar has your usual items (Close, Open, Maximize/Minimize, Title) as well as some Finsemble options. All of these options are optional and can be set through the component config. The Finsemble options are:

  1. Linker - The linker option allows a user to open the linker menu and visually the links the component is a part of.
  2. Search Bar (Coming Soon)

The only configurable option on this bar is the title. To change the title you'll use the WindowClient.

FSBL.clients.WindowClient.setWindowTitle(title)

Linker Menu

The Linker Menu is a window that is spawned from a component and keeps direct communication with that component. It has a list of groups that allows user to select and de-select which information the components can receive from other components. Check out Linking Components for more information.

App Launcher

The App Launcher is a single window that is spawned by the WorkspaceService in the background. By default, it is hidden. When the 'Apps' button is clicked, the menu shows itself on the appropriate monitor; it will hide itself when the window loses focus.

The list of launchable apps is are pulled from configs/componentList.json. If customData.launchableByUser is true, it will be included in the App Launcher. The list of items shown in the App Launcher can be filtered by adding either a "mode" or a "list" property to the customData of the App Launcher. The App Launcher also listens on the App Launcher_menuItems pubSub channel in which you can pass an object containing either mode or list parameter to modify the ones in the App Launcher custom data.

File Menu

The included File Menu is a window that's been styled to look like a native windows file-menu. It's narrower than a standard file-menu, but it's not obviously a web page. It includes four functions:

  1. New Workspace
  2. Save Workspace.
  3. Save Workspace As.
  4. Quit application.

Dialogs

Dialogs are a common UI component in both the web and in desktop applications. Finsemble provides an easy to use interface for prompting and receiving input from the user. For more about creating and using dialogs in Finsemble, see this tutorial.