nRoute – Utilisation et création de commandes

Warning : This page has been marked as an archive because the author consider that its content is no longer relevant.

Cet article suppose que le lecteur (c’est à dire vous) a déjà entendu parler du concept de commande. Il n’a pas pour but de présenter en détail ce qu’est une commande mais plutôt de montrer comment en créer et les utiliser avec nRoute.

En MVVM on utilise souvent les commandes pour faire communiquer une vue et son view model afin de soulager le code-behind de tout ce qui n’est pas de son ressort (les interprétations divergent ici, je considère pour ma part que tout ce qui n’est pas du code manipulant les objets graphiques de la vue n’a rien à faire dans le code-behind).

nRoute nous simplifie la tâche en nous fournissant une implémentation des commandes au travers des classes ActionCommand et ActionCommand similaire au DelegateCommand que l’on peut trouver dans d’autre framework.

Notre programme aura pour but d’afficher la date courante dans notre vue principale et d’avoir un bouton pour rafraîchir cette date. Ce bouton sera lié à une commande du view model qui se chargera de mettre à jour la date.

Voici le code XAML de départ de notre vue :

<UserControl x:Class="nRoute_Commands.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:n="http://nRoute/schemas/2010/xaml"
    xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
    mc:Ignorable="d">

    <i:Interaction.Behaviors>
        <n:BridgeViewModelBehavior />
    </i:Interaction.Behaviors>

    <StackPanel x:Name="LayoutRoot">
        <TextBlock Text="{Binding Date}" />
        <Button Content="Refresh" />
    </StackPanel>
</UserControl>

Et voici le view model associé :

[MapViewModel(typeof(MainPage))]
public class MainWindowViewModel : ViewModelBase
{
    private DateTime? _date;

    public MainWindowViewModel()
    {
    }

    public DateTime? Date
    {
        get
        {
            return _date;
        }

        set
        {
            if (_date != value)
            {
                _date = value;
                NotifyPropertyChanged(() => Date);
            }
        }
    }
}

Nous avons dont un champs date dans notre vue lié à la propriété Date de notre view model. Jusqu’ici rien de bien compliqué. Vous remarquerez aussi que le bouton ne fait rien pour l’instant lorsque l’on clique dessus.

Nous allons maintenant déclarer notre commande dans le view model.

Ajoutons le champs suivant (note vous devez ajouter le namespace suivant à votre view model System.Windows.Input):

private ICommand _refreshCommand;

Nous allons maintenant ajouter une méthode qui va initialiser cette commande et l’appeler dans le constructeur de notre view model. Dans cette méthode nous initialiserons notre commande en lui passant en paramètre la méthode à exécuter lorsqu’elle est invoquée :

public MainWindowViewModel()
{
    SetupCommands();
}

private void SetupCommands()
{
    _refreshCommand = new ActionCommand(Refresh);
}

private void Refresh()
{
    Date = DateTime.UtcNow;
}

Maintenant que notre commande est initialisée notre devons l’exposer au monde extérieur et pour celà nous créons la propriété suivante :

public ICommand RefreshCommand
{
    get { return _refreshCommand; }
}

Il ne reste plus qu’à l’utiliser dans notre vue. En Silverlight 4 les contrôles héritant de ButtonBase exposent une propriété Command que nous pouvons utiliser pour exécuter notre commande lorsque le bouton est cliqué.

Voici comment nous déclarons celà :

<Button Content="Refresh" Command="{Binding RefreshCommand}" />

Il est possible d’executer une commande à partir d’un objet n’exposant pas la propriété Command. Voici comment nous aurions pu faire avec le bouton. Cette méthode nécessite d’ajouter en référence la dll System.Windows.Interactivity.

<Button Content="Refresh">
    <i:Interaction.Triggers>
        <i:EventTrigger EventName="Click">
            <n:ExecuteCommandAction Command="{Binding RefreshCommand}" />
        </i:EventTrigger>
    </i:Interaction.Triggers>
</Button>

L’avantage de cette méthode est qu’elle nous permet de choisir l’évènement déclencheur de notre commande (propriété EventName de l’objet EventTrigger). Nous voyons aussi l’utilisation de la classe ExecuteCommandAction de nRoute qui nous permet de spécifier la commande à exécuter. On pourrait tout à fait remplacer ExecuteCommandAction par d’autres behaviors tels que NavigateAction ou ExecuteControllerAction mais ceci est en dehors du spectre de cet article.

Concernant le choix de la méthode à utiliser pour exécuter votre commande mon conseil est d’utiliser la propriété commande quand elle est disponible et d’utiliser la seconde méthode dans les autres cas.

Maintenant si on execute le code suivant et que l’on clique sur le bouton la date se met à jour ! Biensûr il en faudra un peu plus si vous voulez faire une application utile avec des commandes mais ça vous l’aviez compris.

J’espère que cet article vous sera utile.

Dans le prochain article je vous montrerai comment passer des paramètres à vos commandes.