Hello MVB

Hi all!

In this series of posts I'm going to show how to use MVB and its components arriving to propose an architecture that will allow you to write robust and scalable applications .

Here i would like to show you all how to start with a very simple Hello World app using MVB framework.

You can find MVB framework info on the official Github page and on WIKI.
For a complete example see FakeContacts App on MVB repo.

You can find the code of this example HERE.

You can add MVB to your applications using Nuget Packages:
- Mvb.Core

Platform specific package for your UI Projects.
- Xamarin Android: Mvb.Platform.Droid
- Xamarin iOS: Mvb.Platform.iOS
- Xamarin.Mac: Mvb.Platform.MacOs
- Universal Windows 10: Mvb.Platform.Win.Uwp
- Windows WPF Mvb.Platform.Win.Wpf
- Windows Forms: Mvb.Platform.Win.WinForms

What is MVB?

MVB is a small framework that guides you through the creation of cross platform applications (thanks to Xamarin ) developing a release platform agnostic high-level layer (ModelBinders Layer) .

The ModelBinders Layer can be thought as an application without interface composed of many small components (ModelBinder) with limited liability . The ModelBinder expose simple APIs that allow you to connect the top final platform specific application layer ( UI Application).

The most awesome thing is that MVB ensures you that all actions connected through the ModelBinder API will automatically run on the right thread !

Moreover , the framework exposes you many components for the creation of highly scalable applications .

Starting from this post I will show you how to use the MVB and its components .

Let's go!

Step1

Create a new solution and add a new portable class library project.
This project will contain our ModelBinders

Add Mvb.Core nuget package:

Step 2

Create a ModelBinder. This example modelbinder will have:

• A string property OutPut
• An input method with a string parameter

• When input is invoked will start a work that change 3 times the output string value.

  public class HelloWorldModelBinder : MvbBase
  {
     public HelloWorldModelBinder()
     {
         this.InitBinder();
     }
  
     private string _outPut;
  
     public string OutPut
     {
         get { return this._outPut; }
         set { this.SetProperty(ref this._outPut, value); }
     }
  
     public void SayHelloto(string name)
     {
         Task.Run(() => { this.HelloWorker(name).ConfigureAwait(false); }).ConfigureAwait(false); 
     }
  
     private async Task HelloWorker(string name)
     {
         this.OutPut = "MVB wants to greet..";
         await Task.Delay(1000);
         this.OutPut = $"{name.ToUpper()}!!";
         await Task.Delay(1000);
         this.OutPut = "See you soon!";
     }
    }
  

Remember that the ModelBinder is a platform-agnostic top application layer..

so every platform specific project with UI will binds to the ModelBinder.. let's see how to make a WPF project! (You can do the same things in all the other supported platform.. see MVB on Github for a more complete example)

Step 3

Add a WPF project.

Add Mvb.Platform.WPF Nuget package.

Initialize platform specific MVB in App.cs.

Step 4

Create a ultra simple GUI with:

• A TextBox for input name.
• A Button for invoke binder method
• A Textbox for output.

Create interation on your code-behind :

/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
    private readonly HelloWorldModelBinder _binder;

    public MainWindow()
    {
        this.InitializeComponent();
        this._binder = new HelloWorldModelBinder();
        this.InitBinderActions();
    }

    private void Button_OnClick(object sender, RoutedEventArgs e)
    {
        this._binder.SayHelloto(this.TextBox.Text);
    }

    private void InitBinderActions()
    {
        this._binder.Binder.AddAction<HelloWorldModelBinder>(b=> b.OutPut, () =>
        {
            this.OutPut.Text = this._binder.OutPut;
        });
    }
}

On ctor i create a binder instance and init UI reaction in a separate private method InitBinderActions. My reaction is simple.. when the output change i will update my UI with the new text. When the button is pressed the binder.SayHello is invoked.

The AddAction API exposed by Binder property on MvbBase ensure that the passed Action will be run on the main thread when OutPut property change.

For now it does not look much but..

You can do exactly the same thing for Windows Forms,Console App,WPF,Universal App, Xamarin Android, Xamarin IOS Xamarin Mac!!

There are only few difference for create a Windows Form or a Console App (see sourcecode on GitHub).

Either Console and Window Form refences the nuget package Mvb.Core and init MVB with

Mvb.Core.Mvb.NullInit();

this is the only difference for Console App.

For Windows Form App add Mvb.Platform.WinForm Nuget package and the reaction must be like:

this._binder.Binder.AddAction<HelloWorldModelBinder>(b=>b.OutPut, () =>
            {
                this.OutPut.MvbInvoke(box =>
                {
                    box.Text = this._binder.OutPut;
                });
            });

The magic word is MvbInvoke.. this extension on ISynchronizeInvoke objects guarantee that the modify to the UI control is run on the main thread for Windows Form App.

In this post you could see how to create and use a ModelBinder, in the next post i will extend this example with another component: MvbActions

Have Fun!

See you soon!