부트 스트랩 스위치 사용자 정의 컨트롤을 작동시키기 위해

Question

[업데이트 됨 - SOLVED]

이것은 AMD와 관련이없는 것으로 판명되었습니다. 문제는 내가 Bootstrap-Switch 코드의 잘못된 버전을 사용하고 있었다는 것입니다. 나는 3.3.4로 바꿨고 모든 것이 잘 작동했다. Howard 감사합니다.

은 -

이 게시물의 끝에서보기 [업데이트 본인은 AMD의 문제를 극복하기 위해 사용하고있는 코드를 추가 한].

Howard Greenberg's Bootstrap Switch Custom Control을 작동 시키려고합니다.

나는 지침을 정확히 따라 갔다. 내가 만난 유일한 문제는 그의 Custom Control Properties에 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

그것은 switchBinding라는 속성이 누락 된 OpenNTF 조각의 특성처럼 보인다 (이것은 문자열입니다). 이 속성을 사용자 지정 컨트롤 속성 정의에 추가했는지 확인하십시오.

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

이 값을 포함시키지 않으면 Designer에서 오류가 발생합니다.

또한 브라우저 콘솔에서 css 또는 js 파일을 찾을 수없는 것처럼 오류가 발생하는지 확인하십시오.

위에서 언급 한 AMD 문제는 이와 관련한 요소가 아닙니다.

문제가 계속되면 알려주세요. 필요한 경우 전체 작업 데이터베이스를 보낼 수 있습니다.

하워드