Mon monde en .NET

La première étape est d'ajouter l'interface IScriptControl (qui se trouve dans la dll System.Web.Extensions) sur notre classe pourcentage.

[DefaultProperty("Value")]
[ToolboxData("<{0}:PercentageControl runat=server></{0}:PercentageControl>")]
[ToolboxBitmap(typeof(PercentageControl), "Percentage.bmp")]
public class PercentageControl : WebControl, IPostBackDataHandler, IScriptControl

Nous devons ensuite enregistrer cette classe dans le ScriptManager comme nous avons dû le faire pour enregistrer celle-ci dans le support du PostBack.

protected override void OnPreRender(System.EventArgs e)
{
    if (!this.DesignMode)
    {
        ScriptManager sm = ScriptManager.GetCurrent(Page);
        if (sm == null)
        {
            throw new HttpException("A ScriptManager control must exist on the page.");
        }
        sm.RegisterScriptControl(this);
    }
    base.OnPreRender(e);
    this.Page.RegisterRequiresPostBack(this);
}
protected override void Render(HtmlTextWriter writer)
{
    if (!this.DesignMode)
    {
        ScriptManager sm = ScriptManager.GetCurrent(Page);
        sm.RegisterScriptDescriptors(this);
    }
    base.Render(writer);
}

Il est temps de passer à l'implémentation de l'interface IScriptControl. Il faut donner le nom de la classe JavaScript liée au contrôle C# ainsi que les propriétés que l'on envoie à la classe JavaScript. Cela se passe dans la méthode GetScriptDescriptors. De l'autre côté, il faut spécifier le chemin pour accéder au fichier JavaScript où se trouve ma (future) classe JavaScript. Cela se passe dans la méthode GetScriptReferences.

public IEnumerable<ScriptDescriptor> GetScriptDescriptors()
{
    ScriptControlDescriptor descriptor = new ScriptControlDescriptor("MyCustomControls.PercentageControl", this.ClientID);
    descriptor.AddProperty("errorCssClass", this.ErrorCssClass);
    return new ScriptDescriptor[] { descriptor };
}
public IEnumerable<ScriptReference> GetScriptReferences()
{
    ScriptReference reference = new ScriptReference();
    if (this.Page != null)
    {
        reference.Path = this.Page.ClientScript.GetWebResourceUrl(
                                        this.GetType(),
                                        "MyCustomControls.PercentageControl.js");
    }
    return new[] { reference };
}

Nous pouvons démarrer notre classe JavaScript. Nous décidons de la placer dans une ressource "embedded" de notre dll. Nous ajoutons notre fichier PercentageControl.js et nous l'enregistrons comme ressource dans notre assembly via cet déclaration ci-dessous.

[assembly: WebResource("MyCustomControls.PercentageControl.js", "text/javascript")]

La prochaine étape est l'implémentation de celle-ci.

1) Nous enregistrons notre namespace

Type.registerNamespace('MyCustomControls');

2) Nous allons initialiser les valeurs par défauts etc

MyCustomControls.PercentageControl = function (element) {
    MyCustomControls.PercentageControl.initializeBase(this, [element]);
    this._errorCssClass = null;
};

3) Nous implémentons notre classe protoype avec 2 méthodes .... initialize et dispose

MyCustomControls.PercentageControl.prototype = {
    initialize: function () {
        MyCustomControls.PercentageControl.callBaseMethod(this, 'initialize');
    },
    dispose: function () {
        $clearHandlers(this.get_element());
        MyCustomControls.PercentageControl.callBaseMethod(this, 'dispose');
    }
};

4) Nous implémentons les propriétés pour le css d'erreur à appliquer en JavaScript

MyCustomControls.PercentageControl.prototype = {
    initialize: function () {
        MyCustomControls.PercentageControl.callBaseMethod(this, 'initialize');
    },
    dispose: function () {
        $clearHandlers(this.get_element());
        MyCustomControls.PercentageControl.callBaseMethod(this, 'dispose');
    },
    set_errorCssClass: function (value) {
        if (this._errorCssClass !== value) {
            this._errorCssClass = value;
            this.raisePropertyChanged('errorCssClass');
        }
    },
    get_errorCssClass: function () {
        return this._errorCssClass;
    }
};

5) Nous donnons explicitement les descripteurs (utile pour la sérialisation JSON)

MyCustomControls.PercentageControl.descriptor = {
    properties: [{ name: 'errorCssClass', type: String}]
};

6) Nous enregistrons la classe et nous informons le framework que c'est chargé.

MyCustomControls.PercentageControl.registerClass('MyCustomControls.PercentageControl', Sys.UI.Control);
if (typeof (Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();

7) Nous souhaitons implémenter notre code "business"

L'idée est de mettre un cadre rouge autour des texbox lorsqu'il y a une erreur. Pour ce faire, nous allons nous abonner à l'event change et ajouter notre css d'erreur en cas de donnée incorrecte. Nous obtenons au final le résultat ci-dessous.

Type.registerNamespace('MyCustomControls');
MyCustomControls.PercentageControl = function (element) {
    MyCustomControls.PercentageControl.initializeBase(this, [element]);
    this._errorCssClass = null;
};
MyCustomControls.PercentageControl.prototype = {
    initialize: function () {
        MyCustomControls.PercentageControl.callBaseMethod(this, 'initialize');
        this._onchangeHandler = Function.createDelegate(this, this._onchange);
        $addHandlers(this.get_element(), { 'change': this._onchangeHandler }, this);
    },
    dispose: function () {
        $clearHandlers(this.get_element());
        MyCustomControls.PercentageControl.callBaseMethod(this, 'dispose');
    },
    _onchange: function (e) {
        var value = parseFloat(e.target.value);
        var isIncorrect = false;
        if (isNaN(value) || !isFinite(value)) {
            isIncorrect = true;
        }
        if (isIncorrect || value > 100 || value < 0) {
            if (this._errorCssClass !== null && this._errorCssClass !== '') {
                this.addCssClass(this._errorCssClass);
            }
        }
        else {
            this.removeCssClass(this._errorCssClass); 
        }
    },
    set_errorCssClass: function (value) {
        if (this._errorCssClass !== value) {
            this._errorCssClass = value;
            this.raisePropertyChanged('errorCssClass');
        }
    },
    get_errorCssClass: function () {
        return this._errorCssClass;
    }
};
MyCustomControls.PercentageControl.descriptor = {
    properties: [{ name: 'errorCssClass', type: String}]
};
MyCustomControls.PercentageControl.registerClass('MyCustomControls.PercentageControl', Sys.UI.Control);
if (typeof (Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();

Il ne reste plus qu'à ajouter ma class css dans ceux-ci

<style type="text/css">
    .errorCss
    {
        border-color: Red;
    }
</style>

Prenons par exemple une page ASP.NET de base héritant d'une MasterPage.

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <div class="tabs">
        <ul>
            <li><a href="#tabs1">Tab 1</a></li>
            <li><a href="#tabs2">Tab 2</a></li>
        </ul>
        <div id="tabs1">
            Tab 1
            <asp:Button runat="server" Text="Click from tab 1" />
        </div>
        <div id="tabs2">
            Tab 2
            <asp:Button runat="server" Text="Click from tab 2" />
        </div>
    </div>
</asp:Content>

Nous ajoutons les script JQuery et JQuery UI via CDN. Nous ajoutons également la mise en place du mécanisme de tabs sous JQuery UI, à savoir l'utilisation de la méthode tabs() sur notre div.

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.ui/1.8.5/jquery-ui.js"></script>
    <link type="text/css" rel="stylesheet" href="http://ajax.microsoft.com/ajax/jquery.ui/1.8.5/themes/redmond/jquery-ui.css" />
    <script type="text/javascript" language="javascript">
        $(function () {
            $("div.tabs").tabs();
         });
    </script>
</asp:Content>

Notre page s'affiche et les div sont correctement rendus avec des tabs. Nous devons maintenant ajouter la possibilité de retenir le tab courant. Nous allons donc ajouter dans notre page un input field de type hidden:

<asp:HiddenField runat="server" ID="currentTab" />

Nous allons également modifier notre code javascript pour retenir le tab courant:

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.ui/1.8.5/jquery-ui.js"></script>
    <link type="text/css" rel="stylesheet" href="http://ajax.microsoft.com/ajax/jquery.ui/1.8.5/themes/redmond/jquery-ui.css" />
    <script type="text/javascript" language="javascript">
        $(function () {
            $("div.tabs").tabs();
            var currentTabId = $("#<%= currentTab.ClientID %>");
            $("div.tabs").tabs('select', currentTabId.val());
            $("div.tabs").bind('tabsselect', function (event, ui) {
                currentTabId.val(ui.panel.id);
            });
        });
    </script>
</asp:Content>

A partir de ce moment, nous avons une page qui s'affiche sur le bon tab en cas de postback. Nous pouvons donc accéder en C# à l'information via le hiddenfield.Value ou via JS.

1) Choix d'utilisation du pattern MVVM

Nous allons utiliser le pattern MVVM pour réaliser cette application. L’objectif de ce pattern (inventé par John Gossman) est de simplifier le code « behind » des vues et de permettre de tester son code plus facilement. Nous pouvons pousser plus loin en couplant ce pattern avec le pattern IoC pour totalement découper certaines couches mais, dans cette session ci, nous nous limiterons à l’utilisation de MVVM. Vous pouvez trouver plus d’informations sur MVVM via ce lien.

2) Enregistrement du "Locator" dans l'application

La première des manipulations est de créer puis d'enregistrer en ressource notre classe "Locator". Notre classe est en réalité une facade. Dans notre projet, nous n'avons qu'un seul "view model".

public class ViewModelLocator
{
    private static MainViewModel _main;
    /// <summary>
    /// Initializes a new instance of the ViewModelLocator class.
    /// </summary>
    public ViewModelLocator()
    {
        _main = new MainViewModel();
    }
    /// <summary>
    /// Gets the Main property which defines the main viewmodel.
    /// </summary>
    public MainViewModel Main
    {
        get { return _main; }
    }
}

Nous pouvons enregistrer dans notre XAML notre class en tant que ressource. Nous pourrons par après accéder à notre classe via une clé depuis n'importe quel écran.

<?xml version="1.0" encoding="utf-8"?>
<Application x:Class="WorkCountdown7.App" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone" xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:vm="clr-namespace:WorkCountdown7.ViewModel" mc:Ignorable="d">
  <!--Application Resources-->
  <Application.Resources>
    <vm:ViewModelLocator x:Key="Locator" d:IsDataSource="True" />
  </Application.Resources>
  <Application.ApplicationLifetimeObjects>
    <!--Required object that handles lifetime events for the application-->
    <shell:PhoneApplicationService Launching="Application_Launching" Closing="Application_Closing" Activated="Application_Activated" Deactivated="Application_Deactivated" />
  </Application.ApplicationLifetimeObjects>
</Application>

3) Implémentation du ViewModel

Nous définissons notre logique business dans cette classe. Notre but est donc d'avoir un bouton permettant de démarrer / arrêter un "chronomètre". Nous devons donc diffuser une API avec une collection d'items ainsi qu'un ICommand permettant de lancer l'action. Nous ne définissons pas de droits sur le bouton(Ceci aurait pu se faire via la classe RelayCommand ...). Nous implémentons notre logique business dans la méthode exécutée lors d'une action "Execute". Cela suffit pour avoir une classe testable à souhait. Nous pouvons passer à l'implémentation de l'interface.

public class MainViewModel : ViewModelBase
{
    private ObservableCollection<TimerItem> items = new ObservableCollection<TimerItem>();
    public ObservableCollection<TimerItem> Items { get { return this.items; } }
    public MainViewModel()
    {
        this.Execute = new RelayCommand(ExecuteAction);
    }
    public ICommand Execute { get; private set; }
    private void ExecuteAction()
    {
        if (this.currentItem == null)
        {
            // no value
            this.currentItem = new TimerItem { StartTime = DateTime.Now };
            this.items.Add(this.currentItem);
        }
        else if (!this.currentItem.StopTime.HasValue)
        {
            this.currentItem.StopTime = DateTime.Now;
        }
        else
        {
            this.currentItem = new TimerItem { StartTime = DateTime.Now };
            this.items.Add(this.currentItem);
        }
    }
    private TimerItem currentItem;
}

4) Implémentation de l'interface

Nous allons réutiliser notre Locator (expliqué en point 2) en l'enregistrant en tant que DataContext de notre UI.

DataContext="{Binding Source={StaticResource Locator},  Path=Main}"

Nous pouvons par après utiliser un contrôle pivot pour avoir deux "onglets". Le premier contiendra un bouton. Le second contiendra l'historique des actions.

<controls:Pivot>
    <controls:Pivot.Title>
        <TextBlock Text="Hello World !"/>
    </controls:Pivot.Title>
    <!--Pivot item one-->
    <controls:PivotItem Header="Timer">
        <local:Timer/>
    </controls:PivotItem>
    <!--Pivot item two-->
    <controls:PivotItem Header="History">
        <local:History/>
    </controls:PivotItem>
</controls:Pivot>

Dans notre premier onglet, nous avons un bouton pour démarrer/arrêter notre "compteur". Nous pouvons simplement lier notre bouton sur un Command de notre ViewModel ... en l'occurence ici notre Execute.

<Button Content="Button" Command="{Binding Execute}" Height="72" HorizontalAlignment="Left" Name="button1" VerticalAlignment="Top" Width="160" />

Dans notre second onglet, nous décidons que nos items rempliront la listbox.

<ListBox DataContext="{Binding Path=Items}" ItemsSource="{Binding}">
</ListBox>

4) Ensuite ? 

Nous pouvons exécuter notre code. Celui-ci fonctionnera parfaitement ... Il est testable et surtout il est possible sans problème de repenser l'interface graphique via Expression Blend sans toucher à une ligne de notre code business. Vous pouvez télécharger le code complet via ce lien. Le prochain post abordera la persistence des données dans une base SQL Compact afin d'historiser / requêter simplement nos "timers".