Magellan Quickstart : CSharp Feeds

Magellan Quickstart

by Paul Stovell via Paul Stovell on 11/9/2009 3:07:35 AM

This guide will walk you through getting started with Magellan. You will need a copy of Visual Studio 2008 with Service Pack 1.

Project Setup

Download the Magellan library. Unzip it to a known location.
Create a new WPF Application project using Visual Studio 2008.
Add references to Magellan.dll and System.Windows.Interactivity.dll from the ZIP file that you downloaded.
Create the following folder structure:

A new VS project, ready for Magellan

Create a model

In the Views/Home folder, add a class named AddModel. This will represent the view model of an addition action:

public class AddModel
{
    public int A { get; set; }
    public int B { get; set; }
    public int Result { get; set; }
}

Create a controller

Create a new class in the Controllers folder named HomeController. It will contain two actions - Index, which will be the input page, and Add, which will show the results:

using Magellan.Framework;

namespace MagellanHelloWorld.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return Page();
        }

        public ActionResult Add(int a, int b)
        {
            Model = new AddModel
            {
                A = a,
                B = b,
                Result = a + b
            };
            return Page();
        }
    }
}

Now wire up the controller in App.xaml.cs:

using System.Windows;
using Magellan.Framework;
using MagellanHelloWorld.Controllers;

namespace MagellanHelloWorld
{
    public partial class App : Application
    {
        protected override void OnStartup(StartupEventArgs e)
        {
            var controllerFactory = new ControllerFactory();
            controllerFactory.Register("Home", () => new HomeController());
            ControllerBuilder.Current.SetControllerFactory(controllerFactory);

            base.OnStartup(e);
        }
    }
}

Set up the shell

In Window1.xaml, add a Frame element to the content:

<Window 
    x:Class="MagellanHelloWorld.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="300" Width="300"
    >
    <Grid>
        <Frame Name="mainFrame" />
    </Grid>
</Window>

In the Window1 constructor, navigate the mainFrame to the Index action on your controller.

using System.Windows;
using Magellan;

namespace MagellanHelloWorld
{
    public partial class Window1 : Window
    {
        public Window1()
        {
            InitializeComponent();

            Navigator.For(mainFrame).Navigate("Home", "Index");
        }
    }
}

Create the views

In the Views/Home folder, create two new Page files: Index.xaml and Add.xaml.

Index.xaml will be used to capture the inputs, and send them to the Add action on the controller. Notice how the Parameters are defined as part of the Navigation behavior:

<Page 
    x:Class="MagellanHelloWorld.Views.Home.Index"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity" 
    xmlns:magellan="http://xamlforge.com/magellan" 
    Title="Index"
    >
    <StackPanel>
        <TextBox Name="parameterA" />
        <TextBlock Text="+" />
        <TextBox Name="parameterB" />

        <Button Content="Calculate">
            <i:Interaction.Behaviors>
                <magellan:NavigateBehavior Controller="Home" Action="Add">
                    <magellan:NavigateBehavior.Parameters>
                        <magellan:Parameter ParameterName="a" Value="{Binding ElementName=parameterA, Path=Text}" />
                        <magellan:Parameter ParameterName="b" Value="{Binding ElementName=parameterB, Path=Text}" />
                    </magellan:NavigateBehavior.Parameters>
                </magellan:NavigateBehavior>
            </i:Interaction.Behaviors>
        </Button>
    </StackPanel>
</Page>

The Add.xaml will show the output of the calculation. Note how it assumes the use of DataContext in the bindings.

<Page 
    x:Class="MagellanHelloWorld.Views.Home.Add"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity" 
    xmlns:magellan="http://xamlforge.com/magellan" 
    Title="Add"
    >
    <StackPanel>
        <WrapPanel>
            <TextBlock Text="{Binding Path=A}" />
            <TextBlock Text="+" />
            <TextBlock Text="{Binding Path=B}" />
            <TextBlock Text="=" />
            <TextBlock Text="{Binding Path=Result}" />
        </WrapPanel>

        <Button Content="Try Again">
            <i:Interaction.Behaviors>
                <magellan:NavigateBehavior Controller="Home" Action="Index" />
            </i:Interaction.Behaviors>
        </Button>
    </StackPanel>
</Page>

The Magellan view engine will take care of setting the Page's DataContext to the Model from the controller.

Done

That's all there is to it - just hit F5 and admire the results of your handywork! At this point you should be able to enter the values, and they will appear on the next page. Wasn't that easy?

Index.xaml Add.xaml

Magellan took care of:

Locating the controller
Invoking the actions
Mapping the strings from the text boxes to integer parameters on the action (using Model Binders)
Locating the view
Connecting the model with the view

Tests

Of course, it wouldn't be complete without a test. Here's what the unit test for our Add action might look like:

[Test]
public void AddTest()
{
    var controller = new HomeController();
    controller.Add(1, 4);
    var model = (AddModel)controller.Model;

    Assert.AreEqual(1, model.A);
    Assert.AreEqual(4, model.B);
    Assert.AreEqual(5, model.Result);
}

What next?

Back to: Magellan Home