绑定(bind)到 java bean 的 Xpages 可重用引导字段 : validation

Question

我发现了一个 Bootstrap 可重用字段自定义控件，并已在我的最新项目中使用它。它运行良好，但验证是由 Xpage 内的 SSJS 完成的，今后我将尽可能多地从 Xpage 中移出编程并移至 java beans 中。

我在我的 bean 中进行了验证，但它会将错误放在表单顶部的显示错误控件中。我希望我的 Java 验证使用 Bootstrap 样式错误。

我在 BootstrapForXpages site 上找到了关于这样做的非常好的讨论。 .

StackOverflow 中的另一个问题 addressed this same issue但我不知道如何让它发挥作用。

How to use XPages Java code to set valid method of input control inside a custom control?

这是现场CC

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
    <xp:div>
        <xp:this.styleClass><![CDATA[#{javascript:"form-group" + ( getComponent("inputText1").isValid() ? "" : " has-error" )}]]></xp:this.styleClass>
        <xp:label styleClass="col-sm-2 control-label" for="inputText1"
            value="${compositeData.fieldLabel}" />
        <div class="col-sm-10">
            <xp:inputText type="text" id="inputText1"
                loaded="${!empty compositeData.placeholder}" value="#{compositeData.dataSource[compositeData.fieldName]}"
                required="${compositeData.required}">
                <xp:this.attrs>
                    <xp:attr name="placeholder" value="${compositeData.placeholder}" />
                </xp:this.attrs>
                <xp:this.validators>
                    <xp:validateRequired
                        message="#{javascript:compositeData.fieldLabel + ' is required'}" />
                </xp:this.validators>
            </xp:inputText>
            <xp:text escape="true" id="computedField1" styleClass="help-block"
                value="${compositeData.helpText}">
                <xp:this.rendered><![CDATA[#{javascript:getComponent("inputText1").isValid() && compositeData.helpText != null}]]></xp:this.rendered>
            </xp:text>
            <xp:message id="message1" for="inputText1" styleClass="help-block" />
        </div>
    </xp:div>
</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"
    xmlns:xe="http://www.ibm.com/xsp/coreex">   
    <xc:ccCustomField placeholder="Enter your email address"
        fieldLabel="Email" helpText="Guess what you have to enter here..."
        fieldName="model">
        <xc:this.dataSource>
            <xe:objectData var="PCModel">
                <xe:this.createObject><![CDATA[#{javascript:var pc = new com.scoular.data.PC().create();
return pc;}]]></xe:this.createObject>
            </xe:objectData>
        </xc:this.dataSource>
    </xc:ccCustomField>
</xp:view>

Answer 1

在自定义控件外部定义 objectData，包括和
将属性 dataSource 设置为 objectData 的变量 PCModel:dataSource="#{PCModel}"

<?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"
    xmlns:xe="http://www.ibm.com/xsp/coreex">
    <xp:this.data>
        <xe:objectData
            var="PCModel">
            <xe:this.createObject><![CDATA[#{javascript:
                var pc = new com.scoular.data.PC();
                pc.create();
                return pc;
            }]]></xe:this.createObject>
        </xe:objectData>
    </xp:this.data>
    <xc:ccCustomField
        placeholder="Enter your email address"
        fieldLabel="Email"
        helpText="Guess what you have to enter here..."
        fieldName="model"
        dataSource="#{PCModel}">
    </xc:ccCustomField>
</xp:view>

因此，这不是 bean 的问题，而是为自定义控件设置 dataSource 属性的问题。

另外，要小心 bean 的 create() 方法。它可能不会返回 bean 的实例。如果是这种情况，那么你的代码行

var pc = new com.scoular.data.PC().create();

不会将 pc 设置为 PC 实例，数据源也不会正确初始化。