小工具式的开发 - 数据协议,通用界面

经过一段时间的实践,以及后台组的帮助。

最终确定的数据协议是用 Map,输入参数,及返回结果都是 Map

返回结果
Map
- headers:HeaderModel[dataField:String, headerText:String, visible:Boolean...]
- data:List<Map<String, Object>>
- totalPage:long
- currentPage:long

而上述的结果通过统一的过滤层处理,把原始的数据根据配置文件,处理成前台界面需要显示数据格式。配置示例如下:

<ItemsFilters>
<ItemsFilter name="contactFilter">
<item name="type" dispname="类型" width="80">
<dict senddict="true">
<item key="1" value="类型1" />
<item key="2" value="类型2" />
<item key="3" value="类型3" />
<item key="4" value="类型4" />
</dict>
</ItemsFilter>
<ItemsFilters>

而在最终的Flex服务类中, 过滤原始数据,也就是加上必要的 Headers 还有就是将 字典的数据翻译成对应的中文。

public Map<String, ?> queryContacts(Map<String, Object> params){
Map result = contactsDelegate.find(params);
Map map = new HashMap();

map.put("data", result.get("DATA"));
Map m = filterData("contactFilter", map);
m.put("totalPage", result.get("TOTAL_PAGE"));
return m;
}


Flex端,通过可配置的通用的查询界面(配置进去服务,方法名,查询参数的keys,),
界面结构

<bj:TitledBorderBox width="100%"
cornerRadius="5"
title="查询条件"
height="50"
top="5"
left="5"
right="5"
horizontalScrollPolicy="off"
verticalScrollPolicy="off"
styleName="sheetPanelStyle">
<c:QueryConditionBar id="queryCondition"
typeEnabled="{_typeEnabled}"
phoneNumberLabel="{phoneNumberLabel}"
phoneNumberRequired="{_phoneNumberRequired}"
typeDataProvider="{typeDataProvider}"
searchButtonClick="doSearch(event)"
width="100%"
height="100%"/>
</bj:TitledBorderBox>
<bj:TitledBorderBox title="查询结果"
cornerRadius="5"
width="100%"
layout="vertical"
height="100%"
top="55"
left="5"
right="5"
bottom="5"
styleName="sheetPanelStyle">
<c:Pager id="pager"
displayTitle=""
width="100%"
height="18"
pageChanged="onPageChanged(event)"/>
<mx:DataGrid id="resultDataGrid" doubleClickEnabled="true" itemDoubleClick="showItemDetails(event)"
width="100%"
height="100%">
</mx:DataGrid>
</bj:TitledBorderBox>


配置文件(上一篇文章那个仿Windows的UI框架的配置文件)

<menuItem key="302" label="联系人查询" icon="rttSearchIcon" clazz="com.nealmi.views.Query"
parameters="serviceName=contactService;methodName=find;startTimeKey=dateTimeStart;endTimeKey=dateTimeEnd;pageNumberKey=currentPage;pageSizeKey=pageSize;..." />


所有这些,最终的效果不过是一个简单的 查询 - 结果列表 界面。
[img]http://dl.iteye.com/upload/attachment/326494/68cb4942-855f-358c-9d43-a2f8c4898f8a.png[/img]


而一旦这一个界面Okay了,其他类似的界面不过是修改配置文件而已。我们已经通过时间证明前期花费的时间和精力是值得的。

唯一的一个问题就是,查询条件的生成,我一直没有找到足够简单的解决方法。

通过一系列的小工具(服务器的ItemFilter工具,通用的界面(QueryCondition,Pager,ServiceUtils))最终我们完成一个可以应对变化的界面。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值