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-elements持有我的图形，周围的'core：HTML'元素用于通过jquery显示/隐藏图表（不是每个人都可以看到所有内容。此外，3个图形应该使用页面上的完整剩余空间（图形正在缩放），过滤器（上面的FlexBoxes），页眉和页脚都没有使用它。

直到现在一切都按预期工作。这意味着绘制图形，到目前为止一切看起来都不错。现在我想展示图形的图例（哪种颜色意味着什么等等）。我通过显示片段

的对话框完成了

对话框定义：

<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>
    <!-- ... -->

在页脚中是一个按钮，用于显示对话框（片段），它也可以正常工作（图形仍显示在背景中），但是：当我关闭对话框时，对话框仅对于某些部分可见第二，然后他们消失了！当使用调试器选择现在为空的空间时，它显示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：打开/关闭对话框片段的代码。 “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消失

1 个答案: