Création de types et de contrôles de champs personnalisés SharePoint Server 2010 avec Visual Studio 2010 et Silverlight 3
Résumé : SharePoint Foundation 2010 offre aux développeurs la possibilité de créer des types et des contrôles de champs personnalisés lorsqu’une expérience d’édition ou d’affichage personnalisée est nécessaire. À l’aide de Microsoft Silverlight 3, les développeurs peuvent créer des expériences enrichies dans les sites de publication SharePoint Server 2010.
Dernière modification : mercredi 12 janvier 2011
S’applique à : Business Connectivity Services | Open XML | SharePoint Designer 2010 | SharePoint Foundation 2010 | SharePoint Online | SharePoint Server 2010 | Visual Studio
Dans cet article
Présentation des types et contrôles de champs personnalisés et de Silverlight 3
Vue d’ensemble du type de champ ATOM personnalisé avec une expérience d’édition et d’affichage Silverlight 3
Configuration d’un environnement de développement pour Silverlight 3
Création de l’expérience Silverlight
Création de la logique métier de l’application
Test de l’application Silverlight 3
Création du type et du contrôle de champ personnalisés
Créer la classe de contrôle et le modèle de rendu personnalisés
Déploiement et installation des types et contrôles de champs personnalisés
Test du type de champ personnalisé, du contrôle de champ personnalisé et de l’application Silverlight 3
Conclusion
Remerciements
Ressources supplémentaires
Contenu
Présentation des types et contrôles de champs personnalisés et de Silverlight 3
Vue d’ensemble du type de champ ATOM personnalisé avec une expérience d’édition et d’affichage Silverlight 3
Configuration d’un environnement de développement pour Silverlight 3
Création de l’expérience Silverlight
Création de la logique métier de l’application
Test de l’application Silverlight 3
Création du type et du contrôle de champ personnalisés
Conclusion
Ressources supplémentaires
.jpg "Cliquez pour obtenir le code")
.jpg "Cliquez pour voir la vidéo")
Voir la vidéo (éventuellement en anglais)
Le stockage des données dans les sites SharePoint repose essentiellement sur les listes. Au moment de créer le schéma d’une liste, que ce soit en utilisant des colonnes de liste ou des types de contenu, les utilisateurs peuvent sélectionner le type de données de la colonne, appelé type de champ dans Microsoft SharePoint 2010. Microsoft SharePoint Foundation 2010 propose diverses options de type de champ, dont voici quelques-unes des plus connues :
Une seule ligne de texte
Plusieurs lignes de texte
Devise
Date et heure
Choix
Recherche
Microsoft SharePoint Server 2010 ajoute des types de champs, tels que le champ de texte enrichi Publishing HTML (utilisé par les sites de publication). Bien que ces types de champs puissent répondre à la majorité des besoins métiers, il se peut qu’ils ne les satisfassent pas tous individuellement. Par exemple, le modèle de liste de contacts contient des champs individuels pour chaque élément d’une adresse nord-américaine. Est-ce bien de cette façon que les utilisateurs finaux utilisent les données ? Souhaitent-ils qu’une adresse soit restituée horizontalement dans une liste ou ne préfèrent-ils pas qu’elle soit restituée avec quelques sauts de ligne, comme c’est le cas sur une enveloppe ou un colis ? Qu’en est-il de l’expérience d’édition ? Si l’adresse est requise, qu’est-ce que cela signifie ? En règle générale, cela signifie que la plupart des éléments sont requis (tels que rue 1, ville, état et code postal pour ce qui est des adresses postales nord-américaines), tandis que d’autres sont facultatifs (tels que rue 2, généralement utilisé pour le numéro de rue, le numéro de bâtiment ou le numéro d’appartement). Toutefois, qu’en est-il si l’adresse n’est pas requise ? Est-il admis d’entrer une seule valeur dans le champ Rue ? Non, car il ne s’agit que d’une partie de l’adresse, et non l’adresse entière.
Pour faire face à ces exigences complexes, SharePoint offre aux développeurs la possibilité de générer des types de champs personnalisés. Ceux-ci permettent de définir les détails de base d’un type de champ, tels que le mode de stockage des données et le mode d’interaction possible des autres développeurs avec ces données via l’API SharePoint. Vous pouvez également créer un contrôle de champ personnalisé en association avec le type de champ afin d’offrir une expérience d’édition et d’affichage unique. Les contrôles de champs personnalisés permettent d’inclure une validation côté client personnalisée et une expérience d’édition unique.
Lorsqu’il s’agit de modifier du contenu dans SharePoint, les utilisateurs peuvent attendre plus que la simple expérience de création et d’affichage HTML ou statique. En pareil cas, il est possible de créer des expériences enrichies et attrayantes à l’aide de Microsoft Silverlight.
Cet article décrit le processus de création d’un contrôle Silverlight 3 personnalisé et le test de celui-ci en dehors de SharePoint. Il décrit ensuite le processus de création d’un type de champ personnalisé et d’un contrôle de champ personnalisé qui stockera les données utilisées par le type de champ, et présente une expérience utilisateur unique, enrichie et attrayante à la fois dans le mode d’affichage et le mode d’édition.
Vue d’ensemble du type de champ ATOM personnalisé avec une expérience d’édition et d’affichage Silverlight 3
Dans cet article, le type de champ que vous créez vise à afficher le contenu d’un flux ATOM. L’expérience d’affichage restitue le contenu du flux à l’utilisateur sans contrôles de création.
Toutefois, en mode d’édition, un bouton est présenté à l’utilisateur qui, lorsqu’il l’actionne, fait apparaître une boîte de dialogue modale dans laquelle il peut entrer l’URL du flux ATOM, ainsi que le modèle à utiliser pour restituer le contrôle.
L’utilisateur a le choix entre trois modèles qui déterminent la façon dont le contenu du flux est restitué sur le site. Ces modèles affichent soit le titre seul, soit le titre et la date de publication, soit le titre, la date de publication et un extrait du contenu du flux.
Créer une application Silverlight 3 personnalisée, un type de champ personnalisé et un contrôle de champ personnalisé, les déployer puis les intégrer dans un site SharePoint nouveau ou existant représente beaucoup de travail. Cet article décompose le travail en plusieurs tâches afin de simplifier la résolution des problèmes. La première étape consiste à créer l’application Silverlight 3 et à la tester en dehors de SharePoint.
Pour configurer votre environnement de développement, vous devez installer plusieurs éléments. Tout d’abord, installez le runtime Silverlight 3, également appelé « plug-in de navigateur ». Vous pouvez vous le procurer dans la page de mise en route (éventuellement en anglais) du site Microsoft Silverlight.
Ensuite, vous devez vous procurer les outils permettant de développer une application Silverlight. Microsoft propose à cette fin deux outils de développement :
Microsoft Expression Blend 3 Expression Blend 3 sert essentiellement à créer des expériences d’interface utilisateur enrichies. Bien que facultative, cette étape vous permet de créer plus facilement des animations et autres éléments d’interface utilisateur à l’aide d’un concepteur et vous dispense d’écrire manuellement le code XAML. Pour télécharger une version d’évaluation d’Expression Blend 3, voir Version d'évaluation de Microsoft Expression Blend 3 + SketchFlow.
Microsoft Visual Studio 2010 Visual Studio intègre un concepteur que vous pouvez utiliser pour placer des contrôles dans une aire de conception.
Dans Expression Blend, Microsoft utilise les mêmes fichiers de projet et de solution que ceux utilisés dans Visual Studio, ce qui s’avère pratique pour les développeurs. Cela permet de basculer en toute simplicité d’Expression Blend à Visual Studio lors de la génération d’applications personnalisées.
Notes
Pour plus d’informations sur la configuration de votre environnement pour les applications Silverlight 3, voir la vidéo de préparation au développement Silverlight (éventuellement en anglais) sur le site Microsoft Silverlight.
Pour l’application décrite dans cet article, il est possible mais pas indispensable d’utiliser Expression Blend 3 pour créer l’interface utilisateur. Toutefois, dans les exemples de code fournis pour créer l’application, seul le code XAML est présenté.
La première étape consiste à créer l’application Silverlight 3. Dans la mesure du possible, tâchez de la générer dans un environnement totalement extérieur à SharePoint. Les processus de développement et de test pourront s’en trouver simplifiés et abrégés. L’application définie dans cet article ne présente que deux points d’intégration avec SharePoint, à savoir :
Persistance des deux valeurs sélectionnées par l’utilisateur (l’URL du flux ATOM et le modèle sélectionné à utiliser pour le rendu) et utilisation de ces valeurs pour le rendu du flux spécifié dans le modèle spécifié en mode de présentation.
Détermination du mode actif de la page (présentation ou édition).
Heureusement, vous pouvez simuler ces deux points d’intégration en dehors de SharePoint. Cela s’explique par le fait que l’application Silverlight ne s’adresse pas directement à SharePoint. En effet, lorsqu’elle est lancée, elle communique en utilisant des champs de formulaire masqués et une chaîne d’initialisation. Vous pouvez procéder à une simulation dans une page de test, ce qui pourra simplifier votre travail de développement.
L’application que vous allez créer offre deux modes : le mode de présentation et le mode d’édition. La figure 1 représente l’application affichée en mode de présentation.
Figure 1. Application Silverlight en mode de présentation
.jpg "Application Silverlight en mode présentation")
Les figures 2 et 3 représentent l’application affichée en mode d’édition. Comme vous pouvez le constater, dans ce mode, un bouton supplémentaire figure au-dessus de la liste du flux ATOM restitué (ou bien une icône ATOM en rotation, si aucune URL n’a été spécifiée). En cliquant sur ce bouton, l’utilisateur accède à une fenêtre de dialogue modale qui lui permet d’entrer l’URL et le modèle d’affichage. S’il clique sur OK, la boîte de dialogue se referme et l’application est actualisée avec les nouveaux paramètres.
Figure 2. Application Silverlight en mode d’édition avec le bouton
.jpg "Application Silverlight en mode d’édition avec bouton")
Figure 3. Application Silverlight en mode d’édition avec la boîte de dialogue d’édition du flux ATOM
.jpg "Application Silverlight en mode d’édition")
En premier lieu, créez une application. Commencez par créer un projet dans Visual Studio 2010, développez le nœud Visual C#, développez Silverlight, puis sélectionnez le modèle de projet Application Silverlight. Nommez le modèle ATOM Field. Une fois le projet créé, Visual Studio vous invite à créer un projet Web supplémentaire afin d’héberger l’application Silverlight. Créez ce projet et assurez-vous qu’il est de type Site Web ASP.NET.
Lors de la création du projet, vous devez apporter quelques modifications supplémentaires à la configuration du projet. Cliquez avec le bouton droit sur le projet ATOM Field dans la fenêtre de l’outil Explorateur de solutions, puis cliquez sur Propriétés. Sous l’onglet Silverlight, définissez les propriétés ci-dessous en laissant les autres avec leurs valeurs par défaut :
Nom de l’assembly : ATOMField
Espace de noms par défaut : MSDN.SharePoint.Samples.AtomField
Nom de fichier Xap : SharePoint.AtomField.xap
Vous devez ensuite configurer l’initialisation de l’application et définir certaines variables globales dans le fichier code-behind du fichier App.xaml. Cliquez avec le bouton droit sur App.xaml, puis cliquez sur Afficher le code. Mettez à jour l’espace de noms de sorte qu’il corresponde à celui qui était répertorié précédemment. De même, ajoutez trois champs statiques de portée application à la classe App. Ceux-ci permettent de déterminer si l’application est en mode d’édition ou en mode de présentation, et ils fournissent le nom des deux éléments d’entrée HTML de la page qu’elle utilisera pour communiquer avec SharePoint. Ceci est illustré dans le code suivant.
namespace MSDN.SharePoint.Samples.AtomField
{
public partial class App : Application
{
// Application-scoped fields.
public static bool IsEditMode = true;
public static HtmlElement FeedElement = null;
public static HtmlElement TemplateElement = null;
public App()
{
Dans la méthode Application_Startup, ajoutez le code ci-dessous pour extraire la valeurs des paramètres d’initialisation transmis par le contrôle Silverlight de la page et les éléments HTML masqués de la page. Ceci est illustré dans le code suivant.
private void Application_Startup(object sender, StartupEventArgs e)
{
// Initialize the input parameters.
if (e.InitParams != null && e.InitParams.Count > 0) {
// Get the Feed Element ID.
if (e.InitParams.ContainsKey("fid") && !string.IsNullOrEmpty(e.InitParams["fid"]))
FeedElement = HtmlPage.Document.GetElementById(e.InitParams["fid"]);
// Get the Template Element ID.
if (e.InitParams.ContainsKey("tid") && !string.IsNullOrEmpty(e.InitParams["tid"]))
TemplateElement = HtmlPage.Document.GetElementById(e.InitParams["tid"]);
// Get the Enabled state.
if (e.InitParams.ContainsKey("enable"))
Boolean.TryParse(e.InitParams["enable"], out IsEditMode);
}
this.RootVisual = new MainPage();
}
Maintenant que vous avez initialisé l’application, vous pouvez vous concentrer sur l’application proprement dite. Pour créer une application plus modulaire, vous devez créer deux fichiers XAML supplémentaires. L’un d’eux contiendra une icône ATOM en rotation qui s’affiche lorsqu’aucun flux ATOM n’est sélectionné ou que l’application récupère le flux ATOM auprès de la source distante. L’autre sera la boîte de dialogue modale en mode d’édition.
Cliquez avec le bouton droit sur le projet ATOM Field, puis cliquez sur Ajouter et sur Nouvel élément. Sélectionnez le modèle Contrôle utilisateur Silverlight et nommez-le AtomRotator.xaml. Avant de créer l’interface utilisateur pour ce contrôle, vous devez ajouter une icône ATOM au projet. Créez dans le projet un dossier nommé Images, ajoutez-y une icône ATOM (trouvée dans l’exemple associé SharePoint 2010 Silverlight 3 Publishing Field Type (éventuellement en anglais)), et attribuez à l’action de génération de ce fichier la valeur Ressource, comme illustré dans la figure 4.
Figure 4. Action de génération associée à la valeur Ressource
.jpg "Définition de l’action")
Ajoutez le code XAML suivant au fichier AtomRotator.xaml. Son action est double :
il ajoute une animation qui fait constamment pivoter l’image sur elle-même. Celle-ci se trouve dans la section <UserControl.Resources /> ;
il ajoute l’interface utilisateur dans une section <Grid /> pour l’image, centrée horizontalement et verticalement dans un contrôle <Border />.
<UserControl
xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="https://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="https://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
x:Class="MSDN.SharePoint.Samples.AtomField.AtomRotator"
d:DesignWidth="640" d:DesignHeight="480">
<UserControl.Resources>
<Storyboard x:Name="RotateYStoryboard">
<DoubleAnimation Storyboard.TargetName="rotation"
Storyboard.TargetProperty="RotationY"
From="0.0" To="360.0" Duration="0:0:10" RepeatBehavior="Forever" />
</Storyboard>
</UserControl.Resources>
<Grid x:Name="LayoutRoot" Width="200" Height="200">
<Border x:Name="RotatorBorder" Margin="0" BorderThickness="0">
<Image x:Name="AtomImage" Margin="0" Source="Images/ATOM3D.png"
Stretch="Fill" HorizontalAlignment="Center" VerticalAlignment="Center"
Opacity="0.5" Width="200" Height="200">
<Image.Projection>
<PlaneProjection x:Name="rotation" />
</Image.Projection>
</Image>
</Border>
</Grid>
</UserControl>
Bien que l’animation soit créée, vous devez indiquer à l’application quand la démarrer. Dans ce cas, lorsque ce contrôle est affiché, l’animation doit démarrer immédiatement. Pour ce faire, obtenez une référence à la table de montage séquentiel qui contient la définition de l’animation et démarrez-la lors du chargement du contrôle. Cliquez avec le bouton droit sur le fichier, cliquez sur Afficher le code, puis ajoutez le code suivant au constructeur de classe.
public partial class AtomRotator : UserControl
{
public AtomRotator()
{
InitializeComponent();
Storyboard sb = this.FindName("RotateYStoryboard") as Storyboard;
if (sb != null)
sb.Begin();
}
}
Enregistrez toutes les modifications apportées à ces fichiers.
L’étape suivante consiste à créer la boîte de dialogue modale qui s’affiche en mode d’édition. Pour cela, ajoutez un nouvel élément Fenêtre enfant Silverlight au projet nommé AtomEditDialog.xaml. Ce contrôle doit contenir une zone de texte pour l’URL du flux ATOM, ainsi qu’une liste de cases d’option permettant à l’utilisateur d’effectuer un choix parmi les options de rendu disponibles. Ajoutez le balisage ci-dessous au fichier AtomEditDialog.xaml et enregistrez les modifications. Notez que vous n’avez pas besoin d’écrire de code managé pour ce contrôle, car le contrôle d’hébergement se charge de toutes les opérations.
<basics:ChildWindow
xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
xmlns:basics="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"
xmlns:local="clr-namespace:MSDN.SharePoint.Samples.AtomField"
x:Class="MSDN.SharePoint.Samples.AtomField.AtomEditDialog"
Title="ATOM Feed Edit Dialog">
<Grid x:Name="LayoutRoot" Background="White" VerticalAlignment="Top"
Margin="10">
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="80"/>
<ColumnDefinition />
<ColumnDefinition Width="50" />
</Grid.ColumnDefinitions>
<!-- First row of the form. -->
<TextBlock x:Name="UrlTextBlock" Text="Enter URL:" TextWrapping="Wrap"/>
<TextBox x:Name="UrlTextBox" Margin="10,2" TextWrapping="Wrap"
Grid.Column="1"/>
<!-- Second row of the form. -->
<StackPanel Margin="10,2" Grid.Column="1" Grid.Row="1">
<RadioButton x:Name="TitleOnlyRadioButton" Content="Title Only"
IsChecked="True" ToolTipService.ToolTip="Render only the ATOM feed's
post title." />
<RadioButton x:Name="TitleAndDateRadioButton" Content="Title and
Publication Date" ToolTipService.ToolTip="Render the ATOM feed's post
title and publication date." />
<RadioButton x:Name="TitleAndBodyRadioButton" Content="Title,
Publication Date and Body" ToolTipService.ToolTip="Render the ATOM
feed's post title, publication date and body." />
<TextBlock x:Name="MessageTextBlock" Text="TextBlock"
TextWrapping="Wrap" Visibility="Collapsed" Foreground="Red"/>
</StackPanel>
<Button x:Name="CancelButton" Content="Cancel" Click="CancelButton_Click"
Width="75" Height="23" HorizontalAlignment="Right" Grid.Row="2"
Grid.ColumnSpan="3" />
<Button x:Name="OKButton" Content="OK" Click="OKButton_Click" Width="75"
Height="23" HorizontalAlignment="Right" Margin="0,0,79,0" Grid.Row="2"
Grid.ColumnSpan="3" />
</Grid>
</basics:ChildWindow>
Maintenant que vous avez créé les deux contrôles dépendants, vous pouvez passer à l’application principale.
Les applications Silverlight 3 affichent initialement le contrôle MainPage.xaml lorsqu’elles démarrent. Les versions antérieures de Silverlight utilisaient le fichier Page.xaml. C’est dans ce fichier MainPage.xaml (et dans son code-behind associé) que la plupart des opérations se produisent.
La première chose que vous avez à faire est de modifier l’élément de début <UserControl /> qui définit la classe, une référence à l’espace de noms du projet (de sorte que le contrôle de rotation puisse être référencé dans le code XAML), et les dimensions du fichier.
<UserControl
xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="https://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="https://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:MSDN.SharePoint.Samples.AtomField"
x:Class="MSDN.SharePoint.Samples.AtomField.MainPage"
Width="500" Height="500" mc:Ignorable="d">
Vous devez ensuite ajouter l’interface utilisateur pour le contrôle. L’utilisation d’un élément <StackPanel /> s’avère utile, car tous les contrôles seront restitués selon l’ordre dans lequel ils sont déclarés dans le sens vertical.
Dans ce contrôle, ajoutez les éléments suivants :
un élément Button qui s’affiche en mode d’édition et qui sert à ouvrir la boîte de dialogue modale ;
un élément TextBlock qui est masqué sauf si un message d’erreur doit être présenté à l’utilisateur ;
un élément ListBox qui sert à afficher tous les éléments dans le flux ATOM spécifié. Par la suite, vous ajouterez des modèles de rendu au contrôle pour le rendu des éléments du flux ATOM ;
le contrôle d’image en rotation qui s’affiche lorsqu’aucun flux ATOM n’est spécifié ou lorsque le contrôle récupère le flux.
La logique qui gère les éléments qui s’affichent est ajoutée ultérieurement au code-behind du contrôle. Pour le moment, ajoutez simplement le balisage suivant au fichier MainPage.xaml.
<StackPanel x:Name="LayoutRoot" Background="White"
VerticalAlignment="Top" Margin="10">
<Button x:Name="AtomEditDialogButon" Content="Select ATOM Feed &
Rendering Template"
Click="AtomEditDialogButon_Click" Width="250" Height="30" />
<TextBlock x:Name="MessageTextBlock" Foreground="Red" Visibility="Collapsed" />
<ListBox x:Name="AtomItemsListBox" Visibility="Collapsed" Margin="5" />
<local:AtomRotator x:Name="AtomRotator" />
</StackPanel>
Les modèles de rendu facilitent grandement le rendu des éléments du flux ATOM dans le contrôle ListBox. Ces modèles sont appelés modèles de données dans Silverlight. Ils permettent de séparer complètement les données de l’implémentation de l’interface utilisateur. Les modèles de données sont définis en tant que ressources dans une application Silverlight. Ces ressources peuvent être placées à divers emplacements afin de les rendre disponibles dans l’application entière ou d’en limiter la portée à un contrôle spécifique. Dans le cadre de cette application, elles sont utilisées uniquement dans le fichier MainPage.xaml pour pouvoir être ajoutées en tant que ressource de contrôle utilisateur.
Pour ce faire, ajoutez le balisage ci-dessous au fichier MainPage.xaml. Il contient trois contrôles <DataTemplate />, chacun avec un nom unique. Ces contrôles affichent du texte après que les éléments du flux ATOM ont été liés. Pour l’instant, leurs propriétés Text sont vides.
<UserControl>
<UserControl.Resources>
<DataTemplate x:Name="TitleOnlyDataTemplate">
<TextBlock Foreground="#2555F1" Text="" />
</DataTemplate>
<DataTemplate x:Name="TitleAndDateDataTemplate">
<StackPanel Orientation="Vertical">
<TextBlock FontWeight="Bold" Foreground="#2555F1" Text="" />
<StackPanel Orientation="Horizontal">
<TextBlock Foreground="Gray" FontWeight="Bold" FontStyle="Italic"
Text="Published: " />
<TextBlock Foreground="Gray" Text="" />
</StackPanel>
</StackPanel>
</DataTemplate>
<DataTemplate x:Name="TitleAndBodyDataTemplate">
<StackPanel Orientation="Vertical">
<TextBlock FontWeight="Bold" Foreground="#2555F1" Text="" />
<StackPanel Orientation="Horizontal">
<TextBlock Foreground="Gray" FontWeight="Bold" FontStyle="Italic"
Text="Published: " />
<TextBlock Foreground="Gray" Text="" />
</StackPanel>
<TextBlock Width="480" TextWrapping="Wrap" Margin="0,0,15,0"
Text="" />
</StackPanel>
</DataTemplate>
</UserControl.Resources>
<StackPanel />
</UserControl>
Le contenu brut du flux ATOM ne peut pas être utilisé en l’état dans le contrôle. Chaque élément Summary d’un élément ATOM peut contenir du balisage et peut être relativement long. Préalablement à la liaison des données aux contrôles, vous devez supprimer le balisage et afficher uniquement un extrait si le contenu est trop long. Silverlight offre un moyen simple d’y parvenir en utilisant des convertisseurs. Au moment de lier des données à un contrôle, vous pouvez spécifier un convertisseur inscrit qui est utilisé avant d’affecter le contenu au contrôle.
Tout d’abord, créez un convertisseur HTML en ajoutant au projet une nouvelle classe nommée HtmlConverter.cs. Ajoutez le code suivant au fichier.
using System;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Data;
using System.Globalization;
using System.Text.RegularExpressions;
using System.Windows.Browser;
namespace MSDN.SharePoint.Samples.AtomField {
public class HtmlConverter : IValueConverter {
public object Convert (object value, Type targetType, object param, CultureInfo ci) {
// Strip out all tags.
string result = Regex.Replace(value as string, "<.*?>", "");
result = HttpUtility.HtmlDecode(result);
// Trim to only show the first 160 characters.
if (result.Length > 160)
result = String.Format("{0}...", result.Substring(0, 160));
// Remove newlines.
result = result.Replace(Environment.NewLine, string.Empty);
result = result.Replace("\n", string.Empty);
return result;
}
public object ConvertBack (object value, Type targetType, object param,
CultureInfo ci) {
throw new NotImplementedException();
}
}
}
Revenez au fichier MainPage.xaml, puis ajoutez un élément qui fasse référence à la classe HtmlConverter dans la section des ressources du contrôle utilisateur. Ceci est illustré dans l’exemple suivant.
<UserControl.Resources>
<!-- Declare converter. -->
<local:HtmlConverter x:Key="HtmlConverter" />
Désormais, le convertisseur peut être appelé pendant la liaison de données.
La dernière étape consiste à ajouter la notation de liaison de données aux contrôles situés à l’intérieur des trois éléments <DataTemplate /> définis dans l’élément <UserControl.Resources />. L’exemple suivant montre comment effectuer cette opération pour le dernier élément répertorié sous le nom TitleAndBodyDataTemplate et indique comment utiliser le convertisseur personnalisé. Appliquez des notations de liaison similaires aux attributs Text des autres contrôles figurant dans les deux autres modèles.
<DataTemplate x:Name="TitleAndBodyDataTemplate">
<StackPanel Orientation="Vertical">
<TextBlock FontWeight="Bold" Foreground="#2555F1" Text="{Binding
Title.Text, Converter={StaticResource HtmlConverter}}" />
<StackPanel Orientation="Horizontal">
<TextBlock Foreground="Gray" FontWeight="Bold" FontStyle="Italic"
Text="Published: " />
<TextBlock Foreground="Gray" Text="{Binding PublishDate}" />
</StackPanel>
<TextBlock Width="480" TextWrapping="Wrap" Margin="0,0,15,0"
Text="{Binding Summary.Text, Converter={StaticResource
HtmlConverter}}" />
</StackPanel>
</DataTemplate>
À ce stade, l’interface utilisateur de l’application est terminée. Vous allez ensuite ajouter la logique nécessaire à l’application.
Maintenant que l’interface utilisateur est terminée, le moment est venu d’ajouter du code pour la faire fonctionner. Cette opération s’effectue dans le fichier code-behind du fichier MainPage.xaml. Cliquez avec le bouton droit sur ce fichier dans l’Explorateur de solutions, puis cliquez sur Afficher le code.
Dans la mesure où le projet va utiliser des flux ATOM, pour simplifier le développement, ajoutez une référence au projet dans un assembly que Microsoft a inclus dans le Microsoft .NET Framework sous le nom System.ServiceModel.Syndication. Celui-ci gère la sérialisation et la désérialisation du flux ATOM, si bien que vous n’avez pas besoin d’écrire du code XML complexe pour assurer ces opérations.
Avant de poursuivre, quelques champs de portée classe sont nécessaires. Ajoutez les champs suivants après la déclaration de la classe MainPage, comme dans l’exemple suivant.
// Sync context for threading.
private SynchronizationContext _syncContext;
// Remote feed.
private SyndicationFeed _atomFeed;
// Fields to hold values.
private string _atomFeedUrl = string.Empty;
private string _dataTemplateSelected = string.Empty;
Lors du chargement de l’application, vous devez dans un premier temps initialiser l’interface utilisateur. Cela consiste à lire les valeurs des deux éléments HTML de la page Web d’hébergement qui indiqueront à l’application l’URL du flux ATOM à récupérer et le modèle de données sélectionné. Si un flux est spécifié, la méthode GetAtomFeed est appelée pour récupérer le flux ATOM et le lier à l’interface utilisateur. Si aucun flux n’est spécifié, le contrôle de rotation de l’icône ATOM s’affiche.
Enfin, vous définissez la propriété Visibility du bouton ouvre la boîte de dialogue modale, en fonction de l’état actuel de la page : mode d’édition ou mode d’affichage.
Ajoutez le code suivant au constructeur de classe.
public MainPage () {
// Required to initialize variables.
InitializeComponent();
// Validate incoming data.
if (App.FeedElement != null) {
if (App.FeedElement.GetProperty("Value") != null && App.FeedElement.GetProperty("Value").ToString().Length > 0) {
_atomFeedUrl = App.FeedElement.GetProperty("Value").ToString();
// Initialize the data template selected.
if (App.TemplateElement != null)
_dataTemplateSelected = App.TemplateElement.GetProperty("Value").ToString();
if (string.IsNullOrEmpty(_dataTemplateSelected.Trim()))
_dataTemplateSelected = "Title";
// Retrieve feed.
GetAtomFeed();
}
} else // Else, show the rotator.
GetRotator();
if (!App.IsEditMode) {
// Hide the button and maximize the display window.
AtomEditDialogButon.Visibility = Visibility.Collapsed;
} else {
// Show the button.
AtomEditDialogButon.Visibility = Visibility.Visible;
}
}
La méthode GetRotator masque simplement le contrôle ListBox qui affiche les éléments du flux ATOM et affiche le contrôle de rotation que vous avez créé précédemment.
private void GetRotator () {
AtomItemsListBox.Visibility = Visibility.Collapsed;
AtomRotator.Visibility = Visibility.Visible;
}
L’étape suivante consiste à écrire le code (GetAtomFeed) destiné à récupérer le flux ATOM de manière asynchrone. Le déclenchement de la réponse appelle une méthode de rappel (BeginResponse) qui récupère le flux ATOM. Si l’appel aboutit, il publie la réponse sur le thread d’interface utilisateur dont GetAtomFeed a obtenu une référence, car les appels du réseau ne peuvent pas exister sur le même thread que l’interface utilisateur dans Silverlight.
private void GetAtomFeed () {
// Show rotator animation...
GetRotator();
// Get the sync context while on UI thread.
_syncContext = SynchronizationContext.Current;
// Get URL of the ATOM feed.
string atomFeedUrl = HttpUtility.HtmlEncode(_atomFeedUrl);
// Get the feed.
HttpWebRequest request = HttpWebRequest.Create(new Uri(atomFeedUrl)) as HttpWebRequest;
request.BeginGetResponse(BeginResponse, request);
}
private void BeginResponse (IAsyncResult result) {
HttpWebRequest request = result.AsyncState as HttpWebRequest;
HttpWebResponse response = request.EndGetResponse(result) as HttpWebResponse;
if (response.StatusCode == HttpStatusCode.OK)
_syncContext.Post(ExtractResponse, response);
}
Lorsque la réponse HTTP est publiée sur le thread d’interface utilisateur, il appelle une autre méthode, ExtractResponse, qui lit le contenu du flux ATOM dans un objet SyndicationFeed. Il appelle ensuite une méthode SetListBoxDataTemplate qui affecte à ListBox le modèle de rendu sélectionné et lie les résultats.
private void ExtractResponse (object state) {
HttpWebResponse response = state as HttpWebResponse;
if (response != null && response.StatusCode == HttpStatusCode.OK) {
XmlReader reader = XmlReader.Create(response.GetResponseStream());
_atomFeed = SyndicationFeed.Load(reader);
if (App.FeedElement != null)
App.FeedElement.SetProperty("Value", _atomFeedUrl);
// Set the data template selected.
SetListBoxDataTemplate();
} else {
// An error occurred in retrieving the feed so display an error.
string message = string.Empty;
using (StreamReader reader = new StreamReader(response.GetResponseStream())) {
message = reader.ReadToEnd();
}
MessageTextBlock.Text = string.Format("An error occured in retrieving the feed: {0}", message);
MessageTextBlock.Visibility = Visibility.Visible;
}
}
private void SetListBoxDataTemplate () {
if (_atomFeed != null) {
AtomItemsListBox.ItemsSource = null;
switch (_dataTemplateSelected) {
case "TitleAndDate":
AtomItemsListBox.ItemTemplate = Resources["TitleAndDateDataTemplate"] as DataTemplate;
break;
case "TitleAndBody":
AtomItemsListBox.ItemTemplate = Resources["TitleAndBodyDataTemplate"] as DataTemplate;
break;
default:
AtomItemsListBox.ItemTemplate = Resources["TitleOnlyDataTemplate"] as DataTemplate;
break;
}
if (App.TemplateElement != null)
App.TemplateElement.SetProperty("Value", _dataTemplateSelected);
// Bind the data.
AtomItemsListBox.ItemsSource = _atomFeed.Items;
AtomItemsListBox.Visibility = Visibility.Visible;
// Hide the rotator.
AtomRotator.Visibility = Visibility.Collapsed;
}
}
Notez que le contrôle de rotation de l’image ATOM est masqué dès lors que le contrôle ListBox s’affiche, dans la mesure où les éléments du flux ATOM sont liés au contrôle ListBox.
La dernière étape de modification de l’interface utilisateur consiste à créer un gestionnaire d’événements pour le clic de bouton en mode d’édition. Pour ce faire, vous devez créer une instance du contrôle de boîte de dialogue, relier l’événement, initialiser les valeurs du contrôle, puis afficher la boîte de dialogue. Ceci est illustré dans le code suivant.
private void AtomEditDialogButon_Click (object sender, System.Windows.RoutedEventArgs e) {
AtomEditDialog atomEditorDialog = new AtomEditDialog();
// Wire up closed event.
atomEditorDialog.Closed += AtomEditorDialog_Closed;
// Initialize.
atomEditorDialog.UrlTextBox.Text = _atomFeedUrl;
atomEditorDialog.TitleOnlyRadioButton.IsChecked = _dataTemplateSelected ==
"Title" ? true : false;
atomEditorDialog.TitleAndDateRadioButton.IsChecked = _dataTemplateSelected
== "TitleAndDate" ? true : false;
atomEditorDialog.TitleAndBodyRadioButton.IsChecked = _dataTemplateSelected
== "TitleAndBody" ? true : false;
atomEditorDialog.Show();
}
Le gestionnaire d’événements Closed se déclenche après que l’utilisateur clique sur le bouton OK ou sur le bouton Annuler de la boîte de dialogue modale. Si l’utilisateur a cliqué sur OK, l’URL du flux est récupérée et actualisée en rappelant GetAtomFeed, en modifiant le modèle de données qui a été sélectionné, puis en actualisant l’interface utilisateur. Ceci est illustré dans le code suivant.
protected void AtomEditorDialog_Closed (object sender, EventArgs e) {
AtomEditDialog atomEditorDialog = (AtomEditDialog)sender;
// If clicked cancel, do nothing.
if (atomEditorDialog.DialogResult == false)
return;
// Set values of text boxes.
if (_atomFeedUrl != atomEditorDialog.UrlTextBox.Text) {
_atomFeedUrl = atomEditorDialog.UrlTextBox.Text;
GetAtomFeed();
}
if ((bool)atomEditorDialog.TitleOnlyRadioButton.IsChecked)
_dataTemplateSelected = "Title";
if ((bool)atomEditorDialog.TitleAndDateRadioButton.IsChecked)
_dataTemplateSelected = "TitleAndDate";
if ((bool)atomEditorDialog.TitleAndBodyRadioButton.IsChecked)
_dataTemplateSelected = "TitleAndBody";
// Update UI.
SetListBoxDataTemplate();
}
À ce stade, l’application Silverlight est terminée. Générez le projet et corrigez les erreurs éventuellement signalées. Ensuite, vous allez tester l’application avant de l’intégrer dans SharePoint.
L’identification et la résolution des problèmes s’avèrent beaucoup plus faciles lorsque l’application Silverlight 3 est testée en dehors de SharePoint. À défaut, vous devez d’abord déterminer si l’erreur provient de SharePoint ou de Silverlight.
Dans le projet Web créé par Visual Studio, vous trouverez un fichier HTML et quelques autres fichiers. Ouvrez le fichier HTML et accédez à la section <body>. Visual Studio a ajouté le lecteur Silverlight et a défini quelques paramètres. Pour tester l’application créée précédemment, vous devez apporter certaines modifications.
Tout d’abord, créez les deux champs masqués HTML qui contiendront l’URL du flux ATOM et le modèle sélectionné. Ajoutez le balisage suivant n’importe où dans la page, hormis dans l’élément <object />.
<input type="hidden" id="AtomFeedValueField" Value="" />
<input type="hidden" id="TemplateValueField" Value="" />
À présent, assurez-vous que la balise <object /> fait référence au fichier d’application Silverlight approprié dans le paramètre source. Pour notre exemple, il doit se présenter comme suit.
<param name="source" value="ClientBin/SharePoint.AtomField.xap"/>
La dernière étape consiste à ajouter un nouveau paramètre nommé initParams qui transmet les valeurs dans l’application Silverlight. Rappelez-vous que le fichier App.xaml.cs contient à présent du code qui recherche des valeurs spécifiques. Ces valeurs indiquent à l’application Silverlight les éléments HTML de la page qui contiennent les valeurs que l’application doit utiliser.
<param name="initParams" value="fid=AtomFeedValueField,tid=TemplateValueField,enable=true" />
Enregistrez toutes les modifications. L’application peut maintenant être testée. Pour commencer, testez-la en mode d’édition (lorsque enable=true dans le paramètre initParams). Cliquez avec le bouton droit sur le page HTML, puis cliquez sur Afficher dans le navigateur. Cette commande lance l’application dans une nouvelle fenêtre de navigateur, ce qui vous permet d’interagir avec elle et de la tester pour vous assurer que tout fonctionne correctement.
Figure 5. Test de l’application en mode d’édition
.jpg "Test de l’application en mode d’édition")
À présent, testez l’application en mode d’affichage. Pour cela, modifiez les éléments HTML pour permettre l’affichage du contenu d’un flux ATOM et spécifiez le modèle TitleAndDate.
<input type="hidden" id="AtomFeedValueField" Value="http://feeds.feedburner.com/AndrewConnell" />
<input type="hidden" id="TemplateValueField" Value="TitleAndDate" />
Notes
L’application qui a été créée partait du principe que les flux étaient accessibles par le biais de Silverlight. Pour les rendre accessibles, il convient d’ajouter un fichier XML spécial à la racine d’un site qui contient les ressources auxquelles l’application accède. À défaut, Silverlight peut accéder uniquement aux ressources du site qui contient la page qui a lancé l’application. Pour plus d’informations, voir Making a Service Available Across Domain Boundaries. Dans l’exemple du présent article, le site http://feeds.feedburner.com contient déjà ce fichier. Toutefois, cela n’est peut-être pas le cas sur d’autres sites. Il existe une solution qui consiste à utiliser un service proxy ATOM, tel que Yahoo Pipes (http://pipes.yahoo.com/pipes), qui comprend ce fichier. Cependant, l’utilisation d’un service proxy ATOM n’entre pas dans le cadre de cet article.
Par ailleurs, faites passer la valeur du paramètre initParams de enabled à false pour démarrer en mode d’affichage.
<param name="initParams" value="fid=AtomFeedValueField,tid=TemplateValueField,enable=false" />
Enregistrez le fichier et réexécutez le test en cliquant avec le bouton droit sur le fichier HTML, puis en cliquant sur Afficher dans le navigateur, comme illustré dans la figure 6.
Figure 6. Test de l’application en mode d’affichage
.jpg "Test de l’application en mode d’affichage")
Maintenant que l’application Silverlight est créée et testée, vous pouvez l’intégrer dans SharePoint.
Avec SharePoint configuré, il est temps à présent de créer le type et le contrôle de champ personnalisés. En utilisant la solution Visual Studio existante, développez le nœud Visual C# et SharePoint 2010, puis sélectionnez le Projet SharePoint vide nommé AtomFieldType. À présent, apportez les modifications suivantes au projet pour le configurer en tant que projet SharePoint :
Cliquez avec le bouton droit sur le projet AtomFieldType dans l’Explorateur de solutions, puis cliquez sur Propriétés.
Sous l’onglet Application, définissez les valeurs suivantes :
Nom de l’assembly : MSDN.SharePoint.Samples.AtomField
Espace de noms par défaut : MSDN.SharePoint.Samples.AtomField
Sous l’onglet .NET de la boîte de dialogue Ajouter une référence, ajoutez une référence d’assembly à System.Web.
Dans un premier temps, vous allez créer le type de champ personnalisé. Pour ce faire, créez un fichier de classe C# à la racine du projet AtomFieldType nommé AtomField.cs. Ajoutez le code ci-après au fichier AtomField.cs, en notant que la classe hérite du type de champ SPFieldMultiColumn, qui permet le stockage d’un tableau délimité dans une colonne unique de la base de données. L’analyse de ce tableau est assurée par une classe value de champ personnalisé que vous allez créer ensuite, comme indiqué dans le code suivant.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using Microsoft.SharePoint;
using Microsoft.SharePoint.WebControls;
namespace MSDN.SharePoint.Samples.AtomField {
public class AtomField : SPFieldMultiColumn {
public AtomField (SPFieldCollection fields, string fieldName)
: base(fields, fieldName) { }
public AtomField (SPFieldCollection fields, string typeName, string displayName)
: base(fields, typeName, displayName) { }
public override BaseFieldControl FieldRenderingControl {
get {
BaseFieldControl fieldControl = new AtomFeedControl { FieldName =
InternalName };
return fieldControl;
}
}
}
Le but de l’objet value de champ personnalisé que vous allez créer est double. En premier lieu, cette classe indique à SharePoint à quel emplacement se situe une valeur déterminée dans le tableau délimité. En second lieu, il s’agit d’une classe fortement typée qui est renvoyée à quiconque accédant à la valeur de ce champ à l’aide de l’API SharePoint.
Créez un fichier de classe C# nommé AtomFieldValue.cs, puis ajoutez-y le code suivant.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using Microsoft.SharePoint;
using Microsoft.SharePoint.WebControls;
namespace MSDN.SharePoint.Samples.AtomField {
public class AtomFieldValue : SPFieldMultiColumnValue {
private const int NUMBER_OF_FIELDS = 2;
public AtomFieldValue ()
: base(NUMBER_OF_FIELDS) { }
public AtomFieldValue (string value)
: base(value) { }
public string AtomFeedUrl {
get { return this[0]; }
set { this[0] = value; }
}
public string AtomTemplate {
get { return this[1]; }
set { this[1] = value; }
}
}
}
Cette classe doit être reliée à la classe du type de champ. Pour ce faire, ignorez la méthode GetFieldValue de la classe AtomField, puis renvoyez une instance du nouvel objet value, comme illustré dans le code suivant.
public override object GetFieldValue (string value) {
if (string.IsNullOrEmpty(value))
return null;
return new AtomFieldValue(value);
}
Vous allez créer le rendu personnalisé du champ personnalisé à l’aide d’un contrôle de champ personnalisé. Les contrôles de champ personnalisés ont deux composantes : une classe que SharePoint utilise pour obtenir toutes les informations qui nécessitent une interaction avec le contrôle de champ, et un champ *.ascx qui contient un modèle de rendu qui définit le rendu de l’interface utilisateur.
Dans un premier temps, créez un dossier mappé en cliquant avec le bouton droit sur le projet AtomFieldType, cliquez sur Ajouter, puis sur Dossier mappé SharePoint. Sélectionnez le dossier {SharePointRoot}\TEMPLATE\CONTROLTEMPLATES. Visual Studio ajoute automatiquement un sous-dossier contenant le nom du projet. Bien qu’il s’agisse de la méthode généralement recommandée, les modèles de rendu de contrôle de champ personnalisé doivent être placés à la racine du dossier CONTROLTEMPALTES. Par conséquent, supprimez le sous-dossier créé par Visual Studio. Créez ensuite le modèle de rendu en créant un fichier à l’aide du modèle Fichier texte, nommez-le SilverlightAtomFieldControl.ascx, puis enregistrez-le dans le dossier CONTROLTEMPLATES du projet.
Ajoutez le balisage ci-après au fichier. Comme vous pouvez le constater, il contient les deux éléments masqués HTML qui seront utilisés pour communiquer avec l’application Silverlight 3 que vous avez créée précédemment.
<%@ Control Language="C#" %>
<%@ Assembly Name="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register TagPrefix="SharePoint" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" Namespace="Microsoft.SharePoint.WebControls" %>
<SharePoint:RenderingTemplate id="SilverlightAtomFieldControl" runat="server">
<Template>
<asp:HiddenField ID="AtomFeedValueField" runat="server" />
<asp:HiddenField ID="TemplateValueField" runat="server" />
<asp:Panel ID="SilverlightPanel" runat="server" />
</Template>
</SharePoint:RenderingTemplate>
Avant de créer le fichier de classe qui contiendra le contrôle de champ personnalisé, l’étape suivante consiste à ajouter les fichiers auxquels le contrôle fera référence. Tout d’abord, créez un dossier mappé. Cliquez avec le bouton droit sur le projet AtomFieldType, cliquez sur Ajouter, puis sur Dossier mappé « Dispositions » SharePoint. Placez les deux fichiers dans le dossier mappé LAYOUTS\AtomFieldType du projet. Les deux fichiers se présentent de la façon suivante :
SharePoint.AtomField.xap Il s’agit de l’application Silverlight 3 que vous avez créée précédemment.
Dans le projet SilverlightATOM Field, modifiez le chemin de sortie de la génération de sorte qu’elle pointe vers le dossier de dispositions mappées que vous venez de créer. Générez le projet Silverlight. Dans la fenêtre de l’outil Explorateur de solutions, sélectionnez le projet AtomFieldType, puis cliquez sur Afficher tous les fichiers. Le fichier *.xap apparaît alors dans le sous-dossiers mappé LAYOUTS. Cliquez avec le bouton droit sur le fichier, puis cliquez sur Inclure dans le projet. Cela garantit que le gestionnaire de package inclura le fichier dans le processus de création de package et de déploiement. Cliquez avec le bouton droit sur Afficher tous les fichiers pour masquer les fichiers qui ne seront pas inclus dans le projet.
SharePointSilverlightUtility.js Il s’agit d’une bibliothèque JavaScript personnalisée qui facilite l’écriture du plug-in Silverlight avec ses paramètres associés.
Notes
La bibliothèque JavaScript est fournie dans l’exemple SharePoint 2010 Silverlight 3 Publishing Field Type (éventuellement en anglais).
Créez à présent la classe qui contiendra l’objet de contrôle de champ personnalisé. Créez un fichier de classe C# nommé AtomFieldControl.cs à la racine du projet. Ce fichier crée la communication entre l’application Silverlight 3 et le type de champ. Commencez par ajouter le code de la classe comme suit.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using Microsoft.SharePoint;
using Microsoft.SharePoint.WebControls;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace MSDN.SharePoint.Samples.AtomField {
public class AtomFeedControl : BaseFieldControl {
}
}
À présent, ajoutez des constantes et des contrôles Web à la classe. Les contrôles Web sont utilisés comme références aux contrôles dans le modèle de rendu que vous avez défini précédemment dans le fichier *.ascx.
public class AtomFeedControl : BaseFieldControl {
private const string RENDERING_TEMPLATE = "SilverlightAtomFieldControl";
private const string RESOURCE_ROOT = "~/_layouts/SharePointAtomField";
private LiteralControl _silverlightHost;
private HiddenField _atomFeedValueField;
private HiddenField _dataTemplateValueField;
private Panel _silverlightPanel;
}
L’étape suivante, l’une des plus importantes, consiste à ignorer la méthode CreateChildControls, qui agit sur deux plans. Tout d’abord, elle établit des références aux contrôles Web définis dans le fichier *.ascx. Elle génère ensuite l’JavaScript qui créera la référence au plug-in Silverlight 3, ainsi que ses paramètres. Cet JavaScript est écrit dans la page à l’aide d’un LiteralControl qui est ajouté à la collection Controls du contrôle de champ.
protected override void CreateChildControls () {
if (Field == null || ControlMode == SPControlMode.Invalid)
return;
base.CreateChildControls();
// Get references to controls.
_atomFeedValueField = TemplateContainer.FindControl("AtomFeedValueField")
as HiddenField;
if (_atomFeedValueField == null)
throw new ArgumentNullException("ATOM feed field not found. Corrupt
control template.");
_dataTemplateValueField =
TemplateContainer.FindControl("TemplateValueField") as HiddenField;
if (_dataTemplateValueField == null)
throw new ArgumentNullException("Data template field not found. Corrupt
control template.");
_silverlightPanel = TemplateContainer.FindControl("SilverlightPanel") as Panel;
if (_silverlightPanel == null)
throw new ArgumentNullException("Silverlight host not found. Corrupt
control template.");
// Fill in Silverlight host.
string xapURL = String.Format("{0}/SharePoint.AtomField.xap",
RESOURCE_ROOT);
string enable = ControlMode == SPControlMode.Display ? "false" : "true";
string initParams = string.Format("fid={0},tid={1},enable={2}",
_atomFeedValueField.ClientID,
_dataTemplateValueField.ClientID,
enable);
string silverlightHost = string.Format("<script type=\"text/javascript\">"
+ "createSL('silverlightHost','500','500','{0}','{1}');"
+ "</script>",
xapURL, initParams);
_silverlightHost = new LiteralControl(string.Format("<div
id=\"silverlightHost\" style=\"width:100%;height:100%\" />{0}",
silverlightHost));
Controls.Add(_silverlightHost);
}
Pour utiliser les fonctions incluses dans la bibliothèque JavaScript, la page active doit y faire référence. Pour ce faire, vous pouvez utiliser le ClientScriptManager dans la méthode OnPreRender de la page, à l’image du code suivant.
protected override void OnPreRender (EventArgs e) {
base.OnPreRender(e);
// Register the Silverlight 3 utility script on the page.
Page.ClientScript.RegisterClientScriptInclude("SharePointSilverlightUtility",
string.Format("{0}/SharePointSilverlightUtility.js", RESOURCE_ROOT));
}
Ensuite, ignorez deux propriétés et une méthode que SharePoint appellera au moment de restituer le contrôle de champ. Pour ce faire, indiquez à SharePoint l’ID du modèle de rendu (qu’il trouvera dans un fichier *.ascx) et ce à quoi il fera appel lorsque le contrôle de champ sera restitué en mode d’affichage.
protected override string DefaultTemplateName {
get { return RENDERING_TEMPLATE; }
}
public override string DisplayTemplateName {
get { return RENDERING_TEMPLATE; }
}
protected override void RenderFieldForDisplay (HtmlTextWriter output) {
if (ItemFieldValue != null) {
AtomFieldValue fieldValue = new AtomFieldValue(ItemFieldValue.ToString());
if (_atomFeedValueField != null) {
_atomFeedValueField.Value = fieldValue.AtomFeedUrl;
_atomFeedValueField.RenderControl(output);
}
_dataTemplateValueField.Value = fieldValue.AtomTemplate;
}
base.RenderFieldForDisplay(output);
}
Ignorez la propriété Value que SharePoint utilisera pour définir les valeurs éventuellement présentes dans le contrôle de champ lors du chargement de la page, et pour extraire la valeur des contrôles Web lors de l’enregistrement de la page.
public override object Value {
get {
EnsureChildControls();
AtomFieldValue fieldValue = new AtomFieldValue();
// Set the ATOM feed URL.
if (_atomFeedValueField != null && !string.IsNullOrEmpty(_atomFeedValueField.Value))
fieldValue.AtomFeedUrl = _atomFeedValueField.Value;
// Set the data template that is selected.
if (_dataTemplateValueField != null && !string.IsNullOrEmpty(_dataTemplateValueField.Value))
fieldValue.AtomTemplate = _dataTemplateValueField.Value;
return fieldValue;
}
set {
EnsureChildControls();
if (value != null && !string.IsNullOrEmpty(value.ToString())) {
AtomFieldValue fieldValue = new AtomFieldValue(value.ToString());
_atomFeedValueField.Value = fieldValue.AtomFeedUrl;
_dataTemplateValueField.Value = fieldValue.AtomTemplate;
}
}
}
La dernière étape consiste à relier le contrôle de champ personnalisé à la classe de type de champ. Pour cela, vous devez ignorer la propriété FieldRenderingControl de l’objet AtomField.
public override BaseFieldControl FieldRenderingControl {
get {
BaseFieldControl fieldControl = new AtomFeedControl { FieldName = InternalName };
return fieldControl;
}
}
SharePoint a besoin d’être informé du déploiement du type de champ personnalisé, ce qui arrive lorsque le serveur Web est redémarré. Au moment du chargement, SharePoint examine tous les fichiers nommés fldtypes*.xml situés dans le dossier [..]\14\TEMPLATE\XML du serveur. Un fichier fldtypes*.xml contient des métadonnées concernant le type de fichier, l’assembly qui contient le type de fichier, ainsi que le nom complet de la classe de type de fichier.
Dans un premier temps, créez un dossier mappé en cliquant avec le bouton droit sur le projet AtomFieldType, cliquez sur Ajouter, puis sur Dossier mappé SharePoint. Sélectionnez le dossier {SharePointRoot}\TEMPLATE\XML. Visual Studio ajoute automatiquement un sous-dossier contenant le nom du projet. Comme pour le dossier CONTROLTEMPLATES évoqué précédemment, il s’agit généralement de la méthode recommandée. Or, dans ce cas, le fichier XML doit être placé à la racine du dossier XML. Par conséquent, supprimez le sous-dossier créé par Visual Studio. Créez ensuite un nouveau fichier XML sous le nom fldtypes_MSDNSHarePointSilverlight.xml dans le dossier XML du projet, puis ajoutez le balisage suivant.
<?xml version="1.0" encoding="utf-8" ?>
<FieldTypes>
<FieldType>
<Field Name="TypeName">AtomFeedField</Field>
<Field Name="ParentType">MultiColumn</Field>
<Field Name="TypeDisplayName">ATOM Feed Picker</Field>
<Field Name="TypeShortDescription">ATOM Feed picker</Field>
<Field Name="UserCreatable">TRUE</Field>
<Field Name="ShowInListCreate">TRUE</Field>
<Field Name="ShowInSurveyCreate">TRUE</Field>
<Field Name="ShowInDocumentLibraryCreate">TRUE</Field>
<Field Name="ShowInColumnTemplateCreate">TRUE</Field>
<Field Name="FieldTypeClass">MSDN.SharePoint.Samples.AtomField.AtomField, $SharePoint.Project.AssemblyFullName$</Field>
<RenderPattern Name="DisplayPattern">
<Switch>
<Expr>
<Column />
</Expr>
<Case Value="" />
<Default>
<Column SubColumnNumber="0" HTMLEncode="TRUE" />
<HTML><![CDATA[, ]]></HTML>
<Column SubColumnNumber="1" HTMLEncode="TRUE" />
</Default>
</Switch>
</RenderPattern>
</FieldType>
</FieldTypes>
Comme vous pouvez le constater, un jeton est utilisé parmi les jetons remplaçables de la définition FieldTypeClass. Ces jetons simplifient la création de composants personnalisés dans les projets SharePoint. Pour obtenir la liste de tous les jetons remplaçables, voir Replaceable Parameters. Dans ce cas, une modification est apportée au fichier de projet *.csproj pour s’assurer que les fichiers *.xml font partie intégrante du processus de remplacement de jetons.
À ce stade, le type et le contrôle de champ personnalisés sont terminés. Les étapes restantes consistent à créer un package, à déployer, installer, implémenter et tester le type et le contrôle de champ personnalisés, ainsi que l’application Silverlight 3. Le projet final doit ressembler à la figure 7.
Figure 7. Aspect final du projet
.jpg "Apparence finale du projet")
Le déploiement des types et des contrôles de champs personnalisés est d’une grande simplicité lorsque vous utilisez les Outils de développement SharePoint dans Microsoft Visual Studio 2010 : il vous suffit de cliquer avec le bouton droit sur le projet et de cliquer sur Déployer. Cependant, vous devez résoudre un problème avant d’effectuer cette opération. Lorsque vous déployez des types de champs personnalisés avec les contrôles de champs associés en vue de les utiliser dans un SharePoint Foundation 2010, vous n’avez besoin de rien d’autre. En revanche, si vous avez l’intention de les utiliser dans un site de publication SharePoint, vous devez ajouter une entrée de contrôle sécurisé au fichier web.config de l’application Web d’hébergement. En règle générale, cette opération est effectuée par les outils de développement SharePoint. Or, ils ne sont pas configurés pour le faire avec les types et les contrôles de champs personnalisés. Cependant, du fait de la nature très extensible des outils, il s’agit d’une tâche relative simple.
Pour ouvrir le Concepteur de packages, cliquez avec le bouton droit sur le nœud Package du projet, puis cliquez sur Concepteur de vues. Cliquez ensuite sur l’onglet Manifeste au bas de la page, puis cliquez sur le contrôle [+] Options de modification. Les modifications entrées dans la zone blanche du Modèle de manifeste seront fusionnées avec ce que les outils génèrent automatiquement. Pour que les outils comportent une entrée de contrôle sécurisé pour l’assembly, celui-ci doit être entièrement dupliqué et comporter l’entrée de contrôle sécurisé, à l’image de l’exemple suivant.
<?xml version="1.0" encoding="utf-8"?>
<Solution xmlns="https://schemas.microsoft.com/sharepoint/">
<Assemblies>
<Assembly Location="AtomFieldType.dll" DeploymentTarget="GlobalAssemblyCache">
<SafeControls>
<SafeControl Namespace="MSDN.SharePoint.Samples.AtomField" Safe="True" TypeName="*" />
</SafeControls>
</Assembly>
</Assemblies>
</Solution>
Notez que dans la partie supérieure de la fenêtre, les modifications sont présentées dans l’Aperçu du manifeste ajouté au package.
À présent, déployez le type de champ personnalisé en cliquant avec le bouton droit sur le projet AtomFieldType, puis en sélectionnant Déployer.
Le type et le contrôle de champ personnalisés sont maintenant déployés, installés et prêts à être utilisés dans un site SharePoint.
Test du type de champ personnalisé, du contrôle de champ personnalisé et de l’application Silverlight 3
Même si le type de champ personnalisé, le contrôle de champ personnalisé et l’application Silverlight 3 peuvent être utilisés dans un site Microsoft SharePoint Foundation 2010, vous allez utiliser un site de publication oss14long.
Accédez à un site de publication et naviguez jusqu’à la bibliothèque de types de contenu du site (dans le menu Actions du site, cliquez sur Paramètres du site puis, dans la section Galeries, cliquez sur le lien Types de contenu de site).
Recherchez le type de contenu Page d’article, puis ajoutez-y une colonne de site. Vous devez nommer cette dernière ATOM Feed, et elle doit utiliser le type de champ ATOM Feed Picker.
Après avoir ajouté le nouveau champ au type de contenu, créez une nouvelle disposition de page en l’associant au type de contenu Page d’article. Démarrez SharePoint Designer 2010, puis ouvrez le site de publication qui contient la nouvelle colonne de site. Dans la section Navigation, dans Objets du site, cliquez sur Dispositions de page. Ensuite, cliquez sur le bouton Nouvelle mise en page du Ruban. Dans la boîte de dialogue Nouveau qui s’ouvre, sélectionnez le type de contenu Page d’article dans la liste.
Faites glisser le champ ATOM Feed de la Boîte à outils vers la disposition de page que vous avez créée. Si la Boîte à outils n’est pas visible, sous l’onglet Insertion du Ruban, cliquez sur SharePoint, puis sur Afficher la boîte à outils. Enregistrez les modifications dans le fichier, archivez le fichier, puis publiez les modifications.
Dans le navigateur, créez une page en utilisant la nouvelle disposition de page. Une fois la page créée, le navigateur doit l’afficher en mode d’édition. Le nouveau contrôle de champ doit s’afficher avec l’icône ATOM en rotation, comme l’illustre la figure 8.
Figure 8. Contrôle de champ avec l’icône ATOM en rotation
.jpg "Contrôle de champ avec icône ATOM rotative")
Cliquez sur le bouton, puis tapez l’URL d’un flux ATOM connu. Cliquez sur le bouton Titre et date de publication, puis sur OK. La page doit à présent afficher les éléments restitués du flux ATOM. Enfin, archivez la page, dans laquelle le bouton du mode d’édition est masqué, car elle est à présent en mode de présentation, comme l’illustre la figure 9.
Figure 9. Page en mode de présentation
.jpg "Page en mode présentation")
Cet article montre comment créer un type et un contrôle de champ personnalisés en vue de les utiliser dans un site SharePoint. SharePoint offre aux développeurs les moyens de créer des types et des contrôles de champs personnalisés lorsque les options natives en matière de stockage de champ et de rendu pour les modes d’affichage et d’édition ne répondent pas aux besoins métiers. De plus, cet article indique comment utiliser Microsoft Silverlight 3 pour créer un affichage personnalisé et une expérience d’édition enrichie et attrayante pour l’utilisateur. Dans le cadre de ce processus, cet article aborde également les conditions de mise à jour des applications Web SharePoint pour l’hébergement d’applications Silverlight 3.
Je tiens à remercier Karine Bosch (éventuellement en anglais) (MVP SharePoint) pour avoir prêté son concours à la création de l’exemple utilisé dans cet article.
Pour plus d’informations, consultez les ressources suivantes :