IDE项目熟悉日志

项目情况

前端项目

前端项目地址
http://192.168.0.240:10080/david/kop-ide-portal.git

后端项目

后端项目地址
http://192.168.0.240:10080/stephen/kop-ide-server.git

项目技术

前端项目技术

项目设计

框架窗口协议

{
            tpl: "/views/processdesigner/palette.html",                         //模板文件
            title: "流程设计器",                                                 //标题
            id: "processelement",                                               //窗口id标识符
            position: "left top",                                               //窗口位置
            width: 200,                                                         //窗口宽度
            isClose: false,                                                     //关闭状态，true已经关闭，false未关闭
            selectCallBack: function () { },                                    //选中窗口回调函数
            closeCallBack: function () { },                                     //关闭窗口回调函数
            index: "last",                                                      //索引
            isSelected: true,                                                   //是否被选中，true是，false未被选中
            isRefresh: true                                                     //是否刷新，true是，false否
        }

框架右键菜单协议

流程设计模块右键菜单，包括三个部分，默认，工作区，快捷菜单(这个由于需求变动，没有被使用)

{
    defaultItems:[
        {
            text: ""                                                            //菜单显示内容
            , value: ""                                                         //菜单值
            , childOperate:{left:100,top:0,show:"none"}                         //
            , key:""                                                            //取流程相关属性标识符
            , displayExecute:fn                                                 //显示执行函数
            , execute:fn                                                        //执行函数
            , children:[                                                        //定义子菜单，如果没有这留空，如果有这设置，设置方式与上面内容一致

            ]
        }
    ]
    ,workAreaItems:[                                                            //工作区菜单

    ]
    ,quickMenuItems:[                                                           //快捷菜单

    ]
}

框架工具栏协议

工具栏包括两个部分 配置文件 process-toolbar-config.js 

[
    {
        id:""                                                                   //一级菜单id
        ,title:""                                                               //一级菜单标题
        ,display: true|false                                                    //是否显示
        ,enName:""                                                              //英文名称
        ,isShow:true|false                                                      //是否显示
        ,children:[                                                             //子菜单
        id:"procesWidget",
           title:"流程元素",
           width:640
           ,classify:"process"
           ,type:"draggable-widget"
           ,background:"white"
           ,overflow:"hidden"
           ,dragStart:"startDragCallback"
           ,dragging:"dragCallback"
           ,dragEnd:"dragEndCallBack"
           ,children: [
           {
               id:"userTask"
               ,name:"活动"
               ,groupsENname:"Activities"
               ,groupsCNname:"活动"
               ,ico:"kop-icon-position-user-task"
               ,position:"inherit"
               ,type:"draggable-widget"
               ,btStyle:"kop-tools-button-style-none"
               ,width:100
               ,y:3
               ,x:13
           }
        ]
    }

]

方法实现文件 process-toolbar-action-config.js 

{
    "processStart":{
        action:fn
        ,actionCallback:fn
        ,displayFun:fn
    }
}

解析配置文件
ToolController

项目文档

由于后端相对来说比较的简单，并且主要的功能都在前端，所以我把前端的代码看了一下。 在项目中，我们只需要关心三个文件夹就可以了。

  • less
    这个目录主要是做css样式的 具体的项目情况 
    ├─angular                                                                       //angular相关的less文件
├─css                                                                           //这个文件夹没用，可删除
├─mixins                                                                        //bootstrap相关联的文件  
├─views             
│  ├─css            
│  ├─formdesigner                                                               //表单设计器模块，样式文件
│  ├─kbdesigner                                                                 //知识库模块，样式文件
│  ├─processdesigner                                                            //流程设计器模块，样式文件
│  └─shared                                                                     //公共的样式文件
│      └─file       
└─z-tree                                                                        //树结构样式文件
  • js
    javascript目录 
    +---libs                                                                        //项目中使用的公共的js库  
|   +---ag-grid
|   +---angular
|   +---angular-extend
|   +---angular-mocks
|   +---angular-ueditor                                                         //用于angular的ue编辑器  
|   |   +---dist
|   |   +---sample
|   |   |   \---views
|   |   +---src
|   |   \---tests
|   +---bootstrap                                                               //bootstrap自己的js库    
|   +---es5-shim-15.3.4.5                                                       //这个现在没什么用
|   |   \---tests
|   |       +---helpers
|   |       +---lib
|   |       \---spec
|   +---es6-shim                                                                //这个现在没什么用
|   +---eventBus                                                                //前端框架的事件总线
|   +---jquery_1.11.0
|   +---json3_3.2.6
|   |   \---lib
|   +---linq                                                                    //前端数据查询框架
|   +---momentjs_2.5.1
|   +---xml2json
|   +---z-tree
|   \---zero-clipboard
+---oryx                                                                        //流程编辑器核心模块
|   \---i18n
+---tests
|   +---lib
|   |   +---console
|   |   \---jasmine-core
|   |       +---boot
|   |       \---example
|   |           +---node_example
|   |           |   +---lib
|   |           |   |   \---jasmine_examples
|   |           |   \---spec
|   |           |       +---helpers
|   |           |       |   \---jasmine_examples
|   |           |       \---jasmine_examples
|   |           +---spec
|   |           \---src
|   \---spec
|       \---shared
\---views                                                                       //js模块整体目录        
  +---configuration                                                           //整个项目配置文件
  |   +---solution-click-handle                                               //解决方案点击处理
  |   +---solution-dblclick-handle                                            //解决方案双击处理
  |   +---solution-drag-handle                                                //解决方案拖动处理
  |   +---solution-drop-handle                                                //解决方案释放拖动处理
  |   +---solution-rename-handle                                              //解决方案名字修改
  |   +---solution-right-menu                                                 //解决方案右键菜单
  |   \---solution-shortcut-key-handle                                        //解决方案快捷键处理
  +---formdesigner
  |   +---business
  |   +---config
  |   +---controllers
  |   |   +---domain
  |   |   +---form-designer-preview
  |   |   \---repeat
  |   +---directive
  |   \---factories
  +---kbdesigner
  |   +---config
  |   +---controllers
  |   |   \---kbs-knowledge-data-value-controllers
  |   +---factories
  |   \---filters
  +---libs
  +---processdesigner                                                              
  |   README.md
  |
  +---config                                                                  //流程设计器配置文件
  |       editor-config.js                                                    //activiti 自带的编辑器配置文件 ？这里的作用是什么
  |       kop-process-window-config.js                                        //流程设计器窗口配置文件，遵循框架窗口协议设计
  |       process-right-menu-config.js                                        //流程设计器右键菜单配置，遵循框架右键菜单协议
  |       process-toolbar-action-config.js                                    //流程工具栏动作配置文件,这里是动作的实现
  |       process-toolbar-config.js                                           //流程工具栏配置文件，遵循框架工具栏协议设计
  |       properties.js                                                       //流程属性配置问价你
  |       toolbar-custom-actions.js
  |       toolbar-default-actions.js                                          //流程设计器常用的功能，包括保存流程模型，撤销，重做，剪切，复制，粘贴，删除，放大，缩小等操作
  |       toolbar.js
  |
  +---controllers                                                             //流程设计器控制器
  |       create-model-controller.js
  |       editor-controller.js
  |       header-controller.js
  |       palette-controller.js
  |       preview-model-list-controller.js
  |       process-add-process-controller.js
  |       properties-assignment-controller.js
  |       properties-collection-controller.js
  |       properties-condition-expression-controller.js
  |       properties-custom-controllers.js
  |       properties-default-controllers.js
  |       properties-event-listeners-controller.js
  |       properties-execution-listeners-controller.js
  |       properties-fields-controller.js
  |       properties-form-properties-controller.js
  |       properties-in-parameters-controller.js
  |       properties-message-definitions-controller.js
  |       properties-message-scope-controller.js
  |       properties-multiinstance-controller.js
  |       properties-out-parameters-controller.js
  |       properties-sequenceflow-order-controller.js
  |       properties-signal-definitions-controller.js
  |       properties-signal-scope-controller.js
  |       properties-task-listeners-controller.js
  |       property-window-controller.js
  |       select-shape-controller.js
  |       stencil-controller.js
  |       toolbar-controller.js
  |
  +---factories                                                               //流程设计器工厂
  |       process-factory.js
  |       stencil-factory.js
  |
  \---i18n                                                                    //流程设计器本地化
          kop-translation-zh-cn.js
  \---shared
      +---controller
      +---directive
      +---factories
      +---file
      +---solution-tool-config
      \---toolchildcontroller
  • views
    视图层，模板全部都放在这个里面 
+---formdesigner
|   +---domain
|   +---preview
|   |   +---layout
|   |   \---repeat
|   +---properties
|   \---template
|       \---layout
+---kbdesigner
|   +---popups
|   |   \---template
|   \---properties
+---processdesigner
|   canvas.html
|   palette.html
|   process-form-property.html
|   property.html
|   README.md
|
+---partials
|       root-stencil-item-template.html
|       stencil-item-template.html
|
+---popups
|       create-model.html
|       icon-template.html
|       preview-model-list.html
|       recentSolution-model.html
|       save-model.html
|       select-shape.html
|       unsaved-changes.html
|
\---properties
        assignment-add-user.html
        assignment-display-template.html
        assignment-popup.html
        assignment-write-template.html
        boolean-property-template.html
        collection-display-template.html
        collection-popup.html
        collection-write-template.html
        condition-expression-display-template.html
        condition-expression-popup.html
        condition-expression-write-template.html
        default-value-display-template.html
        event-listeners-display-template.html
        event-listeners-popup.html
        event-listeners-write-template.html
        execution-listeners-display-template.html
        execution-listeners-popup.html
        execution-listeners-write-template.html
        feedback-popup.html
        fields-display-template.html
        fields-popup.html
        fields-write-template.html
        form-properties-display-template.html
        form-properties-popup.html
        form-properties-write-template.html
        form-reference-display-template.html
        form-reference-popup.html
        form-reference-write-template.html
        in-parameters-display-template.html
        in-parameters-popup.html
        in-parameters-write-template.html
        message-definitions-display-template.html
        message-definitions-popup.html
        message-definitions-write-template.html
        message-property-write-template.html
        multiinstance-property-write-template.html
        out-parameters-display-template.html
        out-parameters-popup.html
        out-parameters-write-template.html
        sequenceflow-order-display-template.html
        sequenceflow-order-popup.html
        sequenceflow-order-write-template.html
        signal-definitions-display-template.html
        signal-definitions-popup.html
        signal-definitions-write-template.html
        signal-property-write-template.html
        string-property-write-mode-template.html
        subprocess-reference-display-template.html
        subprocess-reference-popup.html
        subprocess-reference-write-template.html
        task-listeners-display-template.html
        task-listeners-popup.html
        task-listeners-write-template.html
        text-popup.html
        text-property-write-template.html
\---shared
    +---file
    +---msg-template
    +---popups
    \---toolltemplate
        \---toolSelect

项目构建

测试环境构建

http://ci.ad.6starhome.com/?auto_refresh=true

正式环境构建

http://ci-r.ad.6starhome.com/?auto_refresh=true

参考文档

http://code.ad.6starhome.com/stephen/kop-ide-server/blob/master/README.md
http://code.ad.6starhome.com/david/kop-ide-portal/blob/develop/README.md
http://code.ad.6starhome.com/david/kop-ide-portal/blob/develop/IDE%E5%BC%80%E5%8F%91%E6%A1%86%E6%9E%B6%E6%96%87%E6%A1%A3.md