RichFaces CDK custom button component
thohawk Jun 4, 2009 3:06 AMHi
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