×
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 - - The implementation in three steps)
izinin (Talk | contribs)
(Izinin - - Introduction)
Line 29: Line 29:
  
 
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 :  
 
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 API implements clickable control box that is actually ad banner in form of QWidget class derivative  
+
* 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?
+
* how QWidget can be used within QML document with minimal implementation efforts?
  
 
== Design approach  ==
 
== Design approach  ==

Revision as of 13:17, 19 January 2012

This article explains how to In-app advertising Inneractive API in QML applications

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: User:username (19 Jan 2012)
Last edited: izinin (19 Jan 2012)

Contents

Introduction

Inneractive In-application Advertizing API is Nokia's component of 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 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?

Design approach

  1. create view container box derived from QDeclarativeItem that is available on QML side.
  2. from one hand this view box container will provide view hierachy to Inneractive ad widget dialog (InnerActiveAdWidget) to insert in
  3. from the other hand this view box container will handle re-sizing events from QML document

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 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
           }
       },
                ...................

Summary

... and here is the result !

Image(wiki:WikiFormatting:picture.gif)

125 page views in the last 30 days.
×