Quiet Docking System is a set of related widgets that allows you to construct a classic desktop app user interface quickly. All these widgets are collected in one group in Widget Designer > Pallette > Quiet Docking Blocks, and the developer simply builds a widget tree with them. The screen space is pre-marked into logical areas, so the user spends almost no time on markup. The system has prepared design themes that a developer can apply at any working stage. Also, the developer can independently create new themes and edit existing ones.

Working with system

Example

Markup

The screen is divided into nine logical areas. Floating windows are placed over them. The following is a listing of these areas from top to bottom and from left to right, indicating the widgets that should be placed in them:

• Slot_Titlebar - Titlebar. You can also fill it with any other widget or leave it empty. Independent slot.
• Slot_MainMenu - Main Menu Root. The developer can build a hierarchy of this area either directly in the main widget or in a separate widget. There is an example in the Examples folder. Independent slot.
• Slot_ToolbarTop – Toolbar Container. Independent slot.
• Slot_ToolbarLeft – Toolbar Container. Independent slot.
• Slot_SidebarLeft – Sidebar. It is related to Slot_DockingSystem. The user will not be able to collapse Docker Tab to Sidebar if this slot is not empty or filled with something other than Sidebar.
• Slot_DockingSystem – Grid Panel. It is the main slot of the system. Dockers and Docker Tabs of any nesting level can be placed here. They can be freely moved around the screen and create configurations of any complexity. The main viewport is also placed in this area. The slot is related to Slot_SidebarLeft, Slot_SidebarRight.
• Slot_SidebarRight – Sidebar.
• Slot_SidebarLeft – Sidebar. It is related to Slot_DockingSystem. The user will not be able to collapse Docker Tab to Sidebar if this slot is not empty or filled with something other than Sidebar.
• Slot_ToolbarRight – Toolbar Container. Independent slot.
• Slot_Statusbar – Statusbar. It is related to floating windows. Each floating window contains control buttons, and the Minimize button collapses the window to the Statusbar. This button will not be active if the Statusbar is not built.

Main Feature

The main feature of the product is the dynamic Docking System. It occupies the main part of the screen, and its root is the native Grid Panel. The Grid Panel must contain a Docking Viewport to work correctly. It is a widget that contains the app viewport. All other elements are placed around it. By default, the viewport is fitted to the widget's size using a post-process. If you are using the cursor coordinate functions, for example, to trace actors in the world, you need to use the screen coordinates inverse transformation functions from the library (QuietDockingSystem > Blueprints > QuietDockingFLibrary). You can disable this fitting in the theme settings. The Docking Viewport will be optional in the next version of the product. DockingSystem and Sidebar layouts can be saved and loaded runtime.

Another smart feature is Toolbars. The developer can create an unlimited number of toolbars and place them in the desired order runtime. The widget set contains a multifunctional Toolbar Item widget that can operate in four modes: Button, Check button, Radiobutton, and Drag'n'Drop.

Almost all widgets are inherited from Docking Base Widget. So the tree has a common design theme. Each descendant contains an overridden ApplyTheme function that applies the theme selected in the root widget to the entire tree.

Limitations

• In the current version of the product, it is not possible to set a theme for individual elements of the tree. I will add this feature in future versions.
• Because the main viewport adjusts to the size of the Docking Viewport, some post-process effects may not work correctly. A developer can fix this by combining the viewport fit and effects in united post-process material.
• Themes are based on structures. If the developer edits any structures or moves them, this may cause errors. It is a known issue with Unreal Engine.
• It is essential to understand that the system is just an emulation. Windows, Tabs, Dockers, and other elements are User Widgets created within a single app window.

Quiet Tools Demo

I used widgets from my Quiet Tools collection in the examples for content. This collection is currently in development, but tools like the World Outliner or Transform Gizmo are already testable, so I've included them as examples to get feedback from users.

Conclusion

I will develop and improve this product. Therefore, if you have any comments or suggestions, write to me.

Be sure to read the manual before using this product. I will expand it, adding new details and showing how you can solve issues and fine-tune the system.