Question

我仍在努力解决这个问题。

我有一个cc面板，其中包含控制面板某些属性的属性。面板中间有一个可编辑的区域。

我还有几个cc Bootstrap可重用控件。

我的问题是连接两者。我想要一个自定义控件，我可以放在面板可编辑区域，这将允许我选择行数和列数。所以我将cc放在可编辑区域中，有两个属性，即行和列。因此，3行和2列将构成3行2列的自举网格，每个单元格中都有一个可编辑区域。

我已经使用了设计定义，在这个主题的末尾处理了这个建议，但它并没有起作用。

有人可以让我对这个问题有所了解吗？

<?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
            saveObject="#{javascript:Test.save()}"
            var="Test">
            <xe:this.createObject><![CDATA[#{javascript:var Test = new com.scoular.model.Test();
var unid = context.getUrlParameter("key")

if (unid != "") {
    rwar.loadByUnid(unid);
    viewScope.put("readOnly","Yes");
} else {
    Test.create();
    viewScope.put("readOnly","No");
}
return Test;}]]></xe:this.createObject>
        </xe:objectData>
    </xp:this.data>
    <style>.row{ margin-top:40px; padding: 0 10px; } .clickable{ cursor: pointer; } .panel-heading span { margin-top: -20px; font-size: 15px; }</style>
    <xp:div
        id="${compositeData.panelID}"
        styleClass="${javascript:'panel ' + compositeData.panelStateClass}">
        <xp:this.style><![CDATA[${javascript://Declarations
    //String
    var sStyle:String = '';

//Check selections made for panelHeightFixed, panelHeightMax and panelEnableScroll
//Build style string accordingly

    //panelHeightMax
    if(compositeData.panelHeightMax != null && compositeData.panelHeightMax !=''){
        sStyle += 'max-height: ' + compositeData.panelHeightMax;

        //panelHeightFixed
        if(compositeData.panelHeightFixed == 'yes'){
            sStyle += ';height: ' + compositeData.panelHeightMax;
        }

        //panelEnableScroll
        if(compositeData.panelEnableScroll == 'yes'){
            sStyle += ';overflow-y: auto;'
        }
    }

 return sStyle}]]></xp:this.style>
        <xp:div
            id="divPanelHeading"
            styleClass="panel-heading"
            loaded="${compositeData.panelLayout eq 'header' || compositeData.panelLayout eq 'both'}">
            <xp:text
                escape="true"
                id="idTxtPanelTitleHTag"
                styleClass="panel-title"
                tagName="${compositeData.headerSettings.panelTitleType}"
                loaded="${compositeData.headerSettings.panelTitleType != 'none'}"
                value="${compositeData.headerSettings.panelTitle}" />
            <xp:span>
                <xp:this.styleClass><![CDATA[#{javascript:"pull-right clickable"}]]></xp:this.styleClass>
                <i class="glyphicon glyphicon-chevron-up" />
            </xp:span>
            <xp:text
                escape="true"
                id="computedField1"
                value="#{ccompositeData.headerSettings.panelTitle}" />
            <xp:text
                escape="true"
                id="idTxtPanelTitle"
                loaded="${compositeData.headerSettings.panelTitleType == 'none'}"
                value="${compositeData.headerSettings.panelTitle}" />
        </xp:div>
        <xp:div
            id="divPanelBody"
            styleClass="panel-body">

            <xp:callback
                facetName="panelContentFacet"
                id="callbackPanelContent">
            <xc:cc_Common_Field_Text
                fieldName="textField"
                fieldLabel="Text"
                helpText="Text"
                placeholder="Text">
            </xc:cc_Common_Field_Text>
            </xp:callback>
        </xp:div>
        <xp:div
            id="divPanelFooter"
            loaded="${compositeData.panelLayout eq 'footer' || compositeData.panelLayout eq 'both'}"
            styleClass="panel-footer">
            <xp:callback
                facetName="panelFooterFacet"
                id="callbackPanelFooter" />
        </xp:div>
    </xp:div>
</xp:view>

我制作了一个具有一个方面的BootStrap面板自定义控件。这样可以轻松控制标题文本，页脚文本和面板的其他属性

我也做了一个简单的＆＃34; row＆＃34;具有两个方面的自定义控件，左侧和右侧。我可以在每个控件中插入一个字段，它们排列得很好。

看起来像这样。

[我需要稍微收紧间距]。

我希望能够做的是在面板客户控件中放置任意数量的行，然后在每个方面放置字段。

我想我可以用1,2或3个方面制作行自定义控件，并使用我需要的任何一个。

但是如何在面板自定义控件中获得多个方面？我是否必须输入其中10个并且不使用所有这些，或者是否有更动态的方式？

Answer 1

首先：您可以拥有任意数量的方面 - 请查看Extlib的Switch组件。你真正想要的是控件的动态掉落区域数。感谢this great idea，您只需要编写高级设计定义。

定义控件的属性，让我们说组合允许1,2或3的列。
写下您的设计定义，它将有条件地隐藏多余的方面。

＆＃13;

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
	<xp:div>
		<xp:callback
			facetName="column_1"
			id="callback1"
			xp:key="column_1">
		</xp:callback>
<% if(this.Columns>'1'){ %>
		<xp:callback
			facetName="column_2"
			id="callback2"
			xp:key="column_2">
		</xp:callback>
<% } %>
<% if(this.Columns>'2'){ %>
		<xp:callback
			facetName="column_3"
			id="callback3"
			xp:key="column_3">
		</xp:callback>
<% } %>
	</xp:div>
</xp:view>

＆＃13;

享受。

Answer 2

我在其他地方发布了一个更加散漫的答案，但经过反思，在我看来，这可能是您正在寻找的解决方案：

像这样创建一个BootstrapRow控件：

<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
    <xp:panel styleClass="row">
        <xp:callback facetName="columns" />
    </xp:panel>
</xp:view>

并给它一个这样的设计定义：

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
  <em>row</em>
  <xp:div style="width:100%">
    <xp:callback facetName="columns" />
  </xp:div>
</xp:view>

接下来，创建一个BootstrapColumn控件：

<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
    <xp:panel styleClass="#{compositeData.styleClass}">
        <xp:callback facetName="content"></xp:callback>
    </xp:panel>
</xp:view>

设计定义：

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
  <xp:span style="width:20%;">
    <em>col</em>
    <xp:div style="width:100%">
      <xp:callback facetName="content" />
    </xp:div>
  </xp:span>
</xp:view>

您可能希望获得幻想，并根据实际宽度计算跨度宽度，以便布局看起来更接近您实际获得的宽度。显然，它需要styleClass的自定义属性。

把它们放在一起然后得到：

<xc:ccBSRow>
    <xp:panel xp:key="columns">
        <xc:ccBSColumn styleClass="col-xs-3">
            <xp:this.facets>
                <xp:label value="Label" id="label2" xp:key="content"></xp:label>
            </xp:this.facets>
            <xp:label value="Label" id="label1"></xp:label>
        </xc:ccBSColumn>
        <xc:ccBSColumn styleClass="col-xs-3">
            <xp:this.facets>
                <xp:inputText id="inputText2" xp:key="content"></xp:inputText>
            </xp:this.facets>
            <xp:inputText id="inputText1"></xp:inputText>
        </xc:ccBSColumn>
        <xc:ccBSColumn styleClass="col-xs-3">
            <xp:this.facets>
                <xp:label value="Label" id="label5" xp:key="content"></xp:label>
            </xp:this.facets>
            <xp:label value="Label" id="label3"></xp:label>
        </xc:ccBSColumn>
        <xc:ccBSColumn styleClass="col-xs-3">
            <xp:this.facets>
                <xp:inputText id="inputText3" xp:key="content"></xp:inputText>
            </xp:this.facets>
        </xc:ccBSColumn>
    </xp:panel>
</xc:ccBSRow>

你可能遇到很多其他潜在的陷阱，但我相信这至少可以解决你所问的问题。

Xpages：自定义控件可以具有可变数量的构面吗？

2 个答案: