Question

这是我想要做的。我有一个带按钮的自定义控件。如果我将它放在页面上，我希望最终用户程序员定义按下按钮时会发生什么。

我有三个关于如何实现这个目标的想法，但不知道它们是否有可能当然不知道如何去做。

通过自定义属性传递函数。该按钮将该自定义属性称为函数。这可能吗？如果是这样，我该怎么做？我尝试过但它似乎没有用。

compositeData.ssjs_clickOK（“Hello World”）;
为自定义控件定义自定义事件。这可能吗？怎么做呢。
让按钮调用一个需要由用户程序员定义的唯一函数名。看起来有点乱，但它可能会奏效。我的按钮代码如何查看函数是否已定义？ if（MySpecialFunction！= null）是否有效？

Answer 1

我在我的一个应用程序中使用以下内容将函数传递给自定义控件：

1）在自定义控件中，添加一个属性，该属性将保存要在我们的操作按钮中执行的功能。我称之为'querySave'。属性类型必须是'javax.faces.el.MethodBinding'。编辑器必须是“方法绑定编辑器”。

2）。以下是此示例的自定义控件中操作按钮背后的代码：

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

这说：如果属性'querySave'中定义了一个函数，请调用它。如果函数返回false，请不要保存文档。

3）定义一个SSJS函数，它可以执行操作按钮所需的操作。我通常把我放在一个SSJS库中。确保XPage可以访问该功能。

4）在包含此控件的XPage中，使用我们在步骤1中创建的属性的编辑器（本例中为querySave）并输入您在步骤3中创建的函数的名称。重要说明：执行此操作输入函数名称时不添加括号或参数 - 如果这样做，该函数将在加载时执行，而不是在单击操作按钮时执行。另外，不要直接向编辑器添加任何代码，只需添加函数名称。此编辑器中的任何代码也将在加载时执行。

感谢Bill Hanson for the answer on Experts Exchange。

-

<强>更新

以下是具有自定义属性的自定义控件的具体示例，其中所讨论的SSJS函数称为validateDocument：

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

以下是自定义控件中调用函数的按钮示例：

<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

看一下这个问题：Pass javascript code to Custom Control

我的回答描述了如何通过方法绑定从自定义控件传递SSJS代码。

修改

创建自定义控件“ccSSJS”

将属性 ssjsCode 添加到您的CC

输入： javax.faces.el.MethodBinding

编辑：方法绑定编辑器

这是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>

创建XPage并添加自定义控件

<?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>

如果单击自定义控件中的按钮，将调用 ssjsCode 方法。

Answer 3

在包含自定义控件的页面上的任意位置定义任意事件处理程序，并确保为其指定id：

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

然后，您可以将与该事件处理程序关联的方法绑定传递给接受MethodBinding（或“object”）的自定义控件的自定义属性：

getComponent("customEvent").getAction();

然后，从自定义控件内部，您可以直接调用方法绑定：

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

确保自定义控件的“customEventArguments”属性设置为允许多个...这会强制将属性视为数组，这是调用方法所期望的。

Answer 4

这是第四种选择。不要在自定义控件上包含该按钮。而是使用id="actionButton"添加可编辑区域。您可以告诉开发人员他们需要添加一个按钮，并在自定义控件的设计定义中使用类似的东西：

<?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>

在设计定义中包含xp：callback将在运行时为开发人员添加按钮提供一个删除区域。（按钮可能需要在面板或其他容器控件中，我不确定）。如果您的客户控制中已有其他可编辑区域，则您还需要将它们包含在设计定义中。

通过自定义控件属性或自定义控件的自定义事件传递功能？

4 个答案: