UI框架-MVPFramework
[toc]
前言
MVPFramework是一个基于C#实现的UI框架,旨在帮助开发者以一种较为优雅的方式快速搭建应用程序原型。它也是自己对UI框架设计的一些思想落地实现,而不仅仅局限于在单一语言或单一平台可以使用。
Features
- 快速搭建应用程序原型
- 数据层和视图层的解耦合、界面和界面逻辑分离
- 数据驱动UI
版本相关
平台 | 适用版本 | 分支 | 状态 |
---|---|---|---|
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 只包含数据结构的定义
理由如下:
- 应用中的数据不是必须要和View层关联起来的, 比如项目的配置数据等,如此,在Model层就可以找到所有数据的原型
- 关于处理数据的部分放在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举例:
- 建立全局可访问的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层,可以不这样做。但是,建议这样做。
- 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层类型的数据
- 创建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();
}
}
- 创建组件。也可以直接引用第三方组件, 因为不需要修改, 这需要在这一层级用第三方的组件拼接好界面即可。
/// <summary>
/// 帮助界面
/// </summary>
public partial class HelperView:Form
{
public HelperView()
{
InitializeComponent();
}
附录
MVPFramework http://git-internal.nie.netease.com/zhanghui03/directoreditor