×
Namespaces

Variants
Actions
(Difference between revisions)

In-app advertising how to use Inneractive API in QML application

From Nokia Developer Wiki
Jump to: navigation, search
izinin (Talk | contribs)
(Izinin - - Summary)
hamishwillee (Talk | contribs)
m (Text replace - "<code cpp>" to "<code cpp-qt>")
(7 intermediate revisions by 2 users not shown)
Line 1: Line 1:
[[Category:Draft]][[Category:Qt Quick]]
+
[[Category:Qt Quick]][[Category:In-App Advertising]][[Category:Code Examples]]
{{Abstract|This article explains how to In-app advertising Inneractive API in QML applications}}  
+
{{Abstract|This code example shows how you can use the standard {{Icode|QWidget}}-based In-app advertising API widget from within a QML app. The approach given can also be used for displaying other {{Icode|QWidget}} based controls from within QML.}}  
  
 
{{ArticleMetaData <!-- v1.1 -->
 
{{ArticleMetaData <!-- v1.1 -->
Line 23: Line 23:
 
|update-timestamp= <!-- After significant update: YYYYMMDD -->
 
|update-timestamp= <!-- After significant update: YYYYMMDD -->
 
|creationdate= 20120119
 
|creationdate= 20120119
|author= [[User:username]]
+
|author= [[User:izinin]]
 
}}
 
}}
  
 
== Introduction ==
 
== Introduction ==
  
Inneractive In-application Advertizing API is Nokia's component of [https://www.developer.nokia.com/Distribute/Monetizing_your_app/ Monetization Suite] that allows developers to implement ad banners within application and provides infrastructure to handle user's input and turn it to some profit to the application developer. The API exists for Qt platform but does not support QML directly. The problem is as the following :  
+
The Inneractive In-application Advertizing API is the part of Nokia's [http://www.developer.nokia.com/Distribute/Monetizing_your_app/ Monetization Suite]. It allows developers to easily display advertising banners within an application, handling everything from user interaction with the banner through to developer payment.  
* the API implements clickable control box that is actually ad banner in form of QWidget class derivative
+
 
* how QWidget can be used within QML document with minimal implementation efforts?
+
[[File:Fifteenpuzzle_mainscr.JPG|thumb|250px|none|In-application ad servicing solution demo project screen shot]]
 +
 
 +
The API exists provides a click-able ad-banner control box that is derived from {{Icode|QWidget}}. This class can be used within Qt C++ applications directly, but is not immediately compatible with QML applications. This article shows how you can re-use this API within your QML application with minimal implementation efforts.
  
 
== Design approach  ==
 
== Design approach  ==
  
# create view container box derived from QDeclarativeItem that is available on QML side.  
+
The design approach is to create a view container box derived from {{Icode|QDeclarativeItem}} that is available from within QML. The container provides an area where the {{Icode|InnerActiveAdWidget}} can draw itself and also handles re-sizing events from QML document.
# from one hand this view box container will provide view hierachy to Inneractive ad widget dialog (InnerActiveAdWidget) to insert in
+
# from the other hand this view box container will handle re-sizing events from QML document
+
  
 
== The implementation in three steps==
 
== The implementation in three steps==
  
1. Create view box container class that will act in QML document as Rectangle element. Please see in AdBannerWidget class declaration below what is important to make it interacting with QML side. The implementation details please see in [http://projects.developer.nokia.com/fifteenpuzzle the project source code]
+
# Create a view box container class to define the rectangular area in QML in which the banner is displayed (this is the minimal implementation of a visual QML element). The {{Icode|AdBannerWidget}} class declaration below shows the important code for making the element interact with QML. Implementation details can be seen in [http://projects.developer.nokia.com/fifteenpuzzle the project source code]
 
+
#:<code cpp-qt>
 
     class AdBannerWidget : public QDeclarativeItem
 
     class AdBannerWidget : public QDeclarativeItem
 
     {  
 
     {  
                                              ..................
+
...
 
     private:
 
     private:
 
         //these methods below are to handle events from QML side about the box geometry and painting
 
         //these methods below are to handle events from QML side about the box geometry and painting
 
         void paint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *widget);
 
         void paint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *widget);
 
         void geometryChanged(const QRectF & newGeometry, const QRectF & oldGeometry);
 
         void geometryChanged(const QRectF & newGeometry, const QRectF & oldGeometry);
                                              ..................
+
...
 
     private:
 
     private:
 
         // data
 
         // data
Line 55: Line 55:
 
         InnerActiveAdWidget* ipAdWidget; // reference to ad widget
 
         InnerActiveAdWidget* ipAdWidget; // reference to ad widget
 
     };
 
     };
 
+
</code>
2. Register AdBannerWidget type for QML before document loading --- the most convenient place i think is in Qt application setup -- function main()
+
# Register {{Icode|AdBannerWidget}} type for QML before document loading --- the most convenient place i think is in Qt application setup -- function {{Icode|main()}}
 
+
#: <code cpp-qt>qmlRegisterType<AdBannerWidget>("com.izinin.inneractive.ad", 1, 0, "AdBanner");</code>
    qmlRegisterType<AdBannerWidget>("com.izinin.inneractive.ad", 1, 0, "AdBanner");
+
# Use the view box in QML document is shown below
 
+
#:<code cpp-qt>
3. Use the view box in QML document is shown below
+
 
+
 
     AdBanner{
 
     AdBanner{
 
         id: adbanner
 
         id: adbanner
Line 67: Line 65:
 
         width: Math.min(screen.width, screen.height)
 
         width: Math.min(screen.width, screen.height)
 
     }
 
     }
                  ...................
+
...
 
     states: [
 
     states: [
 
         State {
 
         State {
 
             name: "landscape"; when: screen.width > screen.height
 
             name: "landscape"; when: screen.width > screen.height
                ...................
+
...
 
             PropertyChanges {
 
             PropertyChanges {
 
                 target: adbanner
 
                 target: adbanner
Line 78: Line 76:
 
             }
 
             }
 
         },
 
         },
                ...................
+
...
 
+
</code>[[Category:MeeGo Harmattan]] [[Category:Symbian]]
== Summary ==
+
 
+
... and here is the result !
+
<gallery>
+
File:Fifteenpuzzle_mainscr.JPG|In-application ad servicing solution demo project screen shot
+
</gallery>
+

Revision as of 04:20, 11 October 2012

This code example shows how you can use the standard QWidget-based In-app advertising API widget from within a QML app. The approach given can also be used for displaying other QWidget based controls from within QML.

Article Metadata
Code Example
Source file: fifteen puzzle game
Tested with
Devices(s): N8
Compatibility
Platform(s): Symbian^3, Anna, Belle
Symbian
Platform Security
Signing Required: DevCert
Capabilities: NetworkServices LocalServices ReadUserData WriteUserData UserEnvironment ReadDeviceData
Article
Keywords: In-application Analytic Ad Inneractive API
Created: izinin (19 Jan 2012)
Last edited: hamishwillee (11 Oct 2012)

Introduction

The Inneractive In-application Advertizing API is the part of Nokia's Monetization Suite. It allows developers to easily display advertising banners within an application, handling everything from user interaction with the banner through to developer payment.

In-application ad servicing solution demo project screen shot

The API exists provides a click-able ad-banner control box that is derived from QWidget. This class can be used within Qt C++ applications directly, but is not immediately compatible with QML applications. This article shows how you can re-use this API within your QML application with minimal implementation efforts.

Design approach

The design approach is to create a view container box derived from QDeclarativeItem that is available from within QML. The container provides an area where the InnerActiveAdWidget can draw itself and also handles re-sizing events from QML document.

The implementation in three steps

  1. Create a view box container class to define the rectangular area in QML in which the banner is displayed (this is the minimal implementation of a visual QML element). The AdBannerWidget class declaration below shows the important code for making the element interact with QML. Implementation details can be seen in the project source code
        class AdBannerWidget : public QDeclarativeItem
    {
    ...
    private:
    //these methods below are to handle events from QML side about the box geometry and painting
    void paint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *widget);
    void geometryChanged(const QRectF & newGeometry, const QRectF & oldGeometry);
    ...
    private:
    // data
    InnerActiveAdModule* ipAdModule; // reference to ad engine
    InnerActiveAdWidget* ipAdWidget; // reference to ad widget
    };
  2. Register AdBannerWidget type for QML before document loading --- the most convenient place i think is in Qt application setup -- function main()
    qmlRegisterType<AdBannerWidget>("com.izinin.inneractive.ad", 1, 0, "AdBanner");
  3. Use the view box in QML document is shown below
        AdBanner{
    id: adbanner
    height: 70
    width: Math.min(screen.width, screen.height)
    }
    ...
    states: [
    State {
    name: "landscape"; when: screen.width > screen.height
    ...
    PropertyChanges {
    target: adbanner
    x:optionbar.x
    y:optionbar.y + optionbar.height + screen.margin
    }
    },
    ...
141 page views in the last 30 days.
×