EOS7在线开发SCE首页改造

5年前

改造的需求


为了让在线平台更贴合于业务系统,某客户针对目前的sce首页提出了改造的需求,主要的功能点集中在如何与业务进行整合。系统sce首页提供的资源树,只是按照功能和资源划分,分为模块、数据集、表单、视图和流程。要与业务接口,光有资源和功能是不够的,还需要与业务相关的分类。在资源新增向导中,目前只有系统提供的一些定义的资源,而在客户的需求中也需要添加结合业务的信息。针对这些情况,我们提供了一个利用现有资源重新开发SCE首页的方案。


改造的方案


sce首页改造

在不改动原有sce首页的基础上,针对现有的数据资源,进行重新开发,仍然利用左侧资源树,右侧iframe嵌套的结构进行开发,而资源树的使用上也采用了与eos7相结合的nui-tree。使用nui-tree的好处是使用方便,容易扩展,操作简单。


<div id="layout1" class="nui-layout" style="width:100%;height:100%;">
	<div id="region1" region="west" title="应用资源树" showHeader="true" class="sub-sidebar" width="240" allowResize="false">
		<ul id="tree1" class="nui-tree" url="com.primeton.sce.remould.applicationResourceTreeService.queryApplicationResourceTree.biz.ext" dataField="data"
			style="width:98%;height:98%;padding:5px;" showTreeIcon="true" textField="text" idField="id" resultAsTree="false" expandOnNodeClick="true"
			parentField="pid" showTreeLines="true" onnodeclick="onNodeClick" contextMenu="#applicaitonTreeMenu" onbeforeload="onBeforeTreeLoad"  style="background:#fafafa;">
	    </ul>
		<!-- nui-tree弹出菜单 -->
		<ul id="applicaitonTreeMenu" class="nui-contextmenu"  onbeforeopen="onBeforeOpen">
		</ul>
    </div>
    <div title="center" region="center" style="border:0;padding-left:5px;padding-top:5px;">
    	<!--Tabs-->
       		<div id="applicationtabs"  style="width:100%;height:100%;border:0;">
       			<iframe width="100%" scrolling="auto" height="100%" frameborder="0" bgcolor="#F7FCFD" style="min-height:300px;" src="<%=request.getContextPath() %>/remould/sceRemould/Welcome.jsp" id="mainFrame" name="main"></iframe>
		    </div>
		</div>
	</div>
</div>


业务分类以及定义信息扩展

根据系统表结构,扩展出表单,视图,流程的扩展表。分别与cap_from, cap_view, cap_flow中的formid,viewid,flowid进行1对1关联。在资源新增定义页面,新增业务信息,通过分别调用系统提供的资源创建逻辑流,和保存业务资源逻辑流完成业务信息和定义信息相关联。


业务信息修改及展现

首页右侧iframe展示详细的资源(表单、视图等)和业务扩展信息。通过使用tab页的方式实现了在同一页面展示业务定义信息和资源开发页面。



<div id="layout1" style="width:100%;height:100%;">
		<div id="applicationtabs" class="nui-tabs  bg-toolbar" activeIndex="0" style="width:100%;height:100%;border:0;">
		    <div name="flow_define"
		    title="流程定义信息" url="<%=request.getContextPath() %>/remould/sceRemould/procDefine.jsp" visible="true" >
		    </div>
		    <div name="flow_design"
		    title="流程设计" url="<%=request.getContextPath() %>/ap/sce/flow/composer/bizProcessCustomDg.jsp?moduleId=<%=request.getParameter("moduleId") %>&appName=default&categoryId=default&resource=<%=request.getParameter("resource") %>" >
		    </div>
		</div>
</div>




详细改造步骤


sce首页

利用nui布局以及nui-tree实现整体页面的构建。针对nui-tree的点击事件,根据点击节点类型,异步加载下级节点。后续添加nui-tree的右键菜单事件,点击事件,刷新事件等。nui-tree点击事件,点击节点刷新iframe,根据节点信息,请求不同的url,跳转到不同的资源开发页面。新增和编辑的跳转的url可以根据%PRIMETON_HOME%/apache-tomcat-5.5.20/webapps/default/ap/sce/js/下的resource.js中提取到。


刷新树接口

完成新增操作后,需要在页面重写refreshAndOpenResource方法,提供刷新树和打开页面资源的入口。


/**

*刷新界面并打开资源,一般在新建向导的成功界面调用。

**/

function refreshAndOpenResource(modelid,resource,type,categoryId){


}


开发业务定制页面

在完成上述功能后,需要进行不同资源的业务信息扩展页面,通过页面获取的datasetid,formid,viewid,flowid等与原有在线开发系统进行关联。


sce改造中遇到的问题


sce的首页是eos7产品内容,其代码并没有开源出来,在得到研发的帮助后,改变思路,将改造变成利用现有资源进行重新定制,这样既不用修改eos产品内容,又可以最大限度的进行自己需要的改造。

在了解了在线开发整体的思路和页面开发的结构后,重新定制就水到渠成。例如我们需要在新的页面中定义资源树的操作,例如打开表单设计器等。这些url即包括页面流,也包括jsp页面,通过分析resourse.js就可以从中提取到各个操作所需的url和需要的参数。

COMMENTS

3 个回应

Normal_c46dbf5e8f53ff9c7b34a5918ca5ba9d65908

gocom009 2014年09月25日 12:00

@liuyichao 改变页面要这么复杂吗?之前一个普元说直接复制url就可以了啊

回复


Normal

liuyichao 2014年09月25日 12:59

@gocom009 :看需求是什么样的吧,那个是整个重新把首页给替换掉了....

回复


Normal_c46dbf5e8f53ff9c7b34a5918ca5ba9d65908

gocom009 2014年09月25日 14:19

@liuyichao 恩恩,我就是要整个替换掉,教教我,谢谢,为什么我复制url就不行?

回复


需要 后方可回复
如果没有账号可以 一个帐号。