使用 Ignite UI Dock Manager 管理复杂的 Web 布局并提高可用性
在 Infragistics，我们知道开发流程和需求在不断变化。为了跟上市场和客户的期望，您必须提高可用性，同时添加新特性和功能。
这就是为什么我们从未停止增强Ignite UI 工具包、带来新组件和更多功能的原因。刚才我们很高兴地宣布Ignite UI Dock Manager组件的新版本。这个强大的新工具使您可以更轻松地在任何框架中构建多窗口、多屏幕 Web 应用程序。
但稍后会详细介绍这一点。
什么是码头管理器
使用 Dock Manager 有什么好处
Ignite UI Dock Manager 有何不同
如何使用 Ignite UI Dock 管理器
使用 Dock Manager 中的窗格
主题定制
自定义布局
什么是码头管理器？
Dock Manager 是一个标准的、用户友好的 Web 组件，用于构建复杂的布局，将视图拆分为更小的视图。这可以递归地完成，以便创建可以在运行时操作和调整的任意布局。您可以灵活地管理布局以及多个窗口、面板和其他 UI 元素的定位，将它们停靠到应用程序内的不同位置。
对于最终用户来说，Dock Manager 意味着能够通过固定、调整大小、移动、浮动和隐藏窗格等功能进一步自定义创建的布局。
使用 Dock 管理器有什么好处？
一般来说，在构建动态且复杂的 UI 时，使用 Dock Manager 可以节省您的时间和精力，从而确保为 Web 应用程序的最终用户提供更好的用户体验。以下是一些好处：
跨平台：它最好的事情之一是对桌面和移动设备的多平台支持。然后，它与现代网络浏览器兼容，这意味着您可以使用 Dock Manager 组件为您想要的任何平台开发响应式布局软件解决方案。
内置拖放：如果您想要将窗格中的选项卡从一个目的地重新排序到另一个目的地，可以使用该组件提供的拖放功能快速完成此操作。
无缝集成：无论您是在 Angular、Blazor、Web Components 还是其他框架中开发应用程序，Dock Manager 始终依赖给定的框架架构将可停靠的 UI 元素集成到应用程序逻辑和数据中。
灵活性和自定义调整：管理布局、使用插槽和部件自定义所有按钮、将面板和窗口等内容停靠在不同位置、更改 UI 元素的行为以满足应用程序要求，这一切都非常简单。
更好的用户体验： Dock Manager 组件为最终用户提供了进一步操作、重新排列和调整可用 UI 元素大小的能力，实际上改善了应用程序的整体体验。
是什么让 Ignite UI Dock Manager 与众不同？
最大的区别之一是 Ignite UI Dock Manager 组件是一个无依赖性的纯 Web 组件，可用于 Angular、Blazor、React 和 Web 组件。它不仅可以让您构建类似 Visual Studio 的桌面体验，还可以帮助您为任何行业和企业创建更好的 Web 应用程序。
例如，金融公司处理大量数据，并且通常需要复杂的仪表板来显示和理解这些数据。这里的问题是，金融公司如何从使用 Ignite UI Dock Manager 中受益？有了它，他们可以做几件事：
构建可自定义的仪表板，易于根据公司的目的和个人用户的需求进行排列和调整大小。
有效地调整屏幕上 UI 元素的大小，以最大限度地提高一次性可视化的财务数据量。
快速显示适合最终用户的超级可访问信息。
得益于 Ignite UI Dock Manager 的跨平台兼容性，跨设备提供一致的用户体验。
为了更好地说明这一点，我将分享我们在“数据分析工具”设计会议中遇到的一个现实问题。要使用 数据分析工具，您首先必须选择数据，选择适当的图表，选择它，然后 - 就在那里，草丛中的第一条蛇 - 您处于浏览器应用程序中，而不是桌面应用程序中。
但是你在哪里可视化这个图表呢？这是一个无法移动的静态对话框。它隐藏了你的网格视图，你被困在那里。如果您需要滚动搜索其他内容，则需要关闭图表对话框，检查您需要的内容并从头开始。它听起来很笨拙。您只是受到浏览器的限制。这就是 Dock Manager 变得无价的地方。有了它，您可以轻松构建多屏幕布局，而无需牺牲可用性和限制最终用户。
这是一个简单的 Dock Manager 示例和视觉比较：
没有 Dock Manager 的数据分析工具：
带有 Dock Manager 的数据分析工具：
我想这就是为什么很多人，包括专业开发人员，对桌面应用程序感到怀念的原因。如今，在浏览器窗口中打开十个或更多选项卡并不罕见。如果您需要使用 n 个页面的数据，那么您需要 n 个窗口。可以根据需要自由地重新排列布局，这就是 Dock Manager 组件如此重要的原因。这并不是要淡化单页应用程序（SPA）的重要性，而是分享另一个观点。
那么，现在我们知道它是什么以及为什么它很重要，让我们看一下 Ignite UI Dock Manager 的基本部分和功能：
如何使用 Ignite UI Dock 管理器？
您可以使用 NPM 包将 Ignite UI Dock Manager Web 组件作为依赖项包含在项目中。要安装 Dock Manager 软件包，请执行以下命令：
npm install --save igniteui-dockmanager
然后需要导入并调用 defineCustomElements() 函数：
从“igniteui-dockmanager/loader”导入{defineCustomElements}；
定义自定义元素();
TS
导入 Dock Manager 后，您可以将其添加到页面上：
<igc-dockmanager id="dockManager">
</igc-dockmanager>
我们在GitHub Ignite UI Dock Manager 存储库中添加了快速操作步骤和其他信息。
关于 Dock Manager 中的主要构建块，需要了解的一些重要事项是它们称为窗格。
在 Dock Manager 中使用窗格
Dock Manager 中的主要构建块是 窗格：
内容窗格
内容窗格表示具有标题和内容的窗格。它可以托管在拆分窗格或选项卡组窗格内。
分割窗格
分割窗格是一个容器窗格，它根据其 方向属性水平或垂直堆叠其所有子 窗格 。
选项卡组窗格
选项卡组窗格将其子内容 窗格显示 为选项卡组件的选项卡。
浮动窗格
浮动窗格是在浮动窗口中呈现在所有其他窗格之上的分割窗格。
文档主持人
文档宿主是文档选项卡区域，类似于 Visual Studio 中用于代码编辑和设计视图的选项卡区域。
这是我们使用 Ignite UI 构建的另一个 Dock Manager 演示：
Ignite UI 中 Dock Manager 组件的主题定制
Dock Manager 附带浅色和深色主题内置主题。使用开箱即用的主题可能很方便，但不足以塑造您的应用程序所需的外观和感觉，因此我们为您提供了更多选项，通过使用 CSS 变量和 CSS 部件来自定义 Ignite UI Dock Manager。
首先，使用 closeButton、maximizeButton、minimumButton、pinButton 和 unpinButton 插槽提供您自己的图标。
之后，使用样式表中暴露的部分。这样您就可以完全控制组件的样式。
就这样吧。您现在拥有一个带有自定义图标和选项卡区域的 DockManager。
如果您愿意，可以尝试使用此stackblitz 现场示例。
自定义布局
最终用户可以执行以下操作来在运行时自定义布局：
固定 窗格
您可以通过取消固定将当前不需要的所有内容和选项卡窗格隐藏在托盘中。当您需要将它们固定在最后停靠位置时 - 只需将它们固定即可。
调整窗格大小
关闭一个窗格
浮动一个窗格
您可以通过拖动任何窗格的标题来创建浮动窗格。浮动窗格是在浮动窗口中呈现在所有其他窗格之上的分割窗格。它移动到所有其他窗格上方，并且不受 Dock Manager 窗口的限制。它可以调整大小、停靠或托管在拆分窗格或选项卡组内。
窗格导航器
关于停靠或托管窗格的可用位置的视觉指示（操纵杆）与光标当前所在的窗格相关。你可以：
将窗格停靠在任何嵌套级别（包括全局/根嵌套）的左侧、右侧、顶部或底部。
将实时日志窗格停靠在窗口底部。
将包含命令和操作的窗格停靠在窗口顶部，就像 MS Office 功能区一样。
将窗格停靠为另一个视图的选项卡，而不拆分内容区域。
打开托盘并将项目拖到目标窗格并将其停靠到特定位置。
保存/加载布局
如果您需要不断地重新创建自定义和复杂的布局，那么创建它们可能会很棘手并且非常烦人。这就是为什么我们提供了保存和加载布局的选项。现在，您可以自定义布局，专门满足您当前的需求，并将其保存为默认值，从而减少迭代并节省时间。
例如，如果您想自己尝试，则只需要一个 Angular 项目，然后可以按照此处的说明进行操作。
最后，Dock Manager 为 Web 开发人员提供了提高复杂 Web 应用程序可用性的能力，从而在 Web 上提供完整的窗口体验。它可以快速、轻松地完成此操作，使您能够成为英雄，并在获得下一杯含咖啡因饮料的时间内满足用户的需求。
售前咨询专员
