/index.html

## 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>