ABAP_to_the_Future

13
SAPUI5
Start your fragment definition in Listing 13.13 by indicating that this will be a dialog
box, giving this box a title, and saying that it takes up 60% of the screen. The
result is shown in Figure 13.33.
<?xml version="1.0" encoding="UTF-8"?>
<core:FragmentDefinition xmlns="sap.m"
xmlns:core="sap.ui.core" xmlns:f="sap.ui.layout.form">
<Dialog title="Monster Details" contentWidth="60%">
<content>
Listing 13.13 Defining Header Details of the Fragment (Pop-Up Box)
Figure 13.33 Dialog Box Title
In Listing 13.14, you’ll set up the header details of the selected monsters. At the
start of the code, declare that those details are going to be laid out in SimpleForm,
one of the many UI elements available for you to use. Then, say how many columns
the form is going to have (one in this case), and so on; this is just like passing
values into a function module or method.
You’ll recognize from Listing 13.11 the technique for declaring what the name of
the fields are going to be. For each such field, add the name of an SAP DDIC field
with {} brackets around it to store the value that is going to be dynamically determined
at runtime. The runtime system knows what monster header you’re
talking about, because you’ve just navigated from that particular monster, and the
code in the onMonsterSelected handler passes in the correct monster. The result
is shown in Figure 13.34.
<f:SimpleForm minWidth="1024" maxContainerCols="2"
editable="false" layout="ResponsiveGridLayout" labelSpanL="3"
labelSpanM="3" emptySpanL="4" emptySpanM="4" columnsL="1" columnsM="1">
<f:content>
<Label text="Monster Name (Number)" />
<Text text="{Name} ({MonsterNumber})" />
<Label text="Color" />
<Text text="{Color}" />
<Label text="Strength" />
<Text text="{Strength}" />
<Label text="Days Old" />
604