@openui5/sap.ui.core 1.124.2 → 1.126.0

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>
 

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

@@ -7,7 +7,7 @@
 		<script src="shared-config.js"></script>
 		<script id="sap-ui-bootstrap"
 				src="../../../../resources/sap-ui-core.js"
-				data-sap-ui-libs="sap.ui.commons"
+				data-sap-ui-libs="sap.m, sap.ui.layout"
 				data-sap-ui-theme="sap_bluecrystal">
 		</script>
 
@@ -21,48 +21,51 @@
 			) {
 				Core.ready().then(function() {
 					function scream() {
-						alert("Help! I'm blurred!");
+						//eslint-disable-next-line no-alert
+						alert("Help! I've lost focus!");
 					}
 					function scream2() {
-						alert("HEEEEEEELP! I'M BLURRED!");
+						//eslint-disable-next-line no-alert
+						alert("HEEEEEEELP! I'VE LOST FOCUS!");
 					}
 
-					var oTf1 = new sap.ui.commons.TextField("tf1").attachBrowserEvent("blur", function(){alert("Help! I'm blurred!");});
+					var oTf1 = new sap.m.Input("tf1").attachBrowserEvent("focusout", scream);
 					oTf1.placeAt("uiArea1");
 
-					var oLayout = new sap.ui.commons.layout.MatrixLayout().setWidth("auto");
-					var oBtn = new sap.ui.commons.Button("btn1", {text : "Bind blur event to TextField"});
+					var oBtn = new sap.m.Button("btn1", {text : "Bind focusout event"});
 					oBtn.attachPress(function(){
-						oTf2.attachBrowserEvent("blur", scream);
+						oTf2.attachBrowserEvent("focusout", scream);
 					});
 
-					var oBtn2 = new sap.ui.commons.Button("btn2", {text : "Bind another, more INTENSE, blur event to TextField"});
+					var oBtn2 = new sap.m.Button("btn2", {text : "Bind another, more INTENSE focusout event"});
 					oBtn2.attachPress(function(){
-						oTf2.attachBrowserEvent("blur", scream2);
+						oTf2.attachBrowserEvent("focusout", scream2);
 					});
 
-					var oBtn3 = new sap.ui.commons.Button("btn3", {text : "Unbind blur event from TextField"});
+					var oBtn3 = new sap.m.Button("btn3", {text : "Unbind focusout event"});
 					oBtn3.attachPress(function(){
-						oTf2.detachBrowserEvent("blur", scream);
+						oTf2.detachBrowserEvent("focusout", scream);
 					});
 
-					var oBtn4 = new sap.ui.commons.Button("btn4", {text : "Unbind INTENSE blur event from TextField"});
+					var oBtn4 = new sap.m.Button("btn4", {text : "Unbind INTENSE focusout event"});
 					oBtn4.attachPress(function(){
-						oTf2.detachBrowserEvent("blur", scream2);
+						oTf2.detachBrowserEvent("focusout", scream2);
 					});
 
-					oLayout.createRow(oBtn, oBtn2);
-					oLayout.createRow(oBtn3, oBtn4);
-					oLayout.placeAt("uiArea2");
+					var oLayout = new sap.ui.layout.HorizontalLayout({
+						content: [
+							oBtn, oBtn2, oBtn3, oBtn4
+						]
+					}).placeAt("uiArea2");
 
-					var oTf2 = new sap.ui.commons.TextField("tf2");
+					var oTf2 = new sap.m.Input("tf2");
 					oTf2.placeAt("uiArea3");
 
-					var oBtnR = new sap.ui.commons.Button("btnR", {text : "Re-Render the TextFields", press : function(){
+					var oBtnR = new sap.m.Button("btnR", {text : "Re-Render the Inputs", press : function(){
 						oTf1.invalidate();
 						oTf2.invalidate();
 					}});
-					oBtnR.placeAt("uiArea4")
+					oBtnR.placeAt("uiArea4");
 				});
 			});
 		</script>
@@ -70,19 +73,19 @@
 	<body class="sapUiBody">
 		<h1>Generic Event Binding Test</h1>
 
-		This TextField has a blur event bound initially:
+		This Input has a focusout event bound initially:
 		<div id="uiArea1"></div>
 
 		<br> <br>
-		Click the button to bind a blur event to the below TextField:
+		Click the button to bind a focusout event to the below Input:
 		<div id="uiArea2"></div>
 
 		<br>
-		This TextField only has a blur event once the Button is clicked:
+		This Input only has a focusout event once the Button is clicked:
 		<div id="uiArea3"></div>
 
 		<br> <br>
-		Click the button to force a re-rendering of the TextFields:
+		Click the button to force a re-rendering of the Inputs:
 		<div id="uiArea4"></div>
 
 	</body>

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

@@ -5,27 +5,21 @@
 		<script src="shared-config.js"></script>
 		<script id="sap-ui-bootstrap"
 				data-sap-ui-theme="sap_bluecrystal"
+				data-sap-ui-libs="sap.ui.commons,sap.m,sap.ui.layout"
 				src="../../../../resources/sap-ui-core.js"
 				>
 		</script>
 		<script>
 			sap.ui.require(["sap/ui/core/Element"], function(Element) {
-				try{
-					sap.ui.getCore().loadLibrary("sap.ui.commons");
-				}catch(e){
-					alert("This test page requires the library 'sap.ui.commons' which is not available.");
-					throw(e);
-				}
-
 				// create the controls in the head
 				var oLayout = new sap.ui.commons.layout.MatrixLayout();
 				oLayout.setLayoutFixed(false);
-				var oButton1 = new sap.ui.commons.Button({
+				var oButton1 = new sap.m.Button({
 					text: "Wrap With SAPUI5 Controls",
 					tooltip : "Creates a Control Tree around the existing HTML and places it at the 'target1' div below",
 					press: createOuterControlTree
 				});
-				var oButton2 = new sap.ui.commons.Button({
+				var oButton2 = new sap.m.Button({
 					text: "Create Nested Control",
 					tooltip : "Creates a Control and places it within the HTML Container",
 					press: createNestedControlTree
@@ -51,42 +45,54 @@
 				);
 
 				function createOuterControlTree() {
-					var oLayout = new sap.ui.commons.layout.MatrixLayout();
-					var oButton = new sap.ui.commons.Button({ text: "Some Button", tooltip : "Just a sample for a SAPUI5 Control", press: function() { oTextField.setValue("" + new Date().getTime()); }});
-					var oTextField = new sap.ui.commons.TextField({ value : "Some Initial Value"});
-					oLayout.createRow(oButton, oTextField);
-					var oHTML = new sap.ui.core.HTML({ id : "embedded" });
-					oLayout.createRow(oHTML);
-
-					/*var oPanel = new sap.ui.commons.Panel({
-						title : new sap.ui.core.Title({text:"A SAPUI5 Panel"}),
-						content : [oLayout]
+					var oTextField;
+					var oLayout = new sap.ui.layout.VerticalLayout({
+						content: [
+							new sap.ui.layout.HorizontalLayout({
+								content: [
+									new sap.m.Button({
+										text: "Some Button",
+										tooltip : "Just a sample for a SAPUI5 Control",
+										press: function() {
+											oTextField.setValue("" + new Date().getTime()); 
+										}
+									}),
+									oTextField = new sap.m.Input({
+										value : "Some Initial Value"
+									})
+								]
+							}),
+							new sap.ui.core.HTML({ id : "embedded" })
+						]
 					});
-					oPanel.placeAt("target1");*/
 
-					/**/
-					var oDialog = new sap.ui.commons.Dialog({
+					var oDialog = new sap.m.Dialog({
 						title : "A SAPUI5 Dialog",
 						content: oLayout,
-						buttons : [ new sap.ui.commons.Button({text:"OK"}) ],
-						showCloseButton : true
+						buttons : [
+							new sap.m.Button({
+								text:"OK",
+								press: () => oDialog.destroy()
+							})
+						]
 					});
-					// oDialog.placeAt("target1")
 					oDialog.open();
-					/**/
+
 				};
 
 				var delta = 10;
 
 				function createNestedControlTree() {
-					var oButton = new sap.ui.commons.Button({
+					var oButton = new sap.m.Button({
 						text: "Inner Button", tooltip : "Just a sample for a SAPUI5 Control",
 						press: function() {
-							delta = delta <= 2 ? 2 : delta-1;
+							delta = delta <= 2 ? 2 : delta - 1;
 						}});
 					oButton.placeAt(jQuery(".x").get(0));
 				};
 
+				var d;
+
 				function animate() {
 					var html5 = jQuery("#embedded");
 					html5.css("-webkit-perspective", 500);
@@ -98,15 +104,17 @@
 					var html5 = jQuery("#embedded > div");
 					html5.css("-webkit-transform", "rotateY(" + d + "deg)");
 					d = d + delta;
-					if ( d >= 360 ) d = 0;
+					if ( d >= 360 ) {
+						d = 0;
+					}
 					setTimeout(step, 50);
 				}
 
 				new sap.ui.core.HTML("myhtml", {content : ""}).placeAt("empty-content");
-				new sap.ui.commons.Button({text:"Set Content As String (red)", press: function() {
+				new sap.m.Button({text:"Set Content As String (red)", press: function() {
 					Element.getElementById("myhtml").setContent("<div style='background-color:red;width:16px;height:16px;'></div>");
 				}}).placeAt("empty-content");
-				new sap.ui.commons.Button({text:"Set Content as DOM (green)", press: function() {
+				new sap.m.Button({text:"Set Content as DOM (green)", press: function() {
 					Element.getElementById("myhtml").setDOMContent(jQuery("<div style='background-color:green;width:16px;height:16px;'></div>").get(0));
 				}}).placeAt("empty-content");
 			});
@@ -115,12 +123,12 @@
 	<body class="sapUiBody">
 		<h1>Test Page for the HTML Container (sap.ui.core.HTML)</h1>
 
-	    <div id="controls" ></div>
-	    <hr>
+		<div id="controls" ></div>
+		<hr>
 
-	    <span>The area below with the red dotted border is a &lt;div&gt; with id "target1". It represents a potential SAPUI5 UIArea.
-	    But in the current, initial state of the page it only contains some HTML markup (the red/yellow checkered area).
-	    Click event handlers have been attached to the red and yellow squares. </span>
+		<span>The area below with the red dotted border is a &lt;div&gt; with id "target1". It represents a potential SAPUI5 UIArea.
+		But in the current, initial state of the page it only contains some HTML markup (the red/yellow checkered area).
+		Click event handlers have been attached to the red and yellow squares. </span>
 
 		<div id="target1" style="border:4px dotted red;width:512px;height:322px;">
 			<div id="embedded" >
@@ -157,8 +165,8 @@
 		</div>
 
 		<h2>Empty Content</h2>
-    <p>The following HTML control initially has empty content. It renders empty (no HTML), but after setting some
-    content (as String or as DOM node), it updates correctly.</p>
+	<p>The following HTML control initially has empty content. It renders empty (no HTML), but after setting some
+	content (as String or as DOM node), it updates correctly.</p>
 
 		<div id="empty-content"></div>
 		<div id="log">

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

@@ -5,56 +5,81 @@
 		<script src="shared-config.js"></script>
 		<script id="sap-ui-bootstrap"
 				data-sap-ui-theme="sap_bluecrystal"
+				data-sap-ui-libs="sap.m, sap.ui.layout"
 				src="../../../../resources/sap-ui-core.js"
 				>
 		</script>
 		<script>
-			try{
-				sap.ui.getCore().loadLibrary("sap.ui.commons");
-			}catch(e){
-				alert("This test page requires the library 'sap.ui.commons' which is not available.");
-				throw(e);
-			}
+			var oTextArea, oHTML, oResultView;
 
-		    // create the controls in the head
-			var oLayout = new sap.ui.commons.layout.MatrixLayout({
-				layoutFixed: false
-			});
-		    oLayout.createRow(
-		    	new sap.ui.commons.TextView({design:'H4', text:"Input (unsafe)"}),
-		    	"",
-		    	new sap.ui.commons.TextView({design:'H4', text:"Output (sanitized)"}),
-		    	new sap.ui.commons.TextView({design:'H4', text:"HTML Control"})
-		    );
-		    var oTextArea = new sap.ui.commons.TextArea({
-		    	width: '400px',
-		    	height: '300px',
-		    	value: '<div><br>\n<span>some <b>bold</b> or <i>italic</i> or <font size="+2">taller</font>Text</span><br>\n<a href="http://anonymous.org">Some Link</a><br>\n<script>alert("XSS attack");</' + 'script><br>\n</div>'
-		    });
-		    var oControls = new sap.ui.layout.VerticalLayout();
-		    oControls.addContent(
-			    	new sap.ui.commons.Button({
-			    		text: "Set as content ->",
-			    		press: function() {
-			    			oHTML.setContent(oTextArea.getValue());
-			    			oResultView.setValue(oHTML.getContent());
-			    		}
-			    	}));
-		    oControls.addContent(
-			    	new sap.ui.commons.CheckBox({
-			    		text: "Sanitize",
-			    		change: function() {
-			    			oHTML.setSanitizeContent(this.getChecked());
-			    		}
-			    	}));
-		    var oHTML = new sap.ui.core.HTML({});
-		    var oResultView = new sap.ui.commons.TextArea({
-		    	width: '400px',
-		    	height: '300px',
-		    	value: ''
-		    });
-			oLayout.createRow(oTextArea, oControls, oResultView, oHTML);
-			oLayout.placeAt("content");
+			// create the controls in the head
+			var oLayout = new sap.ui.layout.Grid({
+				content: [
+					new sap.m.Title({
+						titleStyle: 'H2',
+						text:"Input (unsafe)",
+						layoutData: new sap.ui.layout.GridData({
+							span: "L5 M5 S5"
+						})
+					}),
+					new sap.m.Title({
+						titleStyle: 'H2',
+						text:"Output (sanitized)",
+						layoutData: new sap.ui.layout.GridData({
+							span: "L3 M3 S3"
+						})
+					}),
+					new sap.m.Title({
+						titleStyle: 'H2',
+						text:"HTML Control",
+						layoutData: new sap.ui.layout.GridData({
+							span: "L3 M3 S3"
+						})
+					}),
+					oTextArea = new sap.m.TextArea({
+						width: '100%',
+						height: '300px',
+						value: '<div><br>\n<span>some <b>bold</b> or <i>italic</i> or <font size="+2">taller</font>Text</span><br>\n<a href="http://anonymous.org">Some Link</a><br>\n<script>alert("XSS attack");</' + 'script><br>\n</div>',
+						layoutData: new sap.ui.layout.GridData({
+							span: "L3 M3 S3",
+							linebreak: true
+						})
+					}),
+					new sap.ui.layout.VerticalLayout({
+						content: [
+							new sap.m.Button({
+								text: "Set as content ->",
+								press: function() {
+									oHTML.setContent(oTextArea.getValue());
+									oResultView.setValue(oHTML.getContent());
+								}
+							}),
+							new sap.m.CheckBox({
+								text: "Sanitize",
+								select: function() {
+									oHTML.setSanitizeContent(this.getSelected());
+								}
+							})
+						],
+						layoutData: new sap.ui.layout.GridData({
+							span: "L2 M2 S2"
+						})
+					}),
+					oResultView = new sap.m.TextArea({
+						width: '100%',
+						height: '300px',
+						value: '',
+						layoutData: new sap.ui.layout.GridData({
+							span: "L3 M3 S3"
+						})
+					}),
+					oHTML = new sap.ui.core.HTML({
+						layoutData: new sap.ui.layout.GridData({
+							span: "L3 M3 S3"
+						})
+					})
+				]
+			}).placeAt("content");
 		</script>
 	</head>
 	<body class="sapUiBody">

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

@@ -18,24 +18,18 @@
 <script src="shared-config.js"></script>
 <script id="sap-ui-bootstrap"
 	src="../../../../resources/sap-ui-core.js"
-	data-sap-ui-theme="sap_bluecrystal">
+	data-sap-ui-theme="sap_bluecrystal"
+	data-sap-ui-libs="sap.m, sap.ui.layout">
 
 </script>
 
 <script>
-	try {
-		jQuery.sap.require("sap.ui.core.IntervalTrigger");
-		jQuery.sap.require("sap.ui.commons.ButtonRenderer");
-
-		sap.ui.getCore().loadLibrary("sap.ui.commons");
-	} catch (e) {
-		alert("This test page requires the library 'sap.ui.commons' which is not available.");
-		throw (e);
-	}
+	jQuery.sap.require("sap.ui.core.IntervalTrigger");
+	jQuery.sap.require("sap.m.ButtonRenderer");
 
 	var triggerCounter = 0;
 
-	sap.ui.core.Control.extend("mySampleListener", {
+	var MySampleListener = sap.ui.core.Control.extend("MySampleListener", {
 		metadata : {
 			properties : {
 				"index" : "int"
@@ -49,7 +43,7 @@
 				oRm.class("sampleListener");
 				oRm.openEnd();
 	
-				oRm.text("Lorem Ipsum")
+				oRm.text("Lorem Ipsum");
 	
 				oRm.close("div");
 			}
@@ -72,7 +66,7 @@
 		}
 	});
 
-	var oLbl = new sap.ui.commons.Label({
+	var oLbl = new sap.m.Label({
 		text : "Call back calls: " + triggerCounter
 	}).placeAt("counter");
 
@@ -83,23 +77,23 @@
 
 	var oTrigger = new sap.ui.core.IntervalTrigger();
 
-	sap.ui.commons.Button.extend("myTriggerButton", {
+	var MyTriggerButton = sap.m.Button.extend("MyTriggerButton", {
 		metadata : {
 			properties : {
-				"index" : "int",
+				"index" : "int"
 			}
 		},
 
-		renderer : sap.ui.commons.ButtonRenderer.render
+		renderer : sap.m.ButtonRenderer
 	});
 
 	var aListeners = [];
 	var oBtn = {};
-	var oLayout = new sap.ui.commons.layout.MatrixLayout().placeAt("triggers");
+	var oLayout = new sap.ui.layout.VerticalLayout().placeAt("triggers");
 
 	for ( var i = 0; i < 10; i++) {
-		aListeners[i] = new mySampleListener();
-		oBtn = new myTriggerButton({
+		aListeners[i] = new MySampleListener();
+		oBtn = new MyTriggerButton({
 			text : "Remove from trigger",
 			index : i,
 			press : function() {
@@ -107,11 +101,18 @@
 			}
 		});
 
-		oLayout.createRow(aListeners[i], oBtn);
+		oLayout.addContent(
+			new sap.ui.layout.HorizontalLayout({
+				content: [
+					aListeners[i],
+					oBtn
+				]
+			})
+		);
 		oTrigger.addListener(aListeners[i].trigger, aListeners[i]);
 	}
 
-	var oAttachIntervalBtn = new sap.ui.commons.Button({
+	var oAttachIntervalBtn = new sap.m.Button({
 		text : "Start trigger",
 		press : function() {
 			oTrigger.setInterval(1000);