普元EOS RichWeb(富客户端)实践总结

最近公司未来一银行项目要使用到普元的EOS，客服是普元合作机构，没办法，必须将系统在EOS平台上部署开发，认真学习了2个星期，对EOS6.0的印象还是非常的好。丰富的页面开发组件，SOA我不是特别特别的说的出来，看了SOA相关文档和对比传统的开发模式，EOS的思想非常值得学习，EOS里面的组件设计，能更好的增加代码的可重复性，模块的独立性，这对于一个大型银行系统来说，所带来的好处不言而喻。不过这些高深莫测的名词也掩盖不来它背后一些基本的东西，大量使用接口，XML，依赖注入等等。概念是用来推销的。在使用过程中也渐渐发现存在的一些问题，甚至是软件BUG，当然这都是可以理解的，毕竟6.0刚出来不久，相信以后的版本会有更多值得我们期待和改进的地方。

EOS RichWeb组成

一、 理论基础

javascript api EOS RichWeb提供了字符串处理，日期处理，dom操作，ajax操作等js函数。
标签库 所谓的标签库，跟我们平时使用的JSTL标签和struts标签功能原理都是一样，可以联想起来使用。 EOS RichWeb共提供了6大类的标签。
- Bean类：用于把数据区、Cookie、Http头、http请求参数以及资源文件中的内容输出。
- Html类：在html控件元素基础上进行了扩展和增强。
- Logic类：提供了一些逻辑判断标签，用于jsp页面逻辑控制。
- Dict类：生成与业务字典相关的html控件元素。
- Webcomp类：提供了date，popmenu，panel，tabpanel，tree等高级控件。
- RichClient类：提供了datacell，comboselect等ajax控件。

标签名	功能	备注
Bean 类	用于把数据区、Cookie、Http头、http请求参数以及资源文件中的内容输出
bean_write	从数据区获取数据并打印出数据
bean_set	将数据并写入数据区。相当于：request.setAttribute
bean_romove	移除数据区数据。相当于：request. romove
bean_size	获取数据区数据集合长度
bean_message	国际化消息和struts的Message一个用法
Html类	提供了对基本HTML标签的封装，支持DataContext.
Logic类	提供了一些逻辑判断标签，用于jsp页面逻辑控制
Webcomp类	提供了date，popmenu，panel，tabpanel，tree等高级控件
RichClient类	提供了datacell，comboselect等ajax控件

PS：

1) EOS的RichWeb和建设银行的标签库所提供的全部功能基本一样，数据集遍历，日期类型甚至页面的action跳转方式都类似，建议可参考于CCBCSPS的WEB层来掌握EOS RichWeb开发。

2. 比较运算（等于<l:equal>）判断（<l:empty>）和逻辑循环（<l:iterate>）结合JSTL标签的<c:if/> <c:foreach />学习很容易。

3．Webcomp类和RichClient类是实现EOS RichWeb的高级控件，特殊的页面效果等等都可以简单的实现。控件大部分使用ajax实现，效率很高。

二、 标签实例

1. 单选列表

单行选择控件由两个标签组成：<w:radioGroup> 和<w:rowRadio>,<w:rowRadio>必须嵌套在<w:radioGroup>中才能使用，<w:rowRadio>可以嵌套<h:param>用来设置行参数。在使用单行选择控件标签时，嵌套<w:panel>。

例子：

对一个查询的学生信息viewList列表进行遍历并展示，使用单行选择控件<w:radioGroup> 配合logic类的<l:iterate>标签实现, <w:rowRadio>中使用<h:param>来设置勾选选中的参数。

[xhtml] view plaincopyprint

<table>
<w:panel>
<w:radioGroup id=”group1″>
<l:iterate property=”viewList” id=”id01″>
<tr align=”center” class=”<l:output evenOutput=’EOS_table_row’ />”>
<td>
<w:rowRadio>
<h:param name=’stuid’ iterateId=’id01′ property=’stuid’ />
</w:rowRadio>
</td>
<td align=”center”>
<b:write iterateId=”id01″ property=”stuid” />
</td>
<td>
<b:write iterateId=”id01″ property=”stuname” />
</td>
<td>
<b:write iterateId=”id01″ property=”stuage” />
</td>
<td>
<b:write iterateId=”id01″ property=”stusex” />
</td>
</tr>
</l:iterate>
</w:radioGroup>
</table>
</w:panel>

2. 多行选择控件

多行选择控件由两个标签组成：<w:checkGroup> 和<w:rowCheckbox>。<w:rowCheckbox>必须嵌套在<w:checkGroup>中才能使用，<w:rowCheckbox>可以嵌套<h:param>用来设置行参数.使用方法和单选一样，更多效果可参考EOS RichWeb开发指南，对控件的JS接口进行简单的配置即可实现。在使用多行选择控件标签时，嵌套<w:panel>。

[c-sharp] view plaincopyprint

<table>
<w:panel>
<w:checkGroup id=”group1″>
<l:iterate property=”viewList” id=”id01″>
<tr align=”center” class=”<l:output evenOutput=’EOS_table_row’ />”>
<td>
<w: rowCheckbox >
<h:param name=’stuid’ iterateId=’id01′ property=’stuid’ />
</w: rowCheckbox >
</td>
<td align=”center”>
<b:write iterateId=”id01″ property=”stuid” />
</td>
<td>
<b:write iterateId=”id01″ property=”stuname” />
</td>
<td>
<b:write iterateId=”id01″ property=”stuage” />
</td>
<td>
<b:write iterateId=”id01″ property=”stusex” />
</td>
</tr>
</l:iterate>
</w:checkGroup >
</table>
</w:panel>

由两个标签组成：<w:checkGroup> 和<w:rowCheckbox>。使用方法和单选一样，<w:rowCheckbox>必须嵌套在<w:checkGroup>中才能使用，<w:rowCheckbox>可以嵌套<h:param>用来设置行参数。更多效果可参考EOS RichWeb开发指南，对控件的JS接口进行简单的配置即可实现。在使用多行选择控件标签时，需嵌套<w:panel>。

3. 同页面多个列表

例子：在同一页面展示学生信息和学校信息2个列表。

后台处理

将学生信息列表stuList和学校信息列表schList保存在viewMap中待显示，代码如下：

HashMap map = new HashMap();

map.put(“stuList”, stuList) ;

map.put(“schList”, schList)

request.setAttribute(viewMap,map);

页面处理

⑴新建页面stuschList.jsp如下：

[c-sharp] view plaincopyprint

<!– 取出HashMap数据设置到 request –>
<%
HashMap viewMap =(HashMap)request.getAttribute(“viewMap”) ;
Iterator itkey = viewMap.keySet().iterator();
while(itkey.hasNext()){
String key = (String)itkey.next();
request.setAttribute(key,viewMap.get(key));
}
%>

<!– 取出HashMap数据设置到 request –> <% HashMap viewMap =(HashMap)request.getAttribute(“viewMap”) ; Iterator itkey = viewMap.keySet().iterator(); while(itkey.hasNext()){ String key = (String)itkey.next(); request.setAttribute(key,viewMap.get(key)); } %>

通过上段代码可以将viewMap中的stuList和schList设置到request中，方便我们用<l: iterate >遍历取值。值得注意的是：在后台中我们进行map.put(“stuList”, stuList) ;map.put(“schList”, schList)的时候，必须保证key和value的变量名称是一样的，否则使用上段代码将不能达到预期效果。

⑵然后使用Logic类的<l: iterate >标签分别对其进行展示。

[xhtml] view plaincopyprint

<!—学生信息stuList–>
<form action=””>
<w:panel id=”stu” width=”100%” title=”学生信息列表”>
<table border=”1″ height=”5″ width=”100%” >
<tr align=”center”>
<td>选择</td>
<td>学 </td>
<td>姓名</td>
<td>年龄</td></tr>
<w:radioGroup id=”group1″>
<l:iterate property=”stuList” id=”id01″><!—这里获取stuList 开始遍历–>
<tr align=”center”>
<td>
<w:rowRadio>
<h:param name=’stuid’ iterateId=’id01′ property=’stuid’ />
<!—这里设置勾选需要提交的值可以有多个<h:param >–>
</w:rowRadio>
</td>
<td align=”center”><b:write iterateId=”id01″ property=”stuid” /> </td>
<td><b:write iterateId=”id01″ property=”stuname” /> </td>

声明：本站部分文章及图片源自用户投稿，如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢！

普元EOS RichWeb(富客户端)实践总结

相关推荐