10 Replies Latest reply on Mar 23, 2009 1:57 PM by nbelaevski

    custom component & custom javascript code?!

      Hi

      It's possible, that i'm doing it all wrong, but this is what i want to achieve:
      I'd like to create a custom richfaces component which resembles a Checkbox. So i have a class which extends a HtmlAjaxCommandButton and an appropriate renderer, which extends CommandButtonRenderer. Rendering is performed as expected but i'm missing the ability to store the 'checked' state via ajax on the server component.
      So i'd like to do something similar to what is done in the <rich:simpleTogglePanel> component. As i looked in the source codes, i saw that i have to add some decoding and overwriting of the getOnClick method to add a JSFunction.
      Now this is where my problem starts:
      I thought, since my renderer is actually a HeaderResourcesRendererBase, richfaces automagically could add my own javascript in the header of the generated html output. But how?
      I don't know, what i have to do, so that my javascript code is accessible from the component. I don't want to add the javascript code into the encode method of the renderer...
      Can i place the javascript in my skin.jar. I have already one with several xcss definitions? And if so, do i have to add the path of the .js file in the component configuration file? But how?
      Any clue or idea is highly appreciated!
      Thx.

        • 1. Re: custom component & custom javascript code?!
          ilya_shaikovsky

          Look there
          in this chapter you could see how styles added by using h:style in the template.
          http://www.jboss.org/file-access/default/members/jbossrichfaces/freezone/docs/cdkguide/en/html/crenderer.html#template

          and the same but for your scripts could be achieved by h:script .
          http://www.jboss.org/file-access/default/members/jbossrichfaces/freezone/docs/cdkguide/en/html/temptags.html#hscripts

          Also some articles about CDK exist in our wiki.

          • 2. Re: custom component & custom javascript code?!
            nbelaevski

            IMO, code exploration is the best source of such information: http://anonsvn.jboss.org/repos/richfaces/trunk
            Take a look at ui\* directories. Also you can grab sources archive from download page - they contain files generated during build.

            • 3. Re: custom component & custom javascript code?!

              ok, thx all for your help.
              Actually it was quite clear once i discovered, that i may not set the context-param 'org.richfaces.LoadScriptStrategy' to 'ALL' or 'NONE' in my web.xml. If its left at its default, every renderer which is extended from AjaxComponentRendererBase may overwrite the getAdditionalScripts() method to append own scripts, which are then put into the header.

              Alas, i have another problem, for which someone might have an idea. I have a custom component with an own encode/decode block. The component is based upon a HtmlAjaxCommandButton and in its onclick method, a ajax request is generated. Upon processing the request, also some events are generated, which are processed correctly. The encode block of the component reacts to certain changed settings and is called from the AjaxViewHandler.renderView/AjaxContainerRenderer.encodeAjax(...). So upon processing the request, some different output is encoded from the output which was displayed before in my browser. Nevertheless, the new output is never displayed and it looks just like before...? So i'm asking myself, where has the changed output written to a responsewriter gone?
              During debugging, everything looks fine and is called, but the final result is not correct.
              Does anyone have a clue?

              • 4. Re: custom component & custom javascript code?!
                nbelaevski

                Hello,

                Add a4j:log component to the page and examine how AJAX response is processed.

                • 5. Re: custom component & custom javascript code?!

                  hi

                  Many thx for the reply ;)
                  After adding the a4j:log tag, and performing a single request, i got a lot of information:

                  ----------------------------
                  debug[14:49:47,588]: Have Event [object Object] with properties: target: [object HTMLInputElement], srcElement: undefined, type: click
                  debug[14:49:47,589]: Query preparation for form 'j_id2' requested
                  debug[14:49:47,590]: Append hidden control j_id2 with value [j_id2] and value attribute [j_id2]
                  debug[14:49:47,590]: Append hidden control autoScroll with value [] and value attribute []
                  debug[14:49:47,591]: Append hidden control javax.faces.ViewState with value [j_id1] and value attribute [j_id1]
                  debug[14:49:47,591]: parameter j_id2:j_id6 with value j_id2:j_id6
                  debug[14:49:47,591]: Look up queue with default name
                  debug[14:49:47,592]: NEW AJAX REQUEST !!! with form: j_id2
                  debug[14:49:47,592]: Start XmlHttpRequest
                  debug[14:49:47,593]: Reqest state : 1
                  debug[14:49:47,594]: QueryString: AJAXREQUEST=_viewRoot&j_id2=j_id2&autoScroll=&javax.faces.ViewState=j_id1&j_id2%3Aj_id6=j_id2%3Aj_id6&
                  debug[14:49:47,604]: Reqest state : 1
                  debug[14:50:28,374]: Reqest state : 2
                  debug[14:50:28,376]: Reqest state : 3
                  debug[14:50:28,376]: Reqest state : 4
                  debug[14:50:28,377]: Reqest end with state 4
                  debug[14:50:28,377]: Response with content-type: text/xml;charset=UTF-8
                  debug[14:50:28,377]: Full response content: <?xml version="1.0"?> WENN DAS HIER SICHTBAR IST; DANN KLAPPTS ENDLICH !
                  debug[14:50:28,379]: Header Ajax-Expired not found, search in
                  debug[14:50:28,379]: search for elements by name 'meta' in element #document
                  debug[14:50:28,384]: Find
                  debug[14:50:28,385]: Find
                  debug[14:50:28,385]: Header Ajax-Update-Ids not found, search in
                  debug[14:50:28,386]: search for elements by name 'meta' in element #document
                  debug[14:50:28,390]: Find
                  debug[14:50:28,390]: Update page by list of rendered areas from response j_id2:j_id6
                  debug[14:50:28,391]: search for elements by name 'script' in element #document
                  debug[14:50:28,397]: in response with src=/componentsTest/a4j/g/3_3_0.GAorg.ajax4jsf.javascript.AjaxScript.jsf
                  debug[14:50:28,398]: Such element exist in document
                  debug[14:50:28,398]: in response with src=/componentsTest/a4j/g/3_3_0.GAorg/ajax4jsf/javascript/scripts/form.js.jsf
                  debug[14:50:28,398]: Such element exist in document
                  debug[14:50:28,399]: in response with src=/componentsTest/a4j/g/3_3_0.GAde/soc/skins/soc/scripts/sctcheckbox.js.jsf
                  debug[14:50:28,399]: Such element exist in document
                  debug[14:50:28,399]: in response with src=/componentsTest/a4j/g/3_3_0.GAorg.ajax4jsf.javascript.PrototypeScript.jsf
                  debug[14:50:28,400]: Such element exist in document
                  debug[14:50:28,400]: in response with src=/componentsTest/a4j/g/3_3_0.GAorg.ajax4jsf.javascript.ImageCacheScript.jsf
                  debug[14:50:28,401]: Such element exist in document
                  debug[14:50:28,401]: in response with src=/componentsTest/a4j/g/3_3_0.GAorg/richfaces/renderkit/html/scripts/browser_info.js.jsf
                  debug[14:50:28,401]: Such element exist in document
                  debug[14:50:28,402]: in response with src=/componentsTest/a4j/g/3_3_0.GAscripts/simpleTogglePanel.js.jsf
                  debug[14:50:28,402]: Such element exist in document
                  debug[14:50:28,403]: in response with src=/componentsTest/a4j/g/3_3_0.GAorg/richfaces/renderkit/html/scripts/skinning.js.jsf
                  debug[14:50:28,403]: Such element exist in document
                  debug[14:50:28,403]: search for elements by name 'link' in element #document
                  debug[14:50:28,410]: in response with src=/componentsTest/a4j/s/3_3_0.GAorg/richfaces/renderkit/html/css/basic_classes.xcss/DATB/eAErPlEjH7p8hjQAES8Dhg__.jsf
                  debug[14:50:28,411]: Such element exist in document
                  debug[14:50:28,411]: in response with src=/componentsTest/a4j/s/3_3_0.GAorg/richfaces/renderkit/html/css/extended_classes.xcss/DATB/eAErPlEjH7p8hjQAES8Dhg__.jsf
                  debug[14:50:28,411]: Such element exist in document
                  debug[14:50:28,412]: in response with src=/componentsTest/a4j/s/3_3_0.GAcss/simpleTogglePanel.xcss/DATB/eAErPlEjH7p8hjQAES8Dhg__.jsf
                  debug[14:50:28,412]: Such element exist in document
                  debug[14:50:28,412]: in response with src=/componentsTest/a4j/s/3_3_0.GAMETA-INF/skins/soc.xcss/DATB/eAErPlEjH7p8hjQAES8Dhg__.jsf
                  debug[14:50:28,413]: Such element exist in document
                  debug[14:50:28,413]: call getElementById for id= org.ajax4jsf.queue_script
                  debug[14:50:28,414]: Update page part from call parameter for ID j_id2:j_id6
                  debug[14:50:28,414]: call getElementById for id= j_id2:j_id6
                  error[14:50:28,414]: New node for ID j_id2:j_id6 is not present in response
                  debug[14:50:28,414]: call getElementById for id= org.ajax4jsf.oncomplete
                  debug[14:50:28,415]: Processing updates finished, no oncomplete function to call
                  debug[14:50:28,415]: call getElementById for id= ajax-view-state
                  debug[14:50:28,415]: Hidden JSF state fields: [object HTMLSpanElement]
                  debug[14:50:28,416]: Namespace for hidden view-state input fields is undefined
                  debug[14:50:28,416]: search for elements by name 'input' in element span
                  debug[14:50:28,420]: Replace value for inputs: 6 by new values: 1
                  debug[14:50:28,420]: Input in response: javax.faces.ViewState
                  debug[14:50:28,421]: Found same input on page with type: hidden
                  debug[14:50:28,422]: search for elements by name 'INPUT' in element span
                  debug[14:50:28,425]: Replace value for inputs: 6 by new values: 0
                  debug[14:50:28,426]: call getElementById for id= _A4J.AJAX.focus
                  debug[14:50:28,426]: No focus information in response
                  ----------------------------

                  (the timestamps span over a few seconds because i had to step through a lot of breakpoints.)

                  I'm wondering about this line:
                  ---> error[14:50:28,414]: New node for ID j_id2:j_id6 is not present in response
                  This is the id of the component which doesn't change its appearance like i was expecting. But how could it be not present in the response?
                  Do you have a clue?

                  • 6. Re: custom component & custom javascript code?!

                    debug[14:50:28,397]: in response with src=/componentsTest/a4j/g/3_3_0.GAorg.ajax4jsf.javascript.AjaxScript.jsf
                    debug[14:50:28,398]: Such element exist in document
                    debug[14:50:28,398]: in response with src=/componentsTest/a4j/g/3_3_0.GAorg/ajax4jsf/javascript/scripts/form.js.jsf
                    debug[14:50:28,398]: Such element exist in document
                    debug[14:50:28,399]: in response with src=/componentsTest/a4j/g/3_3_0.GAde/soc/skins/soc/scripts/sctcheckbox.js.jsf
                    debug[14:50:28,399]: Such element exist in document
                    debug[14:50:28,399]: in response with src=/componentsTest/a4j/g/3_3_0.GAorg.ajax4jsf.javascript.PrototypeScript.jsf
                    debug[14:50:28,400]: Such element exist in document
                    debug[14:50:28,400]: in response with src=/componentsTest/a4j/g/3_3_0.GAorg.ajax4jsf.javascript.ImageCacheScript.jsf
                    debug[14:50:28,401]: Such element exist in document
                    debug[14:50:28,401]: in response with src=/componentsTest/a4j/g/3_3_0.GAorg/richfaces/renderkit/html/scripts/browser_info.js.jsf
                    debug[14:50:28,401]: Such element exist in document
                    debug[14:50:28,402]: in response with src=/componentsTest/a4j/g/3_3_0.GAscripts/simpleTogglePanel.js.jsf
                    debug[14:50:28,402]: Such element exist in document
                    debug[14:50:28,403]: in response with src=/componentsTest/a4j/g/3_3_0.GAorg/richfaces/renderkit/html/scripts/skinning.js.jsf
                    debug[14:50:28,403]: Such element exist in document
                    debug[14:50:28,403]: search for elements by name 'link' in element #document
                    debug[14:50:28,410]: in response with src=/componentsTest/a4j/s/3_3_0.GAorg/richfaces/renderkit/html/css/basic_classes.xcss/DATB/eAErPlEjH7p8hjQAES8Dhg__.jsf
                    debug[14:50:28,411]: Such element exist in document
                    debug[14:50:28,411]: in response with src=/componentsTest/a4j/s/3_3_0.GAorg/richfaces/renderkit/html/css/extended_classes.xcss/DATB/eAErPlEjH7p8hjQAES8Dhg__.jsf
                    debug[14:50:28,411]: Such element exist in document
                    debug[14:50:28,412]: in response with src=/componentsTest/a4j/s/3_3_0.GAcss/simpleTogglePanel.xcss/DATB/eAErPlEjH7p8hjQAES8Dhg__.jsf
                    debug[14:50:28,412]: Such element exist in document
                    debug[14:50:28,412]: in response with src=/componentsTest/a4j/s/3_3_0.GAMETA-INF/skins/soc.xcss/DATB/eAErPlEjH7p8hjQAES8Dhg__.jsf
                    debug[14:50:28,413]: Such element exist in document
                    debug[14:50:28,413]: call getElementById for id= org.ajax4jsf.queue_script
                    debug[14:50:28,414]: Update page part from call parameter for ID j_id2:j_id6
                    debug[14:50:28,414]: call getElementById for id= j_id2:j_id6
                    error[14:50:28,414]: New node for ID j_id2:j_id6 is not present in response
                    debug[14:50:28,414]: call getElementById for id= org.ajax4jsf.oncomplete
                    debug[14:50:28,415]: Processing updates finished, no oncomplete function to call
                    debug[14:50:28,415]: call getElementById for id= ajax-view-state
                    debug[14:50:28,415]: Hidden JSF state fields: [object HTMLSpanElement]
                    debug[14:50:28,416]: Namespace for hidden view-state input fields is undefined
                    debug[14:50:28,416]: search for elements by name 'input' in element span
                    debug[14:50:28,420]: Replace value for inputs: 6 by new values: 1
                    debug[14:50:28,420]: Input in response: javax.faces.ViewState
                    debug[14:50:28,421]: Found same input on page with type: hidden
                    debug[14:50:28,422]: search for elements by name 'INPUT' in element span
                    debug[14:50:28,425]: Replace value for inputs: 6 by new values: 0
                    debug[14:50:28,426]: call getElementById for id= _A4J.AJAX.focus
                    debug[14:50:28,426]: No focus information in response
                    ----------------------------

                    (the timestamps span over a few seconds because i had to step through a lot of breakpoints.)

                    I'm wondering about this line:
                    ---> error[14:50:28,414]: New node for ID j_id2:j_id6 is not present in response
                    This is the id of the component which doesn't change its appearance like i was expecting. But how could it be not present in the response?
                    Do you have a clue?

                    • 7. Re: custom component & custom javascript code?!

                      debug[14:50:28,397]: in response with src=/componentsTest/a4j/g/3_3_0.GAorg.ajax4jsf.javascript.AjaxScript.jsf
                      debug[14:50:28,398]: Such element exist in document
                      debug[14:50:28,399]: in response with src=/componentsTest/a4j/g/3_3_0.GAde/soc/skins/soc/scripts/sctcheckbox.js.jsf
                      debug[14:50:28,399]: Such element exist in document
                      [... skipped some scripts]
                      debug[14:50:28,403]: search for elements by name 'link' in element #document
                      debug[14:50:28,410]: in response with src=/componentsTest/a4j/s/3_3_0.GAorg/richfaces/renderkit/html/css/basic_classes.xcss/DATB/eAaEjerwH7p8hjQAES8Dhg__.jsf
                      debug[14:50:28,411]: Such element exist in document
                      debug[14:50:28,411]: in response with src=/componentsTest/a4j/s/3_3_0.GAorg/richfaces/renderkit/html/css/extended_classes.xcss/DATB/eAErPadfrsAE5jQAES8Dhg__.jsf
                      debug[14:50:28,411]: Such element exist in document
                      debug[14:50:28,412]: in response with src=/componentsTest/a4j/s/3_3_0.GAcss/simpleTogglePanel.xcss/DATB/eAErPlE3adddeEAES8Dhg__.jsf
                      debug[14:50:28,412]: Such element exist in document
                      debug[14:50:28,412]: in response with src=/componentsTest/a4j/s/3_3_0.GAMETA-INF/skins/soc.xcss/DATB/eAErgsdferjH7p3jQsxS8Dhg__.jsf
                      debug[14:50:28,413]: Such element exist in document

                      • 8. Re: custom component & custom javascript code?!

                        debug[14:50:28,398]: Such element exist in document
                        debug[14:50:28,399]: script in response with src=/componentsTest/a4j/g/3_3_0.GAde/soc/skins/soc/scripts/sctcheckbox.js.jsf
                        debug[14:50:28,399]: Such element exist in document
                        [... skipped some scripts]
                        debug[14:50:28,403]: search for elements by name 'link' in element #document
                        debug[14:50:28,410]: link in response with src=/componentsTest/a4j/s/3_3_0.GAorg/richfaces/renderkit/html/css/basic_classes.xcss/DATB/eAaEjerwH7p8hjQAES8Dhg__.jsf
                        debug[14:50:28,411]: Such element exist in document
                        debug[14:50:28,411]: link in response with src=/componentsTest/a4j/s/3_3_0.GAorg/richfaces/renderkit/html/css/extended_classes.xcss/DATB/eAErPadfrsAE5jQAES8Dhg__.jsf
                        debug[14:50:28,411]: Such element exist in document
                        debug[14:50:28,412]: link in response with src=/componentsTest/a4j/s/3_3_0.GAcss/simpleTogglePanel.xcss/DATB/eAErPlE3adddeEAES8Dhg__.jsf
                        debug[14:50:28,412]: Such element exist in document
                        debug[14:50:28,412]: link in response with src=/componentsTest/a4j/s/3_3_0.GAMETA-INF/skins/soc.xcss/DATB/eAErgsdferjH7p3jQsxS8Dhg__.jsf
                        debug[14:50:28,413]: Such element exist in document
                        debug[14:50:28,413]: call getElementById for id= org.ajax4jsf.queue_script
                        debug[14:50:28,414]: Update page part from call parameter for ID j_id2:j_id6
                        debug[14:50:28,414]: call getElementById for id= j_id2:j_id6
                        error[14:50:28,414]: New node for ID j_id2:j_id6 is not present in response
                        debug[14:50:28,414]: call getElementById for id= org.ajax4jsf.oncomplete
                        debug[14:50:28,415]: Processing updates finished, no oncomplete function to call
                        debug[14:50:28,415]: call getElementById for id= ajax-view-state
                        debug[14:50:28,415]: Hidden JSF state fields: [object HTMLSpanElement]
                        debug[14:50:28,416]: Namespace for hidden view-state input fields is undefined
                        debug[14:50:28,416]: search for elements by name 'input' in element span
                        debug[14:50:28,420]: Replace value for inputs: 6 by new values: 1
                        debug[14:50:28,420]: Input in response: javax.faces.ViewState
                        debug[14:50:28,421]: Found same input on page with type: hidden
                        debug[14:50:28,422]: search for elements by name 'INPUT' in element span
                        debug[14:50:28,425]: Replace value for inputs: 6 by new values: 0
                        debug[14:50:28,426]: call getElementById for id= _A4J.AJAX.focus
                        debug[14:50:28,426]: No focus information in response
                        ----------------------------

                        (the timestamps span over a few seconds because i had to step through a lot of breakpoints.)

                        I'm wondering about this line:
                        ---> error[14:50:28,414]: New node for ID j_id2:j_id6 is not present in response
                        This is the id of the component which doesn't change its appearance like i was expecting. But how could it be not present in the response?
                        Do you have a clue?

                        (Btw: sry, for the multiple strange posts; although i 'disabled html in this post' it had some problems with the '<'&'>' ;( )

                        • 9. Re: custom component & custom javascript code?!

                          ok, this seems to be solved now.
                          I didn't write the clientId in the response and this is obviously necessary for the ajax update. first i thought, that also the same html elements need to be updated, but it seems to be just the client id which is needed to perform the update.
                          thx for your help ;)

                          • 10. Re: custom component & custom javascript code?!
                            nbelaevski

                             

                            "domdom" wrote:
                            (Btw: sry, for the multiple strange posts; although i 'disabled html in this post' it had some problems with the '<'&'>' ;( )


                            Enclose them into [ code ] [/ code] pseudo-tags.