7 Replies Latest reply on Nov 17, 2009 7:04 AM by Anthony Mayfield

    Including AjaxSupport dynamically

    Anthony Mayfield Newbie

      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 Master

          add the support as facet and not as child component.

          • 2. Re: Including AjaxSupport dynamically
            Anthony Mayfield Newbie

            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 Master

              where the input placed? maybe your forgot form element?

              • 4. Re: Including AjaxSupport dynamically
                Anthony Mayfield Newbie

                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 Newbie

                  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 Newbie

                    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 Newbie

                      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.