SAPUI5의 스플리터 컨트롤

하나의 레이블 및 링크 된 것과 같은 하나의 버튼을 허용하는 SAP UI5 스플리터 버튼/컨트롤을 구현하려고합니다. 스킬을 추가 할 때 링크 된 것과 마찬가지로, 삭제 버튼과 함께 텍스트 디스플레이가 나타납니다. 당신이 그 때 삭제 단추에 간단한 누른다 원본을 삭제하고 싶은 경우에, (이것은 연결된에서 일어나는 무슨 일이다) 삭제할 것이다.SAPUI5의 스플리터 컨트롤

나는 또한 SAP 스플리터 컨트롤을 사용하여 동일한 것을 구현하고 싶지만 일부 레이아웃 문제에 직면하고있다. 나는이 문제를 해결하기 위해 많은 노력을했지만 행운은 없다.

다음은이 코드를 총 세 스플리터에서 내 코드

입니다. oFplitterH라는 주 스플리터는 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);

문제는 항상에 연결된 수평 같은보다는 수직 정렬에 분할 단추를 표시합니다. 또한 수평으로 레이아웃을 변경하지만 여전히 수직 정렬에 표시.

의견이 있으십니까?

출처

2013-04-15 user1030128

다음 코드는 도움이 될 수 있습니다.

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); 
    } 
}

좀 더 집중 메모를 확인하세요 모양과 느낌이 아닌 기능에 관한 정보

감사합니다. 전수래 개발자

출처

2013-12-20 11:44:36 prodeveloper

SAPUI5의 스플리터 컨트롤

답변

관련 문제