Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<meta http_equiv='X-UA-Compatible' content='IE=edge'/>
<title>OpenUI5 Demo</title>
​
<script id='sap-ui-bootstrap'
src='https://openui5.hana.ondemand.com/resources/sap-ui-core.js'
data-sap-ui-theme='sap_bluecrystal'
data-sap-ui-libs='sap.ui.commons'></script>
​
  <style>
    html, body, #body {
      height: 100%;
    }
  </style>
  
  
<script>
    var oBorderLayout1 = new sap.ui.commons.layout.BorderLayout("BorderLayout1", {
        width : "100%",
        height : "100%", // THE APPLICATION ONLY WORKS WHEN THIS LINE IS SET TO A PIXEL (e. g. "300px") VALUE
        top : new sap.ui.commons.layout.BorderLayoutArea({
            size : "20%",
            contentAlign : "center",
            visible : true,
            content : [new sap.ui.commons.TextView({
                text : 'Top Area',
                design : sap.ui.commons.TextViewDesign.Bold
            })]
        }),
        bottom : new sap.ui.commons.layout.BorderLayoutArea({
            size : "20%",
            contentAlign : "center",
            visible : true,
            content : [new sap.ui.commons.TextView({
                text : 'Bottom Area',
                design : sap.ui.commons.TextViewDesign.Bold
            })]
        }),
        begin : new sap.ui.commons.layout.BorderLayoutArea({
            size : "20%",
            contentAlign : "center",
            visible : true,
            content : [new sap.ui.commons.TextView({
                text : 'Begin Area',
                design : sap.ui.commons.TextViewDesign.Bold
            })]
        }),
        center : new sap.ui.commons.layout.BorderLayoutArea({
            contentAlign : "center",
            visible : true,
            content : [new sap.ui.commons.TextView({
                text : 'Center Area',
                design : sap.ui.commons.TextViewDesign.Bold
            })]
        }),
        end : new sap.ui.commons.layout.BorderLayoutArea({
            size : "20%",
            contentAlign : "center",
            visible : true,
            content : [new sap.ui.commons.TextView({
                text : 'End Area',
                design : sap.ui.commons.TextViewDesign.Bold
            })]
        })
    });
​
    oBorderLayout1.placeAt("body");
</script>
​
<body>
    <div id='body'></div>
</body>
 
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers