Pass function through user control properties or user events for user controls?

Question

Here is what I want to do. I have a user control with a button. If I put it on the page, I want the end-user programmer to determine what happens when the button is pressed.

I had three ideas on how to do this, but I don’t know if, of course, they may not know how to do this.

• Pass the function through a custom property. The button will call this custom property as a function. Is it possible? If so, how do I do this? I tried, but it didn’t work.

  compositeData.ssjs_clickOK ("Hello World");

• Define a custom event for a custom control. Is it possible? How it will be done.

• Ask the button to call a unique function name, which must be defined by the user-programmer. It seems a little dirty, but it might work. How can my button code determine if a function has been defined? Will (MySpecialFunction! = Null) work?

Answer 1

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

1) In the user control, add a property that will hold the function that will be executed in our action button. I will call my query querySave. The property type must be "javax.faces.el.MethodBinding". The editor should be the Method Binding Editor.

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

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

This says: if there is a function in the querySave property, call it. If the function returns false, do not save the document.

3) Define an SSJS function that does what you need for the action button. Usually I put mine in the SSJS library. Make sure XPage has access to this feature.

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 created in step 3. IMPORTANT: do not add brackets or parameters when entering the function name - if you do this, the function will be executed at boot time, and not when you press the action button. Also, do not add any code directly to the editor, just the name of the function. Any code in this editor will also be executed at boot time.

Thanks to Bill Hanson for answering Expert Experts .

-

Update:

Here is a concrete example of such a custom control with a custom property, in which 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 a button in a user control that calls a 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> 

Answer 2

Take a look at this question: Pass javascript code to user control

My answer describes how to pass SSJS code from a custom control using method binding.

EDIT:

• Create your own ccSSJS control
• Add ssjsCode property to your CC
  • Type: javax.faces.el.MethodBinding
  • Editor: Method Binding Editor

• This is the source of CC

   <?xml version="1.0" encoding="UTF-8"?> <xp:view xmlns:xp="http://www.ibm.com/xsp/core"> <xp:button value="Label" id="button1"> <xp:eventHandler event="onclick" submit="true" refreshMode="complete"> <xp:this.action> <![CDATA[#{javascript: var args = new Array(); args["abc"] = "123"; args["cde"] = "456"; compositeData.ssjsCode.invoke( facesContext, null ); }]]> </xp:this.action> </xp:eventHandler> </xp:button> </xp:view> 

• Create XPage and Add User Control

   <?xml version="1.0" encoding="UTF-8"?> <xp:view xmlns:xp="http://www.ibm.com/xsp/core" xmlns:xc="http://www.ibm.com/xsp/custom"> <xc:ccSSJS> <xc:this.ssjsCode> <![CDATA[#{javascript: var app = facesContext.getApplication(); app.createMethodBinding("#{javascript:print( args['abc'] )}", null); }]]> </xc:this.ssjsCode> </xc:ccSSJS> </xp:view> 

If you click a button in a user control, the ssjsCode method will be called.

Answer 3

Define an arbitrary event handler anywhere on the page containing the custom control, and be sure to specify an identifier for it:

 <xp:eventHandler id="customEvent" event="customEvent"> <xp:this.action> <![CDATA[#{javascript://your custom code}]]> </xp:this.action> </xp:eventHandler> 

You can then pass the method binding associated with this event handler to the custom property of the custom control that accepts the MethodBinding (or "object"):

 getComponent("customEvent").getAction(); 

Then, from within the custom control, you can directly invoke the binding method:

 var customMethod = compositeData.get("customEvent"); var customArguments = compositeData.get("customEventArguments"); customMethod.invoke(facesContext, customArguments); 

Make sure multiple instances are allowed for the customEventArguments property for your custom control ... this forces the property to be processed as the array that the invoke method expects.

Answer 4

Here is the fourth option. Do not include the button in your user control. Instead, add an editable area with id="actionButton" . You can tell the developer that they need to add a button and where, using something similar in the design definition of a user control:

 <?xml version="1.0" encoding="UTF-8"?> <xp:view xmlns:xp="http://www.ibm.com/xsp/core" style="background-color:#4a4a4a;color:#fff;"> Add a button to the facet below.<br/> <xp:callback facetName="actionButton" id="callback1"></xp:callback> </xp:view> 

Including xp: a callback in the design definition will provide room for deployment at runtime so that the developer adds a button. (Perhaps the button should be in the panel or other control of the container, I'm not sure). If you already have other editable areas in your client control, you will also need to include them in your design definition.