view:sap.ui.jsview("form.form", {
getControllerName : function() {
return "form.form";
},
createContent : function(oController) {
var oLayout1 = new sap.ui.layout.form.GridLayout();
var oLayout2 = new sap.ui.layout.form.ResponsiveLayout();
var oLayout3 = new sap.ui.layout.form.ResponsiveGridLayout();
var oForm1 = new sap.ui.layout.form.Form({
title: new sap.ui.core.Title({text: "Address Data"}),
layout: oLayout3,
formContainers: [
new sap.ui.layout.form.FormContainer({
title: "Person data",
formElements: [
new sap.ui.layout.form.FormElement({
label: "Name",
id:"fo",
fields: [new sap.ui.commons.TextField({
width:"150px",
}),
]
}),
new sap.ui.layout.form.FormElement({
label: "Age",
fields: [new sap.ui.commons.TextField({
width:"150px",
}),
]
}),
new sap.ui.layout.form.FormElement({
label: "Company",
fields: [new sap.ui.commons.TextField({
width:"150px",
}),
]
}),
]
}),
new sap.ui.layout.form.FormContainer({
title: " ",
formElements: [
new sap.ui.layout.form.FormElement({
label: "Date of Birth",
fields: [new sap.ui.commons.DatePicker({
width:"150px",
})
]
}),
new sap.ui.layout.form.FormElement({
label: "address",
width:"150%",
fields: [new sap.ui.commons.TextArea({
cols : 20,
rows : 5,
}),
]
})
]
}),
]
});
// Create the button which should open the dialog
var oButton = new sap.ui.commons.Button("button1",{
text: "Open",
press:function(){
openDialog();
}
});
// Function to create the dialog
function openDialog() {
var oDialog1 = new sap.ui.commons.Dialog();
oDialog1.setTitle("person data");
var oText = new sap.ui.commons.TextView({text: "name"});
oDialog1.addContent(oText);
oDialog1.addButton(new sap.ui.commons.Button({text: "OK", press:function(){oDialog1.close();}}));
oDialog1.open();
};
return new sap.m.Page({
title: "Title",
content: [
oForm1,oButton
]
});
}
});
index.html:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
<script src="resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.m,sap.ui.commons,sap.ui.core"
data-sap-ui-theme="sap_bluecrystal">
</script>
<!-- only load the mobile lib "sap.m" and the "sap_bluecrystal" theme -->
<script>
sap.ui.localResources("form");
var app = new sap.m.App({initialPage:"idform1"});
var page = sap.ui.view({id:"idform1", viewName:"form.form", type:sap.ui.core.mvc.ViewType.JS});
app.addPage(page);
app.placeAt("content");
</script>
<style>
#fo{
color:red;
}
</style>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
output:
No comments:
Post a Comment