1 2 Previous Next 15 Replies Latest reply on Jun 8, 2009 3:04 AM by thohawk

    RichFaces CDK custom button component

    thohawk

      Hi

      I am trying to create my own custom RichFaces component using the RichFaces CDK. I want to create a custom commandButton which utilizes the button html tag (Oracle ADF has a similar component). It allows for nicer looking buttons (ex. http://particletree.com/features/rediscovering-the-button-element/).

      My problem is that when my a4j page is reRendered it closes my button-tag and content inside the button is then rendered useless. Ex.;

      <button ...><img src=""/></button>


      Becomes

      <button .../><img src=""/>


      My .jspx template is;

      <?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="com.conzentrate.renderkit.html.CommandButtonRenderer"
       baseclass="org.ajax4jsf.renderkit.AjaxCommandRendererBase"
       component="com.conzentrate.component.UICommandButton"
       >
       <f:clientid var="clientId"/>
       <button id="#{clientId}"
       name="#{clientId}"
       value="#{this:getValue(component)}"
       class="#{component.attributes['styleClass']}"
       style="cursor:pointer;padding:0px;margin:0px;width:auto;overflow:visible;"
       onclick="#{this:getOnClick(context,component)}"
       x:passThruWithExclusions="name,onclick,type,id,class">
      
       <table id="#{clientId}:table" cellspacing="0" cellpadding="0" style="padding:0px 2px 0px 2px;">
       <tr id="#{clientId}:tr">
       <td id="#{clientId}:td_img"><img id="#{clientId}:img" src="#{context.externalContext.requestContextPath}/core/iconsets/silk/#{component.attributes['icon']}.png" class="#{component.attributes['iconClass']}" style="#{component.attributes['iconStyle']};cursor:pointer;padding-right:2px;"/></td>
       <td id="#{clientId}:td_value" style="cursor:pointer;">#{component.attributes['value']}</td>
       </tr>
       </table>
      
       </button>
      </f:root>


      my .xml config is;

      <?xml version="1.0" encoding="UTF-8"?>
      <!DOCTYPE components PUBLIC "-//AJAX4JSF//CDK Generator config/EN" "http://labs.jboss.com/jbossrichfaces/component-config.dtd">
      
      <components>
       <component>
       <name>com.conzentrate.CommandButton</name>
       <family>javax.faces.Command</family>
       <classname>com.conzentrate.component.html.HtmlCommandButton</classname>
       <superclass>com.conzentrate.component.UICommandButton</superclass>
       <description>
       <![CDATA[
       ]]>
       </description>
       <renderer generate="true" override="true">
       <name>com.conzentrate.CommandButtonRenderer</name>
       <template>com/conzentrate/htmlCommandButton.jspx</template>
       </renderer>
       <tag>
       <name>commandButton</name>
       <classname>com.conzentrate.taglib.CommandButtonTag</classname>
       <superclass>
       org.ajax4jsf.webapp.taglib.UIComponentTagBase
       </superclass>
       </tag>
       <!-- taghandler>
       <classname>org.ajax4jsf.webapp.taglib.AjaxComponentHandler</classname>
       </taghandler -->
       &ui_command_attributes;
       &html_universal_attributes;
       &html_button_attributes;
       &html_events;
       &html_control_events;
       &ajax_component_attributes;
       <!--
       <property> <name>param</name> <classname>java.lang.String</classname>
       <description> </description> <defaultvalue>"default"</defaultvalue>
       </property>
       -->
       <property>
       <name>value</name>
       <classname>java.lang.Object</classname>
       <description>The value of the component</description>
       </property>
       <property>
       <name>icon</name>
       <classname>java.lang.String</classname>
       <description>The icon for the component</description>
       </property>
       </component>
      </components>


      My UICommandButton extends AjaxActionComponent and CommandButtonRendererBase extends AjaxCommandRendererBase. No methods are overridden in any of the classes.

      I am a beginner in JSF/RichFaces :-). Hope that someone can help me.

      /Jesper

        1 2 Previous Next