Mind over Matters: Rumbles of my mind.. Echo in this blog..

I've meant to write this for a long time now, but havent got around to actually doing this. The woodstock component set has been expanding of late and we have been adding a lot of new components and functionalities to existing component set.The component renderers are now being rewritten so that they perform client side rendering (output JSON properties and client side javascript widgets take care of the constructing and showing the element on the web page). 

The components that have been rendered client side exhibit Ajax functionalities i.e. they can be updated client side asynchronously(and send data to the server ) without having to submit the form.

To get access to the dom element on the client side, you need to call document.getElementById(<client-id> )

• domNode.setProps - Use this interface to update the component's property on the client side. For example, to update an image's source. you could do something like document.getElementById("form1:image1" ).setProps({src:"/foo/bar/abc.jpg"});
• domNode.getProps - This will return you back a JSON object which contains all the component's properties.
• domNode.refresh(<element-id> ) - Using the refresh interface present on the dom element, to refresh the state of the element with the help of other element whose id  is specified in the bracket.Note that, for this, both the element's properties should be tied up to the same backing bean on the server side.For example. if you want to update the text of the hyperlink with a text that is entered in a text field, you need to do something like:

               <webuijsf:hyperlink id="refreshTest1"  text="#{HyperlinkBean.refreshText}" actionExpression="#{HyperlinkBean.success}"/>                         
                            <webuijsf:textField id="textField1" onKeyPress="setTimeout('refreshHyperlink();', 0);" text="#{HyperlinkBean.refreshText}"
                                label="Enter new text"/>

And in the "refreshHyperlink" javascript function, the code would look something like this:

                    function refreshHyperlink() {
                        // Get hyperlink to refresh.
                        var domNode = document.getElementById("form1:refreshTest1" ) ;
                        domNode.refresh("form1:textField1" ) ; // Update text field value and refresh.
                    }

The above javascript would update the value of the text field on the server side and also update the text of the hyperlink displayed without having to submit the form. Note that the text property of the hyperlink and the textField component are both bound to the same backing bean. 

If you were to invoke refresh function without any argument, the component would refresh itself without the help of any other components.

Also note that the component broadcasts events whenever you refresh the component. If other components are interested in the value of the component, then they can subscribe to these events. 

• domNode.submit() - Use this function to asynchronously submit the value of the component. The component alone will go through the whole JSF lifecycle. You can use this feature if you simply want to inform the server of the state of the component