关闭对话框片段控件后OpenUI5消失

Question

我是 UI5 的新手，我不明白为什么我的控件会消失。但是让我一步一步解释这个问题

我已经使用 D3 创建了一个视图、一个相应的控制器和一个自定义图形控件。视图中令人不安的部分如下所示：

<Page ...>
    <!-- some FlexBoxes here... -->
    <html:div style="clear:both; overflow-x:hidden; overflow-y:hidden; height: 94%;" class="sapUiNoMargin">
        <html:div id="graphs" style="background-color:white; border: 1px solid lightgray; height:89%; width:100%;" >
            <core:HTML id="htmlCanvasWrapper" content="&lt;svg id='htmlCanvas' height='65%'&gt;&lt;/svg&gt;"></core:HTML>
            <core:HTML id="htmlCanvas2Wrapper" content="&lt;svg id='htmlCanvas2' height='23%'&gt;&lt;/svg&gt;"></core:HTML>
            <core:HTML id="htmlCanvas3Wrapper" content="&lt;svg id='htmlCanvas3' height='12%'&gt;&lt;/svg&gt;"></core:HTML>
        </html:div>
       <!-- the closing elements follow here... -->

如果有人想知道我在上面尝试做什么：svg 元素保存我的图形，周围的 'core:HTML' 元素通过 jquery 用于 showing/hiding 图表（不是everyone is allowed to see everything. 此外，3 个图形应使用页面上未被过滤器（上面的 FlexBoxes）、页眉和页脚使用的完整剩余 space（图形正在缩放）。

到目前为止，一切都按预期进行。这意味着图形已绘制，到目前为止一切看起来都很好。现在我想显示图形的图例（哪种颜色代表什么等等）。我通过显示片段中的对话框来完成

对话框定义：

<core:FragmentDefinition xmlns="sap.m" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:l="sap.ui.layout" xmlns:core="sap.ui.core">
    <Dialog title="{i18n>VollePfanneLegende.Title}">
        <html:style>
        <!-- style definitions for the legend -->
    </html:style>
    <l:VerticalLayout>
        <l:content>
            <FlexBox>
                <html:div class="icon" style="background-color: #68ACE9; border-color: #68ACE9; border-radius: 50%;"/>
                <html:div class="hspacer"/>
                <Text text="{i18n>VollePfanneLegende.IstTemp}"/>
            </FlexBox>

            <html:div class="vspacer"/>

            <FlexBox>
                <html:div class="icon" style="background-color: #F70206; border-color: #F70206; border-radius: 50%;"/>
                <html:div class="hspacer"/>
                <Text text="{i18n>VollePfanneLegende.SollTemp}"/>
            </FlexBox>
    <!-- ... -->

在页脚中有一个显示对话框（片段）的按钮，它也可以正常工作（图形仍显示在背景中），但是：当我关闭对话框时，对话框仅对某些分数可见一秒钟，然后他们消失了！当 select 现在为空 space 时，调试器显示 ID 为 "graphs" 的 div 为空！

<div id="__xmlview1--graphs" style="border: 1px solid lightgray; border-image: none; width: 100%; height: 89%; background-color: white;"></div>

但现在我在包含我的图形的内容 div 之后找到了一个新的 div

<div class="sapUiHidden sapUiForcedHidden" id="sap-ui-preserve" aria-hidden="true" style="width: 0px; height: 0px; overflow: hidden;">
    <svg id="htmlCanvas" height="65%" data-sap-ui-preserve="__xmlview1--htmlCanvasWrapper>...</svg>
    <svg id="htmlCanvas2" height="23%" data-sap-ui-preserve="__xmlview1--htmlCanvas2Wrapper>...</svg>
    <svg id="htmlCanvas3" height="12%" data-sap-ui-preserve="__xmlview1--htmlCanvas3Wrapper>...</svg>
</div>

EDIT1：opening/closing 对话片段的代码。 "onShowLegend" 函数显示对话框，当您单击对话框上的关闭按钮时调用 "legendClose" 函数。

onShowLegend: function() {
    if (! this._oLegendDialog) {
        this._oLegendDialog = sap.ui.xmlfragment("portal.view.vollePfanneLegende", this);
    }

    // toggle compact style
    this.getView().addDependent(this._oLegendDialog);
    jQuery.sap.syncStyleClass("sapUiSizeCompact", this.getView(), this._oLegendDialog);
    this._oLegendDialog.open();
},

legendClose: function() {
    if (this._oLegendDialog) {
        this._oLegendDialog.destroy();
    }
    this._oLegendDialog=null;
}

我不知道如何防止 UI5 隐藏我的图形。请帮忙。提前致谢

编辑 2：如果我包装 "core:HTML" 元素，例如在 VerticalLayout 中，图形在关闭对话框后不会被删除。但是：无法设置 VerticalLayout 的高度。我需要使用未使用页面的完整高度的东西，因为图形会根据其父控件高度进行缩放。

<html:div id="graphs" style="background-color:white; border: 1px solid lightgray; height:89%; width:100%;" >
    <l:VerticalLayout width="100%">
        <l:content>
            <core:HTML id="htmlCanvasWrapper" content="&lt;svg id='htmlCanvas' height='65%'&gt;&lt;/svg&gt;"></core:HTML>
            <core:HTML id="htmlCanvas2Wrapper" content="&lt;svg id='htmlCanvas2' height='23%'&gt;&lt;/svg&gt;"></core:HTML>
            <core:HTML id="htmlCanvas3Wrapper" content="&lt;svg id='htmlCanvas3' height='12%'&gt;&lt;/svg&gt;"></core:HTML>
       </l:content>
   </l:VerticalLayout>
</html:div>

此致约臣

Answer 1

经过几个小时的反复试验和大量的互联网冲浪，我想出了下面的代码，它完全符合我的要求

<html:div style="clear:both; overflow-x:hidden; overflow-y:hidden; height: 94%;" class="sapUiNoMargin">
    <html:style>
        .graphs {
                background-color:white; 
                border: 1px solid lightgray; 
                width:100%;
                height: calc(100% - 85px); /* Height of RangeSlider area */
        }
        .sapMScrollContScroll {
             height: 100%;
        }
    </html:style>
    <html:div id="graphs" class="graphs">
        <ScrollContainer width="100%" height="100%" focusable="false" horizontal="false">
            <core:HTML id="htmlCanvasWrapper" content="&lt;svg id='htmlCanvas' height='65%'&gt;&lt;/svg&gt;"></core:HTML>
            <core:HTML id="htmlCanvas2Wrapper" content="&lt;svg id='htmlCanvas2' height='23%'&gt;&lt;/svg&gt;"></core:HTML>
            <core:HTML id="htmlCanvas3Wrapper" content="&lt;svg id='htmlCanvas3' height='12%'&gt;&lt;/svg&gt;"></core:HTML>
        </ScrollContainer>
    </html:div>

    <!-- Rest of the view here... -->
</html:div>

据我了解，UI5 容器中的包装确保关闭对话框后的重绘事件有一个可以处理它的控件。

关闭对话框片段控件后OpenUI5消失

OpenUI5 after closing dialog fragment controls disappear

svg

graphic

sapui5