Le blog

Orchard est un CMS communautaire gratuit et open source bâti sur la plateforme ASP.NET MVC. Supporté par la Fondation OuterCurve et intégrant au sein de ses équipes plusieurs développeurs de Microsoft, celui-ci n’est pas pour autant un produit de la marque. Actuellement en 1.9, le projet continue de s’étoffer grâce à la participation d’une communauté active et d’un fort soutien extérieur.

Dans cet article en deux parties, je vous propose de découvrir comment créer un widget contenant une grid Kendo personnalisable dans l'administration d'Orchard. Il peut être ajouté sur le layout, un fichier .cshtml résidant au sein du thème actif qui représente le squelette des différentes sections d'une page (header, content, footer etc).

Etant basé sur le template d'un projet MVC, un module s'utilise très simplement avec Visual Studio, ce qui sera le cas pour la suite de l'article. Je ne m'attarderai pas sur la présentation du processus d'installation d'Orchard, pour cela je vous invite à consulter l'article de mon collègue ainsi que la documentation officielle.

 1 - La structure du module

La toute première étape après avoir installé Orchard est d’activer le module Code Generation. Suite à cela, naviguez dans le dossier "~/Orchard/Bin" et exécutez le programme en ligne de commande Orchard.exe.

Une fois la phase d'initialisation passée, entrez la commande suivante afin de créer la structure du module : codegen module MyGridWidget

Une fois qu'Orchard valide la création, on peut retrouver le module dans le dossier suivant "~/Modules/MyGridWidget".  Un rapide coup d’œil nous montre une structure ressemblant fortement à celle d'un projet ASP.NET MVC, que l'on s'empresse d'ouvrir avec Visual Studio.

 2 - Le manifeste

A la racine du dossier de notre module se trouve un fichier module.txt. Ce fichier texte contient la description de notre module et est détecté par Orchard, ce qui a pour effet de remonter le module dans l’interface administrateur.

Afin de pouvoir utiliser Kendo, nous allons avoir besoin d’inclure Jquery dans nos pages. Plutôt que d’ajouter la librairie par nos propres moyens, nous allons ajouter une dépendance au module jQuery qui est intégré à Orchard, que l’on utilisera par la suite dans nos vues.

Name: MyWidget
AntiForgery: enabled
Author: Netapsys
Website: http://orchardproject.net
Version: 1.0
OrchardVersion: 1.0
Description: Description for the module
Dependencies: Orchard.Widgets, Orchard.jQuery
Features:
    MyWidget:
        Description: Description for feature MyWidget.

 3 - Les modèles de données

Etant donné que nous souhaitons rendre notre widget configurable nous allons avoir besoin d’un modèle intégrant les différentes propriétés que l’on souhaite offrir à l’utilisateur lors de l’administration du widget.

Pour cela, on commence par créer une classe MyGridPartRecord, puis une classe MyGridPart. La classe MyGridPartRecord a des propriétés virtuelles qui servent de proxie dynamique à la classe MyGridPart qui se charge d’exposer ses propriétés publiquement par la suite.

namespace MyWidget.Models
{
    public class MyGridWidgetPartRecord : ContentPartRecord
    {
        public virtual int ButtonCount { get; set; }
        public virtual int Height { get; set; }
        public virtual bool Input { get; set; }
        public virtual bool Numeric { get; set; }
        public virtual bool PreviousNext { get; set; }
        public virtual int PageSize { get; set; }
        public virtual string ControllerUrl { get; set; }
    }
}

namespace MyWidget.Models
{
    public class MyGridWidgetPart : ContentPart<MyGridWidgetPartRecord>
    {
        public bool Numeric
        {
            get { return Record.Numeric; }
            set { Record.Numeric = value; }
        }

        public int ButtonCount
        {
            get { return Record.PageSize; }
            set { Record.PageSize = value; }
        }

        public bool Input
        {
            get { return Record.Input; }
            set { Record.Input = value; }
        }

        public bool PreviousNext
        {
            get { return Record.PreviousNext; }
            set { Record.PreviousNext = value; }
        }

        public int PageSize
        {
            get { return Record.PageSize; }
            set { Record.PageSize = value; }
        }

        public int Height
        {
            get { return this.Record.Height; }
            set { this.Record.Height = value; }
        }

        public string ControllerUrl
        {
            get { return this.Record.ControllerUrl; }
            set { this.Record.ControllerUrl = value; }
        }
    }
}

4 - Migration

Maintenant que le modèle de données est défini, il est temps de créer la table qui contiendra les propriétés du ou des widgets instanciés. Pour cela, nous créons une nouvelle classe "Migrations" à la racine du dossier du module, qui contient une méthode implémentant la classe abstraite DataMigrationImpl.

using Orchard.ContentManagement.MetaData;
using Orchard.Core.Contents.Extensions;
using Orchard.Data.Migration;

namespace MyWidget
{
    public class Migrations : DataMigrationImpl
    {
        public int Create()
        {
            SchemaBuilder.CreateTable("MyGridWidgetPartRecord", table => table
                .ContentPartRecord()
                .Column<int>("ButtonCount")
                .Column<int>("Height")
                .Column<bool>("Input")
                .Column<bool>("Numeric")
                .Column<string>("ControllerUrl"),
                .Column<bool>("PreviousNext")
                .Column<int>("PageSize"));

            ContentDefinitionManager.AlterPartDefinition("MyGridWidgetPart", builder => builder.Attachable());

            ContentDefinitionManager.AlterTypeDefinition("MyGridWidget",
                type => type
                    .WithPart("MyGridWidgetPart")
                    .WithPart("WidgetPart")
                    .WithPart("CommonPart")
                    .WithSetting("Stereotype", "Widget")
                    .DisplayedAs("My Grid Widget"));

            return 1;
        }
    }
}

La première partie de la méthode a pour rôle de créer la table et les colonnes représentant les attributs à enregistrer de notre widget La seconde section quant à elle stipule que notre widget sera attachable, signifiant qu’il pourra être attaché à tout autre type de contenu présent dans notre installation d’Orchard.

En tout dernier, on définit que le contenu pourra être instancié directement au sein d’une page Orchard par l’intermédiaire d’un widget. On attache donc pour cela notre partie créée durant l’étape précédente ainsi que des parts requises par Orchard pour la création d’un widget (CommonPart et WidgetPart).

Voila pour la première partie du tutorial,  dans la seconde nous nous attacherons à mettre en place les différentes fonctionnalités relatives à l'affichage et l'édition du widget, c'est à dire l'administration et l'interface client.