[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);
	}
相关推荐
小九不懂SAP4 天前
SAP(PP生产制造)拆解工单业务处理
sap·制造·s4·pp
冰魄禾5 天前
SAP ABAP开发学习——BAPI
运维·开发语言·笔记·运维开发·sap·abap
syounger8 天前
是我们“辜负”了IBM、SAP么?
sap
Liquid UI9 天前
Amcor 如何借助 Liquid UI 实现SAP PM可靠性
ui·自动化·sap·制造
数字化转型202519 天前
跨国SAP实施 - 美国 - 税法 - 咨询
sap
阿达_优阅达21 天前
优阅达携手 Theobald 亮相新加坡科技周,助力企业 SAP 数据集成与应用
科技·ai·sap·企业数字化转型·theobald
SAP Hua24 天前
SAP PP之功能 动态安全库存(Dynamic Safety stock)配置及计算逻辑说明测试
sap
数字化转型20251 个月前
Alternative Reconciliation Accounts 备选统驭科目
sap
小九不懂SAP2 个月前
6、定义字段状态变式
sap·s4
lu_rong_qq2 个月前
SAP B1 三大基本表单标准功能介绍-物料主数据(下)
数据库·sap·erp