14.01.2020 Views

ABAP_to_the_Future

You also want an ePaper? Increase the reach of your titles

YUMPU automatically turns print PDFs into web optimized ePapers that Google loves.

Frontend Tasks: Creating the View and Controller Using SAPUI5 13.4

</head>

<body class="sapUiBody" role="application">

<div id="content"></div>

</body>

</html>

Listing 13.5 Monster HTML File

In Listing 13.5, there are several sections, including two <script> sections. Somewhat

like ON LOAD OF PROGRAM, the first <script> section loads the core JavaScript

library and any other libraries (groups of functions) you need. Sometimes, you

have to add these manually; if you do, itwill be mentioned in the generated comments.

In this example, th e comments tell you to on ly load one library and a

theme, and the lines to do this are generated for you.

Then there is another <script> section, which performs the following tasks:

왘 States the folder where the view and controller live (in this case, monster).

왘 Creates a new mobile application with the variable name APP and specifies the

name of the view that is going to appear first. This is somewhat like when you

create a DYNPRO application in ABAP and say what screen comes first.

왘 Another variable, PAGE, says to use the monster.myView XML file.

왘 Links the two variables (they’re objects, really) together by adding the initial

page to the application.

왘 Indicates that the application is going to live in the content section of the web

page.

왘 Defines the body of the web page, and inside that declares that the content of

the web screen is indeed called content.

XML File

In Listing 13.5, you defined the view with the witty name of MyView, and that is

indeed what the view file is called (its full name is MyView.view.xml). At this

point, you’re going to write some XML code to create a screen with a search box

at the top and a list of monster header records in the main area of the screen,

which can be filtered based on what the user puts in the search box. Once you’re

done with this process, the finished screen will look like Figure 13.27.

597

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

Saved successfully!

Ooh no, something went wrong!