Pass function via Custom Control Properties or custom events for Custom Controls?

Question

Here is what I want to do. I have a Custom Control with a button. If I drop it on a page, I want the end user programmer to define what happens when the button is pushed.

I had three ideas on how to accomplish this but don't know if they are possible of of course would not know how to do it.

1. Pass a function through a custom property. The button would call that custom property as a function. Is this possible? If so how would I do it? I tried it but it did not seem to work.

   compositeData.ssjs_clickOK("Hello World");

2. Define a custom event for the custom control. Is this possible? How would it be done.

3. Have the button call a unique function name that would need to be defined by the user programmer. Seems a little messy but it might work. How can my button code see if the function has been defined? Would if (MySpecialFunction != null) work?

Answer 1

I am using the following in one of my applications to pass a function to a custom control:

1) In the custom control, add a property that will hold the function to be executed in our action button. I'll call mine 'querySave'. The property type must be 'javax.faces.el.MethodBinding'. The editor must be 'Method Binding Editor'.

2). Here is the code behind the action button in the custom control for this example:

if (compositeData.querySave) if (!compositeData.querySave.call()) return;
currentDocument.save();

This says: If there is a function defined in the property 'querySave', call it. If the function returns false, don't save the document.

3) Define a SSJS function that does what you need the action button to do. I normally place mine in a SSJS library. Make sure that the XPage has access to the function.

4) In the XPage that contains this control, use the editor for the property we created in step 1 (querySave in this example) and enter the name of the function that you created in step 3. IMPORTANT: Do not add the parenthesis or parameters when you enter the function name - if you do, the function will be executed at load time rather than when you click the action button. Also, don't add any code directly to the editor, just the function name. Any code in this editor will also execute at load time.

Thanks to Bill Hanson for the answer on Experts Exchange.

--

Update:

Here's a concrete example of such a custom control with a custom property where the SSJS function in question is called validateDocument:

<xc:component_buttons>
    <xc:this.validateFunctionName><![CDATA[#{javascript:validateDocument}]]></xc:this.validateFunctionName>
</xc:component_buttons>

And here is an example of the button in the custom control that calls the function:

<xp:button id="submit" value="Save">
    <xp:eventHandler event="onclick" submit="true" refreshMode="complete">
        <xp:this.action>
            <xp:actionGroup>
                <xp:this.condition><![CDATA[#{javascript:
                if (compositeData.validateFunctionName) {
                    compositeData.validateFunctionName.call();
                }}]]>
                </xp:this.condition>
                <xp:save></xp:save>
            </xp:actionGroup>
        </xp:this.action>
    </xp:eventHandler>
</xp:button>