• 界面设计模式 之 我的TreeClient模式


    界面设计模式 之 我的Tree-Client模式

    平时在用C#做界面的时候,尤其是在做参数设置界面的时候,经常会遇到左边是树,右边根据树节点对应的数据类型显示不同的内容。VS2003的选项设置界面就是这种布局。那么我们自己来实现的时候,如何设计才比较好呢?

    先看一下我的界面示意图:

    treeclientpattern.gif

    这里我们可以看到有如下几个我们需要关注的对象:

    节点(TreeNode):其中包含了我们最核心的数据,只有根据其中的数据我们才能选择我们需要的显示界面
    界面容器(Site):我们的各种界面都要最终显示在这么小块显示区域里边。也许进一步分析可能会有更多的东西。
    界面(Editor):随着不同数据的变化而变化。

    首先可以确定的是节点中必须要包含我们想要的数据,我们设想的工作场景是这样的:在运行时,根据节点中数据的类型,我们选择不同的界面,然后把这些界面加入到界面容器中显示出来,然后把我们的数据塞到这些界面里,等我们编辑完了这些数据之后,再把数据放回到节点中去。

    在这个工作场景中,接口之间的依赖性要求如下:
    1。TreeNode不应该知道具体Editor的类型,因为不同的场合,同一个数据也会有不同种类的编辑方法。
    2。Editor眼中只有数据,不会知道TreeNode的存在,因为同一个Editor可能要工作在多种场合之下。
    3。Editor也不应该知道 Site 的存在,否则Editor就无法独立工作,复用性就达不到要求。
    4。Site绝对知道Editor的存在,但是也不应该知道 TreeNode 存在,原因同2。
    5。TreeNode 不应该知道 Site 的存在。
    6。TreeView和MainWindow当然会知道Site的存在了,因为他们就在一个界面里边嘛,假装不知道也太过分了。

    这样一来,我们差不多就可以出一个图了,如下:

    Treeclientuml.gif

    解释一下,图上所示的内容其实是让 TreeView和MainWindow作为粘合剂,把TreeNode、Editor和Site三个类粘合在了一起。这三个类分别通过IEditor和IEditorNotify进行相互之间的通讯。其中各自的职责如下:

    TreeNode:通过实现IEditorNotify接口来获取 Editor 的必要通知,包括Open/Close/Save等。另外实现Data属性,让TreeNode和数据的绑定松动,以便TreeView和MainWindow的操作。
    Editor:通过实现 IEditor 接口来配合 IEditorNotify 的通知工作,让IEditorNotify的实现者可以获取必要的数据和编辑信息。
    Site:通过预先定义“数据类型 到 Editor”的映射来实现界面的选择功能。而且作为Editor的容器,Site自己管理所有的Editor实例。只通过一个简单的SetData来完成 数据、IEditor和IEditorNotify 之间的关联。
    TreeView和MainWindow:两者配合实现事件和逻辑的粘合,把 TreeNode 包含的数据和IEditorNotify接口传递给Site的SetData接口。

    从最后的实现代码来看,代码的分布非常均匀,至少我自己很满意。

    实际的代码在这里下载

  • 相关阅读:
    我和杨兄的不同的Code First简单权限设计
    JavaScript&JQ 004_JS闭包
    省市区三级联动[JSON+Jquery]
    JavaScript 005_JS数组的CRUD
    linq头脑风暴001_聚合函数
    类成员函数指针的特殊之处
    模拟手算,计算组合数C(m,n)
    命令行版扫雷(vc08)
    UNICODE,GBK,UTF8:编码格式的区别
    画高频PCB的心得
  • 原文地址:https://www.cnblogs.com/BigTall/p/216189.html
Copyright © 2020-2023  润新知