论坛首页 → Web前端技术论坛 →

自己做的Ajax4Jsf 的几个小例子

浏览 10036 次
锁定老帖子 主题：自己做的Ajax4Jsf 的几个小例子
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
  • former
  • 等级: 二星会员
  • 性别:
  • 文章: 102
  • 积分: 257
  • 来自: 南京
   发表时间：2007-03-09  

JSF好像充满了争议，被很多Java大牛们所抱怨，而很多主流厂商却非常支持，毕竟是J2EE5的亲生儿子嘛。

而Ajax却是Web2.0的热门技术之一，N多客户问我，今天你们Ajax了没有？

Ajax4Jsf是结合这两样技术的一个开源项目，本周刚被Jboss从Exadel收购（合作？），闲暇时分，和一哥们一同试了把它的功能，现交个作业。

首先，A4J是开源的，而且文档比较齐全，demo丰富，它有个分支是G4J，即GWT4JSF，但是这次Jboss收购了之后好像没有在其官方网站上看到G4J的消息，如果大家感兴趣，The Server Side 上有说G4J的文章可以参考。

其次，A4J除了能很顺手的用手工编写Jsp的方式书写（废话），Exadel公司还出了一款功能强大的Eclipse Plugin：Exadel Studio Pro，现在也一并给了Jboss，并可以免费使用，而且将于今年夏天开源，感兴趣的朋友可以试用下。

现在让我们用一个注册页面的小例子，看看他的几个简单的功能：

1.根据鼠标事件，自动验证输入值并返回结果

效果1：验证中

效果2：验证错误

效果3：验证成功

功能很简单，代码也简单：

xml 代码
<t:column><a4j:region id="reg_email">
  1. <a4j:region id="reg_email">  
  2.     <t:panelGrid columns="4" cellpadding="0" cellspacing="0"  
  3.         border="0">  
  4.         <t:column width="12">  
  5.             <t:outputText value="电子邮件" />  
  6.         t:column>  
  7.         <t:column>  
  8.                 <t:inputText value="#{loginBean.email}" id="email">  
  9.                     <a4j:support  
  10.                         actionListener="#{loginBean.processEmailValidation}"  
  11.                         event="onblur" reRender="detail_mail">  
  12.                     a4j:support>  
  13.                 t:inputText>  
  14.         t:column>  
  15.         <t:column>  
  16.             <a4j:status for="reg_email">  
  17.                 <f:facet name="start">  
  18.                     <t:panelGrid border="1" cellpadding="0" cellspacing="0"  
  19.                         columns="1" styleClass="bighei" bgcolor="#FFF200">  
  20.                         <t:outputText value="验证中.." />  
  21.                     t:panelGrid>  
  22.                 f:facet>  
  23.                 <f:facet name="stop">  
  24.                     <a4j:outputPanel id="detail_mail">  
  25.                         <t:panelGrid border="1" cellpadding="0" cellspacing="0"  
  26.                             columns="1" styleClass="bighei" bgcolor="#FFF2E9"  
  27.                             rendered="#{!loginBean.validEmail}">  
  28.                             <t:outputText value="#{loginBean.validEmailStr}">t:outputText>  
  29.                         t:panelGrid>  
  30.                         <t:panelGrid border="1" cellpadding="0" cellspacing="0"  
  31.                             columns="1" styleClass="bighei" bgcolor="#E2F5FF"  
  32.                             rendered="#{loginBean.validEmail}">  
  33.                             <t:outputText value="邮箱地址填写正确！">t:outputText>  
  34.                         t:panelGrid>  
  35.                     a4j:outputPanel>  
  36.                 f:facet>  
  37.             a4j:status>  
  38.         t:column>  
  39.     t:panelGrid>  
  40. a4j:region>  

加粗的部分是a4j的一些页面片段，简单介绍一下：

xml 代码
  1. <a4j:support  
  2.     actionListener="#{loginBean.processEmailValidation}"  
  3.     event="onblur" reRender="detail_mail">  
  4. a4j:support>  

监听inputText 的鼠标事件onblur，并执行loginBean中的processEmailValidation方法，执行完毕后刷新id为"detail_mail"的标签区域。<a4j:status for="reg_email"></a4j:status><a4j:status for="reg_email"><a4j:outputpanel id="detail_mail"><a4j:status for="reg_email">监听reg_email定义的区域中的状态变化， 并通过<f:facet name="&amp;lt;strong&amp;gt;start&lt;/strong&gt;"></f:facet><f:facet name="start"><f:facet name="start">和<f:facet name="stop"></f:facet><f:facet name="stop"><f:facet name="start"><f:facet name="stop">显示状态改变时，和改变后的页面。<a4j:outputpanel id="detail_mail"></a4j:outputpanel><a4j:outputpanel id="detail_mail"> </a4j:outputpanel></f:facet></f:facet></f:facet></f:facet></f:facet></a4j:status></a4j:outputpanel></a4j:status><a4j:status for="reg_email"><a4j:outputpanel><a4j:status for="reg_email"><f:facet name="start"><f:facet name="stop"><f:facet name="start"><f:facet name="stop"><a4j:outputpanel>中的内容比较简单，根据bean中的validEmail属性的值，决定显示那个panelgrid。这里应该有更简单的写法，不知道大家有没有发现？</a4j:outputpanel></f:facet></f:facet></f:facet></f:facet></a4j:status></a4j:outputpanel></a4j:status>

bean部分的验证代码更简单:

java 代码
  1. public void processEmailValidation(ActionEvent input) {   
  2.     if (ModelValidation.validateEmail(getEmail())) {   
  3.         try {   
  4.             userService.checkEmail(getEmail());   
  5.             setValidEmail(true);   
  6.         }   
  7.         catch (ReduplicateException e) {   
  8.             setValidEmail(false);   
  9.             setValidEmailStr("对不起，此email已被注册!");   
  10.         }   
  11.     }   
  12.     else {   
  13.         setValidEmail(false);   
  14.         setValidEmailStr("邮件地址格式错误！");   
  15.     }   
  16. }  

其中userService通过Ioc注入，与数据库交互，并进行一些简单的如长度等的验证。

2.验证码图片，并可通过点击图片自身来刷新

效果：

页面代码：

xml 代码
  1. <a4j:outputPanel id="detail_media">  
  2.     <a4j:commandLink reRender="detail_media">  
  3.         <a4j:mediaOutput element="img" cacheable="false"  
  4.             session="false" createContent="#{loginBean.paint}"  
  5.             value="#{paintData}" mimeType="image/jpeg" />  
  6.     a4j:commandLink>  
  7. a4j:outputPanel>  

java bean中代码:

java 代码
  1. public void paint(OutputStream out, Object data) throws IOException {   
  2.     if (data instanceof PaintData) {   
  3.         PaintData paintData = (PaintData) data;   
  4.         // 生成一个在1000－9999之间的随机数   
  5.         Random randomNumber = new Random();   
  6.         int outPutNumber_int = 0;   
  7.         while (outPutNumber_int < 1000) {   
  8.             outPutNumber_int = randomNumber.nextInt(9999);   
  9.         }   
  10.         // 生成干扰线的随机数   
  11.         int outPutLine = 0;   
  12.         outPutLine = randomNumber.nextInt(100);   
  13.         String outPutNumber_str = String.valueOf(outPutNumber_int);   
  14.         BufferedImage img = new BufferedImage(paintData.getWidth(),   
  15.                 paintData.getHeight(), BufferedImage.TYPE_INT_RGB);   
  16.         Graphics2D graphics2D = img.createGraphics();   
  17.         graphics2D.setBackground(paintData.getBackground());   
  18.         graphics2D.setColor(paintData.getDrawColor());   
  19.         graphics2D.clearRect(0, 0, paintData.getWidth(), paintData   
  20.                 .getHeight());   
  21.         graphics2D.drawLine(outPutLine, outPutLine, paintData.getWidth()   
  22.                 - outPutLine, paintData.getHeight() - outPutLine);   
  23.         graphics2D.drawString(outPutNumber_str, 19, 16);   
  24.         ImageIO.write(img, "jpeg", out);   
  25.     }   
  26. }  

简单聊一下，中的paint方法得到图片的流。这个方法必须这样定义：public void paint(OutputStream out, Object data).出图片的方法很多，这里出个最简单的做例子。

页面则更为简单，除了之前说的

上面2个例子没有写任何js，java bean也没有做过多的更改，个人认为a4j还是比较容易与jsf结合的。而建立在a4j之上的richi faces组件有着更好的页面效果和更丰富的功能。

</a4j:region></t:column>
返回顶楼
         
  • flydeer2003
  • 等级: 初级会员
  • 性别:
  • 文章: 24
  • 积分: 49
  • 来自: 安徽
   发表时间：2007-03-16  
好东西，学习了，ajax的效果确实非常诱人，也非常符合web2.0的技术需求，再加上和JSF的结合，很棒的组合，其实JSF的实现也是依赖于js的，曾看到有网友说sun是想借ajax来挽救java在J2EE领域的表现，尤其是在web2.0逐渐盛行之时，不管怎样，我还是很看好的。
返回顶楼
          回帖地址
0 请登录后投票
  • lixigua
  • 等级: 二星会员
  • 性别:
  • 文章: 1123
  • 积分: 156
  • 来自: 上海
   发表时间：2007-04-02  
我找了找ajax4jsf的例子，实在不好找呢。下载的代码竟然没有例子。
修改：
没看仔细，在jboss上已看到了。
返回顶楼
          回帖地址
0 请登录后投票
  • czguofei
  • 等级: 初级会员
  • 文章: 2
  • 积分: 34
  • 来自: ...
   发表时间：2007-04-02  
正在研究呢，谢谢
返回顶楼
          回帖地址
0 请登录后投票
  • former
  • 等级: 二星会员
  • 性别:
  • 文章: 102
  • 积分: 257
  • 来自: 南京
   发表时间：2007-04-03  
lixigua 写道
我找了找ajax4jsf的例子，实在不好找呢。下载的代码竟然没有例子。
修改：
没看仔细，在jboss上已看到了。


在jboss网站的demo菜单下就有例子和源码,很详细.我做的只是把他的demo复杂话,并且用在实际项目中.
返回顶楼
          回帖地址
0 请登录后投票
  • wangwenpinghello
  • 等级: 初级会员
  • 性别:
  • 文章: 10
  • 积分: 38
   发表时间：2007-04-18  
太好了，能写一个动态树的例子就更好了
返回顶楼
          回帖地址
0 请登录后投票
  • likehibernate
  • 等级: 初级会员
  • 性别:
  • 文章: 19
  • 积分: 56
  • 来自: 厦门
   发表时间：2007-04-20  
我有试过在我们的项目中使用，但是在配置web.xml时碰到了问题，因为项目在赶，为了稳定起见放弃了。但不会放弃学习的，希望还有机会多和大家交流一下！
返回顶楼
          回帖地址
0 请登录后投票
论坛首页 → Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics