Tuesday, January 18, 2011

Tutorial: Integrating AdDuplex Silverlight control into your app

Integrating AdDuplex Silverlight control into your Windows Phone 7 application is really simple. This tutorial will go through the steps of integrating AdDuplex ad control into a fictional application.

Our Initial App

Here’s what our initial application looks like:

image

It’s a simple application with all the traditional WP7 app attributes at the top and scrollable content area filling the rest of the screen. Essentially it’s a 2 row Grid with header part placed in the first row (0) and content in the second (1).

 

Here’s the XAML for our initial page:

<phone:PhoneApplicationPage
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="800"
x:Class="WindowsPhoneApplication11.MainPage"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
shell:SystemTray.IsVisible="True">

<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition/>
</Grid.RowDefinitions>

<!--TitlePanel contains the name of the application and page title-->
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock x:Name="ApplicationTitle" Text="ADDUPLEX TUTORIAL" Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock x:Name="PageTitle" Text="lorem ipsum page" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>

<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0">
<Grid.Background>
<RadialGradientBrush GradientOrigin="0.371,0.363" RadiusY="0.712" RadiusX="0.712">
<GradientStop Color="Black" Offset="1"/>
<GradientStop Color="#FFA7A7A7"/>
</RadialGradientBrush>
</Grid.Background>
<ScrollViewer HorizontalAlignment="Left" VerticalAlignment="Top" Padding="10" Margin="10" BorderBrush="#FF6C6C6C" BorderThickness="1">
<TextBlock TextWrapping="Wrap" Height="2634" Width="455"><Run Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed gravida eros sit amet enim egestas rhoncus. Praesent id orci ut dolor malesuada mollis. Cras nisi elit, dictum a ultrices in, hendrerit vitae felis. Nam in dui id neque venenatis volutpat et vitae lorem. Aenean blandit augue eget lorem ornare id blandit justo auctor. Curabitur quis cursus lacus. Cras nec tellus nisi. Quisque et est nulla, sit amet malesuada dolor. Vivamus tempus fringilla metus, vitae porttitor est mattis sit amet. Mauris vestibulum mauris at lectus dapibus tincidunt. Aliquam pellentesque eleifend purus, et lacinia nisi vulputate vel. Maecenas quis luctus erat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas eu enim velit, in rutrum nisi. Ut in tortor ante. Nulla et facilisis urna. Fusce in orci urna, a scelerisque orci. Donec tristique diam hendrerit dolor accumsan semper."/><LineBreak/><Run/><LineBreak/><Run Text="Vestibulum mauris nibh, dignissim sit amet lacinia eget, imperdiet nec turpis. Sed volutpat viverra lacinia. Sed vel purus lacus, nec faucibus turpis. In hac habitasse platea dictumst. Vestibulum ligula urna, convallis at condimentum in, feugiat vitae lorem. Maecenas sit amet purus turpis, ac imperdiet neque. Etiam dolor justo, imperdiet a scelerisque et, congue vitae felis. Donec faucibus interdum arcu consequat vulputate. Mauris pharetra, turpis in dictum consectetur, risus ligula fermentum ipsum, convallis luctus sapien quam a risus. Nullam at facilisis tellus. Sed elit velit, volutpat vitae placerat quis, sagittis vel dolor. Suspendisse in sem imperdiet eros pulvinar pellentesque sit amet dignissim felis. Ut iaculis mollis orci, ut ultrices nibh lacinia sit amet. Morbi tincidunt mollis diam nec dictum. Morbi purus libero, molestie a bibendum at, ornare vel tortor. Vivamus suscipit eros eget arcu venenatis sagittis. Donec id rhoncus tellus. Suspendisse rhoncus mi sodales felis consectetur ut tincidunt nisi sodales."/><LineBreak/><Run/><LineBreak/><Run Text="Nullam ultrices lobortis sapien ut lacinia. Morbi eget justo ac magna accumsan interdum ac in sem. Nam at purus a ante tincidunt feugiat. Nunc sollicitudin egestas justo. Donec sollicitudin tempus justo, id iaculis est laoreet quis. Curabitur euismod sagittis ullamcorper. Mauris volutpat, mauris in interdum mattis, ante purus interdum mauris, non semper ipsum ligula quis risus. Mauris felis diam, rhoncus eget condimentum nec, pellentesque non lacus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quis est at odio aliquam vulputate viverra ut tellus. Pellentesque eget neque lobortis metus sollicitudin venenatis. Nam tempor justo in lectus dictum vulputate. Praesent vel leo leo. Proin vitae arcu ligula. Etiam eget mi nec est faucibus malesuada. Ut non diam ante. Nam lectus ipsum, adipiscing in tempus vitae, semper vitae risus. Aliquam dictum malesuada lorem. Duis consequat ornare mattis. Vivamus ac libero eget libero faucibus pretium sed quis nunc."/><LineBreak/><Run/><LineBreak/><Run Text="Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed convallis luctus pharetra. Morbi tincidunt diam id nisi vehicula posuere. Proin sodales aliquam augue, sed imperdiet dolor pharetra nec. Sed eget libero facilisis dolor suscipit pretium. Proin rhoncus odio semper nulla placerat a semper nunc mollis. Vestibulum vehicula, nisi et egestas suscipit, nisl est commodo sapien, vitae tempor nisl augue tincidunt risus. Nulla accumsan mauris sit amet tortor viverra rutrum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec urna arcu, tincidunt eget luctus sit amet, eleifend a nulla. Vestibulum et metus eget arcu sollicitudin vehicula eget vehicula metus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi viverra viverra cursus."/><LineBreak/><Run/><LineBreak/><Run Text="Sed at mi sed turpis viverra bibendum. Nunc quis diam eget tortor hendrerit convallis quis in velit. Vestibulum ac lectus ligula, eget sodales risus. Etiam placerat lectus vitae ipsum commodo a ullamcorper urna malesuada. Etiam laoreet ultricies mattis. Fusce consectetur mollis eros id convallis. Vivamus sagittis purus eget libero ornare convallis. In non elit vel lacus hendrerit auctor non at tellus. In hac habitasse platea dictumst. Etiam porta, sem quis lacinia consectetur, odio dolor hendrerit nisi, sollicitudin sagittis quam mi in tellus. Donec consectetur ante sit amet elit laoreet semper. Mauris eget ligula id sapien pharetra euismod et id risus. Mauris auctor semper massa nec tempus. Curabitur gravida sodales elementum. Sed sed dolor eget turpis imperdiet viverra. Integer a elit nisl."/></TextBlock>
</ScrollViewer>
</Grid>
</Grid>
</phone:PhoneApplicationPage>

What we want to do is place AdDuplex ad control at the bottom of this page.

Add a Reference to AdDuplex Assembly

We will be using Expression Blend in this tutorial and accomplish everything without switching to XAML view. That said you can obviously do all of this in Visual Studio and XAML.

First you’ll need to download AdDuplex Ad Control for Silverlight distribution archive and extract it to a folder of your choice. The contents of the folder should look something like this:

image

Now we go to the Project menu in Blend and select “Add Reference…”

image

In the “Add Reference” dialog just navigate to the directory where you’ve extracted AdDuplex distribution archive and select AdDuplex.AdControl.Silverlight.dll

The reference to the AdDuplex assembly is added to your project.

image

Preparing a Place for the Control

We need to adjust our page layout so we can place the AdDuplex control without affecting usability of our app.

To do that we are going to add an additional row to our layout Grid and set it’s Height to Auto.

image

As you can see Blend still stretches our content area over both rows. It did this by setting RowSpan of the content panel to 2:

image

We Reset it back to 1 and we have our content panel adjusted to our new layout:

image

And the place for our ad control is prepared.

Placing Control on the Page

Now we just need to place the ad control into that place.

In Expression Blend toolbar click the Assets button:

image

In the assets window start typing “adcontrol” and the list will be filtered to AdDuplex AdControl:

image

Select the control and then double-click in the toolbar:

image

The control is inserted into the page:

image

Now we just need to move it into position:

image

Note: make sure you place the control into a container that has no margin or padding on the sides. The control is designed to occupy the whole width of the page (480 pixels).

Now we just need to configure the control to serve ads for our app and we are good to go.

Configuring AdDuplex AdControl

When you register your application in AdDuplex system it gets an internal identifier called AppId. You can see the AppId for your app in the AdDuplex client area. We just need to set that AppId value to AppId property of the AdControl.

Select AdDuplex AdControl in Blend. In the Properties pane (usually on the right) type “AppId” into a search box:

image

Enter your app’s AppId into the field and you are set. Now when we run our app it works as before and AdDuplex AdControl is nicely incorporated.

image

Here’s the resulting XAML for our final app:

<phone:PhoneApplicationPage
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:AdDuplex="clr-namespace:AdDuplex;assembly=AdDuplex.AdControl.Silverlight"
mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="800"
x:Class="WindowsPhoneApplication11.MainPage"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
shell:SystemTray.IsVisible="True">

<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition/>
<RowDefinition Height="Auto" MinHeight="81"/>
</Grid.RowDefinitions>

<!--TitlePanel contains the name of the application and page title-->
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock x:Name="ApplicationTitle" Text="ADDUPLEX TUTORIAL" Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock x:Name="PageTitle" Text="lorem ipsum page" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>

<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0">
<Grid.Background>
<RadialGradientBrush GradientOrigin="0.371,0.363" RadiusY="0.712" RadiusX="0.712">
<GradientStop Color="Black" Offset="1"/>
<GradientStop Color="#FFA7A7A7"/>
</RadialGradientBrush>
</Grid.Background>
<ScrollViewer HorizontalAlignment="Left" VerticalAlignment="Top" Padding="10" Margin="10" BorderBrush="#FF6C6C6C" BorderThickness="1">
<TextBlock TextWrapping="Wrap" Height="2634" Width="455"><Run Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed gravida eros sit amet enim egestas rhoncus. Praesent id orci ut dolor malesuada mollis. Cras nisi elit, dictum a ultrices in, hendrerit vitae felis. Nam in dui id neque venenatis volutpat et vitae lorem. Aenean blandit augue eget lorem ornare id blandit justo auctor. Curabitur quis cursus lacus. Cras nec tellus nisi. Quisque et est nulla, sit amet malesuada dolor. Vivamus tempus fringilla metus, vitae porttitor est mattis sit amet. Mauris vestibulum mauris at lectus dapibus tincidunt. Aliquam pellentesque eleifend purus, et lacinia nisi vulputate vel. Maecenas quis luctus erat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas eu enim velit, in rutrum nisi. Ut in tortor ante. Nulla et facilisis urna. Fusce in orci urna, a scelerisque orci. Donec tristique diam hendrerit dolor accumsan semper."/><LineBreak/><Run/><LineBreak/><Run Text="Vestibulum mauris nibh, dignissim sit amet lacinia eget, imperdiet nec turpis. Sed volutpat viverra lacinia. Sed vel purus lacus, nec faucibus turpis. In hac habitasse platea dictumst. Vestibulum ligula urna, convallis at condimentum in, feugiat vitae lorem. Maecenas sit amet purus turpis, ac imperdiet neque. Etiam dolor justo, imperdiet a scelerisque et, congue vitae felis. Donec faucibus interdum arcu consequat vulputate. Mauris pharetra, turpis in dictum consectetur, risus ligula fermentum ipsum, convallis luctus sapien quam a risus. Nullam at facilisis tellus. Sed elit velit, volutpat vitae placerat quis, sagittis vel dolor. Suspendisse in sem imperdiet eros pulvinar pellentesque sit amet dignissim felis. Ut iaculis mollis orci, ut ultrices nibh lacinia sit amet. Morbi tincidunt mollis diam nec dictum. Morbi purus libero, molestie a bibendum at, ornare vel tortor. Vivamus suscipit eros eget arcu venenatis sagittis. Donec id rhoncus tellus. Suspendisse rhoncus mi sodales felis consectetur ut tincidunt nisi sodales."/><LineBreak/><Run/><LineBreak/><Run Text="Nullam ultrices lobortis sapien ut lacinia. Morbi eget justo ac magna accumsan interdum ac in sem. Nam at purus a ante tincidunt feugiat. Nunc sollicitudin egestas justo. Donec sollicitudin tempus justo, id iaculis est laoreet quis. Curabitur euismod sagittis ullamcorper. Mauris volutpat, mauris in interdum mattis, ante purus interdum mauris, non semper ipsum ligula quis risus. Mauris felis diam, rhoncus eget condimentum nec, pellentesque non lacus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quis est at odio aliquam vulputate viverra ut tellus. Pellentesque eget neque lobortis metus sollicitudin venenatis. Nam tempor justo in lectus dictum vulputate. Praesent vel leo leo. Proin vitae arcu ligula. Etiam eget mi nec est faucibus malesuada. Ut non diam ante. Nam lectus ipsum, adipiscing in tempus vitae, semper vitae risus. Aliquam dictum malesuada lorem. Duis consequat ornare mattis. Vivamus ac libero eget libero faucibus pretium sed quis nunc."/><LineBreak/><Run/><LineBreak/><Run Text="Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed convallis luctus pharetra. Morbi tincidunt diam id nisi vehicula posuere. Proin sodales aliquam augue, sed imperdiet dolor pharetra nec. Sed eget libero facilisis dolor suscipit pretium. Proin rhoncus odio semper nulla placerat a semper nunc mollis. Vestibulum vehicula, nisi et egestas suscipit, nisl est commodo sapien, vitae tempor nisl augue tincidunt risus. Nulla accumsan mauris sit amet tortor viverra rutrum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec urna arcu, tincidunt eget luctus sit amet, eleifend a nulla. Vestibulum et metus eget arcu sollicitudin vehicula eget vehicula metus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi viverra viverra cursus."/><LineBreak/><Run/><LineBreak/><Run Text="Sed at mi sed turpis viverra bibendum. Nunc quis diam eget tortor hendrerit convallis quis in velit. Vestibulum ac lectus ligula, eget sodales risus. Etiam placerat lectus vitae ipsum commodo a ullamcorper urna malesuada. Etiam laoreet ultricies mattis. Fusce consectetur mollis eros id convallis. Vivamus sagittis purus eget libero ornare convallis. In non elit vel lacus hendrerit auctor non at tellus. In hac habitasse platea dictumst. Etiam porta, sem quis lacinia consectetur, odio dolor hendrerit nisi, sollicitudin sagittis quam mi in tellus. Donec consectetur ante sit amet elit laoreet semper. Mauris eget ligula id sapien pharetra euismod et id risus. Mauris auctor semper massa nec tempus. Curabitur gravida sodales elementum. Sed sed dolor eget turpis imperdiet viverra. Integer a elit nisl."/></TextBlock>
</ScrollViewer>
</Grid>
<AdDuplex:AdControl Margin="0,1,0,0" Grid.Row="2" AppId="123"/>
</Grid>
</phone:PhoneApplicationPage>

 

P.S.: Testing Your Own Ad

You can test how your own AdDuplex Ad Exchange ad looks in an app by setting IsTest property of the control to true:

image

2 comments:

  1. Does it allow automatic sliding and sliding out of the ad on top of the real content based on time?

    ReplyDelete
  2. Currently there's no such feature. Not sure it's a good UX and could be more annoying to the user than fixed ads. From the advertiser perspective that might be better than static so since AdDuplex host apps are advertisers at the same time it could be not a bad idea to implement such an option.

    ReplyDelete