mcg-helper之自定义控件（二次开发）

mcg-helper内置控件和示例作为抛砖引玉，体现自动化流程的优势，为针对广大个性化需求，mcg-helper提供自定义控件的支持，涉及的技术上主要有spring mvc、html、javascript、jquery、bootstrap，一般有两年左右开发经验，基本上就没有什么难度

第一步，我们先梳理一下实现思路和概念，为后续开发建立前提：
    mcg-helper已实现一套流程自动化引擎，提供了前端交互到流程执行的完整功能。核心之一就是自定义控件，mcg-helper已经实现了一套规范，在基础上自定义控件，就会省事很多，意味着流程创建、更新、保存、控件的拖拽功能、流程的执行、控制台日志输出等一应俱全，只需要关心自定义控件功能即可，但仍必须完成以下事情：
    1、定义控件的交互界面，在前端发起ajax请求，服务端将返回控件的html页面，并通过javascript实现页面上的功能。
    2、实现控件的功能，当流程执行时，并执行到控件时，会先进入prepare方法（准备方法，对于需要初始化或参数调整），然后再执行execute方法（通过java自定义实现控件的具体功能）


第二步、自定义控件的步骤，这里以现有的“文本控件”为例，讲解如何实现的文本控件，所涉及代码调整的关键性位置，具体细节如下：

1、定义控件的类型，
 在com.mcg.common.sysenum.EletypeEnum中加入自己的控件，如下图所示：

2、定义实体类，继承FlowBase，重写prepare和execute方法，如下图所示：

3、定义控件交互页面
         在工程中webapp\template\html目录下，创建控件的页面，可以拷贝文本控件的页面（flowTextModal.jsp），页面布局与交互就完全自己定义即可。
         
4、增加控件交互页面的JS代码
         在工程中webapp\library\js\flow目录下，改动initmodal.js（初始化控件）和htmlmodel.js（控件页面的涉及功能）文件，                                                                                                                                                            首先：在initmodal.js文件中createHtmlModal方法，增加控件的服务端请求，参考文本控件。然后setDialogBtns方法添加页面的按钮（如：保存，关闭）功能，同样      参考文本控件。createModalCallBack方法，功能回调，参考文本控件。
      其次：控件前端功能涉及的JS函数，建议到htmlmodel.js文件里面（这个不是必      须，只是工程结构目录是这样的）。
      
5、定义控件的页面请求，spring mvc的controller
    在com.mcg.controller.html.HtmlController类下，可参考文本控件的代码，如下图所示：

6、控件保存功能的服务端交互
     在com.mcg.controller.flow.FlowController类下，可参考文本控件的代码，如下图所示：

    到这里，自定义控件涉及的代码改动处介绍完毕，由于篇幅有限，未从mcg-helper的源码进行剖析，所以在动手前建议先运行mcg-helper，根据上述的关键性代码位置，断点跟踪调试“文本控件”，从前端交互、流程执行的完整过程，再尝试修改文本控件的的前后端功能，功能可随意设计或改动，再通过代码走读，相信更利于理解mcg-helper的设计和二次开发，可能这个过程需要下点功夫，但熟悉以后，便能随心所欲的自定义控件了。