Le contrôle Property Editor
Auteur : Aurel
Date de pulication : 25 May 2010
Article consulté 1404 fois
(1 votes)
Introduction
Le contrôle PropertyEditor à été introduit avec DotNetNuke 4.3. Ce contrôle permet d’afficher et d’éditer dynamiquement les propriétés d’objets métiers. Comme nous allons le voir, ce composant permet de développer rapidement des interfaces graphiques. Il est flexible et extensible.
Utilisation classique
Aperçu
La puissance du property editor tire sa force dans le fait que l’on peut utiliser et enrichir directement les classes métiers. Dans l’exemple suivant, on a une classe métier, utilisée pour stocker ces données.
Le property editor utilise le type des propriétés pour déduire le bon contrôle à afficher automatiquement. Par exemple on a une liste déroulante dans le cas d’une énumération.
Analyse du property editor
Voici la définition d’un property editor dans un fichier ascx :
<dnn:PropertyEditorControl ID="pePanels" runat="server"
EditControlStyle-CssClass="NormalTextBox"
EnableClientValidation="true"
ErrorStyle-CssClass="NormalRed"
GroupHeaderStyle-CssClass="Head"
GroupHeaderIncludeRule="True"
HelpStyle-CssClass="Help"
LabelStyle-CssClass="SubHead"
VisibilityStyle-CssClass="Normal"
EditControlWidth="400px"
LabelWidth="120px"
Width="600px"
GroupByMode="Section"
DisplayMode="Div"
SortMode="SortOrderAttribute">
</dnn:PropertyEditorControl>
Il est possible de contrôler finement la manière dont le property editor s’affiche, d’une part en spécifiant les classes CSS des éléments composant le property editor, et d’autre part en utilisant les propriétés dédiées à la personnalisation de l’affichage.
DataBinding
Le property editor fonctionne comme n’importe control basé sur des données (peuplement de la propriété DataSource et appel de la méthode DataBind).
pePanels.LocalResourceFile = LocalResourceFile;
pePanels.DataSource = panels;
pePanels.DataBind();
Il y a une subtilité importante concernant le databinding du property editor. Cette opération doit être faite pour tous les chargements de la page, non pas seulement au premier comme c'est le cas pour les autres contrôles liés aux données.
Localisation
Il est possible de localiser les labels du property editor en utilisant la propriété LocalResourceFile. Les clés de resources sont de la forme « {nom_de_la_classe_metier}_{nom_de_la_propriété}.Text ». Pour les labels d’aides il faut remplacer « .Text » par « .Help ».
Récupération des données
La récupération des données se fait de manière transparente par l’intermédiaire de la propriété DataSource, avec un cast vers le type de la classe métier. En général cette récupération se fait sur un évenement, par exemple au clic sur un bouton "Sauvegarder".
Utilisation avancée
Utilisation des attributs
Il est possible de personnaliser finement le property editor grâce à l’utilisation d’attributs sur les propriétés de la classe métier. Voici un exemple, permettant de spécifier que la propriété Title est requise :
[Required(true)]
public string Title
{
get { return _title; }
set { _title = value; }
}
Il est possible d’utiliser plusieurs attributs sur une même propriété. Voici la liste des attributs disponibles :
| ControlStyleAttribute |
Permet de spécifier une classe CSS au contrôle associé à la propriété. |
| IsReadOnlyAttribute |
Permet de mettre une propriété en lecture seule. |
| LabelModeAttribute |
Permet de choisir l’emplacement du label d’une propriété. |
| MaxLengthAttribute |
Permet de définir une longueur maximale sur le champ associé à une propriété. |
| RegularExpressionValidatorAttribute |
Permet de spécifier une expression régulière utilisée pour la validation du champ. |
| RequiredAttribute |
Permet de spécifier si une propriété est requise ou non. |
| SortOrderAttribute |
Permet d’ordonner l’affichage des propriétés. |
Le principal inconvénient de l’utilisation d’attributs est de lier en dur des informations sur l’apparence dans le modèle de données. Nous verrons dans un prochain article comment séparer les deux domaines afin de faciliter le travail de l'intégrateur-designer.