7 Replies Latest reply on Jul 3, 2009 9:10 AM by nbelaevski

    Sample input/output richfaces component

      Some times ago I try to build my custom component, that render some html content and some buttons, which change its state and render new content, when they are clicked.

      I have problems with that, component not refresh its content.

      Could anyone send me on my mail sz.marchewka@gazeta.pl sample component like that, which would be base for my customization?

      I know my request is some strange, but I'm not lazy. ;-))

      Sorry for my english, which is not so good, as it should.

      Thank you.

        • 1. Re: Sample input/output richfaces component
          nbelaevski

          Hi,

          Rendering of new content can happen in three different ways: common server submit, AJAX request or solely client-side using JS. Which one you are interested in?

          • 2. Re: Sample input/output richfaces component

            I'm interested in Ajax rendering this content or Common server type.

            But Ajax rendering is the main, in which I'm interested.

            Could you help me some?

            • 3. Re: Sample input/output richfaces component
              nbelaevski

              To start with:

              CDK developer guide - http://www.jboss.org/file-access/default/members/jbossrichfaces/freezone/docs/cdkguide/en/html_single/index.html

              Download RichFaces sources and first check base parts of a4j:commandButton/a4j:commandLink components: org.ajax4jsf.component.AjaxActionComponent and org.ajax4jsf.renderkit.AjaxCommandRendererBase classes.

              • 4. Re: Sample input/output richfaces component

                I did it all like in tutorial and read some code, but without good documentation I cant understand how to make my component.

                I simplify my pivot component and write code that displays only H1 header with current date and time and button to refresh it like this:

                htmlPivotTable.jspx

                <?xml version="1.0" encoding="UTF-8"?>
                <f:root
                 xmlns:f="http://ajax4jsf.org/cdk/template"
                 xmlns:c=" http://java.sun.com/jsf/core"
                 xmlns:ui=" http://ajax4jsf.org/cdk/ui"
                 xmlns:u=" http://ajax4jsf.org/cdk/u"
                 xmlns:x=" http://ajax4jsf.org/cdk/x"
                 class="pl.gov.stat.renderkit.html.PivotTableRenderer"
                 baseclass="org.ajax4jsf.renderkit.AjaxComponentRendererBase"
                 component="pl.gov.stat.component.UIPivotTable"
                 >
                
                 <f:clientid var="clientId"/>
                 <div id="#{clientId}" x:passThruWithExclusions="value,name,type,id">
                
                 <jsp:scriptlet>
                 <![CDATA[
                 String date = new java.util.Date().toString();
                 System.out.println(date);
                 variables.setVariable("date",date);
                 ]]>
                 </jsp:scriptlet>
                
                 <h1>#{date}</h1>
                
                 <input type="submit"
                 id="#{clientId}button"
                 name="#{clientId}button"
                 value="Refresh"/>
                
                 </div>
                
                </f:root>
                


                UIPivotTable.java
                /**
                 *
                 */
                
                package pl.gov.stat.component;
                
                import javax.faces.component.UIComponentBase;
                
                /**
                 * JSF component class
                 *
                 */
                public abstract class UIPivotTable extends UIComponentBase {
                
                 public static final String COMPONENT_TYPE = "pl.gov.stat.PivotTable";
                
                 public static final String COMPONENT_FAMILY = "pl.gov.stat.PivotTable";
                
                }
                
                



                pivotTable.xml
                <?xml version="1.0" encoding="UTF-8"?>
                <!DOCTYPE components PUBLIC "-//AJAX4JSF//CDK Generator config/EN" "https://ajax4jsf.dev.java.net/nonav/dtds/component-config.dtd" >
                <components>
                 <component>
                 <name>pl.gov.stat.PivotTable</name>
                 <family>pl.gov.stat.PivotTable</family>
                 <classname>pl.gov.stat.component.html.HtmlPivotTable</classname>
                 <superclass>pl.gov.stat.component.UIPivotTable</superclass>
                 <description>
                 <![CDATA[
                 A component that insert a link that permit to call a person from the web via skype.
                 ]]>
                 </description>
                 <renderer generate="true" override="true">
                 <name>pl.gov.stat.PivotTableRenderer</name>
                 <template>pl/gov/stat/htmlPivotTable.jspx</template>
                 </renderer>
                 <tag>
                 <name>pivotTable</name>
                 <classname>pl.gov.stat.taglib.PivotTableTag</classname>
                 <superclass>
                 org.ajax4jsf.webapp.taglib.HtmlComponentTagBase
                 </superclass>
                 </tag>
                 <!--
                 <taghandler>
                 <classname>org.ajax4jsf.tag.TestHandler</classname>
                 </taghandler>
                 -->
                 &ui_component_attributes;
                 &html_events;
                 &html_style_attributes;
                 </component>
                </components>
                


                After that in my jspx page I have:
                <%@ taglib uri="http://www.stat.gov.pl/bdr/pivotTable" prefix="piv" %>
                ...
                <f:view>
                ...
                <a4j:form ajaxSubmit="false">
                 <piv:pivotTable id="piv"></piv:pivotTable>
                </a4j:form>
                ...
                </f:view>
                


                This works good, but no Ajax request, but all page refreshing.

                When I change a4j:form declaration to:
                <a4j:form ajaxSubmit="true">
                


                it doesn't work, because nothings changes on the page with button click. No requests to server, no printing on the console, no refresh in browser.

                What did I wrong? How can I repair it?


                • 5. Re: Sample input/output richfaces component
                  nbelaevski

                  Some control should initiate AJAX request, check renderers code.

                  Also do you know that you can build your components using Facelets: http://matthiaswessendorf.wordpress.com/2008/02/29/custom-jsf-components-with-facelets/ ?

                  • 6. Re: Sample input/output richfaces component

                    My template is as follows:

                    <?xml version="1.0" encoding="UTF-8"?>
                    <f:root
                     xmlns:f="http://ajax4jsf.org/cdk/template"
                     xmlns:c=" http://java.sun.com/jsf/core"
                     xmlns:ui=" http://ajax4jsf.org/cdk/ui"
                     xmlns:u=" http://ajax4jsf.org/cdk/u"
                     xmlns:x=" http://ajax4jsf.org/cdk/x"
                     class="pl.gov.stat.renderkit.html.PivotTableRenderer"
                     baseclass="pl.gov.stat.renderkit.PivotTableRendererBase"
                     component="pl.gov.stat.component.UIPivotTable"
                     >
                    
                     <h:scripts>new org.ajax4jsf.javascript.AjaxScript(),new org.ajax4jsf.javascript.PrototypeScript()</h:scripts>
                    
                     <f:clientid var="clientId"/>
                     <div id="#{clientId}" x:passThruWithExclusions="value,name,type,id">
                    
                     <jsp:scriptlet>
                     <![CDATA[
                     String date = new java.util.Date().toString();
                     System.out.println(date);
                     variables.setVariable("date",date);
                     ]]>
                     </jsp:scriptlet>
                    
                     <h1 id="#{clientId}_date">#{date}</h1>
                    
                     <input type="button"
                     id="#{clientId}button"
                     name="#{clientId}button" onclick="#{this:getOnClick(component,context)}"
                     value="Refresh"/>
                    
                     </div>
                    
                    </f:root>
                    


                    and abstract base class is:

                    package pl.gov.stat.renderkit;
                    
                    import org.ajax4jsf.renderkit.*;
                    import org.ajax4jsf.javascript.*;
                    
                    import java.io.*;
                    import java.util.*;
                    
                    import javax.faces.component.*;
                    import javax.faces.context.*;
                    import javax.faces.event.*;
                    import javax.faces.render.*;
                    
                    public abstract class PivotTableRendererBase extends AjaxComponentRendererBase {
                    
                     public void doDecode(FacesContext context, UIComponent component) {
                     super.doDecode(context, component);
                     System.out.println("PivotTableRendererBase.doDecode");
                     }
                    
                     public String getOnClick(UIComponent component, FacesContext context) {
                     String clientId = component.getClientId(context);
                     JSFunction ajaxFunction = AjaxRendererUtils.buildAjaxFunction(component, context);
                     Map eventOptions = AjaxRendererUtils.buildEventOptions(context, component);
                     //@SuppressWarnings("unchecked")
                     Map parameters = (Map) eventOptions.get("parameters");
                     StringBuffer buffer = new StringBuffer();
                     parameters.put(clientId+"_layout","VERTICAL");
                     ajaxFunction.addParameter(eventOptions);
                     ajaxFunction.appendScript(buffer);
                     return buffer.toString();
                     }
                    }
                    


                    This works better, because ajax request is sended (message "PivotTableRendererBase.doDecode" on the console), but component is not rerendered. Why? I saw code of renderers but I dont understand so much, to use it my component, not yet ;-))).

                    SM

                    • 7. Re: Sample input/output richfaces component
                      nbelaevski

                      You should plug in JSF events - check the aforementioned classes for more info. Also explore references to AjaxContext class - this should give you considerable amount of necessary information.