Example of a JS fragment used in an XML view
The example uses different combinations. Make sure that the sap-ui-core.js script location points to an existing SAPUI5 installation.
#!html
<!DOCTYPE html>
<html><head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="charset=utf-8">
<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>