UI框架-MVPFramework

阅读量: 鲁文奎 2021-04-22 12:04:33
Categories: Tags:

UI框架-MVPFramework

[toc]

前言

MVPFramework是一个基于C#实现的UI框架,旨在帮助开发者以一种较为优雅的方式快速搭建应用程序原型。它也是自己对UI框架设计的一些思想落地实现,而不仅仅局限于在单一语言或单一平台可以使用。

Features

版本相关

平台 适用版本 分支 状态
Window XP 及以上 .Net FrameWork4.0 xp-net40 success

注意: XP平台下需要主动安装.Net Framework4.0

使用项目展示

目前,【天下3安装器(新版)】和【StroboscopeExplorer】中均采用了MVPFramework来进行UI框架搭建。

天下3安装器(新版)

StroboscopeExplorer

设计理念汇总:

设计结构图

                          +--------------------------------------------------------------------------+                              
                          |                          MVPFramework                                    |                              
                          +--------------------------------------------------------------------------+                              
                                                                                                                                    
           +-------------+                            +------------------------------+                                              
           |= Model Layer|                            |= Presenter Layer             |                                              
           |             |----------send------------->|+----------------------------+|                                              
           |             |                            ||                            ||                             |   |            
           |             |                            ||                            ||                    +---------   ----------+  
           +-------------+                            ||                            ||                    |= Presenter Stub      |  
                                                      ||      Presenter List        ||-----register------>|                      |  
                                                      ||                            ||                    +----------------------+  
                                                      ||                            ||                               |              
                                                      ||                            ||                               |              
                                                      |+----------------------------+|                               |              
                                                      +------------------------------+                               |              
                                                                      |                                              |              
                                                                      |                                              |              
                                                                      n                                              |              
                                                                      :                                              |              
                                                                      n                                              |              
                                                                      |                                              |              
                                                                      |                                              |              
                                                                      V                                              |              
  +---------------------------------------------------------------------------------+                                |              
  |= View Layer                                                                     |                                |              
  |  +-------------------------+                      +----------------------------+|                                |              
  |  |= View Component Layer   |                      |= View Logic Layer          ||                                |              
  |  |                         |                      |                            ||                                V              
  |  |                         |                      |                            ||                    +----------------------+   
  |  |                         |<--------1:1--------->|                            ||                    |= View Logic Stub     |   
  |  |                         |                      |                            ||-----register------>|                      |   
  |  |                         |                      |                            ||                    +----------------------+   
  |  |                         |                      |                            ||                                               
  |  +-------------------------+                      +----------------------------+|                                               
  |---------------------------------------------------------------------------------+                                               

设计结构分析

Model Layer: 只包含数据结构的定义(需要区别于传统的MVC中的Model层)
Presenter Layer: 该层是极重的一层,包含数据的计算和缓存、界面的显示周期等
View Layer:
View Component Layer: UI层
View Logic Layer: UI 逻辑层

Model Layer 设计: Model Layer 只包含数据结构的定义
理由如下:

  1. 应用中的数据不是必须要和View层关联起来的, 比如项目的配置数据等,如此,在Model层就可以找到所有数据的原型
  2. 关于处理数据的部分放在Model处理, 对开发人员开发其实很不友好, 所以在MVPFramework中放开这个限制, 只保留数据原型
    Presenter Layer 设计:
    P层和V层完全解耦合, P层只能通过V层暴露的接口去访问V层, 并且P层和V层是n:n关系。
    理由:
    介于之前使用的UI框架结构都是强绑定关系, 在MVPFramework中想实现做松耦合的框架结构, 因为经常会出现一个Presenter多个View使用, 或多个Presenter一个View使用的情况。
    View Layer 设计: View Layer分为View Component Layer 和 View Logic Layer。
    理由:
    主要是为了界面和逻辑的解耦合,避免在逻辑代码中穿插各种组件定义相关代码,增加后期维护时的代码可阅读性成本。这样做的另外一个附加好处是, View Component Layer 可以自由使用任何第三方库。

结构缺陷分析

框架多层次的划分会在写代码时带来一个不太好的问题: 每新写一个界面就会在所有层次上都会新加写相应代码。
常用的解决方案是代码模板。

界面开发样例

以HelperView举例:

  1. 建立全局可访问的P层, 也是MVP结构的入口。
// 帮助界面的P层
private static HelperPresenter _helperPresenter = null;
public static HelperPresenter HelperPresenter { set => _helperPresenter = value;
	get
	{
		if (_helperPresenter == null)
		{
			_helperPresenter = new HelperPresenter();
		}
		return _helperPresenter;
	}

}

如上, 我们可以使用单例来缓存P层, 当然, 如果不缓存P层,可以不这样做。但是,建议这样做。

  1. P层和View Logic绑定。P层主要处理2件事, 一是与ViewLogic绑定, 二是处理数据, 将数据转换成界面显示需要的格式。
[ViewLogicBinding(typeof(HelperViewLogic))]// 指定Presenter绑定的ViewLogic类型
public class HelperPresenter:Presenter<IHelperView,HelperModel>
{
    /// <summary>
    /// 设置帮助信息(这里函数需要在Presenter初始化完成之后调用)
    /// </summary>
    /// <param name="modelInfo"></param>
    public void SetHelperInfo(HelperModel modelInfo)
    {

        if (modelInfo!= null)
        {
            Model = modelInfo;// 重新拉取数据
            ViewLogic.LayoutView(modelInfo);// 刷新界面
        }
    }
	// ...
}

如上, 通过装饰器我们可以确定P层和ViewLogic的绑定关系, IHelperView 定义了P层可以访问ViewLogic中的接口,HelperModel 定义了P层可以缓存M层类型的数据

  1. 创建ViewLogic类。这一层级专注于处理界面的显示逻辑。比如组件的显/隐、组件的数据填充等
// ViewLogic<T1,T2>
// T1 : 指的是绑定的 UI组件
// T2 : 指的是暴露给Presenter的接口
public class HelperViewLogic : ViewLogic<HelperView, IHelperView>, IHelperView
{
        public void Activate()
        {
            target?.Activate();
        }

        public void Close()
        {
            target?.Close();
        }

        public void LayoutView(HelperModel modelInfo)
        {
            target.desc.Text = modelInfo.EditorDesc;
        }

        public void Show()
        {
            target?.Show();
        }
}
  1. 创建组件。也可以直接引用第三方组件, 因为不需要修改, 这需要在这一层级用第三方的组件拼接好界面即可。
/// <summary>
/// 帮助界面
/// </summary>
public partial class HelperView:Form
{
	public HelperView()
	{
		InitializeComponent();
	}

附录

MVPFramework http://git-internal.nie.netease.com/zhanghui03/directoreditor