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进行操作,为了便于理解,将其描述为视图。

演示

基本操作

image

未保存提示

  • 如果视图被修改了,会在标题的后面加上*,保存后*会被移除
  • 试图关闭未保存的视图时,会给出提示
  • 关闭浏览器时,如果有未保存的视图,也会给出提示

image

导航历史

  • 在切换视图时,地址栏、导航栏、Tab页会同步显示对应的视图
  • 通过操作浏览器中的历史(前进、后退),可以对视图进行切换

image

Tab右键菜单

  • 通过右键菜单可以快速的关闭Tab页
  • 可以将Tab页移动到新的浏览器窗口

image

窗口管理

  • 窗口列表中包含了所有已被打开的视图
  • 可以激活、批量保存、批量关闭

image

Tab分组

  • 当打开的视图过多时,通过分组,可以更方便的操作视图
  • 分组规则可以在模型中设置,默认分组规则是将相同BO类型放在一组
  • 当切换视图时,同时也会显示它所在的组
  • 所有已打开的视图,都可以在窗口管理中查看到

image

无Tab页

  • 不显示Tab页,但保留了视图的状态
  • 可以通过导航栏或窗口管理对视图进行切换

image

使用

基本

  1. 将BlazorTabbedMdi项目引入到解决方案中

  2. 在Startup类中将BlazorTabbedMdiModule模块添加到配置中
    image

  3. 将Blazor项目中Application的基类(之前是BlazorApplication)改为MdiBlazorApplication
    image

完成上面的步骤后,就可直接使用了,如果想使用分组或无Tab页需要在模型中设置,打开模型编辑器,在Application节点中找到Mdi节点组

image

  • IsWindowKeepOpen:当为True时,保持视图的状态,默认为True
  • IsShowTabbedMdi:当为True时,显示Tab页(即使IsWindowKeepOpen为False,也会保持视图状态),默认为True
  • EnableMdiGroup:当为True时,启用分组(需要IsShowTabbedMdi为True),默认为False

默认分组规则是相同BO类型会放在一组,如果想修改默认规则需要在模块中设置,每一个视图都可以单独的设置,MdiGroup默认为空,组名称相同的会放到同一组中

image

高级

BlazorTabbedMdi使用了自定义的WindowTemplate,如果你不想使用默认的模板样式,可以有两种方式:
一、直接在BlazorTabbedMdi项目中修改MdiMainWindowTemplateComponent.razor文件,这是比较简单的方式;
二、如果你想将BlazorTabbedMdi项目作为独立模块使用,不想直接修改,可以按照下面的步骤操作。

  1. 将MdiMainWindowTemplateComponent.razor与MdiMainWindowTemplateComponent.razor.cs文件拷贝到你的Blazor项目中,将其改名为CustomMainWindowTemplateComponent,修改并补全相应的命名空间。
  2. 在你的Blazor项目创建一个继承自MdiMainWindowTemplate的类(如:CustomMainWindowTemplate)
  3. CustomMainWindowTemplate.cs中的代码如下
    image
  4. CustomMainWindowTemplateComponent.razor与CustomMainWindowTemplateComponent.razor.cs的基类需要改为FrameTemplateComponentBase<CustomMainWindowTemplate>
    image
    image
  5. 将CustomMainWindowTemplateComponent.razor中的Create代码替换为
    image
  6. 在Blazor项目中的Application类里添加下面的代码
    image
  7. 通过修改CustomMainWindowTemplateComponent文件就可以实现自定义布局及样式
  8. 这种方式比较繁琐(在示例文件中包含了全部代码),如果没有独立使用的必要可以直接使用第一种方法
posted @ 2022-11-23 15:54  haoxj  阅读(721)  评论(3编辑  收藏  举报