ABAP_to_the_Future

Frontend Tasks: Creating the View and Controller Using SAPUI5 13.4
<Page title="Search for Monsters" class="marginBoxContent">
<headerContent>
<Button icon="sap-icon://action" />
</headerContent>
Listing 13.7 Adding a Title
Figure 13.28 SAPUI5 Application Header Row
The first line on your screen (header) is the title. The next line down on that screen
(subheader) is going to be a box in wh ich you can enter the name of a monster.
When you type “F”, for example, the list will filter to show all the monsters with
names starting with “F”. This is a standard SAPUI5 screen element: a box with the
word Search on the left and a magnifying glass on the right. The good thing about
using standard elements is that it gives your applications a uniform look.
Listing 13.8 presents the code to add the se arch field. You’re going to place the
search field inside the tool bar. You could also add a button next to the search field
inside the tool bar if you wanted, just like in standard SAP screens that have two lines
of icons at the top of the screen. The cumulative result is shown in Figure 13.29.
<subHeader>
<Toolbar>
<SearchField width="200px" liveChange="onSearch" />
</Toolbar>
</subHeader>
Listing 13.8 Adding a Search Field to the Screen
Figure 13.29 Header with Search Box inside the Toolbar
You’re done with the header section of the screen (headerContent in Listing 13.7
above). Now, you’ve come to the body (<content>) of the screen as shown in Listing
13.9, which will be somewhat like an ALV grid—only better looking. You can
have as many different tables of data as you want on your screen, but in this case
there’s just the one. Time to start determining what this table is going to look like.
599