fluent-adflow-widget 1.0.0-beta.1

FluentAdFlowWidget Integration Guide

This guide will help you integrate the fluent-adflow-widget NuGet package into your .NET MAUI application. The fluent-adflow-widget allows you to easily display ads within your app.

Prerequisites

Ensure you have the following prerequisites:

• .NET 8.0 or higher
• .NET MAUI
• Access to the Fluent AdFlow Widget API (API key and referer)

Installation

Install the fluent-adflow-widget NuGet package in your .NET MAUI project:

dotnet add package fluent-adflow-widget

Integration Steps

1. Update MauiProgram.cs

In your MauiProgram.cs file, add the following code to configure the FluentAdFlowWidgetControl handler:

using Microsoft.Extensions.Logging;
using Fluent.Maui.AdFlow;

namespace YourNamespace;

public static class MauiProgram
{
    public static MauiApp CreateMauiApp()
    {
        var builder = MauiApp.CreateBuilder();
        builder
            .UseMauiApp<App>()
            .ConfigureFonts(fonts =>
            {
                fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
                fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
            })
            .ConfigureMauiHandlers(handlers =>
            {
                handlers.AddHandler(typeof(FluentAdFlowWidgetControl), typeof(FluentAdFlowWidgetHandler));
            });

#if DEBUG
        builder.Logging.AddDebug();
#endif

        return builder.Build();
    }
}

2. Update MainPage.xaml

In your MainPage.xaml, integrate the FluentAdFlowWidgetControl as follows:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:fluentAdFlowWidget="clr-namespace:Fluent.Maui.AdFlow;assembly=fluent-adflow-widget"
             x:Class="YourNamespace.MainPage">

    <AbsoluteLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
        <ScrollView AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0, 0, 1, 1">
            <Grid Padding="30,0" RowSpacing="20">
                <Image Grid.Row="0" Source="dotnet_bot.png" HeightRequest="185" Aspect="AspectFit" />
                <Label Grid.Row="1" Text="Hello, World!" Style="{StaticResource Headline}" />
                <Label Grid.Row="2" Text="Welcome to .NET MAUI" Style="{StaticResource SubHeadline}" />
                <fluentAdFlowWidget:FluentAdFlowWidgetControl Grid.Row="3" x:Name="AdFlowWidget" />
                <Button Grid.Row="4" x:Name="CounterBtn" Text="Click me" Clicked="OnCounterClicked" HorizontalOptions="Fill" />
                <fluentAdFlowWidget:FluentAdFlowWidgetControl Grid.Row="5" x:Name="AdFlowWidget1" />
                <Label Grid.Row="6" Text="Bye, World!" Style="{StaticResource Headline}" />
                <Button Grid.Row="7" x:Name="PopupBtn" Text="Show Popup" Clicked="OnPopupClicked" HorizontalOptions="Fill" />
            </Grid>
        </ScrollView>

        
        <BoxView x:Name="PopupOverlay" IsVisible="False" BackgroundColor="#000000" Opacity="0.5" AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0, 0, 1, 1" />

        
        <Frame x:Name="PopupContainer" IsVisible="False" CornerRadius="10" Padding="10" HasShadow="True" BackgroundColor="White" AbsoluteLayout.LayoutFlags="PositionProportional" AbsoluteLayout.LayoutBounds="0.5, 0.5, 0.9, AutoSize">
            <Grid Padding="0">
                <fluentAdFlowWidget:FluentAdFlowWidgetControl x:Name="PopupAdFlowWidget" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" />
            </Grid>
        </Frame>
    </AbsoluteLayout>
</ContentPage>

3. Update MainPage.xaml.cs

In your MainPage.xaml.cs, add the following code to initialize the widget and handle events:

using Fluent.Maui.AdFlow;

namespace YourNamespace;

public partial class MainPage : ContentPage
{
    int count = 0;
    private FluentAdFlowWidgetHandler _widgetHandler;

    public MainPage()
    {
        InitializeComponent();
        _widgetHandler = new FluentAdFlowWidgetHandler();
        InitializeSdk("YOUR_API_KEY", "YOUR_REFERER");
        AdFlowWidget.OnAdShow = OnAdShowMethod;
        AdFlowWidget1.OnAdShow = OnAdShowMethod1;
        PopupAdFlowWidget.OnAdShow = OnAdShowMethod2;

        // Adjust width based on screen size
        var screenWidth = DeviceDisplay.MainDisplayInfo.Width / DeviceDisplay.MainDisplayInfo.Density;
        PopupContainer.WidthRequest = screenWidth - 40; // Subtract 40 pixels from screen width

#if __IOS__
        // Set up event handler for SizeChanged
        PopupAdFlowWidget.SizeChanged += OnPopupAdFlowWidgetSizeChanged;
#endif
    }

    private void InitializeSdk(string apiKey, string referer)
    {
        try
        {
            // Initialize the SDK through the handler
            _widgetHandler.InitializeSdk(apiKey, referer);
        }
        catch (Exception ex)
        {
            // Handle or log the exception
            Console.WriteLine($"Failed to initialize SDK: {ex.Message}");
        }
    }

    private void OnAdShowMethod(bool isShown)
    {
        if (isShown)
        {
            Console.WriteLine("#########################################");
            Console.WriteLine("############## Ad is shown ##############");
            Console.WriteLine("#########################################");
        }
        else
        {
            Console.WriteLine("#########################################");
            Console.WriteLine("############## Ad is hidden #############");
            Console.WriteLine("#########################################");
        }
    }

    private void OnAdShowMethod1(bool isShown)
    {
        if (isShown)
        {
            Console.WriteLine("#########################################");
            Console.WriteLine("############## Ad1 is shown #############");
            Console.WriteLine("#########################################");
        }
        else
        {
            Console.WriteLine("#########################################");
            Console.WriteLine("############## Ad1 is hidden ############");
            Console.WriteLine("#########################################");
        }
    }

    private void OnAdShowMethod2(bool isShown)
    {
        if (isShown)
        {
            PopupOverlay.IsVisible = true;
            PopupContainer.IsVisible = true;
            Console.WriteLine("#########################################");
            Console.WriteLine("############## Ad2 is shown #############");
            Console.WriteLine("#########################################");
        }
        else
        {
            PopupOverlay.IsVisible = false;
            PopupContainer.IsVisible = false;
            Console.WriteLine("#########################################");
            Console.WriteLine("############## Ad2 is hidden ############");
            Console.WriteLine("#########################################");
        }
    }

    private void OnCounterClicked(object sender, EventArgs e)
    {
        count++;

        if (count == 1)
            CounterBtn.Text = $"Clicked {count} time";
        else
            CounterBtn.Text = $"Clicked {count} times";

        SemanticScreenReader.Announce(CounterBtn.Text);

        // Set Params from code behind

        AdFlowWidget.Params = new Dictionary<string, object>
        {
            { "email", "test@example.com" },
            { "firstname", "John" },
            { "lastname", "Doe" }
        };

        AdFlowWidget1.Params = new Dictionary<string, object>
        {
            { "email", "test@example.com" },
            { "firstname", "John" },
            { "lastname", "Doe" }
        };
    }

    private void OnPopupClicked(object sender, EventArgs e)
    {
        PopupAdFlowWidget.Params = new Dictionary<string, object>
        {
            { "email", "test@example.com" },
            { "firstname", "John" },
            { "lastname", "Doe" }
        };
    }

#if __IOS__
    private bool _isUpdatingHeight = false;
    private double _previousHeight = -1; // To store the previous height

    private async void OnPopupAdFlowWidgetSizeChanged(object sender, EventArgs e)
    {
        Console.WriteLine("--------- OnPopupAdFlowWidgetSizeChanged called.");

        if (_isUpdatingHeight)
        {
            Console.WriteLine("Height update is already in progress. Exiting.");
            return;
        }

        _isUpdatingHeight = true;
        Console.WriteLine("Height update started.");

        // Delay to allow multiple size changes to settle
        // await Task.Delay(100);

        double height = PopupAdFlowWidget.HeightRequest;
        Console.WriteLine($"PopupAdFlowWidget Height: {height}");

        // Check if the new height is different from the previous height
        if (_previousHeight != height)
        {
            PopupContainer.HeightRequest = height + 20; // Add some padding/margin if necessary
            _previousHeight = height; // Update the previous height
        }

        _isUpdatingHeight = false;
        Console.WriteLine("Height update completed.");
    }
#endif
}

Additional Notes

• Ensure you replace the apiKey and referer in the InitializeSdk method with your actual values.
• For iOS, the OnPopupAdFlowWidgetSizeChanged event handler dynamically adjusts the popup's height based on the widget's size changes.