PageFlow 页面流

功能

将一个或多个页面以流程向导的方式展现，页面内容以 iframe 的形式嵌入，实现页面流程的操作体验。

参数

参数名	参数类型	是否必须	默认值	描述
flow	java.lang.String	是	ognl:pageFlow	该名称与流程配置文件名称相同

使用说明

页面流由一个主页面、一个或多个子页面、流程配置数据（目前提供有 XML 格式（默认）及数据库配置模式，用户也可自己扩展页面流的数据获取方式）三部份组成。
主页面：内容比较固定，包括流程导航、流程图、操作按钮、页面流组件。
子页面：由开发人员自定义完成。
流程配置文件：由页面流配置工具生成。
页面流组件：即 jwcid="@PageFlow"
页面流中可定义子页面流，通过流程配置数据中在 step 节点增加 subflow 属性配置子页面流；subflow 对应的值为 tab/page,设置为 tab 时该子页面流对用户无感知，设置为 page 时，在标签页打开新的页面流执行，该页面流与父页面流从代码层次上互不影响
自定义动态页面流的配置方式：在 global.properties 中配置 pageflow.flowconfig，对应的值为自定义类的类路径

在 AppEngine 项目中需配置：
pageflow.flowconfig=com.ailk.appengine.res.pageframe.common.DynamicFlowConfig
WADE 项目采用默认实现即可
自定义绑定参数

在子页面中“下一步”按钮增加 nextparams 属性，如
```
<button id="bnext" nextparams="a=b&c=d" name="bnext"></button>
```
增加的参数将传递到下一页面

JavaScript API

js文件:component\pageflow\pageflow.js

var flow = window.getFlow();	//在主界面获取页面流对象
var flow = parent.getFlow();	//在页面流嵌套的页面中调用页面流对象
flow.getName();			//获取 flow 的名称
flow.next();			//触发“下一步”按钮
flow.back();			//触发“上一步”按钮
flow.cancel();			//取消当前流程，重新开始导航
flow.submit();			//页面流提交
flow.cleanup();			//流程清除，一般不需要开发人员控制
flow.showImage();		//显示或隐藏流程图
flow.getStep(noi);		//获取流程配置数据，noi：如果是 string 型则通过 name 获取，如果是 int 型则通过索引获取
flow.getActive();		//获取当前操作的步骤，返回的是一个 JSON 对象，对应配置里的数据
flow.getStepMonitor(noi);	//获取 noi 指定步骤的监控数据
flow.isMonChanged(noi);		//判断 noi 指定的步骤是否有修改了的监控数据
flow.next(noi,ignoreMonitor,notTriggerNextButton)//通过代码调用执行下一步，与按钮的区别为默认不触发 nextButton 上绑定的事件并且不执行监听器。ignoreMonitor：是否忽略监听器，默认去忽略；notTriggerNextButton：是否触发 nextButton 事件，默认不触发；noi：跳转到指定步骤，默认与下一步一致
flow.back(noi,notTriggerNextButton)//通过代码调用指定上一步，与按钮的区别为默认不触发 backbutton 上绑定的事件。notTriggerBackButton：是否触发 backbutton 上绑定的事件,默认为 true，即不触发；noi：跳转到指定步骤，默认与上一步一致

示例

示例说明，查询客户列表，添加或修改客户信息，并填写操作日志。

HTML 代码

<div class="c_guide">
	<div class="c_guideFn">
		<a id="flowimg" name="flowimg" class="unfoldFlow" href="javascript:void(0);"></a>
	</div>
	<div class="c_guideStep">
		<ul id="flowguide">
			<li name="guide_begin" id="guide_begin" class="first" stepname="begin" stepindex="0"><a href="javascript:void(0)">开始</a></li>
		</ul>
	</div>
	<div class="c_flow" id="flow" name="flow" style="height:100px; display:none;">
		<div class="fn">
			<div class="left e_dis"><a href="javascript:void(0);"><span></span></a></div>
			<div class="right"><a href="javascript:void(0);"><span></span></a></div>
		</div>
		<div class="content">
			<div class="node">
				<a href="javascript:void(0);" id="flow_start" name="flow_start" class="start" style="left:31px; top:18px;">开始</a>
				<a href="javascript:void(0);" id="flow_queryCustList" name="flow_queryCustList" class="step" style="left:124px; top:18px;"><span>查询客户列表</span></a>
				<a href="javascript:void(0);" id="flow_switchUpdateOrDelete" name="flow_switchUpdateOrDelete" class="judge" style="left:232px; top:12px;">是否新增</a>
				<a href="javascript:void(0);" id="flow_createCust" name="flow_createCust" class="step" style="left:349px; top:18px;"><span>新增资料</span></a>
				<a href="javascript:void(0);" id="flow_updateCust" name="flow_updateCust" class="step" style="left:349px; top:60px;"><span>修改资料</span></a>
				<a href="javascript:void(0);" id="flow_logCust" name="flow_logCust" class="step" style="left:436px; top:18px;"><span>登记日志</span></a>
				<a href="javascript:void(0);" id="flow_end" name="flow_end" class="end" style="left:523px; top:18px;">结束</a>
			</div>
			<div class="line">
				<div class="l right" style="left:109px; top:32px;"></div>
				<div class="l right" style="left:220px; top:32px;"></div>
				<div class="l right" style="left:334px; top:32px;"></div>
				<div class="l right" style="left:421px; top:32px;"></div>
				<div class="l right" style="left:508px; top:32px;"></div>
				<div class="l" style="left:284px; top:74px; width:65px;"></div>
				<div class="v" style="left:282px; top:57px; height:20px;"></div>
				<div class="l" style="left:420px; top:74px; width:56px;"></div>
				<div class="v top" style="left:473px; top:50px; height:27px;"></div>
			</div>
		</div>
	</div>
	<div class="c_guideShadow"></div>
	<span jwcid="@Foreach" source="ognl:config.getStepSet('step')" value="ognl:step" index="ognl:rowIndex">
		<iframe class="c_guideFrame" jwcid="@Any" src="about:blank" type="iframe" id="ognl:step.name" name="ognl:step.name" index="ognl:rowIndex" height="0px" frameborder="0"></iframe>
	</span>
	<div class="c_guideSubmit">
		<a href="javascript:void(0);" id="bback" name="bback">上一步</a>
		<a href="javascript:void(0);" id="bnext" name="bnext">下一步</a>
	</div>
</div>
<span jwcid="@PageFlow" flow="ognl:pageName"></span>

流程配置代码（xml）

<flow desc="客户资料管理">
	<step
		name="begin"
		desc="开始"
		nextstep="queryCustList"
		/>
	<step
		name="queryCustList"
		desc="查询客户列表"
		page="CustList"
		nextstep="switchUpdateOrDelete"
		nextbutton="bnext"
		monitor="OPER_TYPE,cust"
		transdata="cust"
		/>
	<switch name="switchUpdateOrDelete" expression="OPER_TYPE" default="0" desc="是否新增">
		<case value="0" nextstep="createCust" desc="新增"/>
		<case value="1" nextstep="updateCust" desc="修改"/>
	</switch>
	<step
		name="createCust"
		desc="新增资料"
		page="CustEdit"
		nextstep="logCust"
		monitor="cust"
		nextbutton="bnext"
		transdata="queryCustList@QueryCond,cust"
 		submitdata="cust"
		/>
		<!-- @链接的是页面流内其他 step 内的区域，用于在页面流内跨页面获取数据  -->
	<step
		name="updateCust"
		desc="修改资料"
		page="CustEdit"
		listener="queryCust"
		nextstep="testSubFlow"
		nextbutton="bnext"
		submitdata="cust"
		/>

	<step
		name="testSubFlow"
		subflow="tab"
		desc="testsubflow"
		page="SubCustFlow"
		listener=""
		nextstep="logCust"
	/>
	<!--
		subflow="tab" 即标记为子页面流
		当 subflow 设置为 tab 时，page 参数指向的是配置文件的路径，不需要写配置文件的后缀.pf;
		当 subflow 设置为 page 时，page 参数指向的另一个页面流在 application 中配置的 pageName;
	-->
	<step
		name="logCust"
		desc="日志"
		page="CustLog"
		nextstep="end"
		submitdata="log"
		/>
	<step
		name="end"
		desc="结束"
		/>
</flow>

流程配置代码（xml）国际化支持

流程配置国际化支持：step 节点中 desc 值以i18n:开始，以国际化配置文件中 key 值结尾：

流程配置代码

<flow name="VipcustCreate" desc="i18n:page.custflow.title">
	<step
		name="begin"
		desc="i18n:page.custflow.title.start"
		nextstep="queryCustList"
		/>
	<step
		name="queryCustList"
		desc="i18n:page.custflow.title.querycustlist"
		page="CustList"
		nextstep="switchUpdateOrDelete"
		nextbutton="bnext"
		monitor="OPER_TYPE,cust"
		transdata="cust"
		/>
	<switch name="switchUpdateOrDelete" expression="OPER_TYPE" default="0" desc="i18n:page.custflow.title.switchupdateordelete">
		<case value="0" nextstep="createCust" desc="i18n:page.custflow.title.create"/>
		<case value="1" nextstep="updateCust" desc="i18n:page.custflow.title.update"/>
	</switch>
	<step
		name="createCust"
		desc="i18n:page.custflow.title.createcust"
		page="CustEdit"
		nextstep="logCust"
		monitor="cust"
		nextbutton="bnext"
		submitdata="cust"
		/>
	<step
		name="updateCust"
		desc="i18n:page.custflow.title.updatecust"
		page="CustEdit"
		listener="queryCust"
		nextstep="logCust"
		nextbutton="bnext"
		submitdata="cust"
		/>
	<step
		name="logCust"
		desc="i18n:page.custflow.title.logcust"
		page="CustLog"
		nextstep="end"
		submitdata="log"
		/>
	<step
		name="end"
		desc="i18n:page.custflow.title.end"
		/>
</flow>

国际化英文配置：i18n.en_US

page.custflow.title=VIP User Information
page.custflow.title.back=Back
page.custflow.title.next=Next
page.custflow.title.begin=Begin
page.custflow.title.start=Start
page.custflow.title.querycustlist=Search List
page.custflow.title.switchupdateordelete=Do you want to add new ?
page.custflow.title.create=New
page.custflow.title.update=Modify
page.custflow.title.createcust=New
page.custflow.title.updatecust=Modify
page.custflow.title.logcust=Log
page.custflow.title.end=End

国际化中文配置：i18n.zh_CN

page.custflow.title=VIP客户资料编辑
page.custflow.title.back=上一步
page.custflow.title.next=下一步
page.custflow.title.begin=开始
page.custflow.title.start=开始
page.custflow.title.querycustlist=查询客户列表
page.custflow.title.switchupdateordelete=是否新增
page.custflow.title.create=新增
page.custflow.title.update=修改
page.custflow.title.createcust=新增资料
page.custflow.title.updatecust=修改资料
page.custflow.title.logcust=登记日志
page.custflow.title.end=结束

图示
查询客户列表

新增资料

登记日志
开始客户查询列表是否新增新增资料登记日志修改资料结束
登记日志

日志内容：
上一步完成

功能

参数

使用说明

自定义绑定参数

JavaScript API

示例

HTML 代码

流程配置代码（xml）

流程配置代码（xml）国际化支持

流程配置代码

国际化英文配置：i18n.en_US

国际化中文配置：i18n.zh_CN

图示