@openui5/sap.ui.core 1.124.0 → 1.125.0

package/src/sap/ui/test/OpaPlugin.js

@@ -23,12 +23,13 @@ sap.ui.define([
 	'sap/ui/thirdparty/jquery',
 	'sap/ui/Global',
 	'sap/ui/base/Object',
+	'sap/ui/core/Element',
 	'sap/ui/core/mvc/View',
 	'sap/ui/test/matchers/Ancestor',
 	'sap/ui/test/matchers/MatcherFactory',
 	'sap/ui/test/pipelines/MatcherPipeline',
 	'sap/ui/test/_OpaLogger'
-], function (extend, ObjectPath, $, Global, UI5Object, View, Ancestor, MatcherFactory,
+], function (extend, ObjectPath, $, Global, UI5Object, UI5Element, View, Ancestor, MatcherFactory,
 			MatcherPipeline, _OpaLogger) {
 
 		/**
@@ -298,17 +299,7 @@ sap.ui.define([
 
 			// get controls whose roots are in the subtree of oJQueryElement
 			_getControlsInContainer: function (oJQueryElement) {
-				var aAllControls = oJQueryElement.find("*").control();
-				var aResult = [];
-				aAllControls.forEach(function (oControl) {
-					var bUnique = !aResult.filter(function (oUniqueControl) {
-						return oUniqueControl.getId() === oControl.getId();
-					}).length;
-					if (bUnique) {
-						aResult.push(oControl);
-					}
-				});
-				return aResult;
+				return toUniqueControls(oJQueryElement.find("*"));
 			},
 
 			_isControlInView: function (oControl, sViewName) {
@@ -806,6 +797,39 @@ sap.ui.define([
 			return sap.ui.require("sap/ui/core/Element").registry;
 		};
 
+		let toUniqueControls = function($DOMElements) {
+			const aControls = [];
+			$DOMElements.each((_idx, oDomRef) => {
+				const oUI5Element = UI5Element.closestTo(oDomRef);
+				if (oUI5Element && !aControls.includes(oUI5Element)) {
+					aControls.push(oUI5Element);
+				}
+			});
+			return aControls;
+		};
+
+		/**
+		 * Fallback to an implementation based on jQuery plugin when UI5Element.closestTo does not
+		 * exist yet (when the application under test is executed with a much older UI5 version).
+		 *
+		 * @deprecated Since 1.106
+		 */
+		if (typeof UI5Element.closestTo !== "function") {
+			toUniqueControls = function ($DOMElements) {
+				var aAllControls = $DOMElements.control();
+				var aResult = [];
+				aAllControls.forEach(function (oControl) {
+					var bUnique = !aResult.filter(function (oUniqueControl) {
+						return oUniqueControl.getId() === oControl.getId();
+					}).length;
+					if (bUnique) {
+						aResult.push(oControl);
+					}
+				});
+				return aResult;
+			};
+		}
+
 		return OpaPlugin;
 	});
 

package/src/sap/ui/test/generic/TestBase.js

@@ -26,7 +26,7 @@ sap.ui.define([
 	 * @extends sap.ui.base.Object
 	 * @abstract
 	 * @author SAP SE
-	 * @version 1.124.0
+	 * @version 1.125.0
 	 * @since 1.100
 	 */
 	return BaseObject.extend("sap.ui.test.generic.TestBase", {

package/src/sap/ui/util/Storage.js

@@ -277,7 +277,7 @@ sap.ui.define(["sap/base/assert"], function (assert) {
 	 *
 	 * @enum {string}
 	 * @public
-	 * @version 1.124.0
+	 * @version 1.125.0
 	 */
 	Storage.Type = {
 		/**

package/test/sap/ui/core/BindableResponseHeaders.html

@@ -10,7 +10,7 @@
 	</script>
 	<script src="testdata/NorthwindData.js"></script>
 	<script>
-
+		/*global sinon, NorthwindData */
 		// Configuration
 		var iResponseDelay = 200;
 		var iMaxAge = 30000;
@@ -38,7 +38,7 @@
 				}
 
 
-
+				var sResponse;
 				if (request.url === "fakeservice://northwind/") {
 					sResponse = NorthwindData.root;
 				} else if (request.url === "fakeservice://northwind/$metadata") {
@@ -46,7 +46,7 @@
 					sResponse = NorthwindData.$metadata;
 				} else if (request.url === "fakeservice://northwind/Products/$count") {
 					mResponseHeaders["Content-Type"] = "text/plain";
-					sResponse = NorthwindData.Products.d.results.length;
+					sResponse = String(NorthwindData.Products.d.results.length);
 				} else if (request.url === "fakeservice://northwind/Products") {
 					mResponseHeaders["Age"] = Date.now();
 
@@ -79,7 +79,7 @@
 
 
 		// Display control
-		sap.ui.core.Control.extend("AgeDisplay", {
+		var AgeDisplay = sap.ui.core.Control.extend("AgeDisplay", {
 			metadata: {
 				properties: {
 					label: { type: "string" },

package/test/sap/ui/core/ComponentCleanup.html

@@ -13,8 +13,8 @@
 		<script src="../../../../resources/sap/ui/thirdparty/sinon.js"></script>
 
 		<script>
-
-		sap.ui.require(["sap/ui/core/Core"],function(Core) {
+		/*global sinon */
+		sap.ui.require(["sap/base/Log", "sap/ui/core/Core"],function(Log, Core) {
 
 			Core.ready().then(function() {
 
@@ -111,11 +111,11 @@
 				});
 
 				// use the fake server to load manifest from the model above
-				oServer = sinon.fakeServer.create();
+				var oServer = sinon.fakeServer.create();
 
 				oServer.xhr.useFilters = true;
 				oServer.xhr.addFilter(function(method, url) {
-					return "GET" == method && /manifest(1)?\.(json|appdescr)\?sap-language\=EN/i.test(url) ? false : true;
+					return method === "GET" && /manifest(1)?\.(json|appdescr)\?sap-language\=EN/i.test(url) ? false : true;
 				});
 
 				oServer.autoRespond = true;
@@ -147,82 +147,82 @@
 					var oComponent = sap.ui.component({
 						name: "test1"
 					});
-					console.log(oComponent);
+					Log.debug(oComponent);
 
 					Promise.resolve(oComponent).then(function(oComponent) {
-						console.error(jQuery("link[href$='/style1.css']").length === 1);
+						Log.error(jQuery("link[href$='/style1.css']").length === 1);
 						return oComponent;
 					}).then(function(oComponent) {
 						oComponent.destroy();
-						console.error(jQuery("link[href$='/style1.css']").length === 0);
+						Log.error(jQuery("link[href$='/style1.css']").length === 0);
 						return sap.ui.component({
 							name: "test2"
 						});
 					}).then(function(oComponent) {
-						console.error(jQuery("link[href$='/style2.css']").length === 1);
-						console.error(jQuery("link[href$='/style1.css']").length === 0);
+						Log.error(jQuery("link[href$='/style2.css']").length === 1);
+						Log.error(jQuery("link[href$='/style1.css']").length === 0);
 						return oComponent;
 					}).then(function(oComponent) {
 						oComponent.destroy();
-						console.error(jQuery("link[href$='/style2.css']").length === 0);
-						console.error(jQuery("link[href$='/style1.css']").length === 0);
+						Log.error(jQuery("link[href$='/style2.css']").length === 0);
+						Log.error(jQuery("link[href$='/style1.css']").length === 0);
 						return sap.ui.component({
 							name: "test3"
 						});
 					}).then(function(oComponent) {
-						console.error(jQuery("link[href$='/style3.css']").length === 1);
-						console.error(jQuery("link[href$='/style2.css']").length === 0);
-						console.error(jQuery("link[href$='/style1.css']").length === 0);
+						Log.error(jQuery("link[href$='/style3.css']").length === 1);
+						Log.error(jQuery("link[href$='/style2.css']").length === 0);
+						Log.error(jQuery("link[href$='/style1.css']").length === 0);
 						return oComponent;
 					}).then(function(oComponent) {
 						oComponent.destroy();
-						console.error(jQuery("link[href$='/style3.css']").length === 0);
-						console.error(jQuery("link[href$='/style2.css']").length === 0);
-						console.error(jQuery("link[href$='/style1.css']").length === 0);
+						Log.error(jQuery("link[href$='/style3.css']").length === 0);
+						Log.error(jQuery("link[href$='/style2.css']").length === 0);
+						Log.error(jQuery("link[href$='/style1.css']").length === 0);
 						return sap.ui.component({
 							manifestUrl: "manifest.json",
 							async: true
 						});
 					}).then(function(oComponent) {
-						console.error(jQuery("link[href$='/style3.css']").length === 1);
-						console.error(jQuery("link[href$='/style2.css']").length === 0);
-						console.error(jQuery("link[href$='/style1.css']").length === 0);
+						Log.error(jQuery("link[href$='/style3.css']").length === 1);
+						Log.error(jQuery("link[href$='/style2.css']").length === 0);
+						Log.error(jQuery("link[href$='/style1.css']").length === 0);
 						return oComponent;
 					}).then(function(oComponent) {
 						oComponent.destroy();
-						console.error(jQuery("link[href$='/style3.css']").length === 0);
-						console.error(jQuery("link[href$='/style2.css']").length === 0);
-						console.error(jQuery("link[href$='/style1.css']").length === 0);
+						Log.error(jQuery("link[href$='/style3.css']").length === 0);
+						Log.error(jQuery("link[href$='/style2.css']").length === 0);
+						Log.error(jQuery("link[href$='/style1.css']").length === 0);
 						return sap.ui.component({
 							manifestUrl: "manifest.json",
 							async: true
 						});
 					}).then(function(oComponent) {
-						console.error(jQuery("link[href$='/style3.css']").length === 1);
-						console.error(jQuery("link[href$='/style2.css']").length === 0);
-						console.error(jQuery("link[href$='/style1.css']").length === 0);
+						Log.error(jQuery("link[href$='/style3.css']").length === 1);
+						Log.error(jQuery("link[href$='/style2.css']").length === 0);
+						Log.error(jQuery("link[href$='/style1.css']").length === 0);
 						return oComponent;
 					}).then(function(oComponent) {
 						oComponent.destroy();
-						console.error(jQuery("link[href$='/style3.css']").length === 0);
-						console.error(jQuery("link[href$='/style2.css']").length === 0);
-						console.error(jQuery("link[href$='/style1.css']").length === 0);
+						Log.error(jQuery("link[href$='/style3.css']").length === 0);
+						Log.error(jQuery("link[href$='/style2.css']").length === 0);
+						Log.error(jQuery("link[href$='/style1.css']").length === 0);
 						return sap.ui.component({
 							manifestUrl: "manifest.appdescr",
 							async: true
 						});
 					}).then(function(oComponent) {
-						console.error(jQuery("link[href$='/style4.css']").length === 1);
-						console.error(jQuery("link[href$='/style3.css']").length === 0);
-						console.error(jQuery("link[href$='/style2.css']").length === 0);
-						console.error(jQuery("link[href$='/style1.css']").length === 0);
+						Log.error(jQuery("link[href$='/style4.css']").length === 1);
+						Log.error(jQuery("link[href$='/style3.css']").length === 0);
+						Log.error(jQuery("link[href$='/style2.css']").length === 0);
+						Log.error(jQuery("link[href$='/style1.css']").length === 0);
 						return oComponent;
 					}).then(function(oComponent) {
 						oComponent.destroy();
-						console.error(jQuery("link[href$='/style4.css']").length === 0);
-						console.error(jQuery("link[href$='/style3.css']").length === 0);
-						console.error(jQuery("link[href$='/style2.css']").length === 0);
-						console.error(jQuery("link[href$='/style1.css']").length === 0);
+						Log.error(jQuery("link[href$='/style4.css']").length === 0);
+						Log.error(jQuery("link[href$='/style3.css']").length === 0);
+						Log.error(jQuery("link[href$='/style2.css']").length === 0);
+						Log.error(jQuery("link[href$='/style1.css']").length === 0);
 						return sap.ui.component({
 							name: "test3"
 						});
@@ -230,27 +230,27 @@
 						var oComponent4 = sap.ui.component({
 							name: "test4"
 						});
-						console.error(jQuery("link[href$='/style4.css']").length === 0);
-						console.error(jQuery("link[href$='/style3.css']").length === 2);
-						console.error(jQuery("link[href$='/style2.css']").length === 0);
-						console.error(jQuery("link[href$='/style1.css']").length === 0);
+						Log.error(jQuery("link[href$='/style4.css']").length === 0);
+						Log.error(jQuery("link[href$='/style3.css']").length === 2);
+						Log.error(jQuery("link[href$='/style2.css']").length === 0);
+						Log.error(jQuery("link[href$='/style1.css']").length === 0);
 						oComponent4.destroy();
-						console.error(jQuery("link[href$='/style3.css']").length === 1);
+						Log.error(jQuery("link[href$='/style3.css']").length === 1);
 						oComponent3.destroy();
-						console.error(jQuery("link[href$='/style3.css']").length === 0);
+						Log.error(jQuery("link[href$='/style3.css']").length === 0);
 						return sap.ui.component({
 							name: "test3"
 						});
 					}).then(function(oComponent3) {
-						console.error(jQuery("link[href$='/style3.css']").length === 1);
+						Log.error(jQuery("link[href$='/style3.css']").length === 1);
 						return sap.ui.component({
 							manifestUrl: "manifest1.appdescr",
 							async: true
 						});
 					}).then(function(oComponent3Variant) {
-						console.error(jQuery("link[href$='/style3.css']").length === 2);
+						Log.error(jQuery("link[href$='/style3.css']").length === 2);
 						oComponent3Variant.destroy();
-						console.error(jQuery("link[href$='/style3.css']").length === 1);
+						Log.error(jQuery("link[href$='/style3.css']").length === 1);
 					});
 
 					// TODO add test which includes 2 components with the same style.css

package/test/sap/ui/core/ComponentManifestFirst.html

@@ -6,8 +6,12 @@
 	<script src="shared-config.js"></script>
 	<script id="sap-ui-bootstrap" src="../../../../resources/sap-ui-core.js"
 	data-sap-ui-bindingSyntax="complex"
-	data-sap-ui-libs="sap.ui.commons,sap.m"
-	data-sap-ui-xx-componentPreload="async"></script>
+	data-sap-ui-libs="sap.m"
+	data-sap-ui-xx-componentPreload="async"
+	data-sap-ui-resource-roots='{
+		"samples": "samples/"
+	}'
+	></script>
 	<script src="../../../../resources/sap/ui/thirdparty/sinon.js"></script>
 	<style type="text/css">
 	.CodingArea textarea {
@@ -15,14 +19,14 @@
 	}
 	</style>
 	<script id="viewSource" type="xml/text">
-		<mvc:View xmlns:l="sap.ui.layout" xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns:lf="sap.ui.layout.form" xmlns="sap.m" xmlns:c="sap.ui.commons">
+		<mvc:View xmlns:l="sap.ui.layout" xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m">
 			<l:Splitter height="100%">
 				<Panel width="auto" height="100%" headerText="Configuration Area">
 					<content>
 						<l:VerticalLayout width="100%">
 							<RadioButtonGroup selectedIndex="{/mode}">
 								<RadioButton text="Load manifest.json from server via parameter manifestFirst=true (Default Behavior)"></RadioButton>
-								<RadioButton text="Redirect Request for manifest.json to Dynamic Codeing Box below"></RadioButton>
+								<RadioButton text="Redirect Request for manifest.json to Dynamic Coding Box below"></RadioButton>
 								<RadioButton text="Load manifest.json from server via parameter manifestUrl=..."></RadioButton>
 							</RadioButtonGroup>
 							<Label text="Predefined Manifest"></Label>
@@ -47,6 +51,7 @@
 		</mvc:View>
 	</script>
 	<script>
+	/*global sinon */
 	sap.ui.localResources("samples");
 
 
@@ -133,9 +138,23 @@
 
 	//************* Config UI & LOGIC *******************************************
 
+	var MyController = sap.ui.core.mvc.Controller.extend("MyController", {
+		onLoadComponent() {
+			if (oComp && oComp instanceof sap.ui.core.Component) {
+				oComp.destroy();
+				oCompCont.destroy();
+			}
+			initComponents();
+		},
+		selectChange(oEvent) {
+			selectManifest(oEvent.getSource().getSelectedKey());
+		}
+	});
+
 	// View Creation
 	var oManifestModel = new sap.ui.model.json.JSONModel(mModel);
 	var oMainView = new sap.ui.xmlview({
+		controller: new MyController(),
 		viewContent: jQuery("#viewSource").html()
 	});
 	oMainView.setModel(oManifestModel);
@@ -153,19 +172,6 @@
 	var oServer;
 	var oUrls = {};
 
-	function onLoadComponent() {
-		if (oComp && oComp instanceof sap.ui.core.Component) {
-			oComp.destroy();
-			oCompCont.destroy();
-		};
-		initComponents();
-	};
-
-
-	function selectChange(oEvent) {
-		selectManifest(this.getSelectedKey());
-	};
-
 	function initFakeServer(sUrl) {
 		// use the fake server to load manifest from the model above
 		oServer = sinon.fakeServer.create();
@@ -215,7 +221,7 @@
 				break;
 			default:
 				manifirst = false;
-		};
+		}
 
 		var oConfig = {
 			manifestUrl: manifirst ? undefined : "anylocation/manifest.json",
@@ -229,7 +235,7 @@
 
 		oComp = sap.ui.component(oConfig);
 
-		if (oComp instanceof Promise){
+		if (oComp instanceof Promise) {
 			oComp.then(function(oComponent){
 				placeComponent(oComponent);
 				oComp = oComponent;
@@ -240,7 +246,7 @@
 		} else {
 			placeComponent(oComp);
 		}
-	};
+	}
 
 	function placeComponent(oComponentForPlacement) {
 		oCompCont = new sap.ui.core.ComponentContainer({

package/test/sap/ui/core/ContextMenuSupport.html

@@ -60,7 +60,7 @@
 			new sap.m.MenuItem({ text: "Action one" }),
 			new sap.m.MenuItem({ text: "Second action", enabled: false }),
 			new sap.m.MenuItem({ text: "Action three more ..."}),
-			new sap.m.MenuItem({ text: "Fourth option" }),
+			new sap.m.MenuItem({ text: "Fourth option" })
 		]
 	});
 
@@ -68,8 +68,7 @@
 		items: [
 			new sap.ui.unified.MenuItem( { text: "Example with Unified Menu" } ),
 			new sap.ui.unified.MenuItem( { text: "Example" } ),
-			new sap.ui.unified.MenuItem( { text: "Example" } ),
-
+			new sap.ui.unified.MenuItem( { text: "Example" } )
 		]
 	});
 
@@ -80,34 +79,34 @@
 				id: "firstItem",
 				title: "Monitor Locking Cable",
 				description: "P1239123",
-				icon: "sap-icon://laptop",
+				icon: "sap-icon://laptop"
 			}),
 			new sap.m.StandardListItem({
 				title: "Laptop Case",
 				description: "123-3123-111",
-				icon: "sap-icon://it-host",
+				icon: "sap-icon://it-host"
 			}),
 			new sap.m.StandardListItem({
 				title: "USB Stick 16Gbyte",
 				description: "XKT-2342432432",
-				icon: "sap-icon://it-system",
+				icon: "sap-icon://it-system"
 			}),
 			new sap.m.StandardListItem({
 				title: "Deskjet Super Highspeed",
 				description: "KTZ-23432423",
-				icon: "sap-icon://e-learning",
+				icon: "sap-icon://e-learning"
 			}),
 			new sap.m.StandardListItem({
 				id: "lastItem",
 				title: "Laser Allround Pro",
 				description: "554325-423",
-				icon: "sap-icon://it-instance",
+				icon: "sap-icon://it-instance"
 			})
 		]
 	});
 
 	var oBasicButton = new sap.m.Button({
-		text: "Buton without a ContextMenu"
+		text: "Button without a ContextMenu"
 	});
 
 	var oLeftDownButton = new sap.m.Button({
@@ -133,7 +132,7 @@
 			oLeftDownButton,
 			oRightDownButton
 		]
-	})
+	});
 	oApp.addPage(oPage);
 
 	oPage.setContextMenu(oPageContextMenu);

package/test/sap/ui/core/DesigntimeOverview.html

@@ -2,7 +2,7 @@
 <html>
 	<head>
 		<script>
-		document.location.href = "../../../../test-resources/sap/ui/dt/ControlLibrary.html?library=sap.ui.core"
+		document.location.href = "../../../../test-resources/sap/ui/dt/ControlLibrary.html?library=sap.ui.core";
 		</script>
 	</head>
 </html>

package/test/sap/ui/core/EventBroadcaster.html

@@ -117,9 +117,9 @@
 					},
 					attachDetachListener: function (oEvent) {
 						if (oEvent.getParameter("state")) {
-							window.addEventListener("UI5Event", this._fnListener)
+							window.addEventListener("UI5Event", this._fnListener);
 						} else {
-							window.removeEventListener("UI5Event", this._fnListener)
+							window.removeEventListener("UI5Event", this._fnListener);
 						}
 					},
 					clearRows: function () {

package/test/sap/ui/core/FieldGroup.html

@@ -9,76 +9,85 @@
 	<script src="shared-config.js"></script>
 	<script id="sap-ui-bootstrap"
 			src="../../../../resources/sap-ui-core.js"
-			data-sap-ui-libs="sap.ui.commons,sap.m">
+			data-sap-ui-libs="sap.m,sap.ui.layout">
 	</script>
 
 	<script>
 
-	var oVerticalLayout = new sap.ui.commons.layout.VerticalLayout();
+	var oVerticalLayout = new sap.ui.layout.VerticalLayout({width:"100%"});
 	oVerticalLayout.attachValidateFieldGroup(function(oEvent) {
 		jQuery.sap.log.info("Validate " + oEvent.mParameters.fieldGroupIds[0]);
 	});
-	var oMatrixLayout = new sap.ui.commons.layout.MatrixLayout({width:"500px"});
-	oMatrixLayout.setLayoutFixed(false);
-
-	oMatrixLayout.createRow(
-			new sap.ui.commons.Label({text: "Field 1 of group1",labelFor:"field11"}),
-			new sap.ui.commons.TextField({id:"field11",width:"200px",fieldGroupIds:["group1"]})
-	);
-	oMatrixLayout.createRow(
-			new sap.ui.commons.Label({text: "Field 2 of group1",labelFor:"field12"}),
-			new sap.ui.commons.TextField({id:"field12",width:"200px",fieldGroupIds:["group1"]})
-	);
-	oMatrixLayout.createRow(
-			new sap.ui.commons.Label({text: "Field 3 of group1",labelFor:"field13"}),
-			new sap.ui.commons.TextField({id:"field13",width:"200px",fieldGroupIds:["group1"]})
-	);
-	oMatrixLayout.createRow(
-			new sap.ui.commons.Label({text: "Field 1 of group2",labelFor:"field21"}),
-			new sap.ui.commons.CheckBox({id:"field21",width:"200px",fieldGroupIds:["group2"]})
-	);
-	oVerticalLayout.addContent(oMatrixLayout);
+	var oSimpleForm = new sap.ui.layout.form.SimpleForm({
+		width: "100%",
+		editable: true,
+		layout:"ResponsiveGridLayout",
+		labelSpanXL:4,
+		labelSpanL:4,
+		labelSpanM:4,
+		labelSpanS:12,
+		adjustLabelSpan:false,
+		emptySpanXL:0,
+		emptySpanL:4,
+		emptySpanM:0,
+		emptySpanS:0,
+		columnsXL:2,
+		columnsL:1,
+		columnsM:1,
+		singleContainerFullSize:false,
+		content: [
+			new sap.m.Label({text: "Field 1 of group1",labelFor:"field11"}),
+			new sap.m.Input({id:"field11",width:"200px",fieldGroupIds:["group1"]}),
+			new sap.m.Label({text: "Field 2 of group1",labelFor:"field12"}),
+			new sap.m.Input({id:"field12",width:"200px",fieldGroupIds:["group1"]}),
+			new sap.m.Label({text: "Field 3 of group1",labelFor:"field13"}),
+			new sap.m.Input({id:"field13",width:"200px",fieldGroupIds:["group1"]}),
+			new sap.m.Label({text: "Field 1 of group2",labelFor:"field21"}),
+			new sap.m.CheckBox({id:"field21",width:"200px",fieldGroupIds:["group2"]})
+		]
+	});
+	oVerticalLayout.addContent(oSimpleForm);
 
-	var oMatrixLayout = new sap.ui.commons.layout.MatrixLayout({width:"500px"});
-	oMatrixLayout.setLayoutFixed(false);
-	oMatrixLayout.createRow(
-			new sap.ui.commons.Label({text: "Field 2 of group2",labelFor:"field22"}),
-			new sap.ui.commons.TextField({id:"field22",width:"200px",fieldGroupIds:["group2"]})
-	);
-	oMatrixLayout.createRow(
-			new sap.ui.commons.Label({text: "Field 1 with no group",labelFor:"field1"}),
-			new sap.ui.commons.TextField({id:"field1",width:"200px"})
-	);
-	oMatrixLayout.createRow(
-			new sap.ui.commons.Label({text: "Field 3 of group2",labelFor:"field23"}),
-			new sap.ui.commons.TextField({id:"field23",width:"200px",fieldGroupIds:["group2"]})
-	);
-	oMatrixLayout.createRow(
-			new sap.ui.commons.Label({text: "Field 1 of group3",labelFor:"field31"}),
-			new sap.ui.commons.TextField({id:"field31",width:"200px",fieldGroupIds:["group3"]})
-	);
-	oMatrixLayout.createRow(
-			new sap.ui.commons.Label({text: "Field 2 of group3",labelFor:"field32"}),
-			new sap.ui.commons.CheckBox({id:"field32",width:"200px",fieldGroupIds:["group3"]})
-	);
-	oMatrixLayout.createRow(
-			new sap.ui.commons.Label({text: "Field 3 of group3",labelFor:"field33"}),
-			new sap.ui.commons.CheckBox({id:"field33",width:"200px",fieldGroupIds:["group3"]})
-	);
-	oMatrixLayout.createRow(
-			new sap.ui.commons.Label({text: "Field 4 with group3",labelFor:"field34"}),
-			new sap.m.DatePicker({id:"field34",width:"200px",fieldGroupIds:["group3"]})
-	);
-	oMatrixLayout.createRow(
-			new sap.ui.commons.Label({text: "Field 2 with no group",labelFor:"field2"}),
-			new sap.ui.commons.TextField({id:"field2",width:"200px"})
-	);
-	oMatrixLayout.createRow(
-			new sap.ui.commons.Label({text: "Field 3 with no group",labelFor:"field3"}),
-			new sap.ui.commons.TextField({id:"field3",width:"200px"})
-	);
+	var oSimpleForm = new sap.ui.layout.form.SimpleForm({
+		width:"100%",
+		editable: true,
+		layout:"ResponsiveGridLayout",
+		labelSpanXL:4,
+		labelSpanL:4,
+		labelSpanM:4,
+		labelSpanS:12,
+		adjustLabelSpan:false,
+		emptySpanXL:0,
+		emptySpanL:4,
+		emptySpanM:0,
+		emptySpanS:0,
+		columnsXL:2,
+		columnsL:1,
+		columnsM:1,
+		singleContainerFullSize:false,
+		content: [
+			new sap.m.Label({text: "Field 2 of group2",labelFor:"field22"}),
+			new sap.m.Input({id:"field22",width:"200px",fieldGroupIds:["group2"]}),
+			new sap.m.Label({text: "Field 1 with no group",labelFor:"field1"}),
+			new sap.m.Input({id:"field1",width:"200px"}),
+			new sap.m.Label({text: "Field 3 of group2",labelFor:"field23"}),
+			new sap.m.Input({id:"field23",width:"200px",fieldGroupIds:["group2"]}),
+			new sap.m.Label({text: "Field 1 of group3",labelFor:"field31"}),
+			new sap.m.Input({id:"field31",width:"200px",fieldGroupIds:["group3"]}),
+			new sap.m.Label({text: "Field 2 of group3",labelFor:"field32"}),
+			new sap.m.CheckBox({id:"field32",width:"200px",fieldGroupIds:["group3"]}),
+			new sap.m.Label({text: "Field 3 of group3",labelFor:"field33"}),
+			new sap.m.CheckBox({id:"field33",width:"200px",fieldGroupIds:["group3"]}),
+			new sap.m.Label({text: "Field 4 with group3",labelFor:"field34"}),
+			new sap.m.DatePicker({id:"field34",width:"200px",fieldGroupIds:["group3"]}),
+			new sap.m.Label({text: "Field 2 with no group",labelFor:"field2"}),
+			new sap.m.Input({id:"field2",width:"200px"}),
+			new sap.m.Label({text: "Field 3 with no group",labelFor:"field3"}),
+			new sap.m.Input({id:"field3",width:"200px"})
+		]
+	});
+	oVerticalLayout.addContent(oSimpleForm);
 
-	oVerticalLayout.addContent(oMatrixLayout);
 	oVerticalLayout.placeAt("content");
 	</script>