XML view vs. JS
HTML
<script src="http://cdnjs.cloudflare.com/ajax/libs/ace/1.1.3/ace.js"></script>
<div id="e1">// here an example with JS
var app = new sap.m.App("helloWorldApp", {initialPage:"page1"});
var oPage1 = new sap.m.Page("page1", {
title: "Simple Form page"
});
oPage1.addStyleClass("sapUiFioriObjectPage");
var oSimpleForm = new sap.ui.layout.form.SimpleForm({
minWidth: 1024,
maxContainerCols : 2,
title: new sap.ui.core.Title({text: "A form"}),
content : [ new sap.m.Label({text: "My Label"}), new sap.m.Text({text: "My Text"})]
});
oPage1.addContent(oSimpleForm);
app.addPage(oPage1);
</div>
<div id="e2">
<!-- here an example of a view -->
<mvc:View
xmlns:f="sap.ui.layout.form"
xmlns:mvc="sap.ui.core.mvc"
xmlns:core="sap.ui.core"
xmlns="sap.m">
<Page
id="page1"
title="Simple Form page"
class="sapUiFioriObjectPage" >
<content>
<f:SimpleForm
minWidth="1024"
maxContainerCols="2" >
<f:title>
<core:Title text="A Form" />
</f:title>
<Label text="Label"/>
<Text text="Value"/>
</f:SimpleForm>
</content>
</Page>
</mvc:View>
</div>
CSS
#e1 {
position: absolute;
top: 0%;
right: 0;
bottom: 50%;
left: 0;
}
#e2 {
position: absolute;
top: 50%;
right: 0;
bottom: 0;
left: 0;
margin:0
}
JavaScript
// xml-view vs. js view --> look at:
// <mvc:View xmlns:f="sap.ui.layout.form"
// and <f:SimpleForm
// --- here are the ace editors ---
var editor1 = ace.edit("e1");
editor1.setTheme("ace/theme/monokai");
editor1.getSession().setMode("ace/mode/javascript");
var editor = document.getElementById("e2");
var xmltext = editor.innerHTML;
var editor2 = ace.edit("e2");
editor2.setTheme("ace/theme/monokai");
editor2.getSession().setMode("ace/mode/xml");
editor2.setValue(xmltext, -1);