Question

[已更新 - 已解决]

事实证明这不是AMD的问题。问题是我使用的是不正确版本的Bootstrap-Switch代码。我切换到3.3.4，一切正常。谢谢霍华德。

[更新 - 我添加了我用来克服AMD问题的代码]

请参阅本文末尾。

我想让Howard Greenberg's Bootstrap Switch Custom Control开始工作。

我相信我完全按照说明操作。我遇到的唯一问题是，在他的自定义控件属性中没有一个switchBinding，我认为这是必要的，所以我添加了一个。

我没有得到任何错误，但我看到的只是一个带有计算字段的空白页面[“Bryan”]。

我做错了什么？

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">
  <xp:this.beforePageLoad><![CDATA[#{javascript:viewScope.sampleValue = "Bryan"}]]></xp:this.beforePageLoad>
  <xc:cc_CommonFieldCheckBox3
    refreshId="computedField1"
    checkedValue="checked"
    uncheckedValue="not checked"
    offLabel="OFF"
    onLabel="ON"
    labelText="Label"
    dataSize="normal"
    offColor="success"
    onColor="warning"
    handleWidth="auto"
    labelWidth="auto"
    inverse="false"
    switchBinding="viewScope.sampleValue">
  </xc:cc_CommonFieldCheckBox3>
  <xp:br></xp:br>
  <xp:br></xp:br>
  <xp:text
    escape="true"
    id="computedField1" value="#{viewScope.sampleValue}">
  </xp:text>
  </xp:view>

自定义控制

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">

  <xp:this.resources>
    <xp:styleSheet
      href="/bootstrap-switch/css/bootstrap-switch.min.css"></xp:styleSheet>
    <xp:script
      src="/bootstrap-switch/js/bootstrap-switch.min.js"
      clientSide="true">
    </xp:script>
  </xp:this.resources>


  <xp:panel
    id="checkBoxPanel">
    <xp:eventHandler
        event="onClientLoad"
        submit="false">
        <xp:this.script><![CDATA[x$("#{id:checkBox1}").bootstrapSwitch();

var refreshId = "#{javascript: (compositeData.refreshId!=null) ? getClientId(compositeData.refreshId):''}";

if (refreshId != null || refreshId != "") {
    // set the partial refresh if the user put an id in the cc property
    x$("#{id:checkBox1}")
            .on(
                    'switchChange.bootstrapSwitch',
                    function(event, state) {
                        XSP
                                .partialRefreshPost("#{javascript: (compositeData.refreshId!=null) ? getClientId(compositeData.refreshId):''}");
                    });
}

function x$(idTag, param) { // Updated 18 Feb 2012
    idTag = idTag.replace(/:/gi, "\\:") + (param ? param : "");
    return ($("#" + idTag));
}]]></xp:this.script>
    </xp:eventHandler>
    <xp:checkBox
      id="checkBox1"
      checkedValue="${javascript:return compositeData.checkedValue;}"
      uncheckedValue="${javascript:return compositeData.uncheckedValue;}"
      defaultChecked="false">
      <xp:this.value><![CDATA[${javascript:"#{"+compositeData.switchBinding+"}"}]]></xp:this.value>
      <xp:this.attrs>
        <xp:attr
          name="data-on-text"
          value="${javascript:return compositeData.onLabel;}">
        </xp:attr>
        <xp:attr
          name="data-off-text"
          value="${javascript:return compositeData.offLabel;}">
        </xp:attr>
        <xp:attr
          name="data-label-text"
          value="${javascript:return compositeData.labelText;}">
        </xp:attr>
        <xp:attr
          name="data-size"
          value="${javascript:return compositeData.dataSize;}">
        </xp:attr>
        <xp:attr
          name="data-on-Color"
          value="${javascript:return compositeData.onColor;}">
        </xp:attr>
        <xp:attr
          name="data-off-Color"
          value="${javascript:return compositeData.offColor;}">
        </xp:attr>
        <xp:attr
          name="data-handle-width"
          value="${javascript:return compositeData.handleWidth;}">
        </xp:attr>
        <xp:attr
          name="data-label-width"
          value="${javascript:return compositeData.labelWidth;}">
        </xp:attr>
        <xp:attr
          name="data-inverse"
          value="${javascript:return compositeData.inverse;}">
        </xp:attr>
      </xp:this.attrs>
    </xp:checkBox>
  </xp:panel>
</xp:view>

自定义控件属性

<?xml version="1.0" encoding="UTF-8"?>
<faces-config>
  <faces-config-extension>
    <namespace-uri>http://www.ibm.com/xsp/custom</namespace-uri>
    <default-prefix>xc</default-prefix>
  </faces-config-extension>
  <composite-component>
    <component-type>cc_CommonFieldCheckBox3</component-type>
    <composite-name>cc_CommonFieldCheckBox3</composite-name>
    <composite-file>/cc_CommonFieldCheckBox3.xsp</composite-file>
    <composite-extension>
      <designer-extension>
        <in-palette>true</in-palette>
        <render-markup>&lt;?xml version="1.0" encoding="UTF-8"?&gt;&#xd;
&lt;xp:view&#xd;
  xmlns:xp="http://www.ibm.com/xsp/core"&gt;&#xd;
  &lt;B&gt;Bootstrap Switch Custom Control&lt;/B&gt;&lt;/xp:view&gt;</render-markup>
        <category>Custom Controls - Fields</category>
      </designer-extension>
    </composite-extension>
    <property>
      <property-name>refreshId</property-name>
      <property-class>string</property-class>
      <display-name>refreshId</display-name>
      <description>If you supply a control  Id than that control will be partially refreshed upon change. If this is empty than no refresh happens.</description>
      <property-extension>
        <required>false</required>
      </property-extension>
    </property>
    <property>
      <property-name>checkedValue</property-name>
      <property-class>string</property-class>
      <display-name>checkedValue</display-name>
      <property-extension>
        <required>true</required>
      </property-extension>
    </property>
    <property>
      <property-name>uncheckedValue</property-name>
      <property-class>string</property-class>
      <display-name>uncheckedValue</display-name>
      <property-extension>
        <required>true</required>
      </property-extension>
    </property>
    <property>
      <property-name>onLabel</property-name>
      <property-class>string</property-class>
      <display-name>onLabel</display-name>
      <property-extension>
        <required>true</required>
        <designer-extension>
          <default-value>ON</default-value>
        </designer-extension>
      </property-extension>
    </property>
    <property>
      <property-name>offLabel</property-name>
      <property-class>string</property-class>
      <display-name>offLabel</display-name>
      <property-extension>
        <required>true</required>
        <designer-extension>
          <default-value>OFF</default-value>
        </designer-extension>
      </property-extension>
    </property>
    <property>
      <property-name>labelText</property-name>
      <property-class>string</property-class>
      <display-name>labelText</display-name>
      <property-extension>
        <required>true</required>
        <designer-extension>
          <default-value>Label</default-value>
        </designer-extension>
      </property-extension>
    </property>
    <property>
      <property-name>dataSize</property-name>
      <property-class>string</property-class>
      <display-name>dataSize</display-name>
      <property-extension>
        <designer-extension>
          <editor>com.ibm.workplace.designer.property.editors.comboParameterEditor</editor>
          <editor-parameter>mini&#xd;
small&#xd;
normal&#xd;
large</editor-parameter>
          <default-value>normal</default-value>
        </designer-extension>
      </property-extension>
      <description>Size of the switch</description>
    </property>
    <property>
      <property-name>onColor</property-name>
      <property-class>string</property-class>
      <display-name>onColor</display-name>
      <property-extension>
        <designer-extension>
          <editor>com.ibm.workplace.designer.property.editors.comboParameterEditor</editor>
          <editor-parameter>primary&#xd;
info&#xd;
success&#xd;
warning&#xd;
danger&#xd;
default</editor-parameter>
          <default-value>primary</default-value>
        </designer-extension>
      </property-extension>
      <description>Color of left side of switch</description>
    </property>
    <property>
      <property-name>offColor</property-name>
      <property-class>string</property-class>
      <display-name>offColor</display-name>
      <property-extension>
        <designer-extension>
          <editor>com.ibm.workplace.designer.property.editors.comboParameterEditor</editor>
          <editor-parameter>primary&#xd;
info&#xd;
success&#xd;
warning&#xd;
danger&#xd;
default</editor-parameter>
          <default-value>default</default-value>
        </designer-extension>
      </property-extension>
      <description>Color of right side of switch</description>
    </property>
    <property>
      <property-name>labelWidth</property-name>
      <property-class>string</property-class>
      <display-name>labelWidth</display-name>
      <property-extension>
        <designer-extension>
          <default-value>auto</default-value>
        </designer-extension>
      </property-extension>
      <description>Width of the center handle in pixels, default is auto</description>
    </property>
    <property>
      <property-name>handleWidth</property-name>
      <property-class>string</property-class>
      <display-name>handleWidth</display-name>
      <property-extension>
        <designer-extension>
          <default-value>auto</default-value>
        </designer-extension>
      </property-extension>
      <description>Width of the left and right sides in pixels, default is auto</description>
    </property>
    <property>
      <property-name>inverse</property-name>
      <property-class>string</property-class>
      <display-name>inverse</display-name>
      <description>Inverse switch direction</description>
      <property-extension>
        <designer-extension>
          <default-value>false</default-value>
          <editor>com.ibm.workplace.designer.property.editors.comboParameterEditor</editor>
          <editor-parameter>true&#xd;
false</editor-parameter>
        </designer-extension>
      </property-extension>
    </property>
    <description/>
    <property>
      <property-name>switchBinding</property-name>
      <property-class>string</property-class>
    </property>
  </composite-component>
</faces-config>

  <xp:this.resources>
    <xp:styleSheet
      href="/bootstrap-switch/css/bootstrap-switch.min.css"></xp:styleSheet>
  </xp:this.resources>

Answer 1

看起来OpenNTF片段的属性缺少一个名为switchBinding的属性（它是一个字符串）。确保将其添加到自定义控件属性定义中。

   <property>
  <property-name>switchBinding</property-name>
  <property-class>string</property-class>
  <display-name>switchBinding</display-name>
</property>

如果您不包含此内容，则会在Designer中出现错误。

此外，请务必检查浏览器控制台，看看是否有任何错误（例如，它无法找到css或js文件）。

请注意，上面提到的AMD问题不是这个问题的一个因素。

如果您仍有问题，请告诉我。如果需要，我可以发送给你整个工作数据库。

霍华德

使Bootstrap切换自定义控件工作

1 个答案: