7 Replies Latest reply on Nov 17, 2009 7:04 AM by anthony.mayfield

Including AjaxSupport dynamically

anthony.mayfield Nov 16, 2009 6:59 AM

Hi I have a custom component that I'm creating and I can't seem to get the Ajax components to work with it. The code is here:

expf = facesContext.getApplication().getExpressionFactory();
 HtmlInputText searchInTxt = new HtmlInputText();
 searchInTxt.setStyleClass( "aplosTextbox" );
 ve = expf.createValueExpression(facesContext.getELContext(), "#{ tableComponent.searchText }", Object.class);
 searchInTxt.setValueExpression( "value", ve );

 HtmlAjaxSupport searchSupport = new HtmlAjaxSupport();
 searchSupport.setEvent( "onkeyup" );
 searchSupport.setReRender( "linkNextPage" );
 searchInTxt.getChildren().add( searchSupport );
 getChildren().add( searchInTxt );

The code is quite simple and works with the normal JSF components, I've tried so many things to get it to work with the richfaces ones but with no joy. If anyone can help, it would make my day, many thanks, Anthony.

1. Re: Including AjaxSupport dynamically

ilya_shaikovsky Nov 16, 2009 7:25 AM (in response to anthony.mayfield)

add the support as facet and not as child component.
Actions

2. Re: Including AjaxSupport dynamically

anthony.mayfield Nov 16, 2009 7:30 AM (in response to anthony.mayfield)

I've change my code to

 expf = facesContext.getApplication().getExpressionFactory();
 HtmlInputText searchInTxt = new HtmlInputText();
 searchInTxt.setStyleClass( "aplosTextbox" );
 ve = expf.createValueExpression(facesContext.getELContext(), "#{ tableComponent.searchText }", Object.class);
 searchInTxt.setValueExpression( "value", ve );;

 HtmlAjaxSupport searchSupport = new HtmlAjaxSupport();
 searchSupport.setEvent( "onkeyup" );
 searchSupport.setReRender( AjaxRendererUtils.asSet("linkNextPage") );
// searchInTxt.getChildren().add( searchSupport );
 searchInTxt.getFacets().put( "ajaxSupport", searchSupport );
 getChildren().add( searchInTxt );

But it's still not working

3. Re: Including AjaxSupport dynamically

ilya_shaikovsky Nov 16, 2009 7:56 AM (in response to anthony.mayfield)

where the input placed? maybe your forgot form element?
Actions

4. Re: Including AjaxSupport dynamically

anthony.mayfield Nov 16, 2009 8:39 AM (in response to anthony.mayfield)

Here's the html, it's quite simple.

<body style="padding:0px;margin:0px">
 <h:form id="teacherForm">
 <aplos:dataTable style='width:100%;' tableComponent="#{ tableComponent }">

 </aplos:dataTable>
 <h:outputText id="linkNextPage" value="#{ tableComponent.searchText }"></h:outputText>
 </h:form>
</body>

5. Re: Including AjaxSupport dynamically

anthony.mayfield Nov 16, 2009 8:41 AM (in response to anthony.mayfield)

Here's the full code page


package com.aplos.customjsfcomponents;

import java.util.Map;

import javax.faces.component.*;
import javax.faces.component.html.*;
import javax.faces.context.ExternalContext;
import javax.faces.context.FacesContext;

import java.io.IOException;
import java.io.InputStream;

import javax.faces.context.ResponseWriter;
import javax.el.*;

import com.aplos.JSFUtil;
import com.aplos.TableComponent;
import com.aplos.TableComponentInterface;
import com.aplos.utils.ComponentConstants;
import com.aplos.utils.ComponentUtil;

import cb.jdynamite.JDynamiTe;
import org.ajax4jsf.component.html.*;
import org.ajax4jsf.renderkit.AjaxRendererUtils;

public class DataTable extends UIComponentBase {
 public static final String COMPONENT_TYPE = "com.aplos.customjsfcomponents.DataTable";
 public static final String WITH_BOTTOM_BAR_ATTRIBUTE_KEY = "withBottomBar";
 public static final String TABLE_COMPONENT_ATTRIBUTE_KEY = "tableComponent";
 public AplosButton newAplosButton;
// public AplosButton searchTextBox;
 public HtmlSelectBooleanCheckbox showDeletedChk;
 private Object[] _state = null;

 public void encodeBegin( FacesContext facesContext ) throws IOException {
 super.encodeBegin( facesContext );
 ResponseWriter writer = facesContext.getResponseWriter();
 String theme = ComponentUtil.getAndWriteTheme( facesContext );



 TableComponentInterface tableComponent = (TableComponentInterface) getAttributes().get( TABLE_COMPONENT_ATTRIBUTE_KEY );
 Object obj = JSFUtil.resolveVariable( TABLE_COMPONENT_ATTRIBUTE_KEY );
 JSFUtil.setVariable( facesContext, obj, TABLE_COMPONENT_ATTRIBUTE_KEY );
// facesContext.getExternalContext().getSessionMap().put( TABLE_COMPONENT_ATTRIBUTE_KEY, tableComponent );
 if( tableComponent != null ) {
 writer.startElement( "div", this );
 writer.writeAttribute( "style", "position:absolute;z-index:2;top:28px;left:28px", null );
 newAplosButton = new AplosButton();
 getChildren().add( newAplosButton );
 HtmlCommandLink newCommandBtn = new HtmlCommandLink();
 ExpressionFactory expf = facesContext.getApplication().getExpressionFactory();
 MethodExpression methodExpresssion = expf.createMethodExpression(facesContext.getELContext(), "#{ tableComponent.goToNew }", String.class, new Class[] {});
 newCommandBtn.setActionExpression( methodExpresssion );
 newCommandBtn.setValue( "New" );
 newCommandBtn.setStyleClass( "stdBtnCommand" );
 newAplosButton.getChildren().add( newCommandBtn );
 newAplosButton.encodeAll( facesContext );
 getChildren().remove( newAplosButton );
 writer.endElement("div");


 writer.startElement( "div", this );
 // Code to added the showDeleted section
 writer.writeAttribute( "style", "float:right", null );
 HtmlOutputText showDeletedOutTxt = new HtmlOutputText();
 showDeletedOutTxt.setValue( "Show deleted" );
 showDeletedOutTxt.setStyle( "margin-right:10px;" );
 showDeletedOutTxt.encodeAll( facesContext );
 showDeletedChk = new HtmlSelectBooleanCheckbox();
 ValueExpression ve = expf.createValueExpression(facesContext.getELContext(), "#{ tableComponent.showDeleted }", Object.class);
 showDeletedChk.setValueExpression( "swap", ve );
 showDeletedChk.setStyle( "margin-right:20px;" );
 HtmlAjaxSupport showDeletedSupport = new HtmlAjaxSupport();
 showDeletedSupport.setEvent( "onclick" );
 methodExpresssion = expf.createMethodExpression(facesContext.getELContext(), "#{ tableComponent.updateRecordList }", null, new Class[] {});
 showDeletedSupport.setActionExpression( methodExpresssion );
 showDeletedSupport.setReRender( "listTable,listDatatable,txtRecordDescription,linkFirstPage,linkPreviousPage,linkNextPage,linkLastPage" );
 showDeletedChk.getChildren().add( showDeletedSupport );
 showDeletedChk.encodeAll( facesContext );
 getChildren().remove( showDeletedChk );


 // Code to added the search section
 HtmlOutputText searchOutTxt = new HtmlOutputText();
 searchOutTxt.setValue( "Search" );
 searchOutTxt.encodeAll( facesContext );


// searchTextBox = new AplosButton();

 expf = facesContext.getApplication().getExpressionFactory();
 HtmlInputText searchInTxt = new HtmlInputText();
 searchInTxt.setStyleClass( "aplosTextbox" );
 ve = expf.createValueExpression(facesContext.getELContext(), "#{ tableComponent.searchText }", Object.class);
 searchInTxt.setValueExpression( "value", ve );;

 HtmlAjaxSupport searchSupport = new HtmlAjaxSupport();
 searchSupport.setEvent( "onkeyup" );
 UIForm form = getCurrentForm( this );
 UIComponent com = form.findComponent( "linkNextPage" );
 searchSupport.setReRender( AjaxRendererUtils.asSet(com.getClientId( facesContext )) );
// searchInTxt.getChildren().add( searchSupport );
 searchInTxt.getFacets().put( "ajaxSupport", searchSupport );
 getChildren().add( searchInTxt );




 HtmlInputText testTxt = new HtmlInputText();
 testTxt.setStyleClass( "aplosTextbox" );
 ve = expf.createValueExpression(facesContext.getELContext(), "#{ tableComponent.random }", Object.class);
 testTxt.setValueExpression( "value", ve );

 getChildren().add( testTxt );
// searchInTxt.encodeChildren( facesContext );
// UIComponent form = getCurrentForm(this);
// if (form != null) {
// form.getChildren().add(searchInTxt);
// }

// searchTextBox = new AplosButton();
//
// HtmlInputText searchInTxt = new HtmlInputText();
// searchInTxt.setStyleClass( "aplosTextbox" );
// ve = expf.createValueExpression(facesContext.getELContext(), "#{ tableComponent.searchText }", Object.class);
// searchInTxt.setValueExpression( "value", ve );
//
// HtmlAjaxSupport searchSupport = new HtmlAjaxSupport();
// searchSupport.setEvent( "onkeyup" );
// searchSupport.setReRender( "linkNextPage" );
// searchInTxt.getChildren().add( searchSupport );
// searchTextBox.getChildren().add( searchInTxt );
//
// getChildren().add( searchTextBox );
// searchTextBox.encodeAll( facesContext );
// getChildren().remove( searchTextBox );

 writer.endElement("div");
 }

 }

 public UIForm getCurrentForm( UIComponent component ) {
 while( !(component instanceof UIForm) ) {
 component = component.getParent();
 }
 return (UIForm) component;
 }

 public void encodeEnd( FacesContext facesContext ) throws IOException {
 super.encodeEnd( facesContext );
 ResponseWriter writer = facesContext.getResponseWriter();
 String theme = ComponentUtil.getAndWriteTheme( facesContext );

 UIComponent footer = getFacet("footer");
 String withBottomBar;
 if (footer != null) {
 withBottomBar = "true";
 } else {
 withBottomBar = "false";
 }

 // Bottom
 JDynamiTe parser = new JDynamiTe();
 InputStream i = this.getClass().getResourceAsStream( ComponentConstants.TEMPLATES_FOLDER + "tableBottom.html" );
 parser.setInput( i );
 setDataTableBottomVariables( facesContext, parser, withBottomBar, theme );
 parser.parse();
 writer.write( parser.toString() );

 // Footer
 if (footer != null) {
 footer.encodeAll(facesContext);
 }

 // End
 parser = new JDynamiTe();
 i = this.getClass().getResourceAsStream( ComponentConstants.TEMPLATES_FOLDER + "tableEnd.html" );
 parser.setInput( i );
 parser.parse();
 writer.write( parser.toString() );
 if( getAttributes().get( TABLE_COMPONENT_ATTRIBUTE_KEY ) != null ) {
 getChildren().add( newAplosButton );
 getChildren().add( showDeletedChk );
// getChildren().add( searchTextBox );
 }
 }

 @Override
 public void decode( FacesContext facesContext ) {
 super.decode( facesContext );
 ExternalContext external = facesContext.getExternalContext();
 Map requestParams = external.getRequestParameterMap();
// requestParams.put( this.getClientId( facesContext ), "TestAction" );
// HtmlCommandButton tempCommand = (HtmlCommandButton) getAttributes().get( COMMAND_ATTRIBUTE_KEY );
// tempCommand.decode(facesContext);

// String clientId = this.getClientId( facesContext );
 }

 public void restoreState( FacesContext _context, Object _state ) {
 this._state = (Object[])_state;
 super.restoreState( _context, this._state[ 0 ] );
 ComponentUtil.addStateToAttributes( this, ComponentConstants.WIDTH_ATTRIBUTE_KEY, this._state[1] );
 ComponentUtil.addStateToAttributes( this, ComponentConstants.STYLE_ATTRIBUTE_KEY, this._state[2] );
 ComponentUtil.addStateToAttributes( this, ComponentConstants.HEIGHT_ATTRIBUTE_KEY, this._state[3] );
 ComponentUtil.addStateToAttributes( this, WITH_BOTTOM_BAR_ATTRIBUTE_KEY, this._state[4] );
 ComponentUtil.addStateToAttributes( this, TABLE_COMPONENT_ATTRIBUTE_KEY, this._state[5] );
 }

 public Object saveState( FacesContext _context ) {
 if( _state == null ) {
 _state = new Object[ 6 ];
 }

 _state[ 0 ] = super.saveState( _context );

 _state[ 1 ] = this.getAttributes().get(ComponentConstants.WIDTH_ATTRIBUTE_KEY);
 _state[ 2 ] = this.getAttributes().get(ComponentConstants.STYLE_ATTRIBUTE_KEY);
 _state[ 3 ] = this.getAttributes().get(ComponentConstants.HEIGHT_ATTRIBUTE_KEY);
 _state[ 4 ] = this.getAttributes().get(WITH_BOTTOM_BAR_ATTRIBUTE_KEY);
 _state[ 5 ] = this.getAttributes().get(TABLE_COMPONENT_ATTRIBUTE_KEY);

 return _state;
 }

 public String getFamily() {
 return COMPONENT_TYPE;
 }

}

6. Re: Including AjaxSupport dynamically

anthony.mayfield Nov 16, 2009 8:44 AM (in response to anthony.mayfield)

Here's an example of the output from the tags for a working ajax supported input text on the page

<input type="text" name="teacherForm:j_id_jsp_444051778_2" value="aa" onkeyup="A4J.AJAX.Submit('teacherForm',event,{'similarityGroupingId':'teacherForm:j_id_jsp_444051778_3','parameters':{'teacherForm:j_id_jsp_444051778_3':'teacherForm:j_id_jsp_444051778_3'} ,'containerId':'j_id_jsp_444051778_0','actionUrl':'/aplosjsfcomponents/testComponents.jsf;jsessionid=8C457E766831281C91FB875BFE4E903C'} )" /

And here's the output for the input tag from my component

<input type="text" name="teacherForm:j_id6" value="aa" class="aplosTextbox" onkeyup="A4J.AJAX.Submit('teacherForm',event,{'similarityGroupingId':'teacherForm:j_id7','parameters':{'teacherForm:j_id7':'teacherForm:j_id7'} ,'containerId':'j_id_jsp_444051778_0','actionUrl':'/aplosjsfcomponents/testComponents.jsf;jsessionid=8C457E766831281C91FB875BFE4E903C'} )" />

7. Re: Including AjaxSupport dynamically

anthony.mayfield Nov 17, 2009 7:04 AM (in response to anthony.mayfield)

I found a fix for the problem. I added the facet under the name "ajaxsupport" and set the id of the HtmlAjaxSupport to "ajaxsupport" and this worked.
Actions

Go to original post