FizzBuzz in Xamarin

I'm attending a hackathon upcoming Tuesday, and for that occasion, we were asked to install Xamarin. Xamarin is a platform that lets you build apps for iOS, Android, Windows, and Mac using a single, shared C# codebase. I decided to check it out and implement a solution to the infamous FizzBuzz interview question.

According to this page, the "FizzBuzz-test" has the following problem definition:

"Write a program that prints the numbers from 1 to 100. But for multiples of three print “Fizz” instead of the number and for the multiples of five print “Buzz”. For numbers which are multiples of both three and five print “FizzBuzz”."

Setting up a Xamarin project

Xamarin can be downloaded on the Xamarin website. The installer will download all required dependencies to get you started. For IDEs, you get to pick between Xamarin Studio and a plugin for Microsoft Visual Studio. I'm going with the latter. For this project, I've chosen to use Xamarin.Forms, which lets you write 100% of your code in one single codebase. There are also other options, which you can read about here.

To get started, create a "Blank App (Xamarin.Forms Portable)" project in Visual Studio. This will create a solution with three projects: FizzBuzz (Portable), FizzBuzz.iOS, and FizzBuzz.Droid. The first project will be our main codebase, the other two are just thin platform specific wrappers that are automatically created by Xamarin.

The GUI

For the FizzBuzz GUI, we want one label and one button. The label will contain the printed "FizzBuzz-value", and the button will increase the counter and update the label. We modify App.cs in FizzBuzz (Portable) to this:

 public class App : Application
    {

        private Label fizzBuzzLabel;
        private Button fizzBuzzBtn;

        public App()
        {
            // label
            this.fizzBuzzLabel = new Label
            {
                XAlign = TextAlignment.Center,
                Text = "Press the button to begin"
            };
            // button
            this.fizzBuzzBtn = new Button
            {
                Text = "FizzBuzz!"
            };
            // root page
            MainPage = new ContentPage
            {
                Content = new StackLayout
                {
                    Children = {
                        this.fizzBuzzLabel,
                        this.fizzBuzzBtn
                    }
                }
            };
        }
        ...
    }

We can test the app using the Android emulator. You need to have a virtual device set up to make this work. Luckily, the Xamarin ships with some preconfigured devices we can use. To deploy the FizzBuzz app to the emulator, set the FizzBuzz.Droid as a startup project and pres debug with Xamarin_Android_API_15 as a target. In the emulator, our application now looks like this:

The logic

We will implement the FizzBuzz algorithm in a separate class, FizzBuzzer.cs. Here is my implementation:

    class FizzBuzzer
    {
        private int i;
        public String fizzBuzz()
        {
            ++this.i;
            if (i % 3 == 0 && i % 5 == 0)
            {
                return "FizzBuzz";
            }
            else if (i % 3 == 0)
            {
                return "Fizz";
            }
            else if (i % 5 == 0)
            {
                return "Buzz";
            }
            return this.i.ToString();
        }
    }

There are obviously other ways of implementing the FizzBuzz algorithm. I've chosen to implement it the way I have because of its simplicity and readability. I have also used the state variable i which is incremented on every invocation of FizzBuzz. Normally, i would be an imput variable, but the stateful solution suits our app better.

Stiching it together

Event handlers in Xamarin.Forms work the same way as event handlers in normal .NET applications. By defining a function with the correct signature, it can be added as an event handler using the += operator. App.js now looks like this:

public class App : Application  
    {

        private Label fizzBuzzLabel;
        private Button fizzBuzzBtn;
        private FizzBuzzer fizzBuzzer = new FizzBuzzer();

        public App()
        {
            // label
            this.fizzBuzzLabel = new Label
            {
                XAlign = TextAlignment.Center,
                Text = "Press the button to begin"
            };
            // button
            this.fizzBuzzBtn = new Button
            {
                Text = "FizzBuzz!"
            };
            this.fizzBuzzBtn.Clicked += this.fizzBuzzBtn_Click;
            // root page
            MainPage = new ContentPage
            {
                Content = new StackLayout
                {
                    Children = {
                        this.fizzBuzzLabel,
                        this.fizzBuzzBtn
                    }
                }
            };
        }

        private void fizzBuzzBtn_Click(Object sender, EventArgs args)
        {
            this.fizzBuzzLabel.Text = this.fizzBuzzer.fizzBuzz();
        }
    }
Conclusion

That's it for now. Although this was a small and simple test, I'm impressed by Xamarin, and I believe it has real potential for creating some powerful apps.

Here is a video of the working app: