XAF Blazor TabbedMdi
开源项目地址:https://gitee.com/easyxaf/blazor-tabbed-mdi
前言
XAF在WinForm中采用了多文档界面(MDI),但在Blazor中却没有,在官网中也有人提相关的问题,官方的回复是将来会考虑实现MDI(等待的时间可能会很长),同时官方也给了一些临时方案,如借用浏览器的Tab或用DashboardView来实现,其实这些方案都存在着一些问题。之前在QQ群(336090194)中上传了一个简单的MDI实现(MdiBlazorSample_20220726.zip),它是通过创建一个WindowTemplate,重写IFrameTemplate的SetView方法来实现的。新的MDI也采用了类似的方法,但加入了更多的功能,事后我会写一篇关于MDI的实现原理,感兴趣的可以关注一下。
XAF中的Blazor提供的是一个单文档界面(SDI),当我们切换视图时,上一个视图的状态会丢失,比如在一个列表视图中查看详情,当再返回列表视图时,列表视图中的过滤、翻页等状态都会丢失,这样用户体验不是很好。MDI可以很好的解决这个问题,由于它可以同时保留多个视图的状态,这样再切换视图时,视图之前的状态不会丢失。
在XAF中我们更多的是对视图进行操作,但视图是被Window(或Frame)包裹的,在BlazorTabbedMdi中每一个视图都有一个Window,其实都是对Window进行操作,为了便于理解,将其描述为视图。
演示
基本操作
未保存提示
- 如果视图被修改了,会在标题的后面加上*,保存后*会被移除
- 试图关闭未保存的视图时,会给出提示
- 关闭浏览器时,如果有未保存的视图,也会给出提示
导航历史
- 在切换视图时,地址栏、导航栏、Tab页会同步显示对应的视图
- 通过操作浏览器中的历史(前进、后退),可以对视图进行切换
Tab右键菜单
- 通过右键菜单可以快速的关闭Tab页
- 可以将Tab页移动到新的浏览器窗口
窗口管理
- 窗口列表中包含了所有已被打开的视图
- 可以激活、批量保存、批量关闭
Tab分组
- 当打开的视图过多时,通过分组,可以更方便的操作视图
- 分组规则可以在模型中设置,默认分组规则是将相同BO类型放在一组
- 当切换视图时,同时也会显示它所在的组
- 所有已打开的视图,都可以在窗口管理中查看到
无Tab页
- 不显示Tab页,但保留了视图的状态
- 可以通过导航栏或窗口管理对视图进行切换
使用
基本
-
将BlazorTabbedMdi项目引入到解决方案中
-
在Startup类中将BlazorTabbedMdiModule模块添加到配置中
-
将Blazor项目中Application的基类(之前是BlazorApplication)改为MdiBlazorApplication
完成上面的步骤后,就可直接使用了,如果想使用分组或无Tab页需要在模型中设置,打开模型编辑器,在Application节点中找到Mdi节点组
- IsWindowKeepOpen:当为True时,保持视图的状态,默认为True
- IsShowTabbedMdi:当为True时,显示Tab页(即使IsWindowKeepOpen为False,也会保持视图状态),默认为True
- EnableMdiGroup:当为True时,启用分组(需要IsShowTabbedMdi为True),默认为False
默认分组规则是相同BO类型会放在一组,如果想修改默认规则需要在模块中设置,每一个视图都可以单独的设置,MdiGroup默认为空,组名称相同的会放到同一组中
高级
BlazorTabbedMdi使用了自定义的WindowTemplate,如果你不想使用默认的模板样式,可以有两种方式:
一、直接在BlazorTabbedMdi项目中修改MdiMainWindowTemplateComponent.razor文件,这是比较简单的方式;
二、如果你想将BlazorTabbedMdi项目作为独立模块使用,不想直接修改,可以按照下面的步骤操作。
- 将MdiMainWindowTemplateComponent.razor与MdiMainWindowTemplateComponent.razor.cs文件拷贝到你的Blazor项目中,将其改名为CustomMainWindowTemplateComponent,修改并补全相应的命名空间。
- 在你的Blazor项目创建一个继承自MdiMainWindowTemplate的类(如:CustomMainWindowTemplate)
- CustomMainWindowTemplate.cs中的代码如下
- CustomMainWindowTemplateComponent.razor与CustomMainWindowTemplateComponent.razor.cs的基类需要改为FrameTemplateComponentBase<CustomMainWindowTemplate>
- 将CustomMainWindowTemplateComponent.razor中的Create代码替换为
- 在Blazor项目中的Application类里添加下面的代码
- 通过修改CustomMainWindowTemplateComponent文件就可以实现自定义布局及样式
- 这种方式比较繁琐(在示例文件中包含了全部代码),如果没有独立使用的必要可以直接使用第一种方法