FineUIMvc 可视化设计器可行性探讨

棕榈

本人一直从事WinForm的开发，最近一段时间开始接触Web的开发，也学习了一些Web开发技术，真心佩服Web开发工程师内心的强大，到现在为止npm上共有40多万个模块，现在还在不断的增加，各种框架，各种技术，如何选择，都不是一件简单的事。
我也一直在关注FineUI，之前的版本是基于WebForm的，与现有流行的服务器端架构不能很好的融合。直到FineUIMvc的出现，让我下定决心好好研究一下，并将其作为之后项目开发的主要架构。为此在前段时间，基于客户端手册创建了Typescript类型定义文件，用于方便客户端的脚本编写。

在学习FineUIMvc的过程中就一直在想，如果要有一款ineUIMvc的可视化设计器就好了，这不仅能够减少编码量，同时还能够所见即所得的可视化编辑，这样FineUIMvc就更完美了，由于官方没有这样一款设计器，只能自己试着看看能不能实现。在学习及研究的过程中发现可行性是有的，下面是我的一些想法：

• 设计器基于FineUIMvc架构设计，也就是说这个设计器是Web版的
• 每个控件的属性来源于FineUIMvc服务器端控件的属性
• 控件的属性设置通过属性网格来显示并设置
• 服务器端持有设计器中每个控件的状态
• 设计器可以生成TypeScript代码、View代码、及Controller中的代码
• 自动生成的代码中都有控件的强类型定义，这样可以免去了采用字符串方式的引用
  

这是我的一些初步想法，大家有什么想法可以积极发表

zy32002

你要做可视化，相当于做个cms组件了。而且你还是要自动生成View代码、及Controller中的代码，这样封装会有过度，耦合性太高了，这样的东东实用性不是很强。当然你要是想做个cms，这么做也无可厚非。

棕榈

zy32002 发表于 2017-4-22 15:04
你要做可视化，相当于做个cms组件了。而且你还是要自动生成View代码、及Controller中的代码，这样封装会有 ...

这款设计器有点类似于WinForm的窗体设计器，可以通过拖拽及属性设置的方式来进行设计。所谓的代码生成也只是一些控件设计时代码，View相当于把它看成WinForm中的Form.designer.cs文件，Controller相当于Form.cs文件，Action相当于事件方法，之前在Action中需要这样引用控件

1. UIHelper.Button("btnTooltip").ToolTip("这是改变后的提示信息");

复制代码

而现在只需要这样操作

1. this.btnTooltip.ToolTip("这是改变后的提示信息");

复制代码

TypeScript代码也只是对控件进行了强类型定义，之前需要这样操作

1. F<F.Button>("btnTsButton").setTooltip("这是通过TS创建的提示");

复制代码

而现在只需要这样操作，并且还是强类型的

1. UI.btnTsButton.setTooltip("这是通过TS创建的提示");

复制代码

所生成的代码只是控件定义相关的代码，并不涉及其它逻辑代码

sanshi

棕榈 发表于 2017-4-22 16:09
这款设计器有点类似于WinForm的窗体设计器，可以通过拖拽及属性设置的方式来进行设计。所谓的代码生成也只 ...

有意思，可以先实现个最简单的功能出来，看大家是否感兴趣