Custom Ajax Component by CDK

[grdzeli_kaci]

hi all,
i am trying write my own components using cdk, i have no problem simple html components , now i want write ajax components, is there any doc about this or example ????
i found this :
http://labs.jboss.com/wiki/Ajax4jsfCDK
but there is no anything about ajax component,

is there any example for download or svn ???

i need simplest ajax component, for example checkbox component,
if checked write "selected" on span otherwise unselected,


i have done all from there:
http://labs.jboss.com/wiki/UsingCDKStartUp

after all i change my chackBox.xml :

&ui_component_attributes;
 &html_events;
 &html_style_attributes;
 &ui_output_attributes;


 <property>
 <name>value</name>
 <classname>java.lang.String</classname>
 <description>value for the chackbox component</description>
 <defaultvalue>"default"</defaultvalue>
 </property>
 <property>
 <name>name</name>
 <classname>java.lang.String</classname>
 <description>name for the chackbox component</description>
 <defaultvalue>"false"</defaultvalue>
 </property>

and my htmlChackBox.jspx :

<div id="#{clientId}" name="#{clientId}" x:passThruWithExclusions="value,name,id">
 <input id="#{clientId}" type="checkbox" value="test"/>
 <span>#{component.attributes['value']}</span>
</div>

how i can bind ajax action on this component ?


Regards,
Paata.

[sergeysmirnov]

Look at a4j:commandLink and a4j:commandButton like references in the Ajax4jsf SVN

[grdzeli_kaci]

ok, i have read CDK docs and have some problems with my example. i tried to create java swing like ajax checkbox component and i have done this:
1.chackBox.xml

<components>
 <component>
 <name>org.mycompany.ChackBox</name>
 <family>org.mycompany.ChackBox</family>
 <classname>org.mycompany.component.html.HtmlAjaxChackBox</classname>
 <superclass>org.mycompany.component.UIAjaxChackBox</superclass>
 <description>
 <![CDATA[ ChackBox Component ]]>
 </description>
 <renderer generate="true" override="true">
 <name>org.mycompany.ChackBoxRenderer</name>
 <template>org/mycompany/htmlAjaxChackBox.jspx</template>
 </renderer>
 <tag>
 <name>chackBox</name>
 <classname>org.mycompany.taglib.ChackBoxTag</classname>
 <superclass>
 org.ajax4jsf.framework.taglib.UIComponentTagBase
 </superclass>
 </tag>
 <!--
 <taghandler>
 <classname>org.ajax4jsf.tag.TestHandler</classname>
 </taghandler>
 -->
 &ui_component_attributes;
 &html_events;
 &html_style_attributes;
 &ui_output_attributes;
 &ui_input_attributes;
 &html_control_events;
 &ajax_component_attributes;
 <property>
 <name>value</name>
 <classname>java.lang.String</classname>
 <description>value for the chackbox component</description>
 <defaultvalue>"default"</defaultvalue>
 </property>
 <property>
 <name>name</name>
 <classname>java.lang.String</classname>
 <description>name for the chackbox component</description>
 <defaultvalue>"false"</defaultvalue>
 </property>
 </component>
</components>

2.htmlAjaxChackBox.jspx

<div id="#{clientId}" name="#{clientId}" x:passThruWithExclusions="value,name,id">
 <input id="#{clientId}" type="checkbox" value="test" onchange="#{this:getOnchange(context,component)}"/>
 <span>#{component.attributes['value']}</span>
 </div>

3.UIAjaxChackBox.java

public abstract class UIAjaxChackBox extends AjaxActionComponent {

 private static final String COMPONENT_TYPE = "org.mycompany.ChackBox";

 private static final String COMPONENT_FAMILY = "org.mycompany.ChackBox";

}

4. and last AjaxChackRendererBase.java

public class AjaxChackRendererBase extends AjaxComponentRendererBase{

 protected Class getComponentClass() {
 return this.getClass();
 }
 public String getOnchange(FacesContext context, UIComponent component) {
 StringBuffer onClick = new StringBuffer("");
 System.out.println("enter");
 System.out.println("enabled = "+getUtils().isBooleanAttribute(component,"disabled"));
 System.out.println("enabled = "+AjaxRendererUtils.buildOnClick(component, context));
 System.out.println("enabled = "+AjaxRendererUtils.buildOnEvent(component, context,"onchange"));
 System.out.println("ent");
 return "alert('ok')";
 }
}

all works fine, i have generated my component's jar file mylib-1.0-SNAPSHOT.jar

after all i tried to use this component into my project like this :

1.faces-config.xml

<managed-bean>
 <managed-bean-name>bean</managed-bean-name>
 <managed-bean-class>com.liliko.billing.businesslayer.beans.common.Bean</managed-bean-class>
 <managed-bean-scope>request</managed-bean-scope>
 </managed-bean>

2.Bean.java

public class Bean {
 public void action1() {
 System.out.println("action1");
 }
}

3. and client side index.xhtml

.........
xmlns:mylib="http://mycompany.org/mylib"
..........

<mylib:chackBox action="#{bean.action1}" value="myChackBox" name="tmpName"/>

but onchange event not working :(, when i look into html source code i found this :

<input id="bodyForm:j_id30" type="checkbox" value="test" />

there is not onchange event :(, i can't find any problems into my code, could anybody help me ?


Regards,
Paata

[grdzeli_kaci]

hi Sergey, please help if have little time,
i got a4j source code from svn and look at ajaxcommandbutton and ajaxcommandlink, after all i have done this:
1.chackBox.xml

<name>org.mycompany.ChackBox</name>
 <family>org.mycompany.ChackBox</family>
 <classname>org.mycompany.component.html.HtmlChackBox</classname>
 <superclass>org.mycompany.component.UIChackBox</superclass>
 <description>
 <![CDATA[ ChackBox Component ]]>
 </description>
 <renderer generate="true" override="true">
 <name>org.mycompany.renderkit.ChackBoxRendererBase</name>
 <template>org/mycompany/htmlChackBox.jspx</template>
 </renderer>
 <tag>
 <name>chackBox</name>
 <classname>org.mycompany.taglib.ChackBoxTag</classname>
 <superclass>
 org.ajax4jsf.framework.taglib.UIComponentTagBase
 </superclass>
 </tag>
 <!--
 <taghandler>
 org.ajax4jsf.framework.taglib.HtmlComponentTagBase
 <classname>org.ajax4jsf.tag.TestHandler</classname>
 <name>org.mycompany.ChackBoxRenderer</name>
 </taghandler>
 -->

 &ui_component_attributes;
 &html_events;
 &html_style_attributes;
 &ui_output_attributes;
 &ui_input_attributes;
 &html_control_events;
 &ajax_component_attributes;

 <property>
 <name>value</name>
 <classname>java.lang.String</classname>
 <description>value for the chackbox component</description>
 <defaultvalue>"default"</defaultvalue>
 </property>
 <property>
 <name>name</name>
 <classname>java.lang.String</classname>
 <description>name for the chackbox component</description>
 <defaultvalue>"false"</defaultvalue>
 </property>

2.htmlChackBox.jspx

<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="org.mycompany.renderkit.html.ChackBoxRenderer"
 baseclass="org.mycompany.renderkit.ChackBoxRendererBase"
 component="org.mycompany.component.UIChackBox"
 xmlns:jsp="http://java.sun.com/JSP/Page" version="2.0">

 <jsp:directive.page import="javax.faces.context.FacesContext,javax.faces.component.UIComponent"/>
 <f:clientid var="clientId"/>
 <div id="#{clientId}" name="#{clientId}" x:passThruWithExclusions="value,name,id">
 <input id="#{clientId}" type="checkbox" value="test" onchange="#{this:getOnchange(context,component)}"/>
 <label>#{component.attributes['value']}</label>
 </div>
</f:root>

3.UIChackBox.java

import org.ajax4jsf.framework.ajax.AjaxActionComponent;

/**
 * JSF component class
 *
 */
public abstract class UIChackBox extends AjaxActionComponent{

 private static final String COMPONENT_TYPE = "org.mycompany.ChackBox";

 private static final String COMPONENT_FAMILY = "org.mycompany.ChackBox";

}

4.ChackBoxRendererBase.java

public class ChackBoxRendererBase extends AjaxComponentRendererBase{

 protected Class getComponentClass() {
 return UIChackBox.class;
 }
 public String getOnchange(FacesContext context, UIComponent component) {
 StringBuffer onChange = new StringBuffer("");
 onChange = AjaxRendererUtils.buildOnEvent(component, context,"onchange");
 onChange.append(";return false;");
 return onChange.toString();
 }
}

5.client use :

............................
xmlns:mylib="http://mycompany.org/mylib"
.............................
<mylib:chackBox action="#{bean.action1}" name="tmpName" value="myChackBox"/>

6.client bean:

public class Bean {
 public void action1() {
 System.out.println("Into Ajax Action");
 }
}

7.client faces-config.xml

<managed-bean>
 <managed-bean-name>bean</managed-bean-name>
 <managed-bean-class>com.liliko.billing.businesslayer.beans.common.Bean</managed-bean-class>
 <managed-bean-scope>request</managed-bean-scope>
 </managed-bean>

but when i change checkbox flag (click on component) on server side i got this error :

WARN [Parameters] Parameters: Invalid chunk ignored.

i am sure that ajax requset goes to server side by post method i see it in firebug (firefox tool)
i see this every onchange event for this component:
POST http://localhost:8080/Billing/layout/webMail/webMailBody.seam (520ms)


If you have couple of minutes please look,


Regards,
Paata.

[nbelaevski]

Paata,

input should have "name" attribute, not the div itself, so its value will be submitted:

<div id="#{clientId}" x:passThruWithExclusions="value,name,id">
 <input id="#{clientId}" name="#{clientId}" type="checkbox" value="test" onchange="#{this:getOnchange(context,component)}"/>
 <label>#{component.attributes['value']}</label>
 </div>

renderer class should implement decode method. Consider extending renderer from org.ajax4jsf.renderkit.AjaxCommandRendererBase

[grdzeli_kaci]

Thank you very much Nick
it works fine, but this warning still appears :

WARN [Parameters] Parameters: Invalid chunk ignored.

ooh yes and i have one another problem which is not ajax4jsf problem
when i see this on server side :

21:27:31,292 ERROR [STDERR] Jun 26, 2007 9:27:31 PM com.sun.facelets.impl.DefaultFacelet refresh
INFO: Facelet[/layout/webMail/Header.xhtml] was modified @ 9:27:28 PM, flushing component applied @ 9:15:22 PM
21:27:31,294 ERROR [STDERR] Jun 26, 2007 9:27:31 PM com.sun.facelets.impl.DefaultFacelet refresh
INFO: Facelet[/layout/webMail/SubHeader.xhtml] was modified @ 9:27:28 PM, flushing component applied @ 9:15:22 PM
21:27:31,296 ERROR [STDERR] Jun 26, 2007 9:27:31 PM com.sun.facelets.impl.DefaultFacelet refresh
INFO: Facelet[/layout/webMail/leftMenu.xhtml] was modified @ 9:27:28 PM, flushing component applied @ 9:15:22 PM
21:27:31,297 ERROR [STDERR] Jun 26, 2007 9:27:31 PM com.sun.facelets.impl.DefaultFacelet refresh
INFO: Facelet[/layout/webMail/Footer.xhtml] was modified @ 9:27:28 PM, flushing component applied @ 9:15:22 PM

none of the ajax4jsf component works, while i leave current page and reload it again,

this is facelets problem but i connot found anything about it on net :(

haver you any idea Nick ?


Regards,
Paata.

[grdzeli_kaci]

and how i can get information in action1 method of Bean.java class about checkbox is selected or not ? :(

need i some stuff for this into my component ?

[nbelaevski]

Paata,

About "Parameters" warning: what filters are registered in web.xml?

On facelets problem: I can suggest that facelet flushing lead to loosing component state, however I'm not sure. That's not a critical one issue, as you probably wouldn't change application sources in production without the whole application restart :).

And the last question... you need to implement decoding, validation & update model properly. I would think of extending UIInput class and implementing ActionSource interface. When ValueChangeEvent event occured you could then requeue ActionEvent. See UIInput & UICommand source code for more info.

[grdzeli_kaci]

Thank you very much Nick, i will see UIInput & UICommand source code.



____________________

Regards,
Paata.

[grdzeli_kaci]

Hi Nick,
i saw UIInput & UICommand source code and i tried to use javax.el.ValueExpression into my checkbox component :

public ValueExpression getValueExpression(String name) {
 System.out.println("getValueExpression, name = "+name);
 if ("selected".equals(name)) {
 return (super.getValueExpression("value"));
 } else {
 return (super.getValueExpression(name));
 }
 }
 public void setValueExpression(String name, ValueExpression binding) {
 System.out.println("setValueExpression, name = "+name+", binding = "+binding);
 if ("selected".equals(name)) {
 super.setValueExpression("value", binding);
 } else {
 super.setValueExpression(name, binding);
 }
 }

but when i tried to build component i got an error :

[INFO] ------------------------------------------------------------------------
[INFO] Trace
org.apache.maven.BuildFailureException: Compilation failure
 at org.apache.maven.lifecycle.DefaultLifecycleExecutor.executeGoals(DefaultLifecycleExecutor.java:560)
 at org.apache.maven.lifecycle.DefaultLifecycleExecutor.executeGoalWithLifecycle(DefaultLifecycleExecutor.java:480)
 at org.apache.maven.lifecycle.DefaultLifecycleExecutor.forkProjectLifecycle(DefaultLifecycleExecutor.java:896)
 at org.apache.maven.lifecycle.DefaultLifecycleExecutor.forkLifecycle(DefaultLifecycleExecutor.java:739)
 at org.apache.maven.lifecycle.DefaultLifecycleExecutor.executeGoals(DefaultLifecycleExecutor.java:510)
 at org.apache.maven.lifecycle.DefaultLifecycleExecutor.executeGoalWithLifecycle(DefaultLifecycleExecutor.java:480)
 at org.apache.maven.lifecycle.DefaultLifecycleExecutor.executeGoal(DefaultLifecycleExecutor.java:459)
 at org.apache.maven.lifecycle.DefaultLifecycleExecutor.executeGoalAndHandleFailures(DefaultLifecycleExecutor.java:311)
 at org.apache.maven.lifecycle.DefaultLifecycleExecutor.executeTaskSegments(DefaultLifecycleExecutor.java:278)
 at org.apache.maven.lifecycle.DefaultLifecycleExecutor.execute(DefaultLifecycleExecutor.java:143)
 at org.apache.maven.DefaultMaven.doExecute(DefaultMaven.java:334)
 at org.apache.maven.DefaultMaven.execute(DefaultMaven.java:125)
 at org.apache.maven.cli.MavenCli.main(MavenCli.java:272)
 at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
 at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:39)
 at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:25)
 at java.lang.reflect.Method.invoke(Method.java:585)
 at org.codehaus.classworlds.Launcher.launchEnhanced(Launcher.java:315)
 at org.codehaus.classworlds.Launcher.launch(Launcher.java:255)
 at org.codehaus.classworlds.Launcher.mainWithExitCode(Launcher.java:430)
 at org.codehaus.classworlds.Launcher.main(Launcher.java:375)
Caused by: org.apache.maven.plugin.CompilationFailureException: Compilation failure
 at org.apache.maven.plugin.AbstractCompilerMojo.execute(AbstractCompilerMojo.java:516)
 at org.apache.maven.plugin.CompilerMojo.execute(CompilerMojo.java:114)
 at org.apache.maven.plugin.DefaultPluginManager.executeMojo(DefaultPluginManager.java:443)
 at org.apache.maven.lifecycle.DefaultLifecycleExecutor.executeGoals(DefaultLifecycleExecutor.java:539)
 ... 20 more

i think maven does not see al-api. how i can resolve this problem ?


____________________
Regards,
Paata.

[nbelaevski]

Hello!

Could you please attach pom.xml file?

[grdzeli_kaci]

"nbelaevski" wrote:
Hello!

Could you please attach pom.xml file?

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.a
<modelVersion>4.0.0</modelVersion>
<groupId>org.mycompany</groupId>
<artifactId>mylib-parent</artifactId>
<url>http://mycompany.org</url>
<version>1.0-SNAPSHOT</version>
<packaging>pom</packaging>
<dependencies>
 <dependency>
 <groupId>javax.servlet</groupId>
 <artifactId>servlet-api</artifactId>
 <version>2.4</version>
 <scope>provided</scope>
 </dependency>
 <dependency>
 <groupId>javax.servlet</groupId>
 <artifactId>jsp-api</artifactId>
 <version>2.0</version>
 <scope>provided</scope>
 </dependency>
 </dependencies>
 <modules>
 <module>mylib</module>
 </modules>
</project>

[grdzeli_kaci]

hi Nick, i understand you that problem was i had not el-api into my pom.xml,
know my pom.xml looks like :
1.pm.xml (i put all dependencies which is into jboss richfaces)

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
 <modelVersion>4.0.0</modelVersion>
 <groupId>org.magticom</groupId>
 <artifactId>ajax4j-parent</artifactId>
 <url>http://www.magticom.ge</url>
 <version>1.0-SNAPSHOT</version>
 <packaging>pom</packaging>
 <developers>
 <developer>
 <id>grdzeli_kaci</id>
 <name>Paata Lominadze</name>
 <email>[e-mail]</email>
 <organization>Magticom Inc.</organization>
 <organizationUrl>http://www.magticom.ge</organizationUrl>
 <roles>
 <role>architect</role>
 <role>developer</role>
 </roles>
 <timezone>+4</timezone>
 </developer>
 </developers>
 <licenses>
 <license>
 <name>LGPL 2.1</name>
 <url>http://www.gnu.org/licenses/lgpl.html</url>
 <distribution>repo</distribution>
 <comments>
 GNU LESSER GENERAL PUBLIC LICENSE Version 2.1
 </comments>
 </license>
 </licenses>
 <dependencies>
 <dependency>
 <groupId>junit</groupId>
 <artifactId>junit</artifactId>
 <version>3.8.1</version>
 <scope>test</scope>
 </dependency>
 <dependency>
 <groupId>javax.faces</groupId>
 <artifactId>jsf-api</artifactId>
 <version>1.1_02</version>
 <exclusions>
 <exclusion>
 <artifactId>jsp-api</artifactId>
 <groupId>javax.servlet.jsp</groupId>
 </exclusion>
 <exclusion>
 <artifactId>jstl</artifactId>
 <groupId>javax.servlet.jsp.jstl</groupId>
 </exclusion>
 </exclusions>
 </dependency>
 <dependency>
 <groupId>javax.faces</groupId>
 <artifactId>jsf-impl</artifactId>
 <version>1.1_02</version>
 <scope>runtime</scope>
 <exclusions>
 <exclusion>
 <artifactId>jsp-api</artifactId>
 <groupId>javax.servlet.jsp</groupId>
 </exclusion>
 <exclusion>
 <artifactId>jstl</artifactId>
 <groupId>javax.servlet.jsp.jstl</groupId>
 </exclusion>
 </exclusions>
 </dependency>
 <dependency>
 <groupId>org.ajax4jsf</groupId>
 <artifactId>ajax4jsf</artifactId>
 <version>${org.ajax4jsf.version}</version>
 </dependency>
 <dependency>
 <groupId>org.ajax4jsf</groupId>
 <artifactId>test</artifactId>
 <version>${org.ajax4jsf.version}</version>
 <scope>test</scope>
 </dependency>
 <dependency>
 <groupId>htmlunit</groupId>
 <artifactId>htmlunit</artifactId>
 <version>1.10</version>
 <scope>test</scope>
 </dependency>
 <dependency>
 <groupId>commons-collections</groupId>
 <artifactId>commons-collections</artifactId>
 <version>3.2</version>
 </dependency>
 <dependency>
 <groupId>com.sun.facelets</groupId>
 <artifactId>jsf-facelets</artifactId>
 <version>1.1.11</version>
 <optional>true</optional>
 </dependency>
 <dependency>
 <groupId>javax.el</groupId>
 <artifactId>el-api</artifactId>
 <version>1.0</version>
 <scope>provided</scope>
 <optional>true</optional>
 </dependency>
 <dependency>
 <groupId>el-impl</groupId>
 <artifactId>el-impl</artifactId>
 <version>1.0</version>
 <scope>provided</scope>
 <optional>true</optional>
 </dependency>
 <dependency>
 <groupId>javax.servlet</groupId>
 <artifactId>servlet-api</artifactId>
 <version>2.4</version>
 <scope>provided</scope>
 </dependency>
 <dependency>
 <groupId>javax.servlet</groupId>
 <artifactId>jsp-api</artifactId>
 <version>2.0</version>
 <scope>provided</scope>
 </dependency>
 </dependencies>
 <modules>
 <module>ajax4j</module>
 </modules>
</project>

i saw UIInput and UICommand components source code, also i find UISelectBoolean which extends UIInput class, after all i tried to exntend this class :
2.UIAjaxCheckBox.java

package org.magticom.component;

import javax.el.ValueExpression;
import javax.faces.component.UISelectBoolean;
import javax.faces.el.ValueBinding;


/**
 * JSF component class
 *
 */
public abstract class UIAjaxCheckBox extends UISelectBoolean {

 private static final String COMPONENT_TYPE = "org.magticom.AjaxCheckBox";

 private static final String COMPONENT_FAMILY = "org.magticom.AjaxCheckBox";

 public UIAjaxCheckBox() {
 super();
 System.out.println("UIChackBox Constructor");
 setRendererType("org.magticom.AjaxCheckBox");
 }
 public String getFamily() {
 return (COMPONENT_FAMILY);
 }
 public boolean isSelected() {
 return super.isSelected();
 }
 public void setSelected(boolean selected) {
 super.setSelected(selected);
 }
 public ValueBinding getValueBinding(String name) {
 if ("selected".equals(name)) {
 return (super.getValueBinding("value"));
 } else {
 return (super.getValueBinding(name));
 }
 }
 public void setValueBinding(String name, ValueBinding binding) {
 if ("selected".equals(name)) {
 super.setValueBinding("value", binding);
 } else {
 super.setValueBinding(name, binding);
 }
 }
 public ValueExpression getValueExpression(String name) {
 return super.getValueExpression(name);
 }
 public void setValueExpression(String name, ValueExpression binding) {
 super.setValueExpression(name, binding);
 }
}

when i tried to build component i got an error, problem is ValueExpression class, this is not problem "import javax.el.ValueExpression;" problem is into getValueExpression and setValueExpression methods, i don't understand what is the problem :(, i have el-api into my pom.xml :(




______________________
Regards,
Paata.

[grdzeli_kaci]

also problem is that my repository does not contain ajax4jsf.
[CODE]

org.ajax4jsf
ajax4jsf
${org.ajax4jsf.version}


org.ajax4jsf
test
${org.ajax4jsf.version}
test

[/CODE]
and this dependencies gave me errors

[grdzeli_kaci]

i could not resolve this problem yet, can anybody help me ?