<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charset="UTF-8">
<title>SAPUI5 Walkthrough</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.m" data-sap-ui-compatVersion="edge" data-sap-ui-preload="async">
</script>
<script>
sap.ui.getCore().attachInit(function() {
new sap.m.Panel({
content: [
new sap.m.HBox({
justifyContent: "SpaceAround",
wrap: "Wrap",
items: [
new sap.m.HBox({
wrap: "Wrap",
items: [
new sap.m.VBox({
items: [
new sap.m.Label({
text: "Section 1 1st field"
}),
new sap.m.Input()
]
}).addStyleClass("sapUiSmallMarginEnd"),
new sap.m.VBox({
items: [
new sap.m.Label({
text: "Section 1 2nd field"
}),
new sap.m.Input()
]
})
]
}),
new sap.m.HBox({
wrap: "Wrap",
items: [
new sap.m.VBox({
items: [
new sap.m.Label({
text: "Section 2 1st field"
}),
new sap.m.Input()
]
}).addStyleClass("sapUiSmallMarginEnd"),
new sap.m.VBox({
items: [
new sap.m.Label({
text: "Section 2 2nd field"
}),
new sap.m.Input()
]
})
]
})
]
})
]
}).placeAt("content")
});
</script>
</head>
<body class="sapUiBody" id="content">
</body>
</html>