October 20, 2016 00:19
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html><head>
 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
 	<meta content="charset=utf-8">
 <script src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js" id="sap-ui-bootstrap" data-sap-ui-theme="sap_bluecrystal" data-sap-ui-libs="sap.m"></script>
 	
 	<title>JSFragment used in XmlView</title>
 	
 	<!-- Load UI5, select Blue Crystal theme and the "commons" control library -->
 	<script id='sap-ui-bootstrap' type='text/javascript'
 			src='/sapui5/resources/sap-ui-core.js'
 			data-sap-ui-theme='sap_bluecrystal'
 			data-sap-ui-libs='sap.ui.commons'></script>
 	
 	
 	<!-- DEFINE RE-USE COMPONENTS - NORMALLY DONE IN SEPARATE FILES -->
 	
 	<!-- define a JS Fragment - normally done in a separate file -->
 	<script>
 		// define a new (simple) View type
 		// ...alternatively this can be done in an XML file without JavaScript!
 		sap.ui.jsfragment("my.own.frag", {
 			
 			// defines the UI of this View
 			createContent: function() {
 				// button text is bound to Model, "press" action is bound to Controller's event handler
 				return [ 
 					new sap.ui.commons.Button({text:'my Fragment Button'}),
 					new sap.ui.commons.Button(this.createId("btn2"), {text:'my second Fragment Button'}) 
 				]
 			}
 		});
 	</script>
 	
 	
 	<!-- define an XMLView - normally done in a separate file -->
 	<script id="view1" type="sapui5/xmlview">
 		<mvc:View xmlns:core="sap.ui.core" xmlns:layout="sap.ui.commons.layout" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.ui.commons"
 				controllerName="my.own.controller" xmlns:html="http://www.w3.org/1999/xhtml">
 			<layout:VerticalLayout id="vl">
 				<Button text="Find controls by ID" press="findControls"></Button>
 				<TextView text="Fragment referenced inline, no Fragment ID:" />
 				<core:Fragment fragmentName='my.own.frag' type='JS' />
 				<TextView text="Fragment referenced inline, with Fragment ID 'myFrag':" />
 				<core:Fragment id="myFrag" fragmentName='my.own.frag' type='JS' />
 			</layout:VerticalLayout>
 		</mvc:View> 
 	</script>
 	
 	
 	<script>
 		// define a new (simple) Controller type
 		sap.ui.controller("my.own.controller", {
 			
 			// implement an event handler in the Controller
 			findControls: function() {
 				// Fragment is instantiated within an XMLView => all GIVEN IDs are prefixed with the 
 				// View ID and View.byId() needs to be used to find the controls
 				var b1 = null; // ID is generated: "__button1"
 				var b2 = this.byId("btn2"); // Button ID is given, Fragment has no ID: "myView--btn2"
 				var b3 = null // Fragment has an ID, but Control ID is generated and hence not prefixed: "__button2"
 				var b4 = this.byId(sap.ui.core.Fragment.createId("myFrag", "btn2")); // Button and Fragment ID are given, let the Fragment construct the prefixed ID and then let the View search the again prefixed ID
 				alert("Controls in Fragment:\nButton 1: has no given ID, cannot be found\nButton 2: " + b2 + "\nButton 3: has no given ID, cannot be found\nButton 4: " + b4);
 			}
 		});
 		
 		
 		
 		/*** THIS IS THE "APPLICATION" CODE ***/
 		
 		// instantiate the View
 		var myView = sap.ui.xmlview("myView", {viewContent:jQuery('#view1').html()}); // accessing the HTML inside the script tag above
 		
 		// put the View onto the screen
 		myView.placeAt('content');
 		
 		
 	</script>
 	
 	</head>
 	<body class='sapUiBody'>
 		<div id='content'></div>
 	

 </body>
 </html>
	<!DOCTYPE html>
	<html><head>
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta content="charset=utf-8">
	<script src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js" id="sap-ui-bootstrap" data-sap-ui-theme="sap_bluecrystal" data-sap-ui-libs="sap.m"></script>

	<title>JSFragment used in XmlView</title>

	<!-- Load UI5, select Blue Crystal theme and the "commons" control library -->
	<script id='sap-ui-bootstrap' type='text/javascript'
	src='/sapui5/resources/sap-ui-core.js'
	data-sap-ui-theme='sap_bluecrystal'
	data-sap-ui-libs='sap.ui.commons'></script>


	<!-- DEFINE RE-USE COMPONENTS - NORMALLY DONE IN SEPARATE FILES -->

	<!-- define a JS Fragment - normally done in a separate file -->
	<script>
	// define a new (simple) View type
	// ...alternatively this can be done in an XML file without JavaScript!
	sap.ui.jsfragment("my.own.frag", {

	// defines the UI of this View
	createContent: function() {
	// button text is bound to Model, "press" action is bound to Controller's event handler
	return [
	new sap.ui.commons.Button({text:'my Fragment Button'}),
	new sap.ui.commons.Button(this.createId("btn2"), {text:'my second Fragment Button'})
	]
	}
	});
	</script>


	<!-- define an XMLView - normally done in a separate file -->
	<script id="view1" type="sapui5/xmlview">
	<mvc:View xmlns:core="sap.ui.core" xmlns:layout="sap.ui.commons.layout" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.ui.commons"
	controllerName="my.own.controller" xmlns:html="http://www.w3.org/1999/xhtml">
	<layout:VerticalLayout id="vl">
	<Button text="Find controls by ID" press="findControls"></Button>
	<TextView text="Fragment referenced inline, no Fragment ID:" />
	<core:Fragment fragmentName='my.own.frag' type='JS' />
	<TextView text="Fragment referenced inline, with Fragment ID 'myFrag':" />
	<core:Fragment id="myFrag" fragmentName='my.own.frag' type='JS' />
	</layout:VerticalLayout>
	</mvc:View>
	</script>


	<script>
	// define a new (simple) Controller type
	sap.ui.controller("my.own.controller", {

	// implement an event handler in the Controller
	findControls: function() {
	// Fragment is instantiated within an XMLView => all GIVEN IDs are prefixed with the
	// View ID and View.byId() needs to be used to find the controls
	var b1 = null; // ID is generated: "__button1"
	var b2 = this.byId("btn2"); // Button ID is given, Fragment has no ID: "myView--btn2"
	var b3 = null // Fragment has an ID, but Control ID is generated and hence not prefixed: "__button2"
	var b4 = this.byId(sap.ui.core.Fragment.createId("myFrag", "btn2")); // Button and Fragment ID are given, let the Fragment construct the prefixed ID and then let the View search the again prefixed ID
	alert("Controls in Fragment:\nButton 1: has no given ID, cannot be found\nButton 2: " + b2 + "\nButton 3: has no given ID, cannot be found\nButton 4: " + b4);
	}
	});



	/* THIS IS THE "APPLICATION" CODE */

	// instantiate the View
	var myView = sap.ui.xmlview("myView", {viewContent:jQuery('#view1').html()}); // accessing the HTML inside the script tag above

	// put the View onto the screen
	myView.placeAt('content');


	</script>

	</head>
	<body class='sapUiBody'>
	<div id='content'></div>


	</body>
	</html>