在设计定义中使用来自数据源值的计算值

Using computed value from datasource value in design definition

我在设计定义中有一个带有计算标题的自定义控件:

text="<%=this.titleBarText%>">

我想传递一个标题,由javascript计算:

document1.isNewNote()?'New document':'Edit document'

当我尝试时,出现错误:

Error generating custom visualisation for this custom control. Markup validation failed. Ensure 'Design Definition' source is valid.

我的自定义控件在浏览器中运行良好,但我无法在 WYSIWYG-editor 中对其进行编辑。 我该如何处理这个错误?

设计定义:

  <?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
    <xp:panel style='background-color:rgb(255, 255, 255);border-bottom-color:rgb(221, 221, 221);border-bottom-left-radius:4px;border-bottom-right-radius:4px;border-bottom-style:solid;border-bottom-width:1px;border-image-outset:0px;border-image-repeat:stretch;border-image-slice:100%;border-image-source:none;border-image-width:1;border-left-color:rgb(221, 221, 221);border-left-style:solid;border-left-width:1px;border-right-color:rgb(221, 221, 221);border-right-style:solid;border-right-width:1px;border-top-color:rgb(221, 221, 221);border-top-left-radius:4px;border-top-right-radius:
4px;border-top-style:solid;border-top-width:1px;box-shadow:rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;box-sizing:border-box;color:rgb(51, 51, 51);display:block;font-family:"Helvetica Neue", Helvetica, Arial, sans-serif
;font-size:14px;height:96px;line-height:20px;margin-bottom:20px;text-size-adjust:100%;width:592px;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);'>
        <xp:panel style='background-color:rgb(245, 245, 245);background-image:linear-gradient(rgb(245, 245, 245) 0px, rgb(232, 232, 232) 100%);background-repeat-x:;background-repeat-y:;border-bottom-color:
rgb(221, 221, 221);border-bottom-style:solid;border-bottom-width:1px;border-left-color:rgb(221, 221, 221);border-right-color:rgb(221, 221, 221);border-top-color:rgb(221, 221, 221);border-top-left-radius:3px;border-top-right-radius:3px;box-sizing:border-box;color:rgb(51, 51, 51);display:block;filter:
none;font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;font-size:14px;height:43px;line-height:20px;padding-bottom:10px;padding-left:15px;padding-right:15px;padding-top:10px;text-size-adjust:100%;width:590px;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);'>
            <xp:link escape="true" style='background-color:rgba(0, 0, 0, 0);box-sizing:border-box;color:rgb(51, 51, 51);cursor:auto;display:inline;font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;font-size:16px;height:auto;line-height:22.8571px;margin-bottom:0px;margin-top:0px;text-decoration:none;text-size-adjust:100%;width:
auto;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)'
                text="<%=(this.titleBarText?this.titleBarText:'Computed')%>">
            </xp:link>
        </xp:panel>

        <xp:panel style='box-sizing:border-box;color:rgb(51, 51, 51);display:block;font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;font-size:14px;height:51px;line-height:20px;text-size-adjust:100%;width:590px;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)'>

            <xp:panel style='border-top-color:rgb(221, 221, 221);box-sizing:border-box;color:rgb(51, 51, 51);display:block;font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;font-size:14px;height:30px;line-height:20px;padding-bottom:15px;padding-left:15px;padding-right:15px;padding-top:15px;text-size-adjust:100%;width:590px;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)'>
                <xp:callback facetName="panelBody" id="panelBody"></xp:callback>
            </xp:panel>

<% if(this.footer!='false' ){ %>
            <xp:panel style='background-color:rgb(245, 245, 245);border-bottom-left-radius:3px;border-bottom-right-radius:3px;border-top-color:rgb(221, 221, 221);border-top-style:solid;border-top-width:1px;box-sizing:border-box;color:rgb(51, 51, 51);display:block;font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;font-size:14px;height:21px;line-height:20px;padding-left:15px;padding-right:15px;text-size-adjust:100%;width:590px;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)'>
                <xp:callback facetName="panelFooter" id="panelFooter"></xp:callback>
            </xp:panel><% }%>
        </xp:panel>
    </xp:panel>
</xp:view>

document1.isNewNote() 是检查在浏览器或 XPiNC 中打开的文档是否为新文档的测试。这是 运行时.

的测试

您希望在设计器中设计时 展示您的自定义控件。目前没有您可以显示其状态的文件。

似乎唯一的方法是创建新的回调并在主 xpage 中计算标题。

  1. 添加新的属性定义:

  1. 添加新回调并修改 link:

    的渲染 属性
    <xp:callback facetName="customTitle" id="customTitle"
        rendered="#{javascript:compositeData.custom_title}">
    </xp:callback>
    <xp:link escape="true" styleClass="panel-title"
        text="#{javascript:compositeData.titleBarText}"
        rendered="#{javascript:!compositeData.custom_title}">
        <xp:this.attrs>
            <xp:attr name="id">
                <xp:this.value><![CDATA[#{javascript:compositeData.panel_id + "_title"}]]></xp:this.value>
            </xp:attr>
        </xp:this.attrs>
        <xp:this.id><![CDATA[${javascript:compositeData.panel_id + "_title"}]]></xp:this.id>
    </xp:link>
    
  2. 更改设计定义:

就是这样。只需在主 XPage 中插入 cumputed link: