Question

我正在尝试实现SAP UI5拆分器按钮/控件，它接受一个Label和一个像Linked in一样的按钮。就像你在添加技能时链接一样，文本显示和删除按钮。如果你想删除文本然后简单点击删除按钮，它将删除（这是在链接中发生的事情）。

我也想使用SAP拆分器控件实现相同的功能，但我面临一些布局问题。我已经尝试了很多来解决这个问题，但没有运气。

这是我的代码

在代码中总共有三个分割器。称为oSplitterH的主分路器，在其addFirstPaneContent中保存0 ..... n个子分路器。

var splitterLabel = new Label({
    text : 'Splitter ',
    width: '80px'
});

    var oSplitterH = new sap.ui.commons.Splitter("splitterH");

    oSplitterH.setSplitterOrientation(sap.ui.commons.Orientation.Horizontal);

    oSplitterH.setSplitterPosition("200%%");

    oSplitterH.setMinSizeFirstPane("20%");

    oSplitterH.setMinSizeSecondPane("30%");

    oSplitterH.setWidth("200%");

        //adding Labels to both panes





    var oSplitter2 = new sap.ui.commons.Splitter("splitterH12");

    oSplitter2.setSplitterOrientation(sap.ui.commons.Orientation.Vertical);

    oSplitter2.setSplitterPosition("10%");

    oSplitter2.setMinSizeFirstPane("10%");

    oSplitter2.setMinSizeSecondPane("10%");

    oSplitter2.setWidth("20%");

    var oLabel2 = new sap.ui.commons.Label({text: "Part1"});

    oSplitter2.addFirstPaneContent(oLabel2);   

    var oLabel2 = new sap.ui.commons.Label({text: "Part2"});

    oSplitter2.addFirstPaneContent(oLabel2);   





    var oSplitter3 = new sap.ui.commons.Splitter("splitterH13");

    oSplitter3.setSplitterOrientation(sap.ui.commons.Orientation.Vertical);

    oSplitter3.setSplitterPosition("10%");

    oSplitter3.setMinSizeFirstPane("10%");

    oSplitter3.setMinSizeSecondPane("10%");

    oSplitter3.setWidth("20%");

    var oLabe123 = new sap.ui.commons.Label({text: "Part3"});

    oSplitter3.addFirstPaneContent(oLabe123);   

    var oLabe1234 = new sap.ui.commons.Label({text: "Part4"});

    oSplitter3.addFirstPaneContent(oLabe1234);   









    oSplitterH.addFirstPaneContent(oSplitter2);   

    oSplitterH.addFirstPaneContent(oSplitter3);   



    createProfileMatrix.createRow(splitterLabel, oSplitterH, null, null);

问题是它始终显示垂直对齐的分割按钮，而不是像链接一样显示水平。我还将布局更改为水平，但仍然以垂直对齐方式显示。

有什么建议吗？

Answer 1

以下代码可能会对您有所帮助。

的index.html

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <link rel="stylesheet" href="main.css"/>
        <script src="resources/sap-ui-core.js"
                id="sap-ui-bootstrap"
                data-sap-ui-libs="sap.ui.commons"
                data-sap-ui-theme="sap_goldreflection">
        </script>
        <!-- add sap.ui.table,sap.ui.ux3 and/or other libraries to 'data-sap-ui-libs' if required -->

        <script>
                sap.ui.localResources("sapui5samples");
                var view = sap.ui.view({id:"idlinkedIn-label1", viewName:"sapui5samples.linkedIn-label", type:sap.ui.core.mvc.ViewType.JS});
                view.placeAt("content");
        </script>

    </head>
    <body class="sapUiBody" role="application">
        <div id="content"></div>
        <div id="list"></div>
    </body>
</html>

的main.css

 .tech-area{
            border:1px solid gray;
            border-radius: 5px;
            width:500px;
            height:300px;
            left:0;
            top:50;
            position:relative;
            overflow:scroll;
        }

SAPUI5视图文件（未使用控制器文件）

 var oLayout;
sap.ui.jsview("sapui5samples.linkedIn-label", {

    getControllerName : function() {
        return "sapui5samples.linkedIn-label";
    },
    createContent : function(oController) {
        // create a simple SearchField with suggestion list (list expander
        // visible)
        var oSearch = new sap.ui.commons.SearchField("suggestSearch1", {
            enableListSuggest : true,
            startSuggestion : 1,
            search : function(oEvent) {
                var techName = oEvent.getParameter("query");
                addTechnology(techName);
            },
            suggest : doSuggest
        });
        // Button for adding the technology if it is not listed in the available
        // technologies
        var oButton = new sap.ui.commons.Button({
            text : "Add",
            tooltip : "Add Technology",
            press : function() {
                var tech = sap.ui.getCore().byId("suggestSearch1").getValue();
                addTechnology(tech);
            }
        });

        // create a simple horizontal layout
        var oLayout = new sap.ui.commons.layout.HorizontalLayout({
            content : [ oSearch, oButton ]
        });

        // attach it to some element in the page
        oLayout.placeAt("content");
        oLayout = new sap.ui.commons.layout.HorizontalLayout("target");
        oLayout.addStyleClass("tech-area");

        // attach it to some element in the page
        oLayout.placeAt("list");

    }
});
// Help function to handle the suggest events of the search field
var doSuggest = function(oEvent) {
    var sVal = oEvent.getParameter("value");
    var aSuggestions = filterTechnologies(sVal); // Find the technologies
    var oSearchControl = sap.ui.getCore().byId(oEvent.getParameter("id"));
    oSearchControl.suggest(sVal, aSuggestions); // Set the found suggestions on
                                                // the search control
};
var technologies = [ "Java", ".Net", "PHP", "SAPUI5", "JQuery", "HTML5", "" ];
technologies.sort();

jQuery.sap.require("jquery.sap.strings"); // Load the plugin to use
                                            // 'jQuery.sap.startsWithIgnoreCase'

// Help function to filter the technologies according to the given prefix
var filterTechnologies = function(sPrefix) {
    var aResult = [];
    for (var i = 0; i < technologies.length; i++) {
        if (!sPrefix || sPrefix.length == 0
                || jQuery.sap.startsWithIgnoreCase(technologies[i], sPrefix)) {
            aResult.push(technologies[i]);
        }
    }
    return aResult;
};
var count = 0;
var arr = [];
// function for add the item to horizontal layout
var addTechnology = function(techName) {
    var elementIndex = arr.indexOf(techName);
    // conditional statement for adding the tech to the list
    if (elementIndex === -1) {
        count++;
        // create a horizontal Splitter
        var oSplitterV = new sap.ui.commons.Splitter({
            width : "120px",
            height : "30px",
            showScrollBars : false,
            splitterBarVisible : false
        });
        oSplitterV.setSplitterOrientation(sap.ui.commons.Orientation.vertical);
        oSplitterV.setSplitterPosition("60%");
        oSplitterV.setMinSizeFirstPane("60%");
        oSplitterV.setMinSizeSecondPane("40%");
        // label with dynamic Id
        var oLabel1 = new sap.ui.commons.Label("tCount" + count, {
            text : techName,
            tooltip : techName
        });
        oSplitterV.addFirstPaneContent(oLabel1);

        var oLabel2 = new sap.ui.commons.Button({
            icon : "img/delete.png",
            press : function() {
                removeElement(techName);
                oSplitterV.destroy();
            }
        });
        oSplitterV.addSecondPaneContent(oLabel2);
        sap.ui.getCore().byId("target").addContent(oSplitterV);
        // Adding the tech to the parent array
        arr.push(techName);
        // Emptying the search box
        sap.ui.getCore().byId("suggestSearch1").setValue("");
    } else {
        sap.ui.commons.MessageBox.alert(techName
                + " is already added to the list");
    }
}
// function for removing removed element from parent array
var removeElement = function(addedTech) {
    // Find and remove item from an array
    var i = arr.indexOf(addedTech);
    if (i != -1) {
        arr.splice(i, 1);
    }
}

请注意我更多地关注功能而不是外观和感觉

谢谢， prodeveloper

SAPUI5中的分离器控制

1 个答案: