简单的使用uflo的在线设计

one新建两张表格：

新建两张表格，一个是审批表另外一个是审批表的字表，用来显示保险的费用明细的内容

主表：'ID_', 'bigint(20)', 'NO', 'PRI', NULL, '''name', 'varchar(30)', 'NO', '', NULL, '''MEMO', 'varchar(30)', 'NO', '', NULL, '''CITY', 'varchar(30)', 'NO', '', NULL, '''CATEGORY', 'varchar(30)', 'NO', '', NULL, '''AMOUNT', 'varchar(30)', 'NO', '', NULL, '''PROCESS_PROMOTER_', 'varchar(60)', 'YES', '', NULL, '''STATE_', 'varchar(20)', 'YES', '', NULL, ''附表：cliamdetail'ID_', 'bigint(20)', 'NO', 'PRI', NULL, '''NAME', 'varchar(30)', 'NO', '', NULL, '''amount', 'varchar(30)', 'NO', '', NULL, '''MEMO', 'varchar(30)', 'NO', '', NULL, '''MASTER_ID_', 'bigint(20)', 'YES', '', NULL, '''STATE_', 'varchar(20)', 'YES', '', NULL, ''

表的格式如上，如果通过在线设计器的话可以简单的设置，当设计完成表格之后一定要点击生成数据库按钮，不然在线生成的数据库表格不会生成后台：
主表

附表（报销的明细）：

表格设置完成之后注意点击生成数据库按钮，然后就能在线生成上图所示的表格；

two 画流程图

流程图的画法设计的比较简单，只要简单的在浏览器里面简答的拖拉几下就可以，不需要特别的技巧。

需要特别注意的是在线设计的时候一定要主要保存，使用导入导出功能，否则很容易出现自己辛辛苦苦花了一大半的流程图丢失，所以使用导入导出功能可以有效的对流程图进行备份。

three 新建流程处理表

工具栏介绍：
工具栏的使用比较简单，当鼠标悬浮的时候会自动提示响应菜单的功能。使用起来比较容易上手。

新建审批表单代码如下：
除了用工具进行设计之外，我们还可以直接复制源码进行对表单的设置。如果两个表单比较形象的话可以使用源码的复制功能，进行快速的构建。

<p style="text-align:center"><strong>审批表</strong></p><p style="text-align:center">&nbsp;</p><div class="uflotoolbar" id="cke_434"><span action="uflo.form.completeTaskAction" class="uflotoolbarbutton" id="cke_391">完成任务</span><span action="uflo.form.seeProcessImageAction" class="uflotoolbarbutton" id="cke_392">查看流程图</span></div><p>&nbsp;</p><table border="0" class="ufloapproveform" style="width:100%">    <tbody>        <tr>            <td align="center" class="ufloapproveopinionbgcolor">            <div id="cke_7" style="margin:5px"><img src="http://localhost:8080/bdf-uflo/dorado/res/ckeditor/plugins/uflo/images/approvecomponent.png?t=D8HF" />处理任务的表单</div>            </td>        </tr>    </tbody></table><table border="1" cellpadding="5" cellspacing="2" style="border-collapse:collapse; border:1px solid rgb(245, 245, 245); font-size:12px; width:100%">    <tbody>        <tr>            <td style="text-align:right; width:90px">名称:</td>            <td>            <div bindingfield="name" class="uflotext" id="cke_431" style="width:100%" type="text">$F{name}</div>            </td>            <td style="text-align:right; width:90px">金额:</td>            <td>            <div bindingfield="AMOUNT" class="uflotext" id="cke_429" style="width:100%" type="text">$F{AMOUNT}</div>            </td>        </tr>        <tr>            <td style="text-align:right; width:90px">城市:</td>            <td>            <div bindingfield="CITY" class="uflotext" id="cke_427" style="width:100%" type="text">$F{CITY}</div>            </td>            <td style="text-align:right; width:90px">类别:</td>            <td>            <div bindingfield="CATEGORY" class="uflotext" id="cke_425" style="width:100%" type="text">$F{CATEGORY}</div>            </td>        </tr>        <tr>            <td style="text-align:right; width:90px">备注:</td>            <td>            <div bindingfield="MEMO" class="uflotext" id="cke_423" style="width:100%" type="text">$F{MEMO}</div>            </td>            <td colspan="2">&nbsp;</td>        </tr>    </tbody></table><p>&nbsp;</p><p>明细：</p><div class="uflogrid" id="cke_421"><div class="uflogridtoolbar">添加删除</div><div class="uflogridheader"><span bindingfield="amount" class="uflogridcolumn" style="width:33%">金额</span><span bindingfield="NAME" class="uflogridcolumn" style="width:33%">名称</span><span bindingfield="MEMO" class="uflogridcolumn" style="width:33%">描述</span></div><div class="uflogridcontent"><span class="uflogridcontentvalue" style="width:33%">......</span><span class="uflogridcontentvalue" style="width:33%">......</span><span class="uflogridcontentvalue" style="width:33%">......</span></div></div><p>&nbsp;&nbsp; 查看审批历史：</p><table border="0" class="ufloapproveopinion" style="width:100%">    <tbody>        <tr>            <td align="center" style="background-color:#fdfcc2">            <div id="cke_8" style="margin:5px"><img src="http://localhost:8080/bdf-uflo/dorado/res/ckeditor/plugins/uflo/images/component.png?t=D8HF" />任务处理历史信息</div>            </td>        </tr>    </tbody></table><p>&nbsp;</p>

图片如下：
设计完成之后的图片

另外还有一张流程表单只需要在上面的表单中删除“查询历史，处理任务表单，工具栏”，并且添加发起流程按钮

整合流程：

1，找到模板在线设计器，点击空白部分，找到右侧的属性面板的流程属性下面的url，并且设置为发起流程表单。
2，点击每一个的任务处理人，同样找到属性面板的流程属性下面的url，并且把url设置成审核表单；

注意这里url设置成两个不一样的表单，对应上图中的审核表单和发起流程表单

3，依然是模板在线设计器，点击空白部分找到“分类ID”，这里分类ID设置成为用户属于哪个组，这个在注册公司的时候会要求必须填写。同样也可以在properties里面进行设置。
4，最后整合完成之后一定要点击发布新模板按钮；否则将不能成功部署；

测试：

1，部署流程模板
2，点击左侧的开始流程按钮，之后就会成功开始一个流程，开始流程的时候会要求填写需要的表单。
2，点击左侧的代办任务，你会发现刚才开始的任务已经开始，你可以对相应的流程表单进行处理；处理的过程中会要求你填写处理意见；如下图所示：