But more about this in a bit.<\/p>\n\n\n\n
What Is a Dock Manager?<\/h2>\n\n\n\n
The Dock Manager is a standard, user-friendly web component for building complex layouts, splitting the view into smaller ones. This can be done recursively in order to create arbitrary layouts that can be manipulated and adjusted at runtime. You can manage the layout plus the positioning of several windows, panels, and other UI elements in a flexible way, docking them to different locations within an app.<\/p>\n\n\n\n
For end-users, the Dock Manager means having the ability to customize the created layout further through features like pinning, resizing, moving, floating, and hiding panes.<\/p>\n\n\n\n
What Are the Benefits of Using a Dock Manager?<\/h2>\n\n\n\n
In general, using Dock Manager saves you time and effort when building dynamic and complex UI, ensuring better UX for the end-users of your web application. Here are some of the benefits:<\/p>\n\n\n\n
Cross-platform:<\/strong> One of the best things about it is the multiple platforms support for desktop and mobile. Then, there is its compatibility with modern web browsers, meaning you can use the Dock Manager component to develop responsive layout software solutions for any platform you want.<\/p>\n\n\n\n Built-in drag-and-drop:<\/strong> If you want to reorder the tabs in a pane from one destination to another, you can quickly do it with the drag-and-drop functionality that the component provides.<\/p>\n\n\n\n Seamless integration:<\/strong> No matter if you develop apps in Angular, Blazor, Web Components or other frameworks, Dock Manager always relies on the given framework architecture to integrate dockable UI elements within the app logic and data.<\/p>\n\n\n\n Flexibility and custom tweaks:<\/strong> Managing layouts, customizing all buttons using slots and parts, docking things like panels and windows in different positions, changing the behavior of UI elements to match app requirements, this is all pretty straightforward.<\/p>\n\n\n\n Better UX:<\/strong> Providing the ability to end-users to further manipulate, rearrange, and resize the available UI elements, the Dock Manager component in fact improves the overall experience with the app.<\/p>\n\n\n\n One of the biggest differentiators is that Ignite UI Dock Manager component is a dependency-free, pure web component that is available for Angular, Blazor, React, and Web Components. It allows you to not only build a desktop, Visual Studio-like experience, but it also helps you create better web applications for any industry and business.<\/p>\n\n\n\n For instance, Financial companies deal with a lot of data and quite often they require complex dashboards to display and understand this data. The question here is, how financial companies can benefit from using Ignite UI Dock Manager? With it, they can do several things:<\/p>\n\n\n\n To better illustrate this, I’ll share a real-life issue that we encountered during our \u201cData Analysis Tool\u201d design meetings. To use the Data Analysis Tool<\/a>, you first have to select data, choose an appropriate chart, select it and then\u2014 there it is, the first snake in the grass\u2014you are in a browser application, not in a desktop one.<\/p>\n\n\n\n But where do you visualize this chart? It is a static dialog that you cannot move. It hides your grid view and you are stuck there. If you need to scroll to search for something else, you need to close the chart dialog, check what you need and start from scratch. It is as clumsy as it sounds. You are just limited by the browser. This is where Dock Manager becomes invaluable. With it, you can easily build a multi-screen layout, without sacrificing usability and limiting the end user.<\/p>\n\n\n\n Here’s a simple Dock Manager example and visual comparison:<\/p>\n\n\n\n Data Analysis Tool without Dock Manager:<\/strong><\/span><\/p>\n <\/p>\n Data Analysis Tool with Dock Manager:<\/strong><\/span><\/p>\n <\/p>\n I guess that\u2019s why many people, including professional developers, feel nostalgic about desktop applications. Nowadays it is not uncommon to see ten or more tabs open in a browser window. If you need to use data from n-number of pages, then you need n-number of windows. That freedom to rearrange your layout as you need is why the Dock Manager component matters. This is not to downplay the importance of single page applications (SPA), but to share another point of view.<\/p>\n So, now that we know what it is and why it is important, let’s take a look at the basic parts and features of the Ignite UI Dock Manager:<\/p>\n<\/div>\n\n\n\n You can include the Ignite UI Dock Manager Web Component in your project as a dependency using the NPM package. To install the Dock Manager package execute the following command:<\/p>\n\n\n\n Then it is necessary to import and call the defineCustomElements()<\/strong> function:<\/p>\n\n\n\n TS<\/strong><\/p>\n\n\n\n Once the Dock Manager is imported, you can add it on the page:<\/p>\n\n\n\n We\u2019ve added quick how-to steps and additional info in our GitHub Ignite UI Dock Manager repo<\/a>.<\/p>\n\n\n\n Some important things to know about the main building blocks in the Dock Manager is that they are called panes<\/a>.<\/p>\n\n\n\n The main building blocks in the Dock Manager are the panes: <\/p>\n\n\n\n The content pane represents a pane with header and content. It can be hosted inside a Split Pane or a Tab Group Pane.<\/p>\n\n\n\n The split pane is a container pane which stacks all of its child panes<\/a> horizontally or vertically based on its orientation<\/a> property. <\/p>\n\n\n\n The tab group pane displays its child content panes<\/a> as the tabs of a tab component. <\/p>\n\n\n\n The floating pane is a split pane rendered above all other ones in a floating window.<\/p>\n\n\n\n The document host is an area of tabs for documents, similar to the one in Visual Studio for code editing and design view. <\/p>\n\n\n\n Here\u2019s another Dock Manager demo that we built using Ignite UI:<\/p>\n\n\n\n <\/p>\n\n\n\n Dock Manager comes with both a light and a dark theme built-in themes. Using themes out-of-the-box can be handy but is not enough to shape the look and feel that you need for you application, so we give you more options to customize the Ignite UI Dock Manager by using CSS variables<\/a> and CSS parts<\/a>.<\/p>\n\n\n\n Firstly, provide your own icons, using the\u202fcloseButton,\u202fmaximizeButton,\u202fminimizeButton,\u202fpinButton, and\u202funpinButton\u202fslots.<\/p>\n\n\n\n After that, use the exposed parts in the stylesheet. This way you have full control of the component’s styling.<\/p>\n\n\n\n There you go. You now have a DockManager with customized icons and tab area.<\/p>\n\n\n\nWhat Makes Ignite UI Dock Manager Different?<\/h2>\n\n\n\n
\n
![\"](\"http:\/\/static.infragistics.com\/marketing\/Blogs\/Migration\/00\/00\/00\/09\/43\/2158.DATwithout.gif\")
<\/figure>![\"](\"http:\/\/static.infragistics.com\/marketing\/Blogs\/Migration\/00\/00\/00\/09\/43\/3730.DockDATv1.gif\")
<\/figure>How To Use Ignite UI Dock Manager?<\/h2>\n\n\n\n
npm install --save igniteui-dockmanager<\/pre>\n\n\n\n
import { defineCustomElements } from 'igniteui-dockmanager\/loader';\ndefineCustomElements();<\/pre>\n\n\n\n<igc-dockmanager id=\"dockManager\">\n<\/igc-dockmanager><\/pre>\n\n\n\n
Using Panes in Dock Manager\u00a0<\/h2>\n\n\n\n
\n
\n
\n
\n
\n
![\"](\"http:\/\/static.infragistics.com\/marketing\/Blogs\/Migration\/00\/00\/00\/09\/43\/1212.PanesType1-0.png\" "\\"")
<\/figure>\n\n\n\nTheming Customization in Ignite UI for Dock Manager Component<\/h2>\n\n\n\n
![\"Example](\"http:\/\/static.infragistics.com\/marketing\/Blogs\/Migration\/00\/00\/00\/09\/43\/3312.Dock-Manager-Theming.gif\" "\\"Example")
<\/figure>\n\n\n\n
![\"Example](\"http:\/\/static.infragistics.com\/marketing\/Blogs\/Migration\/00\/00\/00\/09\/43\/5556.Dock-Manager-css-customizations.gif\" "\\"Example")
<\/figure>\n\n\n\n![\"](\"http:\/\/static.infragistics.com\/marketing\/Blogs\/Migration\/00\/00\/00\/09\/43\/3377.PinUnpin.gif\" "\\"")
<\/figure>\n\n\n\n![\"](\"http:\/\/static.infragistics.com\/marketing\/Blogs\/Migration\/00\/00\/00\/09\/43\/6082.Resize.gif\" "\\"")
<\/figure>\n\n\n\n![\"](\"http:\/\/static.infragistics.com\/marketing\/Blogs\/Migration\/00\/00\/00\/09\/43\/8168.Close.gif\" "\\"")
<\/figure>\n\n\n\n![\"](\"http:\/\/static.infragistics.com\/marketing\/Blogs\/Migration\/00\/00\/00\/09\/43\/8168.DragFloatDock.gif\" "\\"")
<\/figure>\n\n\n\n![\"](\"http:\/\/static.infragistics.com\/marketing\/Blogs\/Migration\/00\/00\/00\/09\/43\/1234.PaneNav.gif\" "\\"")
<\/figure>\n\n\n\n