Tools - "Built Ins"

Ad Service

How to implement BlackBerry Ad Service (banner advertisments) into your app:

Step 1:

Create a new project called "CascadesAdSDKTest"

Step 2:

Add the following line to the .pro file (add somewhere under the "TARGET =" line, which is usually line 2)

LIBS += -lbbcascadesadvertisement

Step 3:

Open the bar-descriptor.xml file and on the "Application" tab check the "Device Identifying Information" permission and if you want location specific ads the "GPS Location" permission.

BlackBerry 10 Cascades Ad Services

Step 4:

Here we are going to make a UI (3 tabs, showing the 3 different ad sizes):

import bb.cascades 1.0
import bb.cascades.advertisement 1.0

TabbedPane {
    showTabsOnActionBar: true
    Tab {
        title: qsTr("320x50")
        Page {
            id: tab1
            Container {
                Label {
                    text: qsTr("320x50 banner")
                    horizontalAlignment: HorizontalAlignment.Center
                    textStyle {
                        base: SystemDefaults.TextStyles.TitleText
                    }
                }
                Banner {
                    zoneId: 117145
                    refreshRate: 60
                    preferredWidth: 320
                    preferredHeight: 50
                    transitionsEnabled: true
                    placeHolderURL: "asset:///placeholder_728x90.png"
                    backgroundColor: Color.Green
                    borderColor: Color.Gray
                    borderWidth: 2
                    horizontalAlignment: HorizontalAlignment.Center
                }
            }
        }
    }
   
    Tab {
        title: qsTr("300x50")
        Page {
            id: tab2
            Container {
                Label {
                    text: qsTr("300x50 banner")
                    horizontalAlignment: HorizontalAlignment.Center
                    textStyle {
                        base: SystemDefaults.TextStyles.TitleText
                    }
                }
                    Banner {
                        zoneId: 117145
                        refreshRate: 60
                        preferredWidth: 300
                        preferredHeight: 50
                        transitionsEnabled: true
                        placeHolderURL: "asset:///placeholder_728x90.png"
                        backgroundColor: Color.Green
                        borderColor: Color.Blue
                        borderWidth: 2
                        horizontalAlignment: HorizontalAlignment.Center
                    }
                }
            }
        }
   
    Tab {
        title: qsTr("320x48")
        Page {
            id: tab3
            Container {
                Label {
                    text: qsTr("320x48 banner")
                    horizontalAlignment: HorizontalAlignment.Center
                    textStyle {
                        base: SystemDefaults.TextStyles.TitleText
                    }
                }
                Container {
                    layout: DockLayout {
                    }
                    layoutProperties: StackLayoutProperties {
                        spaceQuota: 1.0
                    }
                    Container {
                        layout: DockLayout {
                        }
                        layoutProperties: StackLayoutProperties {
                            spaceQuota: 1.0
                        }
                        verticalAlignment: VerticalAlignment.Fill
                        horizontalAlignment: HorizontalAlignment.Fill
                        Banner {
                            zoneId: 117145
                            refreshRate: 60
                            preferredWidth: 320
                            preferredHeight: 48
                            transitionsEnabled: true
                            placeHolderURL: "asset:///placeholder_728x90.png"
                            backgroundColor: Color.Green
                            borderColor: Color.Gray
                            borderWidth: 2
                            horizontalAlignment: HorizontalAlignment.Center
                        }
                    }
                }
            }
        }
    }
}

One thing to note, is make sure you include "import bb.cascades.advertisement 1.0" in your import items at the top of the code.  Refer back to RIM's docs to see what each parameter means in the Banner class.

Step 5:

In the main.cpp file add the following line to the top of the file:

#include <bb/cascades/advertisement/Banner>

Step 6:

Also one more thing needs to be added to the main.cpp file before the Banner object can be used in QML, which is register the Banner object. To do this you will need to add the following line to the main.cpp file's constructor:

qmlRegisterType<bb::cascades::advertisement::Banner>("bb.cascades.advertisement", 1, 0, "Banner");

Realize you are using RIM's zoneID as a test. So if you haven't already (and you intend to have ads in your app) create an Ad Services account at https://adservices.blackberry.com/ and from there you can setup your apps to have their own zoneID's.

And because sometimes it is just easier to see the final working product (rather than reading what I have above), this example app has been added to my github: https://github.com/bcs925/BrianScheirerOpenSource/tree/master/CascadesAdSDKTest

-Brian