Adding Custom Styling

The UI you have now automatically applies the default style defined in SAPDefaultStyle.xml, which is located in the MAFUIComponents.bundle. To override this with a custom style, add another XML resource to your project, and tell the Extensibility Framework to use it.

First, add an XML file (CustomStyles.xml in this example) to the project (follow the same steps of adding the layout XML in the previous chapter) and paste these lines in the newly created file:

<?xml version="1.0" encoding="utf-8"?>
<styles xmlns="http://schemas.sap.com/maf/2011/sap" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://schemas.sap.com/maf/2011/sap styles.xsd">

<!-- Add custom style definitions  -->
    <Style TargetType="Label" Key="CustomLabel" platform="ios">
        <Setter Property="Background" Value="#00000000" />
        <Setter Property="FontFamily" Value="Helvetica-Bold" />
        <Setter Property="FontSize" Value="16" />
        <Setter Property="HorizontalContentAlignment" Value="Center"/>
        <Setter Property="VerticalContentAlignment" Value="Center"/>
        <Setter Property="Foreground" Value="#F0AB00" />
    </Style>

</styles>

This is a standard SAP style XML, which defines a custom label. To apply a custom style to the text label, edit the layout_phone.xml and set the style:

<!-- Define our label -->
            <UIElement type="label">
                <!-- Assign the text to be displayed -->
                <P pid="text" value="Hello World! This is Extensibility!"></P>

				<!-- Apply custom styling -->
                <P pid="style" value="CustomLabel"></P>
                <!-- Default styling is automatically applied (see MAFUIComponents.bundle -> SAPDefaultStyle.xml)-->
            </UIElement>

Before initializing the Extensibility Framework, apply the custom style by setting the applicationSpecificStylePath MAFCore property:

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];

	// Apply custom style	
    [MAFCore sharedInstance].applicationSpecificStylePath = [[NSBundle mainBundle] pathForResource:@"CustomStyles" ofType:@"xml"];

    // Start the Extensibility engine
    [[MAFCore sharedInstance] loadWithWindow:self.window andCompletionBlock:^(NSError* error)
     {
	    // Rest of code remains untouched, omitted for brevity
		...

The style change (label text color) is applied instantly:

You can also experiment with changing the background color, font family and size, and so on.

This is the XML version after modifying the layout XML to center the label and move it slightly below the toolbar:

<?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>

				<!-- Center the label horizontally -->
                <P pid="halign" value="center"></P>
				<!-- Move it 20 points below the toolbar -->
                <P pid="margin_top" value="20pt"></P>

                <!-- Apply custom styling (defined in CustomStyles.xml) -->
                <P pid="style" value="CustomLabel"></P>

            </UIElement>
        </LinearContainer>
    </Tile>
</MAF>

When you re-run the app, you see this UI:

You can also modify styles directly in the SAPDefaultStyle.xml, but before you do so, back up the original version of the file so you can restore it if necessary.