Displaying Text

Enhance the app with text.

  1. 1. Add text to the app by enhancing the layout_phone.xml:
    <?xml version="1.0" encoding="UTF-8"?>
<MAF xmlns="http://schemas.sap.com/maf/2012/cfg">

    <!-- Define a "tile" - it translates to UIViewController -->
    <Tile tileId="First Extensible Screen">
        <!-- This is our root view -->
        <P pid="isRoot" value="true"/>
        <!-- Define the layout container. All UI elements included in a layout container will be auto-arranged -->
        <LinearContainer layout="vertical">
            <!-- Define our label -->
            <UIElement type="label">
                <!-- Assign the text to be displayed -->
                <P pid="text" value="Hello World! This is Extensibility!"></P>
                <!-- Default styling is automatically applied (see MAFUIComponents.bundle -> SAPDefaultStyle.xml) -->
            </UIElement>
        </LinearContainer>
    </Tile>
</MAF>
    This code first adds a linear container, which arranges the content to be shown by several criteria. It does not specify additional layout parameters for brevity, therefore the defaults apply. It then adds a label type UI element a UILabel, and assigns a static text to it. You can localize texts, but doing so is outside the scope of this tutorial.
  2. Rebuild and re-run the app. Some text is now displayed on the screen:

    Hello World
    You have added the label with the text by editing the layout XML, without performing any code changes.
  3. You can change the position and dimensions of the label by inserting these lines in the UIElement section: 
    <P pid="halign" value="center"></P>
<P pid="margin_top" value="20pt"></P>
    This code centers the label horizontally on the screen, and adjusts it vertically 20 points below the toolbar.
  4. To move the text to the center of the screen, comment out the line with "margin_top", and add this line:
    <P pid="valign" value="center"></P>
There are several settings that allow you to fine-tune the position and dimensions of the tiles and UI elements. See the metadata XML for all possible values.
Parent topic: Implement an Extensible Application