September 8, 2009

Ajax in RichFaces 3.3, JSF 2 and RichFaces 4

During my RichFaces session at JBoss World 2009, I showed three small examples of using Ajax with RichFaces 3.3, JSF 2, and RichFaces 4. I thougth it would be a good idea to show you the difference or more correct the similarities between the three. I will be blogging more about RichFaces 4 and JSF 2 so this is just a quick introduction.

I will show a small “Echo” application. There is one input field and as as you type, the input is echoed on the next line. On another line, the length of the string entered is counted. It looks like this:

screenshot_036

As you type, an Ajax request is sent to the server. We then do partial view rendering by specifying what components (text, count) to render back to the browser.

RichFaces 3.3

<h:form>
   <h:panelGrid columns="2">
      <h:outputText value="Text:" />
      <h:inputText value="#{echoBean.text}" >
         <a4j:support event="onkeyup" action="#{echoBean.countAction}"
  	    reRender="text, count"/>
  	 </h:inputText>
      <h:outputText value="Echo:" />
      <h:outputText id="text" value="#{echoBean.text}" />
      <h:outputText value="Count:" />
      <h:outputText id="count" value="#{echoBean.count}" />
   </h:panelGrid>
</h:form>

Managed bean:

public class EchoBean {
   private String text; // getter and setter
   private Integer count;  // getter and setter
 
   public void countAction() {
	count = text.length();
   }
   ...
}

Bean is registered in JSF configuration file (not shown).

JSF 2

<h:form>
   <h:panelGrid columns="2">
      <h:outputText value="Text:" />
      <h:inputText value="#{echoBean.text}" >
         <f:ajax event="keyup" execute="@form" render="text count" 
  		       listener="#{echoBean.countListener}"/>
      </h:inputText>
      <h:outputText value="Echo:" />
      <h:outputText id="text" value="#{echoBean.text}" />
      <h:outputText value="Count:" />
      <h:outputText id="count" value="#{echoBean.count}" />
   </h:panelGrid>
</h:form>

Managed bean looks slightly different as instead of an action (see example above) we use a special Ajax listener:

@ManagedBean(name="echoBean")
@RequestScoped
public class EchoBean {
   private String text;
   private Integer count;
 
   public void countListener (AjaxBehaviorEvent event) {
	count = text.length();
   }
}

RichFaces 4.0

<h:form>
    <h:panelGrid columns="2">
       <h:outputText value="Text:" />
       <h:inputText value="#{echoBean.text}" >
          <a4j:ajax event="keyup" render="text,count" 
  			listener="#{echoBean.countListener}"/>
  	   </h:inputText>
  	<h:outputText value="Echo:" />
  	<h:outputText id="text" value="#{echoBean.text}" />
       <h:outputText value="Count:" />
       <h:outputText id="count" value="#{echoBean.count}" />
   </h:panelGrid>
</h:form>

Managed bean is same as in JSF 2.

Ajax features in JS2 are very similar to what’s been available in RichFaces for a couple of year. The JSF standard continues to evolve by assimilating the best ideas in the community into the standard. A perfect example is how the Ajax support in JSF 2.0 almost matches that of RichFaces.
a4j:support has been replaced with a4j:ajax in RichFaces 4
a4j:ajax has all the functionality of standard JSF 2 Ajax tag with many additional features to give you more flexibility and power available only in RichFaces.
For example, features such as client queues, more control on deciding what to process and render, defining parts of a view to always render and much much more.

19 comments

September 9, 2009 - 12:31 am Dominique Rabeuf

What is it ? It does not seem to be a standard !

Reply
September 11, 2009 - 8:31 pm sandeep kandekar

How would you use this in jsr 286.

how would you send this via serverResource method from the facesportlet?

Reply
September 12, 2009 - 11:23 am max

Should look the same. I’m not sure if there is a bridge for JSF 2 available right now.

Reply
September 13, 2009 - 12:46 am Jon

I would have done:

public Integer getCount()
{
return text.length();
}

directly.

What do think of this approach?

Reply
September 13, 2009 - 8:17 am max

That works. I wanted to show how to use a server-side action/listener.

Reply
December 3, 2009 - 2:13 pm Pingback: RichFaces-like Ajax features in JSF 2 | Maxa Blog
January 15, 2010 - 8:28 am Ankur Thakur

Hi max ….Its seedm good to be hear about …giving so much support on the rich faces by writing blogs on this……So Max i need a one help from u……

I am looking towards richfaces 3.2 while integrate with myfaces version 1.2.8
Is MyFaces compatible with this version or vice versa?
How annotation.jar work…..
At Last When first page is going to be loaded than it auto come to downloaded by the firefox..instead of viewing my first index.faces page.Why it is so

note :i am new one to MyFaces and Rich Faces

Reply
January 15, 2010 - 10:15 am max

Yes, you can use MyFaces 1.2.8 with RichFaces, here is link to developers guide about requirements: http://goo.gl/HYxw

Reply
January 15, 2010 - 8:27 pm Ankur Thakur

java.lang.IllegalAccessException: Class org.apache.myfaces.config.annotation.TomcatAnnotationLifecycleProvider can not access a member of class com.java.source.LeftNavigation with modifiers “”

i don’t undersatnd what kind of error is it?

Detail of error:

6-Jan-2010 08:48:37 javax.faces.webapp._ErrorPageWriter handleThrowable
SEVERE: An exception occurred
javax.faces.FacesException: java.lang.IllegalAccessException: Class org.apache.myfaces.config.annotation.TomcatAnnotationLifecycleProvider can not access a member of class com.java.source.LeftNavigation with modifiers “”
at org.apache.myfaces.config.ManagedBeanBuilder.buildManagedBean(ManagedBeanBuilder.java:148)
at org.apache.myfaces.el.unified.resolver.ManagedBeanResolver.createManagedBean(ManagedBeanResolver.java:198)
at org.apache.myfaces.el.unified.resolver.ManagedBeanResolver.getValue(ManagedBeanResolver.java:164)
at javax.el.CompositeELResolver.getValue(CompositeELResolver.java:53)
at org.apache.myfaces.el.unified.resolver.FacesCompositeELResolver.getValue(FacesCompositeELResolver.java:140)
at org.apache.myfaces.el.VariableResolverImpl.resolveVariable(VariableResolverImpl.java:64)
at org.apache.myfaces.el.convert.VariableResolverToELResolver.getValue(VariableResolverToELResolver.java:95)
at javax.el.CompositeELResolver.getValue(CompositeELResolver.java:53)
at org.apache.myfaces.el.unified.resolver.FacesCompositeELResolver.getValue(FacesCompositeELResolver.java:140)
at org.apache.el.parser.AstIdentifier.getValue(AstIdentifier.java:61)
at org.apache.el.parser.AstValue.getValue(AstValue.java:107)
at org.apache.el.ValueExpressionImpl.getValue(ValueExpressionImpl.java:186)
at com.sun.facelets.el.TagValueExpression.getValue(TagValueExpression.java:71)
at org.apache.myfaces.application.ApplicationImpl.createComponent(ApplicationImpl.java:307)
at com.sun.facelets.tag.jsf.ComponentHandler.createComponent(ComponentHandler.java:224)
at com.sun.facelets.tag.jsf.ComponentHandler.apply(ComponentHandler.java:139)
at com.sun.facelets.tag.CompositeFaceletHandler.apply(CompositeFaceletHandler.java:47)
at com.sun.facelets.tag.jsf.ComponentHandler.applyNextHandler(ComponentHandler.java:314)
at com.sun.facelets.tag.jsf.ComponentHandler.apply(ComponentHandler.java:169)
at com.sun.facelets.tag.jsf.core.ViewHandler.apply(ViewHandler.java:109)
at com.sun.facelets.tag.CompositeFaceletHandler.apply(CompositeFaceletHandler.java:47)
at com.sun.facelets.compiler.NamespaceHandler.apply(NamespaceHandler.java:49)
at com.sun.facelets.tag.CompositeFaceletHandler.apply(CompositeFaceletHandler.java:47)
at com.sun.facelets.compiler.EncodingHandler.apply(EncodingHandler.java:25)
at com.sun.facelets.impl.DefaultFacelet.include(DefaultFacelet.java:248)
at com.sun.facelets.impl.DefaultFacelet.include(DefaultFacelet.java:294)
at com.sun.facelets.impl.DefaultFacelet.include(DefaultFacelet.java:273)
at com.sun.facelets.impl.DefaultFaceletContext.includeFacelet(DefaultFaceletContext.java:144)
at com.sun.facelets.tag.ui.IncludeHandler.apply(IncludeHandler.java:60)
at com.sun.facelets.tag.ui.InsertHandler.apply(InsertHandler.java:73)
at com.sun.facelets.tag.CompositeFaceletHandler.apply(CompositeFaceletHandler.java:47)
at com.sun.facelets.compiler.NamespaceHandler.apply(NamespaceHandler.java:49)
at com.sun.facelets.tag.CompositeFaceletHandler.apply(CompositeFaceletHandler.java:47)
at com.sun.facelets.compiler.EncodingHandler.apply(EncodingHandler.java:25)
at com.sun.facelets.impl.DefaultFacelet.include(DefaultFacelet.java:248)
at com.sun.facelets.impl.DefaultFacelet.include(DefaultFacelet.java:294)
at com.sun.facelets.impl.DefaultFacelet.include(DefaultFacelet.java:273)
at com.sun.facelets.impl.DefaultFaceletContext.includeFacelet(DefaultFaceletContext.java:144)
at com.sun.facelets.tag.ui.CompositionHandler.apply(CompositionHandler.java:113)
at com.sun.facelets.compiler.NamespaceHandler.apply(NamespaceHandler.java:49)
at com.sun.facelets.compiler.EncodingHandler.apply(EncodingHandler.java:25)
at com.sun.facelets.impl.DefaultFacelet.apply(DefaultFacelet.java:95)
at com.sun.facelets.FaceletViewHandler.buildView(FaceletViewHandler.java:524)
at com.sun.facelets.FaceletViewHandler.renderView(FaceletViewHandler.java:567)
at org.ajax4jsf.application.ViewHandlerWrapper.renderView(ViewHandlerWrapper.java:100)
at org.ajax4jsf.application.AjaxViewHandler.renderView(AjaxViewHandler.java:176)
at org.apache.myfaces.lifecycle.RenderResponseExecutor.execute(RenderResponseExecutor.java:41)
at org.apache.myfaces.lifecycle.LifecycleImpl.render(LifecycleImpl.java:140)
at javax.faces.webapp.FacesServlet.service(FacesServlet.java:182)
at org.apache.myfaces.webapp.MyFacesServlet.service(MyFacesServlet.java:103)
at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:290)
at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:206)
at org.apache.catalina.core.StandardWrapperValve.invoke(StandardWrapperValve.java:233)
at org.apache.catalina.core.StandardContextValve.invoke(StandardContextValve.java:191)
at org.apache.catalina.core.StandardHostValve.invoke(StandardHostValve.java:128)
at org.apache.catalina.valves.ErrorReportValve.invoke(ErrorReportValve.java:102)
at org.apache.catalina.core.StandardEngineValve.invoke(StandardEngineValve.java:109)
at org.apache.catalina.connector.CoyoteAdapter.service(CoyoteAdapter.java:286)
at org.apache.coyote.http11.Http11Processor.process(Http11Processor.java:845)
at org.apache.coyote.http11.Http11Protocol$Http11ConnectionHandler.process(Http11Protocol.java:583)
at org.apache.tomcat.util.net.JIoEndpoint$Worker.run(JIoEndpoint.java:447)
at java.lang.Thread.run(Thread.java:619)
Caused by: java.lang.IllegalAccessException: Class org.apache.myfaces.config.annotation.TomcatAnnotationLifecycleProvider can not access a member of class com.java.source.LeftNavigation with modifiers “”
at sun.reflect.Reflection.ensureMemberAccess(Reflection.java:65)
at java.lang.Class.newInstance0(Class.java:349)
at java.lang.Class.newInstance(Class.java:308)
at org.apache.myfaces.config.annotation.TomcatAnnotationLifecycleProvider.newInstance(TomcatAnnotationLifecycleProvider.java:48)
at org.apache.myfaces.config.ManagedBeanBuilder.buildManagedBean(ManagedBeanBuilder.java:85)
… 61 more

Reply
January 15, 2010 - 11:31 pm max

I don’t know either, you should post this in MyFaces forum.

Reply
January 16, 2010 - 12:24 pm Ankur Thakur

Hi Max
while creating left side bar Rich menu ….having a both group as well items in group i want to put an action on the items so that when u click it do some action

Thanks

Reply
January 16, 2010 - 1:12 pm max

Menu items should have an action attribute. You should also look at RichFaces component demo: http://livedemo.exadel.com/richfaces-demo/welcome.jsf

Reply
April 18, 2010 - 9:39 pm Madhawi

Hi Ankur,

Have you got the answer. If yes, please reply the answer.

Thanks in advance….

Reply
June 11, 2010 - 4:59 pm Dana

Max,

RF 4 & JSF 2 looks promising – I’m excited for annotations and more robust ajax support. Question: is there better support in JSF 2 for handling secure vs. non-secure view navigation (http vs. https)?

Reply
June 11, 2010 - 7:55 pm max

@Dana: don’t believe so, I think it’s just outside the scope of JSF.

Reply
June 22, 2012 - 2:13 pm Ernesto Hernandez

Could you guys tell me about a listener I can use it in order to get to the backing bean no matter if the process validation fails?
Almost all listeners don’t achieve the ajax request if the validation fails.

I hope some of you can help me, Thanks in advance!

Reply
- June 22, 2012 - 2:46 pm max
  
  I think it’s called a4j:ajaxListener in RichFaces 3
  
  Reply
  - June 22, 2012 - 11:06 pm Ernesto Hernandez
    
    Hi Max,
    
    As the matter of fact, I’m using RichFaces 4.2 and that ajaxListener doesn’t exist anymore. That’s why Im getting kind of crazy looking for some equivalent listener. I have tried a4j:actionListener and a4j:ajax without success.
    
    But I really appreciate your time in giving me an answer. If you know some other way to do what I need, please let me know. Thanks in advance!
    
    Reply
    - June 23, 2012 - 6:39 pm max
      
      You could try page actions: http://mkblog.exadel.com/2010/07/learning-jsf2-page-params-and-page-actions/
      
      Reply

19 comments

Leave a Reply Cancel reply