[UI5 常用控件] 06.Splitter,ResponsiveSplitter

文章目录

  • 前言
  • [1. Splitter](#1. Splitter)
    • [1.1 属性](#1.1 属性)
  • [2. ResponsiveSplitter](#2. ResponsiveSplitter)

前言

本章节记录常用控件Splitter,ResponsiveSplitter。主要功能是分割画面布局。

其路径分别是:

  • sap.ui.layout.Splitter
  • sap.ui.layout.ResponsiveSplitter

1. Splitter

1.1 属性

  • orientation : Horizontal,Vertical (横向分割/纵向分割)
  • SplitterLayoutData:size : 尺寸
  • SplitterLayoutData:minSize : 最小尺寸
  • SplitterLayoutData:resizable : 可变尺寸
  • View
xml 复制代码
	<Panel headerText="Splitter 布局">
	    <l:Splitter
	        id="mainSplitter"
	        height="500px"
	        width="100%"
	        orientation="Horizontal"
	    >
	        <Button
	            width="100%"
	            text="Content 1"
	        >
	            <layoutData>
	                <l:SplitterLayoutData size="300px" />
	            </layoutData>
	        </Button>
	        <Button
	            width="100%"
	            text="Content 2"
	        >
	            <layoutData>
	                <l:SplitterLayoutData size="auto" />
	            </layoutData>
	        </Button>
	        <Button
	            width="100%"
	            text="Content 3"
	        >
	            <layoutData>
	                <l:SplitterLayoutData
	                    size="30%"
	                    minSize="200px"
	                />
	            </layoutData>
	        </Button>
	    </l:Splitter>
	    <HBox class="sapUiSmallMarginTop sapUiSmallMarginBegin">
	        <Button
	            text="Add content area"
	            press="btnAddContentArea"
	        />
	        <Button
	            text="Remove content area"
	            press="btnRemoveContentArea"
	        />
	        <Button
	            text="Resizable"
	            press="btnSetResizable"
	        />
	        <Button
	            text="Change Orientation"
	            press="btnChangeOrientation"
	        />
	    </HBox>
	</Panel>
  • Controller
js 复制代码
	btnAddContentArea: function () {
	    var oLayoutData = new SplitterLayoutData({
	        resizable: true,
	        size: Math.random() > 0.5 ? "auto" : 50 + Math.floor(Math.random() * 300) + "px",
	        maxSize: Math.random() > 0.5 ? "0" : Math.floor(Math.random() * 100) + "px"
	    });
	
	    var oContent = new Button({
	        width: "100%",
	        height: "100%",
	        text: "Content!",
	        layoutData: oLayoutData
	    });
	
	    this.oSplitter.addContentArea(oContent);
	},
	btnRemoveContentArea: function () {
	    
	
	    var oLastContentArea = this.oSplitter.getContentAreas().pop();
	    this.oSplitter.removeContentArea(oLastContentArea);
	    oLastContentArea.destroy();
	},
	btnSetResizable:function(){
	    var oContentArea = this.oSplitter.getContentAreas()[0];
	    var oLayoutData = oContentArea.getLayoutData();
	
	    oLayoutData.setResizable(false)
	},
	btnChangeOrientation: function () {
	    var Orientation = coreLibrary.Orientation;
	    var sOr = this.oSplitter.getOrientation();
	    this.oSplitter.setOrientation(
	        sOr === Orientation.Vertical
	            ? Orientation.Horizontal
	            : Orientation.Vertical
	    );
	}

2. ResponsiveSplitter

  • Splitter另一个替代方案

  • View

xml 复制代码
   <Panel
        headerText="ResponsiveSplitter 布局"
        class="sapUiLargeMarginTop"
    >
        <l:ResponsiveSplitter
            defaultPane="default"
            height="600px"
        >
            <l:PaneContainer resize=".onRootContainerResize">
                <l:SplitPane
                    requiredParentWidth="400"
                    id="default"
                >
                    <l:layoutData>
                        <l:SplitterLayoutData size="40%" />
                    </l:layoutData>
                    <Panel
                        headerText="Minimum parent width 400"
                        height="100%"
                    >
                        <Button
                            text="Area 1"
                            width="50%"
                            type="Success"
                        />
                    </Panel>
                </l:SplitPane>
                <l:PaneContainer
                    orientation="Vertical"
                    resize=".onInnerContainerResize"
                >
                    <l:SplitPane requiredParentWidth="100">
                        <l:layoutData>
                            <l:SplitterLayoutData size="30%" />
                        </l:layoutData>
                        <Panel headerText="Minimum parent width 600">
                            <Button
                                text="Area 2"
                                width="50%"
                                type="Attention"
                            />
                        </Panel>
                    </l:SplitPane>
                    <l:SplitPane requiredParentWidth="800">
                        <l:layoutData>
                            <l:SplitterLayoutData size="70%" />
                        </l:layoutData>
                        <Page title="Minimum parent width 800">
                            <Button
                                text="Area 3"
                                width="50%"
                                type="Emphasized"
                            />

                            <footer>
                                <OverflowToolbar id="otb3">
                                    <Label text="Buttons:" />
                                    <ToolbarSpacer />
                                    <Button
                                        text="New"
                                        type="Transparent"
                                    />
                                    <Button
                                        text="Open"
                                        type="Transparent"
                                    />
                                    <Button
                                        text="Save"
                                        type="Transparent"
                                    />
                                    <Button
                                        text="Save as"
                                        type="Transparent"
                                    />
                                    <Button
                                        text="Cut"
                                        type="Transparent"
                                    />
                                    <Button
                                        text="Copy"
                                        type="Transparent"
                                    />
                                    <Button
                                        text="Paste"
                                        type="Transparent"
                                    />
                                    <Button
                                        text="Undo"
                                        type="Transparent"
                                    />
                                </OverflowToolbar>
                            </footer>
                        </Page>
                    </l:SplitPane>
                </l:PaneContainer>
            </l:PaneContainer>
        </l:ResponsiveSplitter>
    </Panel>
  • Controller
js 复制代码
	onRootContainerResize: function (oEvent) {
	    var aOldSizes = oEvent.getParameter("oldSizes"),
	        aNewSizes = oEvent.getParameter("newSizes"),
	        sMessage =  "Root container is resized.";
	
	    if (aOldSizes && aOldSizes.length) {
	        sMessage += "\nOld panes sizes = [" + aOldSizes + "]";
	    }
	
	    sMessage += "\nNew panes sizes = [" + aNewSizes + "]";
	
	    MessageToast.show(sMessage);
	},
	
	onInnerContainerResize: function (oEvent) {
	    var aOldSizes = oEvent.getParameter("oldSizes"),
	        aNewSizes = oEvent.getParameter("newSizes"),
	        sMessage =  "Inner container is resized.";
	
	    if (aOldSizes && aOldSizes.length) {
	        sMessage += "\nOld panes sizes = [" + aOldSizes + "]";
	    }
	
	    sMessage += "\nNew panes sizes = [" + aNewSizes + "]";
	
	    MessageToast.show(sMessage);
	}
相关推荐
lu_rong_qq4 天前
SAP B1 登陆报错解决方案 - 系统架构目录服务器选择
sap
LilySesy7 天前
SAP+Internet主题HTML样式选择
前端·html·sap·abap·internet服务·its·扫码枪
SAP学习成长之路7 天前
如何在SM30生成的维护表中增加选择框 CheckBox
开发语言·数据库·sap·健康医疗·abap·代码规范
SAPABAP东芝10 天前
【SAP-ABAP】MIRO--界面增强增加数据导出导入按钮
sap·abap·fico
SAP学习成长之路10 天前
【翻译】伯明翰市议会因 Oracle 系统崩溃而面临 £216.5M 的损失
数据库·oracle·sap
向上的车轮13 天前
ODOO学习笔记(4):Odoo与SAP的主要区别是什么?
笔记·学习·sap·odoo
哲讯智能科技15 天前
SAP Business One市场价格解析
运维·sap·erp
小九不懂SAP19 天前
SAP(PP生产制造)拆解工单业务处理
sap·制造·s4·pp
冰魄禾20 天前
SAP ABAP开发学习——BAPI
运维·开发语言·笔记·运维开发·sap·abap
syounger23 天前
是我们“辜负”了IBM、SAP么?
sap