14.01.2020 Views

ABAP_to_the_Future

Create successful ePaper yourself

Turn your PDF publications into a flip-book with our unique Google optimized e-Paper software.

13

SAPUI5

13.4.1 View

There are three different files that will be created in your SAPUI5 application: an

HTML file, an XML file, and another XML file, called a fragment.

The HTML file is the web page that ev ery SAPUI5 application needs in order to

run in a web browser on a laptop or on a mobile device. The XML file is the

“proper” view; the example presented only has one, but complex applications can

have many. The XML fragment is sort of like an INCLUDE file that can be reused by

other view files. Fragments are used in the majority of the SAPUI5 examples presented

in Section 13.5.

HTML File

An SAPUI5 application is, for all intents and purposes, a web page—so you need

to define an HTML file that calls up your view when you access it via a URL. This

was created for you automatically when you created a new SAPUI5 application; so

in that new applicat ion follow the path Monster Demo 폷 Web Content 폷

Index.html. The code to create this file is shown in Listing 13.5.

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>

<script src="resources/sap-ui-core.js"

id="sap-ui-bootstrap"

data-sap-ui-libs="sap.m"

data-sap-ui-xx-bindingSyntax="complex"

data-sap-ui-theme="sap_bluecrystal">

</script>

<!-- only load the mobile lib "sap.m" and the "sap_bluecrystal" theme -->

<script>

sap.ui.localResources("monster");

var app = new sap.m.App({initialPage:"idmyView1"});

var page = sap.ui.view({id:"idmyView1",

viewName:"monster.myView",

type:sap.ui.core.mvc.ViewType.XML});

app.addPage(page);

app.placeAt("content");

</script>

596

Hooray! Your file is uploaded and ready to be published.

Saved successfully!

Ooh no, something went wrong!