What I didn’t get a chance to do in that post was talk about the actual tips for client-side component manipulation that Lucas provided. I’m going to do this over the next couple of weeks. This week, I’m going to talk about the essentials for doing any client-side component manipulation. Next week, I’ll talk about some specific component manipulation use cases that Lucas went over in his talk.
Lucas went through the essential procedure, also documented (under a fairly misleading title) here for manipulating ADF Faces RC components on the client. Here it is:
Add a Client Listener to the Component that Fires the Event
The component which should trigger the change (in itself or elsewhere) needs to have a clientListener component added to it, like so:
Prepare Components that Will Be Affected by the Event
<af:outputText id="clientEventReceivingOutputText" clientComponent="true" />
The function should take a single argument. When your firing component calls the function, it will pass an AdfBaseEvent as the parameter (actually, my guess is that the object will always be an AdfComponentEvent, but I can’t verify that in general, so I’ll recommend only assuming AdfBaseEvent functions are available unless you’ve verified this for your specific case).
You’ll also, of course, need access to the component that fired the event, and any component you want to use/change. To get the event’s , you can just call getSource() on the parameter, and to get another component (for which you’ve generated a client component as above), you need to pass an absolute or relative path (more on that in a second) to the method findComponent() that the source object will provide. Observe:
So, what’s did I mean by absolute or relative path? Well, first you need to understand that some components in ADF Faces RC (or indeed, generic JSF) are what are called naming containers–which are sort of to other components what directories are to files. There doesn’t seem to be an exhaustive list anywhere of the ADF Faces RC naming containers, so you’ll need to look at the documentation for each component individually (components which are naming containers say so right up at the top of a help page).
Once you’ve figured out where your components are relative to each other and their naming containers, you can figure out the path to the target component; it’s exactly like the path that would be used (on the server side) by UIComponent.findComponent().
The next, step, of course, is to actually write the code for manipulating the client-side objects. I’ll write about that next week.