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

    Sample input/output richfaces component

    Szczepan Marchewka Newbie

      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
          Nick Belaevski Master

          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
            Szczepan Marchewka Newbie

            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
              Nick Belaevski Master

              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
                Szczepan Marchewka Newbie

                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
                  Nick Belaevski Master

                  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
                    Szczepan Marchewka Newbie

                    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
                      Nick Belaevski Master

                      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.