This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE HTML> | |
| <html> | |
| <head> | |
| <meta name="description" content="SAPUI5 -- testbed for ListBox display defect" /> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta http-equiv='Content-Type' content='text/html;charset=UTF-8' /> | |
| <script | |
| src="https://sapui5.hana.ondemand.com/sdk/resources/sap-ui-core.js" | |
| id="sap-ui-bootstrap" data-sap-ui-libs="sap.ui.commons" | |
| data-sap-ui-theme="sap_bluecrystal"> | |
| </script> | |
| <!-- add sap.ui.table,sap.ui.ux3 and/or other libraries to 'data-sap-ui-libs' if required --> | |
| <script> | |
| sap.ui.localResources("ui5_listbox_visibility"); | |
| sap.ui | |
| .controller( | |
| "ui5_listbox_visibility.myview", | |
| { | |
| mdata : { | |
| uistate : { | |
| showshapes : true, | |
| showcolors : true, | |
| enableWorkaround : false, | |
| }, | |
| viewdata : { | |
| formname : "Visibility testbed", | |
| shape_list : [ { | |
| id : "0", | |
| text : "Circle" | |
| }, { | |
| id : "1", | |
| text : "Point" | |
| }, { | |
| id : "2", | |
| text : "Line" | |
| }, { | |
| id : "3", | |
| text : "Triange" | |
| }, { | |
| id : "4", | |
| text : "Square" | |
| } ], | |
| color_list : [ { | |
| id : "650", | |
| text : "Red" | |
| }, { | |
| id : "590", | |
| text : "Orange" | |
| }, { | |
| id : "589", | |
| text : "Yellow" | |
| }, { | |
| id : "510", | |
| text : "Green" | |
| }, { | |
| id : "475", | |
| text : "Blue" | |
| }, { | |
| id : "445", | |
| text : "Indigo" | |
| }, { | |
| id : "400", | |
| text : "Violet" | |
| } ] | |
| } | |
| }, | |
| oHidingHandler : false, | |
| /** | |
| * Called when a controller is instantiated and its View controls (if | |
| * available) are already created. Can be used to modify the View before it | |
| * is displayed, to bind event handlers and do other one-time | |
| * initialization. | |
| * | |
| * @memberOf ui5_listbox_visibility.myview | |
| */ | |
| onInit : function() { | |
| var view = this.getView(); | |
| this.oModel = new sap.ui.model.json.JSONModel( | |
| this.mdata); | |
| view.setModel(this.oModel); | |
| }, | |
| /** | |
| * Similar to onAfterRendering, but this hook is invoked before the | |
| * controller's View is re-rendered (NOT before the first rendering! | |
| * onInit() is used for that one!). | |
| * | |
| * @memberOf ui5_listbox_visibility.myview | |
| */ | |
| // onBeforeRendering: function() { | |
| // | |
| // }, | |
| /** | |
| * Called when the View has been rendered (so its HTML is part of the | |
| * document). Post-rendering manipulations of the HTML could be done here. | |
| * This hook is the same one that SAPUI5 controls get after being rendered. | |
| * | |
| * @memberOf ui5_listbox_visibility.myview | |
| */ | |
| onAfterRendering : function() { | |
| /* | |
| * Nice in theory, however this does *not* get called during rerendering | |
| */ | |
| // for (var c in this.toBeHidden) { | |
| // console.log(typeof(this.toBeHidden[c])); | |
| // } | |
| }, | |
| /** | |
| * Called when the Controller is destroyed. Use this one to free resources | |
| * and finalize activities. | |
| * | |
| * @memberOf ui5_listbox_visibility.myview | |
| */ | |
| // onExit: function() { | |
| // | |
| // } | |
| toggleUIState : function(uiState) { | |
| var f = this.oModel.getProperty("/uistate/" | |
| + uiState); | |
| if (f) { | |
| f = false; | |
| } else { | |
| f = true; | |
| } | |
| this.oModel.setProperty("/uistate/" + uiState, f); | |
| this.oModel.refresh(); | |
| }, | |
| getHider : function() { | |
| if (!this.oHidingHandler) { | |
| var o = { | |
| onAfterRendering : function(oEvent) { | |
| var bFixIt = this | |
| .getModel() | |
| .getProperty( | |
| "/uistate/enableWorkaround"); | |
| var oSAPDom = this.$(); | |
| /* | |
| * We can't query using ID, since it will promptly be turned into | |
| * a document.getElementById() call, which will only return the | |
| * first element found (since ID's are not supposed to be duplicated) | |
| */ | |
| var oTooMany = $("[data-sap-ui=" | |
| + this.getId() + "]"); | |
| if (bFixIt && oTooMany.length > 1) { | |
| for (var j = 0; j < oTooMany.length; j++) { | |
| if (oTooMany[j].parentElement != oSAPDom[0].parentElement) | |
| oTooMany[j].remove(); | |
| } | |
| } | |
| } | |
| }; | |
| this.oHidingHandler = o; | |
| } | |
| return this.oHidingHandler; | |
| } | |
| }); | |
| sap.ui.jsview("ui5_listbox_visibility.myview", { | |
| oC : false, | |
| thisView : false, | |
| /** | |
| * Specifies the Controller belonging to this View. In the case that it is | |
| * not implemented, or that "null" is returned, this View does not have a | |
| * Controller. | |
| * | |
| * @memberOf ui5_listbox_visibility.myview | |
| */ | |
| getControllerName : function() { | |
| return "ui5_listbox_visibility.myview"; | |
| }, | |
| /** | |
| * Is initially called once after the Controller has been instantiated. It | |
| * is the place where the UI is constructed. Since the Controller is given | |
| * to this method, its event handlers can be attached right away. | |
| * | |
| * @memberOf ui5_listbox_visibility.myview | |
| */ | |
| createContent : function(oController) { | |
| this.oC = oController; | |
| this.thisView = this; | |
| var _self = this; | |
| // Simple vertical Layout | |
| var oVerticalLayout = new sap.ui.layout.VerticalLayout(oController | |
| .createId("layoutRoot")); | |
| // Buttons for toggling visibility | |
| var oButton = new sap.ui.commons.Button(oController | |
| .createId("bshowshapes"), { | |
| text : "Toggle /uistate/showshapes", | |
| press : function() { | |
| oController.toggleUIState("showshapes"); | |
| } | |
| }); | |
| oVerticalLayout.addContent(oButton); | |
| var oButton = new sap.ui.commons.Button(oController | |
| .createId("bshowcolors"), { | |
| text : "Toggle /uistate/showcolors", | |
| press : function() { | |
| oController.toggleUIState("showcolors"); | |
| } | |
| }); | |
| oVerticalLayout.addContent(oButton); | |
| var oButton = new sap.ui.commons.Button(oController | |
| .createId("benableWorkaround"), { | |
| text : "Toggle /uistate/enableWorkaround", | |
| buttonStyle : "Emph", | |
| press : function() { | |
| oController.toggleUIState("enableWorkaround"); | |
| } | |
| }); | |
| oVerticalLayout.addContent(oButton); | |
| // Horizontal for displaying the Workaround state | |
| var oHorizontalLayout = new sap.ui.layout.HorizontalLayout(); | |
| oHorizontalLayout.addContent(new sap.ui.commons.Label({ | |
| text : "--> enableWorkaround: " | |
| })); | |
| oHorizontalLayout.addContent(new sap.ui.commons.Label({ | |
| text : "{/uistate/enableWorkaround}" | |
| })); | |
| oVerticalLayout.addContent(oHorizontalLayout); | |
| // Give us a header | |
| oVerticalLayout.addContent(new sap.ui.commons.TextView({ | |
| text : "{/viewdata/formname}", | |
| design : sap.ui.commons.TextViewDesign.H3 | |
| })); | |
| oVerticalLayout.addContent(new sap.ui.commons.HorizontalDivider()); | |
| // A matrix view for nice vertical column layout | |
| var oMatrix = new sap.ui.commons.layout.MatrixLayout({ | |
| columns : 2, | |
| layoutFixed : false | |
| }); | |
| oVerticalLayout.addContent(oMatrix); | |
| /* | |
| * Shapes row | |
| */ | |
| var oRow = new sap.ui.commons.layout.MatrixLayoutRow(); | |
| var oCell = new sap.ui.commons.layout.MatrixLayoutCell({ | |
| hAlign : "End", | |
| separation : "None" | |
| }); | |
| oCell.addContent(new sap.ui.commons.Label({ | |
| text : "Shapes:", | |
| visible : "{/uistate/showshapes}" | |
| })); | |
| oRow.addCell(oCell); | |
| var oCell = new sap.ui.commons.layout.MatrixLayoutCell(); | |
| var olbShapes = new sap.ui.commons.ListBox(oController | |
| .createId("lbshapes")); | |
| olbShapes.bindAggregation("items", "/viewdata/shape_list", | |
| new sap.ui.core.ListItem({ | |
| key : "{id}", | |
| text : "{text}" | |
| })); | |
| var oddShapes = new sap.ui.commons.DropdownBox(oController | |
| .createId("ddshapes"), { | |
| "association:listBox" : olbShapes, | |
| visible : "{/uistate/showshapes}" | |
| }); | |
| /* | |
| * If you comment out the next line, the drop-down will get no values. | |
| */ | |
| oCell.addContent(olbShapes); | |
| // !!! Workaround !!! | |
| olbShapes.addDelegate(this.oC.getHider(), false, olbShapes, false); | |
| oCell.addContent(oddShapes); | |
| oRow.addCell(oCell); | |
| oMatrix.addRow(oRow); // Shapes | |
| /* | |
| * Colors row | |
| */ | |
| var oRow = new sap.ui.commons.layout.MatrixLayoutRow(); | |
| var oCell = new sap.ui.commons.layout.MatrixLayoutCell({ | |
| hAlign : "End", | |
| separation : "None" | |
| }); | |
| oCell.addContent(new sap.ui.commons.Label({ | |
| text : "Colors:", | |
| visible : "{/uistate/showcolors}" | |
| })); | |
| oRow.addCell(oCell); | |
| var oCell = new sap.ui.commons.layout.MatrixLayoutCell(); | |
| var olbColors = new sap.ui.commons.ListBox(oController | |
| .createId("lbcolors")); | |
| /* | |
| * This next line keeps the ListBox from showing, but then | |
| * the entire list is not shown in our DropdownBox | |
| */ | |
| // olbColors.setVisible(false); | |
| olbColors.bindAggregation("items", "/viewdata/color_list", | |
| new sap.ui.core.ListItem({ | |
| key : "{id}", | |
| text : "{text}" | |
| })); | |
| var oddColors = new sap.ui.commons.DropdownBox(oController | |
| .createId("ddcolors"), { | |
| "association:listBox" : olbColors, | |
| visible : "{/uistate/showcolors}" | |
| }); | |
| oCell.addContent(olbColors); | |
| oCell.addContent(oddColors); | |
| // !!! Workaround !!! | |
| olbColors.addDelegate(this.oC.getHider(), false, olbColors, false); | |
| oRow.addCell(oCell); | |
| oMatrix.addRow(oRow); // Colors | |
| // * All done here * | |
| return oVerticalLayout; | |
| } | |
| }); | |
| var view = sap.ui.view({ | |
| id : "idmyview1", | |
| viewName : "ui5_listbox_visibility.myview", | |
| type : sap.ui.core.mvc.ViewType.JS | |
| }); | |
| view.placeAt("content"); | |
| </script> | |
| </head> | |
| <body class="sapUiBody" role="application"> | |
| <div id="content"></div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Working example here:
http://jsbin.com/sidiq/1/edit?html,output