Tizen .NET Application Development

This is the first part of a series of blogs that introduces you to Tizen Xamarin Application Development.

In these blog posts we will introduce you to various concepts of Xamarin Forms and how to create Xamarin Forms Application for Tizen.

Setup

To start off you can download the latest version of Visual Studio Extension for Tizen from https://developer.tizen.org/development/tizen-.net-preview/getting-started. Make sure all pre requisites are installed as mentioned at https://developer.tizen.org/development/tizen-.net-preview/getting-started/installing-visual-studio-tools-tizen

Once the installation is completed verify that the installation is properly completed by creating your first sample application for Tizen .NET as mentioned at https://developer.tizen.org/development/tizen-.net-preview/getting-started/creating-your-first-tizen-.net-application

You also have a host of sample applications at https://developer.tizen.org/development/tizen-.net-preview/samples which you can freely download and experiment with.

Now that the setup is ready and we have created our first Tizen .NET application lets dive in and make some interesting application using the power of Xamarin and Tizen API’s.

Drumpad Application

In this blog we are going to develop a simple Drumpad application and we will see how to call Tizen specific API’s from Xamarin Portable library using Dependency Service framework of Xamarin.

We will also use XAML to design our UI in this application. We will cover more about XAML and its advantages in the blog posts to come.

Creating the Project

First let’s create a Tizen Xamarin Forms application by clicking File->New->Project and selecting Tizen->Cross-Platform under Visual C# Templates. Let’s name the application as DrumPadDemo.

In this demo we are only creating the Mobile version of the Application. So select mobile profile while creating the project.

Once the project is created you should have structure like below-

We will have a portable library (DrumPadDemo) and a Tizen mobile project (DrumPadDemo.TizenMobile). All the UI for this demo will be developed in DrumPadDemo and platform specific features will be handled in DrumPadDemo.TizenMobile Project.

Creating UI for the Application

We will use XAML to create our UI in this demo. More details about XAML can be found at XAML.

Right Click on the DrumPadDemo project and click on Add -> New Item..

Then select a XAML template for Content Page as shown below.

Let’s name the page as MainPage.xaml. This will contain the UI for the application.

Replace the content under MainPage.xaml with the following content -

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="DrumPadDemo.MainPage">
    <Grid Padding="14" BackgroundColor="White">
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="100" />
        </Grid.RowDefinitions>
        <Grid Padding="14" BackgroundColor="White">
            <Grid.RowDefinitions>
                <RowDefinition Height="*" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>

            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>

            <!-- Drum buttons -->
            <Grid BackgroundColor="White" Grid.Row="0" Grid.ColumnSpan="2" Padding="7">
                <Button Grid.Row="0" Grid.Column="0" x:Name="btnPlayTomTom" BackgroundColor="DeepSkyBlue" Text="TomTom" TextColor="Black"/>
                <Button Grid.Row="0" Grid.Column="1" x:Name="btnPlaySnare" BackgroundColor="DeepSkyBlue" Text="Snare" TextColor="Black"/>
                <Button Grid.Row="1" Grid.Column="0" x:Name="btnPlayBass" BackgroundColor="DeepSkyBlue" Text="Bass" TextColor="Black"/>
                <Button Grid.Row="1" Grid.Column="1" x:Name="btnPlayHiHat" BackgroundColor="DeepSkyBlue" Text="HiHat" TextColor="Black"/>
            </Grid>
        </Grid>
    </Grid>
</ContentPage>

Here we are creating a 2X2 grid with 4 Buttons. All the properties of the Button such as background color, text and text color are set in XAML.

MainPage.xaml will have a corresponding MainPage.xaml.cs file were we will handle the events when these Buttons are clicked.

Set MainPage as the Main Page of the Application in DrumPadDemo.cs by setting MainPage as -

“MainPage = new MainPage ()” in App Constructor.

Now the Application should something like below-

Binding Button Click Event

Now that we have the UI created we need to associate the event to be performed when the buttons are clicked. We should implement the Event handler in MainPage.xaml.cs file.

In MainPage.xaml.cs after the InitializeComponent() function add the Click Event handlers for each button. We have defined an Enum to identify each button uniquely so that they can be handled as required in the OnDrumButton function.

        public MainPage()
        {
            InitializeComponent();
            btnPlayBass.Clicked += (s, e) => OnDrumButton(DrumType.Bass);
            btnPlaySnare.Clicked += (s, e) => OnDrumButton(DrumType.Snare);
            btnPlayTomTom.Clicked += (s, e) => OnDrumButton(DrumType.TomTom);
            btnPlayHiHat.Clicked += (s, e) => OnDrumButton(DrumType.HiHat);
        }

We then implement OnDrumButton and set the audio files to be played corresponding to each button click.

(Make sure you place the resources under res/drum folder in the DrumPadDemo.TizenMobile)

        async void OnDrumButton(DrumType drumType)
        {
            string audioFile = "";
            switch (drumType)
            {
                case DrumType.Bass:
                    audioFile = "drum/bd1.wav";
                    break;
                case DrumType.Snare:
                    audioFile = "drum/sd1.wav";
                    break;
                case DrumType.TomTom:
                    audioFile = "drum/tt1.wav";
                    break;
                case DrumType.HiHat:
                    audioFile = "drum/hh1.wav";
                    break;
            }
            // TODO: Play the Audio
        }

Playing the Audio File

Now that we have handled the Button Click Event and set the audio file to be played the only thing left is to actually play the audio on the Device/Emulator.

But Player is a platform specific feature hence the code corresponding to it cannot be added in DrumPadDemo project. We need to handle playing audio in DrumPadDemo.TizenMobile project. But how to be call DrumPadDemo.TizenMobile from DrumPadDemo to keep it platform independent?

We solve this problem using Dependency Service in Xamarin.

All we need to do is create an interface with the functionality required (e.g. here we need to play an audio given an audio file path as input) and implement this interface in DrumPadDemo.TizenMobile. The Dependency Service module will call the corresponding implementation at runtime.

Let’s create an interface in DrumPadDemo application with the name IAudioPlayer

Let’s add a function Task PlayAudioFile(string fileName); to the interface.

This function takes file name as argument and plays the particular file.

The interface looks as follows-

using System.Threading.Tasks;

namespace DrumPadDemo
{
    public interface IAudioPlayer
    {
        Task PlayAudioFile(string fileName);
    }
}

Now add a Class(TizenAudioPlayer.cs) in DrumPadDemo.TizenMobile that implements this interface.

Add the following code in TizenAudioPlayer.cs -

using DrumPadDemo.TizenMobile;
using System;
using System.Threading.Tasks;
using Tizen.Multimedia;
using Xamarin.Forms;

[assembly: Dependency(typeof(TizenAudioPlayer))]
namespace DrumPadDemo.TizenMobile
{

    class TizenAudioPlayer : IAudioPlayer
    {
        Player audioPlayer = new Player();
        public async Task PlayAudioFile(string fileName)
        {
            Player audioPlayer = new Player();
            audioPlayer.SetSource(new MediaUriSource("/opt/usr/home/owner/apps_rw/DrumPadDemo.TizenMobile/res/" + fileName));
            await audioPlayer.PrepareAsync();
            audioPlayer.Start();

            EventHandler<EventArgs> playbackCompletedEvent = (s, e) =>
            {
                audioPlayer.Unprepare();
            };

            audioPlayer.PlaybackCompleted += playbackCompletedEvent;
        }
    }
}

Here we are implementing the IAudioPlayer interface defined in DrumPadDemo project.

We register the class with Dependency Service module by adding

[assembly: Dependency(typeof(TizenAudioPlayer))]

We then create a new Player class object and set the source of the Player to the absolute path of the file to be played.

Player audioPlayer = new Player();
audioPlayer.SetSource(new MediaUriSource("/opt/usr/home/owner/apps_rw/DrumPadDemo.TizenMobile/res/" + fileName));

next we prepare the player for playing the audio by calling-

await audioPlayer.PrepareAsync();

and finally

audioPlayer.Start();

starts playing the audio.

We can also have a playbackCompletedEvent listener that is called once the audio playback is completed.

EventHandler<EventArgs> playbackCompletedEvent = (s, e) =>
{
   audioPlayer.Unprepare();
   Tizen.Log.Info("AUDIO_PLAYER", "Audio playback completed....");
};
audioPlayer.PlaybackCompleted += playbackCompletedEvent;

The event is called once the audio playback is completed.

Now that we have the implementation ready we need to call it from OnDrumButton(DrumType drumType) described above.

Just replace the //TODO with

await DependencyService.Get<IAudioPlayer>().PlayAudioFile(audioFile);

The framework will detect the correct implementation of IAudioPlayer to be called at runtime and call the TizenAudioPlayer PlayAudioFile function.

Running the Application

Click on CTRL+F5 to launch the application onto the device/emulator.

Now when we click the Drumpad Buttons the corresponding audio will be played.

For more details please refer to the attached source.