Start working with SAPUI5 Controls and Views

0
1424

The MVC architecture (Model-View-Controller Paradigm), which was introduced with SAP Webdynpro has now been extended to SAPUI5. Hope you have successfully setup the two login accounts as mentioned in last blog (SAP HANA Cloud Platform Cockpit and SAP and SAP Gateway Demo consumption system).

sap_ui5_commons_carousel

Building onto that, in this blog we will create an application involving a Model and a View (we are not involving Controller in this application, as we don’t need to process anything based on used interaction).

Download the following Application : MyApp2

Please follow following steps to create the application:

1.Login the SAPUI5 Web IDE (which we bookmarked in last blog) and create a new project folder for this application (say, MyApp2).

2.Create View : Create a new folder named ‘view’ under ‘MyApp2’ application folder. Create a file ‘Carousel.view.xml’ inside ‘view’ folder with the following code.

<mvc:View
  xmlns=”sap.m”
  xmlns:mvc=”sap.ui.core.mvc”>
</mvc:View>

With above code, we will create a plain XML view and place it to a node in the DOM. The first and the last line defines the beginning and end of MVC View. The couple of lines in between defines the SAPUI5 namespaces we intend to use. Namespace “sap.m” is the default namespace and is used to refer where majority of our SAPUI5 assets are located. Namespace “sap.ui.core.mvc” is used to refer where SAPUI5 MVC resources are located.

3.Create index.html :

Create ‘index.html’ in the root folder ‘MyApp2’ with following code.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta charset=”utf-8″>
<title>Web Apps using SAPUI5</title>
<script id=”sap-ui-bootstrap” src=”https://sapui5.hana.ondemand.com/resources/sap-ui-core.js”
data-sap-ui-theme=”sap_bluecrystal”
data-sap-ui-libs=”sap.m”
data-sap-ui-compatVersion=”edge”
data-sap-ui-preload=”async”
data-sap-ui-resourceroots='{
“sapui.home”: “./”
}’>
</script>
<script>
sap.ui.getCore().attachInit(function () {
sap.ui.xmlview({
viewName: “sapui.home.view.Carousel”
}).placeAt(“content”);
});
</script>
</head>
<body class=”sapUiBody” id=”content”>
</body>
</html>

The above code we instantiate created view (step 1) in JavaScript into the callback function for the init event of the SAPUI5 runtime. This view is created by a factory function of SAPUI5 which makes the view correctly configured and extendable.

The name is prefixed with the namespace ‘sapui.home’ in order to uniquely identify this resource which we define in the namespace at the SAPUI5 bootstrap of the runtime. In addition to that, we add folder name and the file name to the resource prefix to tell the runtime which file holds the definition of the view to be instantiated.

4. Enhancing the View :

Here we build upon the existing view file(Carousel.view.xml), enhancing it to have the Carousel control to display images on the two pages of the control, which can be navigated one by one using the mouse click.

<mvc:View
displayBlock=”true”
xmlns:mvc=”sap.ui.core.mvc”
xmlns=”sap.m”>
<Carousel>
<pages>
<Image src=”https://upload.wikimedia.org/wikipedia/commons/0/06/SAP_AG_Headquarter_1200.jpg”
height=”600px”/>
<Image
src=”https://upload.wikimedia.org/wikipedia/commons/d/d6/Bill_McDermott_at_SapphireNow_in_2010.jpg”
height=”600px”/>
</pages>
</Carousel>
</mvc:View>

Save the above two files, and Click ‘Run’. You will see the output as following.

Carousel Download the above application: MyApp2

Note: You can download the code above onto the desktop and directly upload to your SAPUI5 Web IDE. It will automatically create files and folders for you.

LEAVE A REPLY