Erstellen benutzerdefinierter SharePoint Server 2010-Feldtypen und -Feldsteuerelemente mit Visual Studio 2010 und Silverlight 3

SharePoint 2010

Zusammenfassung:   SharePoint Foundation 2010 versetzt Entwickler in die Lage, benutzerdefinierte Feldtypen und Steuerelement zu erstellen, wenn benutzerdefinierte Eingabe- oder Anzeigemöglichkeiten benötigt werden. Mit Microsoft Silverlight 3 können Entwickler benutzerfreundliche Oberflächen in SharePoint Server 2010-Veröffentlichungssites erstellen.

Letzte Änderung: Mittwoch, 12. Januar 2011

Gilt für: Business Connectivity Services | Open XML | SharePoint Designer 2010 | SharePoint Foundation 2010 | SharePoint Online | SharePoint Server 2010 | Visual Studio

Inhalt dieses Artikels
Einführung in benutzerdefinierte Feldtypen, Feldsteuerelemente und Silverlight 3
Überblick über den benutzerdefinierten Feldtyp ATOM mit Silverlight 3-Bearbeitungs- und Anzeigeoptionen
Konfigurieren einer Entwicklungsumgebung für Silverlight 3
Erstellen von Silverlight-Anwendungen
Erstellen der Geschäftslogik der Anwendung
Testen der Silverlight 3-Anwendung
Erstellen des benutzerdefinierten Feldtyps und Steuerelements
Erstellen der benutzerdefinierten Steuerelementklasse und Renderingvorlage
Bereitstellen und Installieren der benutzerdefinierten Feldtypen und Steuerelemente
Testen des benutzerdefinierten Feldtyps, des Feldsteuerelements und der Silverlight 3-Anwendung
Schlussbemerkung
Danksagung
Weitere Ressourcen

Inhalt

Klicken Sie, um Code abzurufen.    Downloadcode von Critical Path Training: SharePoint 2010-Veröffentlichungssites Silverlight 3 Beispiel zu benutzerdefinierten Feldtypen und Steuerelementen

Klicken Sie hier, um das Video anzuzeigen      Video anzeigen

Listen stellen die grundlegende Methode zum Speichern von Daten in SharePoint-Websites dar. Wenn ein Listenschema entweder mithilfe von Listenspalten oder Inhaltstypen erstellt wird, können die Benutzer den Datentyp, in Microsoft SharePoint 2010Feldtyp genannt, in der Spalte auswählen. Microsoft SharePoint Foundation 2010 stellt verschiedene Feldtypoptionen zur Auswahl, z. B. die folgenden gängigen Optionen:

  • Eine Textzeile

  • Mehrere Textzeilen

  • Währung

  • Datum und Uhrzeit

  • Auswahl

  • Nachschlagen

Microsoft SharePoint Server 2010 fügt Feldtypen hinzu, z. B. das Rich-Text-Feld Publishing HTML (das von Veröffentlichungssites verwendet wird). Obwohl diese Feldtypen den Großteil der Geschäftsanforderungen erfüllen können, decken sie möglicherweise nicht jede Geschäftsanforderung ab. Die Kontaktlistenvorlage enthält beispielsweise einzelne Felder für die verschiedenen Elemente einer nordamerikanischen Adresse. Entspricht das tatsächlich der Art und Weise, wie die Daten von den Endbenutzern genutzt werden? Sollen die Benutzer die Adresse horizontal in einer Liste sehen oder ist es sinnvoller, sie mit einigen Zeilenumbrüchen darzustellen, so wie sie auf einem Kuvert oder Paket erscheinen würde? Wie steht es um die Bearbeitung? Was bedeutet das, wenn die Adresse erforderlich ist? In der Regel heißt das, dass alle Elemente erforderlich sind (z.B. Straße 1, Stadt, Staat und Postleitzahl für nordamerikanische postalische Adressen), während andere Elemente optional sind (z. B. das Feld Straße 2, das meist für Suitenummer, Gebäudenummer oder Apartmentnummer verwendet wird). Was ist jedoch, wenn die Adresse nicht erforderlich ist? Ist es akzeptabel, nur einen einzigen Wert in das Straßenfeld einzugeben? Nein, weil dies nur ein Teil der Adresse ist, nicht die vollständige Adresse.

Damit sie diese komplexen Anforderungen leichter erfüllen können, bietet SharePoint Entwicklern die Funktionalität zum Erstellen benutzerdefinierter Feldtypen. Benutzerdefinierte Feldtypen versetzen Sie die in die Lage, die Kerndaten eines Feldtyps zu definieren, z. B. wie die Daten gespeichert werden und wie andere Entwickler über die SharePoint-API mit dem Datentyp interagieren können. Sie können zudem ein benutzerdefiniertes Feldsteuerelement erstellen, das dem Feldtyp zugeordnet ist, damit dieses auf eigene Weise bearbeitet und angezeigt werden kann. Benutzerdefinierte Feldsteuerelement können verwendet werden, um eine benutzerdefinierte clientseitige Überprüfung und eine benutzerfreundliche Bearbeitung zu ermöglichen.

Vielleicht möchten die Benutzer mehr als die typischen HTML- oder statischen Bearbeitungs- und Anzeigefunktionen, wenn sie Inhalte in SharePoint bearbeiten. Für diese Szenarien können Sie mit Microsoft Silverlight reichhaltige und interessante Benutzerfunktionen erstellen.

In diesem Artikel wird beschrieben, wie ein benutzerdefiniertes Silverlight 3-Steuerelement erstellt und außerhalb von SharePoint getestet wird. Anschließend wird die Erstellung eines benutzerdefinierten Feldtyps und eines benutzerdefinierten Feldsteuerelements beschrieben, das die von diesem Feldtyp verwendeten Daten speichert und sowohl im Anzeige- als auch im Bearbeitungsmodus einmalige, reichhaltige und interessante Benutzeroptionen bietet.

In diesem Artikel zeigt der Feldtyp, den Sie erstellen, den Inhalt eines ATOM-Feeds an. Die Anzeigeoption stellt den Inhalt des Feeds für den Benutzer ohne Steuerelemente zur Dokumenterstellung dar.

Im Bearbeitungsmodus wird dem Benutzer jedoch eine Schaltfläche zur Verfügung gestellt. Wenn der Benutzer darauf klickt, wird ein modales Dialogfeld angezeigt, in das er die URL des ATOM-Feeds und die Vorlage, die zur Darstellung des Steuerelements verwendet werden soll, eingeben kann.

Dem Benutzer stehen drei Vorlagen zur Auswahl, mit denen definiert wird, wie die Feedinhalte auf der Website dargestellt werden sollen. Eine Vorlage zeigt nur den Titel an, eine Vorlage zeigt den Titel und das Veröffentlichungsdatum des Beitrags an, und eine Vorlage zeigt den Titel, das Veröffentlichungsdatum und einen Auszug aus dem Feedinhalt an.

Mit der Erstellung einer benutzerdefinierten Silverlight 3-Anwendung, eines benutzerdefinierten Feldtyps und benutzerdefinierten Feldsteuerelements und deren Bereitstellung und Integration in eine vorhandene oder neue SharePoint-Website ist mit einer Menge Arbeit verbunden. In diesem Artikel wird diese Arbeit in mehrere Aufgaben aufgeschlüsselt, um die Problembehebung zu erleichtern. Zuerst erstellen Sie die Silverlight 3-Anwendung und testen sie außerhalb von SharePoint.

Sie müssen einige Dinge installieren, um die Entwicklungsumgebung konfigurieren zu können. Zuerst installieren Sie die Silverlight 3-Laufzeitbibliothek, auch Browser-Plug-in genannt. Sie können sie von der Seite Get Started der Microsoft Silverlight-Website abrufen.

Als Nächstes müssen Sie sich die Tools zur Entwicklung einer Silverlight-Anwendung beschaffen. Microsoft stellt zu diesem Zweck zwei Entwicklungswerkzeuge bereit:

  • Microsoft Expression Blend 3  Expression Blend 3 wird primär zur Erstellung benutzerfreundlicher Benutzeroberflächen verwendet. Es ist zwar nicht erforderlich, aber die Erstellung von Animationen und anderen Benutzeroberflächenelementen ist mit einem Designer einfacher als den XAML-Code von Hand zu schreiben. Um die Testversion von Expression Blend 3 herunterzuladen, besuchen Sie Microsoft Expression Blend 3 + SketchFlow Trial.

  • Microsoft Visual Studio 2010  Visual Studio enthält einen Designer, den Sie verwenden können, um die Steuerelemente in einer Entwurfsumgebung zu platzieren.

Für Entwickler ist komfortabel, dass Microsoft die gleichen Projekt- und Projektmappendateien in Expression Blend verwendet, die in Visual Studio verwendet werden. Dies ermöglicht es Ihnen, beim Erstellen von benutzerdefinierten Anwendungen einfach von Expression Blend zu Visual Studio wechseln.

Hinweis Hinweis

Nähere Informationen zum Konfigurieren der Umgebung für Silverlight 3-Anwendungen bietet das Video Getting Started with Silverlight Development (Einführung in die Silverlight-Entwicklung) in Microsoft Silverlight.

Für die in diesem Artikel beschriebene Anwendung ist Expression Blend 3 nicht erforderlich, kann jedoch zum Erstellen der Benutzeroberfläche verwendet werden. Allerdings wird in der Codebeispielen nur das XAML zum Erstellen der Anwendung dargestellt.

Der erste Schritt besteht im Erstellen der Silverlight 3-Anwendung. Wenn möglich, versuchen Sie, die Silverlight 3-Anwendung völlig außerhalb der SharePoint-Umgebung zu erstellen. Der Entwicklungs- und Testprozess kann dadurch vereinfacht und beschleunigt werden. Die in diesem Artikel definierte Anwendung hat nur die beiden folgenden Integrationspunkte mit SharePoint:

  • Speichern der vom Benutzer ausgewählten Werte (die URL des ATOM-Feeds und die ausgewählte Vorlage, die zum Rendering verwendet werden soll) und Verwenden dieser Werte, um den angegebenen Feed in der angegebenen Vorlage im Präsentationsmodus darzustellen.

  • Ermitteln des aktuellen Modus der Seite (Präsentations- oder Bearbeitungsmodus).

Dankenswerterweise lassen sich diese beiden Integrationspunkte außerhalb von SharePoint simulieren. Dies ist so, weil die Silverlight-Anwendung nicht direkt mit SharePoint kommuniziert. Wenn die Anwendung gestartet wird, kommuniziert sie stattdessen unter Verwendung verborgener Formularfelder und einer Initialisierungszeichenfolge. Sie können dies in einer Testseite simulieren, was die Entwicklung vereinfachen kann.

Die Anwendung, die Sie erstellen werden, kennt zwei Modi: Präsentationsmodus und Bearbeitungsmodus. Abbildung 1 zeigt, wie die Anwendung im Präsentationsmodus aussieht.

Abbildung 1. Silverlight-Anwendung im Präsentationsmodus

Silverlight-Anwendung im Präsentationsmodus

Abbildung 2 und Abbildung 3 zeigen, wie die Anwendung im Bearbeitungsmodus aussieht. Beachten Sie, dass im Bearbeitungsmodus eine zusätzliche Schaltfläche über der darstellten ATOM-Feedliste (bzw. wenn kein URI angegeben wird, wird ein sich drehendes ATOM-Symbol dargestellt) angezeigt wird. Wenn der Benutzer auf die Schaltfläche klickt, wird ein modales Dialogfeld geöffnet, in dem er die URL und die Anzeigevorlage angeben kann. Durch Klicken auf OK wird das Dialogfeld geschlossen und die Anwendung mit den neuen Einstellungen aktualisiert.

Abbildung 2. Silverlight-Anwendung im Bearbeitungsmodus mit Schaltfläche

Silverlight-Anwendung im Bearbeitungsmodus mit Schaltfläche

Abbildung 3. Silverlight-Anwendung mit Dialogfeld zum Bearbeiten des ATOM-Feed

Silverlight-Anwendung im Bearbeitungsmodus

Erstellen und Konfigurieren des Projekts

Zuerst erstellen Sie eine Anwendung. Beginnen Sie mit der Erstellung eines Projekts in Visual Studio 2010, erweitern Sie den Knoten Visual C#, erweitern Sie Silverlight, und wählen Sie dann die Projektvorlage Silverlight-Anwendung aus. Geben Sie der Vorlage den Namen ATOM Field. Visual Studio zeigt nach der Erstellung des Projekts eine Eingabeaufforderung an, in der Sie gefragt werden, ob ein weiteres Webprojekt zum Hosten der Silverlight-Anwendung erstellt werden soll. Erstellen Sie ein weiteres Webprojekt, und vergewissern Sie sich, dass als Projekttyp ASP.NET Website angegeben wird.

Beim Erstellen des Projekts müssen Sie einige zusätzliche Konfigurationsänderungen am Projekt vornehmen. Klicken Sie im Fenster Projektmappen-Explorer mit der rechten Maustaste auf das Projekt ATOM Field, und klicken Sie dann auf Eigenschaften. Legen Sie auf der Registerkarte Silverlight die folgenden Eigenschaften fest, und übernehmen Sie für die übrigen Eigenschaften die Standardwerte:

  • Assemblyname: ATOMField

  • Standardnamespace: MSDN.SharePoint.Samples.AtomField

  • Xap-Dateiname: SharePoint.AtomField.xap

Initialisieren der Anwendung

Als Nächsten konfigurieren Sie die Anwendungsinitialisierung, und definieren einige globale Variablen in der CodeBehind-Datei der Datei App.xaml. Klicken Sie mit der rechten Maustaste auf App.xaml, und klicken Sie dann auf Code anzeigen. Aktualisieren Sie den Namespace, sodass er dem oben aufgeführten Namespace entspricht. Fügen Sie zudem drei nur in der Anwendung gültige statische Felder der App-Klasse hinzu. Mithilfe dieser Felder wird bestimmt, ob sich die Anwendung im Bearbeitungs- oder Präsentationsmodus befindet, und die Namen der beiden HTML-Eingabeelemente auf der Seite bereitzustellen, die von der Anwendung zum Kommunizieren mit SharePoint verwendet werden. Dies wird im folgenden Code demonstriert.

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() 
    {

Fügen Sie den folgenden Code in der Application_Startup-Methode hinzu. Mit diesem Code werden die Werte aus den Initialisierungsparametern extrahiert, die vom Silverlight-Steuerelement und den verborgenen HTML-Elementen auf der Seite übergeben werden. Dies wird im folgenden Code demonstriert.

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();
}

Nachdem die Anwendungsinitialisierung jetzt abgeschlossen ist, können Sie sich auf die Anwendung selbst konzentrieren. Um eine modularere Anwendung zu erhalten, müssen Sie zwei zusätzliche XAML-Dateien erstellen. Eine Datei enthält das sich drehende ATOM-Symbol, das angezeigt wird, wenn kein ATOM-Feed ausgewählte wurde oder wenn die Anwendung den ATOM-Feed von der Remotequelle abruft, und eine Datei enthält das modale Dialogfeld im Bearbeitungsmodus.

Erstellen des Steuerelements mit dem sich drehenden ATOM-Symbol

Klicken Sie mit der rechten Maustaste auf das Projekt ATOM Field, klicken Sie auf Hinzufügen und dann auf Neues Element. Wählen Sie die Vorlage Silverlight-Benutzersteuerelement aus, und geben Sie ihr den Namen AtomRotator.xaml. Bevor Sie die Benutzeroberfläche für dieses Steuerelement erstellen, müssen dem Projekt ein ATOM-Symbol hinzufügen. Erstellen Sie einen Ordner namens Images im Projekt, fügen Sie dem Ordner ein ATOM-Symbol hinzu (verfügbar im zugehörigen Beispiel SharePoint 2010 Silverlight 3 Publishing Field Type), und legen Sie den Buildvorgang für diese Datei auf Ressource fest, wie in Abbildung 4 gezeigt.

Abbildung 4. Buildvorgang wurde auf Ressource festgelegt

Festlegen der Erstellungsaktion

Fügen Sie der Datei AtomRotator.xaml den folgenden XAML-Code hinzu. Dieser Code leistet zwei Dinge:

  • Er fügt eine Animation hinzu, in der das Bild ständig gedreht wird. Dies ist im Abschnitt <UserControl.Resources /> enthalten.

  • Er fügt die Benutzeroberfläche mit einem <Grid />-Abschnitt für das Bild hinzu, das horizontal und vertikal in einem <Border />-Steuerelement zentriert wird.

<UserControl
  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"
  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>

Die Animation wird zwar erstellt, aber sie müssen der Anwendung mitteilen, wann die Animation gestartet werden soll. In diesem Fall soll die Animation gestartet werden, unmittelbar nachdem das Steuerelement angezeigt wird. Hierzu rufen Sie einen Verweis auf das Storyboard ab, das die Animationsdefinition enthält, und starten sie, wenn das Steuerelement geladen wird. Klicken Sie mit der rechten Maustaste auf die Datei, klicken Sie auf Code anzeigen, und fügen Sie dann den folgenden Code dem Klassenkonstruktor hinzu.

public partial class AtomRotator : UserControl
{
  public AtomRotator()
  {
    InitializeComponent();

    Storyboard sb = this.FindName("RotateYStoryboard") as Storyboard;
    if (sb != null)
      sb.Begin();
  }
}

Speichern Sie alle Änderungen an diesen Dateien.

Erstellen des modalen Dialogfelds für den Bearbeitungsmodus

Im nächsten Schritt erstellen wir das modale Dialogfeld, das im Bearbeitungsmodus angezeigt wird. Hierzu fügen Sie ein neues Element vom Typ Untergeordnetes Silverlight-Fenster dem Projekt namens AtomEditDialog.xaml hinzu. Dieses Steuerelement muss ein Textfeld für die URL des ATOM-Feeds und eine Liste von Optionsfeldern für die Renderingoptionen enthalten, die für den Benutzer verfügbar sind. Fügen Sie den folgenden Markupcode der Datei AtomEditDialog.xaml hinzu, und speichern Sie Ihre Änderungen. Beachten Sie, dass Sie keinen verwalteten Code für dieses Steuerelement zu schreiben brauchen, da das übergeordnete Steuerelemente die ganze Arbeit erledigt.

<basics:ChildWindow
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://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>

Nachdem Sie jetzt zwei abhängige Steuerelemente erstellt haben, können Sie sich der Hauptanwendung zuwenden.

Erstellen der Benutzeroberfläche der Anwendung

Silverlight 3-Anwendungen zeigen anfangs beim Anwendungsstart das MainPage.xaml-Steuerelement an. In früheren Versionen von Silverlight wurde die Datei Page.xaml verwendet. Diese Datei MainPage.xaml und die zugehörige CodeBehind-Datei enthalten den Code, in dem die meiste Arbeit erledigt wird.

Als Erstes müssen Sie das öffnende <UserControl />-Element ändern, das die Klasse, einen Verweis auf den Namespace des Projekts (damit in XAML auf das Rotator-Steuerelement verwiesen werden kann) und die Dimensionen der Datei definiert.

<UserControl
  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:local="clr-namespace:MSDN.SharePoint.Samples.AtomField"
  x:Class="MSDN.SharePoint.Samples.AtomField.MainPage"
  Width="500" Height="500" mc:Ignorable="d">

Erstellen der grundlegenden Benutzeroberflächensteuerelemente

Als Nächstes fügen Sie die Benutzeroberfläche für das Steuerelement hinzu. Sie verwenden ein <StackPanel />-Element, weil alle Steuerelemente der Reihenfolge nach dargestellt werden, in der sie untereinander deklariert wurden.

Fügen Sie in diesem Steuerelement die folgenden Elemente hinzu:

  • Eine Schaltfläche, die im Bearbeitungsmodus angezeigt und zum Öffnen des modalen Dialogfeld verwendet wird.

  • Ein TextBlock-Steuerelement, das solange verborgen ist, solange Fehlermeldung vorliegt, die für den Benutzer angezeigt werden muss.

  • Ein Listenfeld, in dem alle Elemente aus dem angegebenen ATOM-Feed angezeigt werden. Später fügen Sie diesem Steuerelement die Renderingvorlagen hinzu, die zum Darstellen der Elemente des ATOM-Feeds verwendet werden.

  • Das sich drehende Bildsteuerelement, das angezeigt wird, wenn kein ATOM-Feed angegeben wurde oder wenn das Steuerelement den Feed abruft.

Die Logik, die bestimmt, was angezeigt wird, wird der CodeBehind-Datei später hinzugefügt. Vorerst fügen Sie nur den folgenden Markupcode der Datei MainPage.xaml hinzu.

<StackPanel x:Name="LayoutRoot" Background="White" 
VerticalAlignment="Top" Margin="10">
  <Button x:Name="AtomEditDialogButon" Content="Select ATOM Feed &amp; 
  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>

Hinzufügen von Datenvorlagen für die dynamische Rendering

Rendering-Vorlagen erleichtern das Rendering der ATOM-Feedelemente im ListBox-Steuerelement sehr. Diese Vorlagen werden in SilverlightDatenvorlagen genannt. Dadurch können die Daten völlig von der Benutzeroberflächenimplementierung getrennt werden. Daten werden in einer Silverlight-Anwendung als Ressourcen definiert. Diese Ressourcen können an verschiedenen Orten abgelegt werden, sodass sie für die gesamte Anwendung oder nur für ein bestimmtes Steuerelement verfügbar sind. Für diese Anwendung werden sie nur innerhalb der Datei MainPage.xaml verwendet und können als Ressource für ein Benutzersteuerelement hinzugefügt werden.

Hierzu fügen Sie der Datei MainPage.xaml den folgenden Markupcode hinzu. 'Er enthält drei <DataTemplate /> Steuerelemente, die über eindeutige Namen verfügen. Diese Steuerelemente zeigen den Text an, nachdem die Elemente des ATOM-Feeds gebunden wurden. Vorerst sind deren Text-Eigenschaften leer.

<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>

Hinzufügen der Datenbindungsdetails für die Steuerelemente und eines benutzerdefinierten Textkonverters

Der Textinhalt des ATOM-Feeds eignet sich nicht für die Verwendung im Steuerelement. Jedes Summary-Element eines ATOM-Elements kann Markup enthalten und zudem recht lang sein. Bevor die Daten an die Steuerelemente gebunden werden, müssen Sie den Markupcode entfernen, und in den Fällen, in denen der Inhalt zu lang ist, nur einen Auszug des Inhalts anzeigen. Silverlight stellt eine einfache Möglichkeit bereit, dies mithilfe von Konvertern zu tun. Wenn Daten an das Steuerelement gebunden werden, können Sie einen registrierten Konverter angeben, der verwendet werden soll, bevor der Inhalt dem Steuerelement zugewiesen wird.

Erstellen eines benutzerdefinierten Textkonverters

Zuerst erstellen Sie einen HTML-Konverter, indem Sie dem Projekt eine Klasse namens HtmlConverter.cs hinzufügen. Fügen Sie der Datei den folgenden Code hinzu.

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();
    }
  }
}

Registrieren eines benutzerdefinierten Konverters als Silverlight-Ressource

Kehren Sie zur Datei MainPage.xaml zurück, und fügen Sie ein Element hinzu, das auf die HtmlConverter-Klasse im Ressourcenabschnitt des Steuerelement verweist. Dies wird im folgenden Beispiel demonstriert.

<UserControl.Resources>
  <!-- Declare converter. -->
  <local:HtmlConverter x:Key="HtmlConverter" />

Jetzt kann der Konverter aufgerufen werden, wenn die Datenbindung erfolgt.

Datenbindung der Datenvorlagensteuerelemente

Der letzte Schritt besteht im Hinzufügen der Datenbindungsnotation zu den Steuerelementen in den drei <DataTemplate />-Elementen, die im <UserControl.Resources />-Element definiert sind. Im folgenden Beispiel wird die Vorgehensweise gezeigt und der benutzerdefinierte Konverter für das letzte Steuerelement der Liste namens TitleAndBodyDataTemplate verwendet. Wenden Sie ähnliche Bindungsnotationen auf die Text-Attribute der anderen Steuerelemente in den anderen beiden Vorlagen an.

<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>

Jetzt ist die Benutzeroberfläche der Anwendung vollständig. Als Nächstes statten Sie die Anwendung mit der erforderlichen Logik aus.

Nachdem die Benutzeroberfläche vollständig ist, ist es an der Zeit, den Code hinzuzufügen, der für die Anwendungsfunktionalität verantwortlich ist. Sie tun dies in der CodeBehind-Datei für die Datei MainPage.xaml. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf diese Datei, und klicken Sie dann auf Code anzeigen.

Weil das Projekt mit ATOM-Feeds arbeitet, können Sie der Einfachheit halber einen Projektverweis auf eine Assembly namens System.ServiceModel.Syndication hinzufügen, die Microsoft im Microsoft .NET Framework bereitgestellt hat. Diese Assembly handhabt die Serialisierung und Deserialisierung des ATOM-Feeds, sodass Sie hierfür keinen komplexen XML-Code schreiben müssen.

Bevor Sie fortfahren, sind einige auf die Klasse beschränkte Felder erforderlich. Fügen Sie die folgenden Felder nach der Deklaration der MainPage-Klasse ein, wie im folgenden Beispiel gezeigt.

// 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;

Initialisieren der Benutzeroberfläche

Wenn die Anwendung geladen wird, muss zuerst die Benutzeroberfläche initialisiert werden. Hierzu müssen die Werte aus den beiden HTML-Elementen auf der Webseite des Hosts gelesen werden. Diesen Elementen entnimmt die Anwendung die URL des abzurufenden ATOM-Feeds und welche Datenvorlage ausgewählt wurde. Wenn der Feed angegeben wurde, wird die GetAtomFeed-Methode aufgerufen, die den ATOM-Feed abruft und an die Benutzeroberflächenelemente bindet. Wenn kein Feed angegeben wurde, wird das Rotator-Steuerelement mit dem ATOM-Symbol angezeigt.

Schließlich legen Sie die Visibility-Eigenschaft der Schaltfläche, die das modale Bearbeitungsdialogfeld öffnet, abhängig vom aktuellen Status der Seite fest: Bearbeitungsmodus oder Anzeigemodus.

Fügen Sie dem Klassenkonstruktor den folgenden Code hinzu:

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;
  }
}

Die GetRotator-Methode verbirgt einfach das ListBox, in dem die Elemente des ATOM-Feeds angezeigt werden, und zeigt das Rotator-Steuerelement an, das Sie zuvor erstellt haben.

private void GetRotator () {
  AtomItemsListBox.Visibility = Visibility.Collapsed;
  AtomRotator.Visibility = Visibility.Visible;
}

Abrufen des ATOM-Feed und Datenbindung der Feed-Elemente

Als Nächstes müssen wir den Code (GetAtomFeed) schreiben, mit dem der ATOM-Feed asynchron abgerufen wird. Beim Auslösen der Antwort wird eine Callbackmethode (BeginResponse) aufgerufen, die den ATOM-Feed abruft. Wenn der Aufruf erfolgreich ausgeführt wird, wird die Antwort an den Benutzeroberflächen-Thread gesendet, für den GetAtomFeed einen Verweis bezogen hat, weil Netzwerkaufrufe nicht im gleichen Thread wie die Benutzeroberfläche in Silverlight ausgeführt werden können.

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);
}

Wenn die HTTP-Antwort an den Benutzeroberflächen-Thread gesendet wird, ruft er eine andere Methode, ExtractResponse, auf, die den Inhalt des ATOM-Feed in ein SyndicationFeed-Objekt einliest. Dann ruft sie die SetListBoxDataTemplate-Methode auf, legt die Renderingvorlage von ListBox auf die ausgewählte Vorlage fest und bindet die Ergebnisse.

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;
  }
}

Beachten Sie, dass das sich drehende Bildsteuerelemente mit dem ATOM-Symbol verborgen wird, sobald das Listenfeld anzeigt wird und die Elemente des ATOM-Feeds an das ListBox-Steuerelement gebunden wurden.

Definieren einer benutzerdefinierten Bearbeitungsfunktion für das modale Bearbeitungsdialogfeld

Der letzte Schritt zur Veränderung der Benutzeroberfläche besteht in der Erstellung einer Ereignishandlerfunktion für das Ereignis, das ausgelöst wird, wenn im Bearbeitungsmodus auf die Schaltfläche geklickt wird. Hierzu erstellen Sie eine Instanz des Dialogfeldsteuerelements, definieren den Ereignishandler, initialisieren die Werte im Steuerelement und zeigen das Dialogfeld an. Dies wird im folgenden Code demonstriert.

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();
}

Nachdem der Benutzer im modalen Dialogfeld auf die Schaltfläche OK oder die Schaltfläche Abbrechen geklickt hat, wird der Closed-Ereignishandler aufgerufen. Wenn der Benutzer auf OK geklickt hat, wird die URL des Feed abgerufen und durch einen erneuten Aufruf von GetAtomFeed aktualisiert. Anschließend wird die ausgewählte Datenvorlage entsprechend geändert und die Benutzeroberfläche aktualisiert. Dies wird im folgenden Code demonstriert.

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();
}

Jetzt ist die Silverlight-Anwendung vollständig. Erstellen Sie das Projekt, und beheben Sie alle eventuell gemeldeten Fehler. Als Nächsten testen Sie die Anwendung, bevor Sie sie in SharePoint integrieren.

Wenn die Silverlight 3-Anwendung außerhalb von SharePoint getestet wird, ist es viel einfacher, Probleme zu erkennen und zu lösen. Andernfalls müssen Sie bestimmen, ob der Fehler durch SharePoint oder Silverlight ausgegeben wird.

In dem mit Visual Studio erstellten Webprojekt finden Sie eine HTML-Datei und einige andere Dateien. Öffnen Sie die HTML-Datei, und führen Sie einen Bildlauf nach unten zum Abschnitt <body> durch. Visual Studio fügte den Silverlight-Player hinzu und legte einige Parameter fest. Um die zuvor erstellte Anwendung testen zu können, müssen Sie einige Änderungen vornehmen.

Zuerst erstellen Sie die beiden verborgenen HTML-Felder, welche die URL des ATOM-Feed und die ausgewählte Vorlage enthalten. Fügen Sie der Seite an einer beliebigen Stelle außerhalb des <object />-Elements den folgenden Markupcode hinzu.

<input type="hidden" id="AtomFeedValueField" Value="" />
<input type="hidden" id="TemplateValueField" Value="" />

Stellen Sie jetzt sicher, dass das <object />-Tag im Quellparameter auf die richtige Silverlight-Anwendungsdatei verweist. Es sollte beispielsweise wie folgt aussehen.

<param name="source" value="ClientBin/SharePoint.AtomField.xap"/>

Im letzten Schritt fügen Sie einen neuen Parameter namens initParams hinzu, der Werte an die Silverlight-Anwendung übergibt. Denken Sie daran, dass die Datei App.xaml.cs jetzt Code enthält, der nach bestimmten Werten Ausschau hält. Diesen Werten entnimmt die Silverlight-Anwendung, welche HTML-Elemente auf der Seite die Werte enthalten, die die Anwendung zur Ausführung benötigt.

<param name="initParams" value="fid=AtomFeedValueField,tid=TemplateValueField,enable=true" />

Speichern Sie alle Änderungen. Jetzt kann die Anwendung getestet werden. Testen Sie sie zuerst im Bearbeitungsmodus (wenn der initParams-Parameter enable=true enthält). Klicken Sie mit der rechten Maustaste auf die HTML-Seite, und klicken Sie dann auf In Browser anzeigen. Daraufhin wird die Anwendung in einem neuen Browserfenster gestartet, sodass Sie damit interagieren und sie testen können, um sicherzustellen, dass alles ordnungsgemäß funktioniert.

Abbildung 5. Testen der Anwendung im Bearbeitungsmodus

Testen der Anwendung im Bearbeitungsmodus

Nun testen Sie die Anwendung im Anzeigemodus. Zu diesem Zweck verändern Sie die HTML-Element, damit Sie den Inhalt eines ATOM-Feeds anzeigen, und geben die Vorlage TitleAndDate an.

<input type="hidden" id="AtomFeedValueField" Value="http://feeds.feedburner.com/AndrewConnell" />
<input type="hidden" id="TemplateValueField" Value="TitleAndDate" />

HinweisHinweis

Die erstellte Anwendung setzt voraus, dass über Silverlight auf die Feeds zugegriffen werden kann. Dieser Zugriff wird ermöglicht, indem eine spezielle XML-Datei in das Stammverzeichnis einer Website eingefügt wird, die die Ressourcen enthält, auf die zugegriffen wird. Wenn diese Datei nicht vorhanden ist, kann Silverlight nur auf Ressourcen von der Website zugreifen, welche die Seite enthält, mit der die Anwendung gestartet wurde. Weitere Informationen finden Sie unter Making a Service Available Across Domain Boundaries. In dem Beispiel in diesem Artikel enthält die Website http://feeds.feedburner.com bereits diese Datei. Bei anderen Websites ist dies aber unter Umständen nicht der Fall. Eine Problemumgehung ist die Verwendung eines ATOM-Proxyservice, z. B. Yahoo Pipes (http://pipes.yahoo.com/pipes), der diese Datei enthält. Auf die Verwendung eines ATOM-Proxyservice einzugehen würde jedoch den Rahmen dieses Artikels sprengen.

Ändern Sie außerdem die enabled-Eigenschaft des initParams-Parameters in false, um den Anzeigemodus zu aktivieren.

<param name="initParams" value="fid=AtomFeedValueField,tid=TemplateValueField,enable=false" />

Speichern Sie die Datei, und führen Sie den Test erneut aus, indem Sie mit der rechten Maustaste auf die HTML-Datei klicken und dann auf In Browser anzeigen, wie in Abbildung 6 gezeigt.

Abbildung 6. Testen der Anwendung im Anzeigemodus

Testen der Anwendung im Anzeigemodus

Nachdem die Silverlight-Anwendung erstellt und getestet wurde, können Sie sie jetzt in SharePoint integrieren.

Nachdem SharePoint konfiguriert wurde, ist es an der Zeit, den benutzerdefinierten Feldtyp und das Feldsteuerelement zu erstellen. Erweitern Sie in der vorhandenen Visual Studio-Projektmappe den Knoten Visual C#, erweitern Sie SharePoint 2010, und wählen Sie das Projekt Leeres SharePoint-Projekt namens AtomFieldType aus. Nehmen Sie dann die folgenden Änderungen am Projekt vor, um es als SharePoint-Projekt einzurichten:

  1. Klicken Sie im Projektmappen-Explorer auf das Projekt AtomFieldType und dann auf Eigenschaften.

  2. Legen Sie auf der Registerkarte Anwendung die folgenden Werte fest:

    • Assemblyname: MSDN.SharePoint.Samples.AtomField

    • Standardnamespace: MSDN.SharePoint.Samples.AtomField

  3. Fügen Sie auf der Registerkarte .NET im Dialogfeld Verweis hinzufügen einen Assemblyverweis auf System.Web hinzu.

Erstellen Sie das benutzerdefinierte Feldtypobjekt

Zuerst erstellen Sie den benutzerdefinierten Feldtyp.. Hierzu erstellen Sie eine C# -Klasse im Stammverzeichnis des Projekts AtomFieldType, die Sie AtomField.cs nennen. Fügen Sie der Datei AtomField.cs folgenden Code hinzu. Beachten Sie, dass die Klasse vom SPFieldMultiColumn erbt, der es wiederum ermöglicht, ein begrenztes Array mit einer einzigen Spalte in der Datenbank zu speichern. Die Analyse diese Arrays ist Aufgabe der benutzerdefinierten Feldwertklasse, die Sie als Nächstes wie im folgenden Code gezeigt erstellen.

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;
      }
    }
}

Erstellen des benutzerdefinierten Feldwertobjekts

Das Feldwertobjekt, das Sie als Nächstes erstellen, erfüllt einen zweifachen Zweck. Erstens informiert diese Klasse SharePoint darüber, an welcher Position im begrenzten Array sich welcher Wert befindet. Zweitens wird eine streng typisierte Klasse an alle zurückgegeben, die über die SharePoint API auf den Wert in diesem Feld zuzugreifen versuchen.

Erstellen Sie eine C#-Klassendatei namens AtomFieldValue.cs, und fügen Sie ihr den folgenden Code hinzu.

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; }
    }
  }
}

Diese Klasse muss mit der Feldtypklasse verbunden werden. Hierzu überschreiben Sie die GetFieldValue-Methode der AtomField-Klasse, und geben dann eine Instanz des neuen Wertobjekts wie im folgenden Code gezeigt zurück.

public override object GetFieldValue (string value) {
  if (string.IsNullOrEmpty(value))
    return null;
  return new AtomFieldValue(value);
}

Das benutzerdefinierte Rendering des benutzerdefinierten Felds wird mithilfe eines benutzerdefinierten Feldsteuerelements erstellt. Benutzerdefinierte Feldsteuerelemente umfassen zwei Teile: eine Klasse, die SharePoint verwendet, um alle Informationen zu erhalten, die zur Interaktion mit dem Feldsteuerelement benötigt werden, und eine *.ascx-Datei, die eine Rendering-Vorlage enthält, welche definiert, wie die Benutzeroberfläche dargestellt werden soll.

Erstellen der Renderingvorlage für das benutzerdefinierte Feldsteuerelement

Zuerst erstellen Sie einen zugeordneten Ordner, indem Sie mit der rechten Maustaste auf das Projekt AtomFieldType klicken, dann klicken Sie auf Hinzufügen und auf Zugeordneter SharePoint-Ordner. Wählen Sie den Ordner {SharePointRoot}\TEMPLATE\CONTROLTEMPLATES aus. Visual Studio fügt automatisch einen Unterordner hinzu, der den Projektnamen enthält. In der Regel ist dies die beste Vorgehensweise, aber einige Renderingvorlagen für benutzerdefinierte Feldsteuerelemente müssen im Stamm des Ordners CONTROLTEMPALTES platziert werden. Löschen Sie daher den von Visual Studio erstellten Unterordner. Als Nächstes erstellen Sie die Renderingvorlage, indem Sie mit der Vorlage Textdatei eine Datei erstellen, ihr den Namen SilverlightAtomFieldControl.ascx geben und sie dann im Ordner CONTROLTEMPLATES im Projekt speichern.

Fügen Sie der Datei das folgende Markup hinzu. Beachten Sie, dass sie zwei verborgene HTML-Elemente enthält, die verwendet werden, um mit der zuvor erstellen Silverlight 3-Anwendung zu kommunizieren.

<%@ 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>

Hinzufügen von Silverlight-Ressourcen zum Projekt

Bevor wir die Klassendatei erstellen, die das benutzerdefinierte Feldsteuerelement enthält, fügen wir zunächst einige Dateien hinzu, auf die das Steuerelement 'Bezug nimmt. Erstellen Sie zuerst einen zugeordneten Ordner. Klicken Sie mit der rechten Maustaste auf das Projekt AtomFieldType, klicken Sie auf Hinzufügen und dann auf Zugeordneter SharePoint-Ordner "Layouts". Fügen Sie die beiden Dateien in den zugeordneten Ordner LAYOUTS\AtomFieldType im Projekt ein. Die beiden Dateien werden unten beschrieben:

  • SharePoint.AtomField.xap  Dies ist die Silverlight 3-Anwendung, die Sie zuvor erstellt haben.

    Ändern Sie im ProjektSilverlightATOM Field den Buildausgabepfad, sodass er auf den zugeordneten Layouts-Ordner zeigt, den Sie gerade erstellt haben. Erstellen Sie das Silverlight-Projekt. Wählen Sie im Fenster Projektmappen-Explorer das Projekt AtomFieldType aus, und klicken Sie dann auf Alle Dateien anzeigen. Daraufhin wird die Datei *.xap im zugeordneten Ordner LAYOUTS angezeigt. Klicken Sie mit der rechten Maustaste auf die Datei, und klicken Sie dann auf Zu Projekt hinzufügen. Damit wird sichergestellt, dass die Datei in die Paketerstellung und Bereitstellung einbezogen wird. Klicken Sie mit der rechten Maustaste auf Alle Dateien anzeigen, um die Dateien zu verbergen, die nicht dem Datei hinzugefügt werden.

  • SharePointSilverlightUtility.js  Dies ist eine benutzerdefinierte JavaScript-Bibliothek, die es erleichtert, das Silverlight-Plug-In mit den zugehörigen Parametern auszugeben.

Hinweis Hinweis

Die JavaScript-Bibliothek wird im Beispiel SharePoint 2010 Silverlight 3 Publishing Field Type bereitgestellt.

Erstellen des benutzerdefinierten Feldsteuerelementobjekts

Jetzt erstellen Sie die Klasse, die das benutzerdefinierte Feldsteuerelementobjekt enthält. Erstellen Sie eine C#-Klassendatei namens AtomFieldControl.cs im Stammordner des Projekts. Diese Datei ist für die Kommunikation zwischen der Silverlight 3-Anwendung und dem Feldtyp verantwortlich. Fügen Sie zuerst den folgenden Code der Klasse hinzu.

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 {
  }
}

Dann fügen Sie der Klasse einige Konstanten und Websteuerelemente hinzu. Die Websteuerelemente werden als Verweise auf die Steuerelemente in der Renderingvorlage verwendet, die Sie zuvor in der Datei *.ascx definiert haben.

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;
}

Im nächsten und wichtigsten Schritt überschreiben Sie die CreateChildControls-Methode, die zwei Dinge leistet. Erstens verweist sie auf die Websteuerelemente, die in der Datei *.ascx definiert sind. Dann generiert sie das JavaScript, das die Silverlight 3-Plug-In-Referenz und Parameter erstellt. Dieses JavaScript wird mithilfe eines LiteralControl-Elements in die Seite geschrieben und der Controls-Auflistung des Feldsteuerelements hinzugefügt.

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);
}

Um die Funktionen, die in der JavaScript-Bibliothek nutzen zu können, muss die aktuelle Seite über einen Verweis auf diese Bibliothek verfügen. Sie können zu diesem Zweck das ClientScriptManager-Objekt der Seite in der OnPreRender-Methode verwenden, wie im folgenden Code gezeigt wird.

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));
}

Dann überschreiben Sie zwei Eigenschaften und eine Methode, die SharePoint aufruft, wenn das Feldsteuerelement dargestellt wird. Geben Sie SharePoint hierzu die ID der Renderingvorlage (die sich in einer *.ascx-Datei befindet) an und was verwendet werden soll, wenn das Feldsteuerelement im Anzeigemodus dargestellt wird.

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);
}

Überschreiben Sie die Value-Eigenschaft, die SharePoint verwendet, um beim Laden der Seite eventuell vorhandene Werte für das Feldsteuerelement festzulegen und die Werte in den Websteuerelementen abzurufen, wenn die Seite gespeichert wird.

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;
    }
  }
}

Der letzte Schritt besteht darin, das benutzerdefinierte Feldsteuerelement mit der Feldtypklasse zu verknüpfen. Hierzu überschreiben Sie die FieldRenderingControl-Eigenschaft des AtomField-Objekts.

public override BaseFieldControl FieldRenderingControl {
  get {
    BaseFieldControl fieldControl = new AtomFeedControl { FieldName = InternalName };
    return fieldControl;
  }
}

Erstellen der benutzerdefinierten Feldtypdefinition

Nachdem der benutzerdefinierte Feldtyp bereitgestellt wurde, muss SharePoint darauf aufmerksam gemacht werden. Dies geschieht, wenn der Webserver aktualisiert wird. Wenn SharePoint geladen wird, werden alle Dateien namens fldtypes*.xml überprüft, die sich im Ordner [..]\14\TEMPLATE\XML auf dem Server befinden. fldtypes*.xml-Dateien enthalten Metadaten über den Feldtyp, die Assembly, welche den Feldtyp enthält, und den vollständigen qualifizierten Typnamen des Feldtypklassennamens.

Erstellen Sie zuerst einen zugeordneten Ordner, indem Sie mit der rechten Maustaste auf das Projekt AtomFieldType klicken, und klicken Sie dann auf Hinzufügen und auf Zugeordneter SharePoint-Ordner. Wählen Sie den Ordner {SharePointRoot}\TEMPLATE\XML aus. Visual Studio fügt automatisch einen Unterordner hinzu, der den Projektnamen enthält. Wie oben beim Ordner CONTROLTEMPLATES ist dies die beste Vorgehensweise, aber in diesem Fall muss die XML-Datei im Stammverzeichnis des Ordners XML abgelegt werden. Löschen Sie daher den von Visual Studio erstellten Unterordner. Erstellen Sie dann eine neue XML-Datei namens fldtypes_MSDNSHarePointSilverlight.xml im Ordner XML des Projekts, und fügen Sie den folgenden Markupcode hinzu.

<?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[,&nbsp;]]></HTML>
          <Column SubColumnNumber="1" HTMLEncode="TRUE" />
        </Default>
      </Switch>
    </RenderPattern>
  </FieldType>
</FieldTypes>

Beachten Sie, wie ein Token in den ersetzbaren Token in der FieldTypeClass-Definition verwendet wird. Mit diesen Token werden einfach benutzerdefinierte Komponenten in SharePoint-Projekten erstellt. Eine Liste aller ersetzbaren Token finden Sie unter Replaceable Parameters. In diesem Fall wird die Projektdatei *.csproj geändert, um sicherzustellen, dass die *.xml-Dateien Bestandteil des Tokenersetzungsvorgangs sind.

Jetzt sind der benutzerdefinierte Feldtyp und das Feldsteuerelement vollständig. Die restlichen Schritte beinhalten das Packen, Bereitstellen, Installieren, Implementieren und Testen des benutzerdefinierten Feldtyps, des Feldsteuerelements und der Silverlight 3-Anwendung. Das endgültige Projekt sollte etwa wie in Abbildung 7 aussehen.

Abbildung 7. Darstellung des endgültigen Projekts

Endgültige Projektdarstellung

Die Bereitstellung benutzerdefinierter Feldtypen und Steuerelemente ist sehr einfach, wenn SharePoint-Entwicklungstools in Microsoft Visual Studio 2010 verwendet wird: Klicken Sie mit der rechten Maustaste auf das Projekt, und klicken Sie dann auf Bereitstellen. Allerdings müssen Sie auf ein Problem eingehen, bevor Sie dies tun. Wenn benutzerdefinierte Feldtypen mit den zugehörigen Feldsteuerelementen für die Verwendung in einer SharePoint Foundation 2010 bereitgestellt werden, ist weiter nichts erforderlich. Wenn sie jedoch auf einer SharePoint-Veröffentlichungswebsite verwendet werden sollen, müssen Sie einen sicheren Zugang zur Datei web.config der Hostwebanwendung hinzufügen. In der Regel erledigen dies die SharePoint-Entwicklungstools. Sie sind aber nicht dafür eingerichtet, dies für benutzerdefinierte Feldtypen und Steuerelemente zu erledigen. Weil die Tools sehr erweiterungsfähig sind, ist dies jedoch eine relativ leichte Aufgabe.

Um den Paket-Designer zu öffnen, klicken Sie mit der rechten Maustaste im Projekt auf den Knoten Paket, und klicken Sie dann auf Designer anzeigen. Wählen Sie danach am unteren Seitenrand die Registerkarte Manifest und anschließend auf das Steuerelement [+] Optionen bearbeiten aus. Die Änderungen, die in den weißen Bereich der Manifestvorlage eingegeben werden, werden mit dem zusammengeführt, was die Tools automatisch generieren. Damit die Tools einen sicheren Steuerungseintrag für die Assembly hinzufügen, muss die gesamte Assembly dupliziert und dann der sichere Steuerungseintrag wie folgt hinzugefügt werden.

<?xml version="1.0" encoding="utf-8"?>
<Solution xmlns="http://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>

Beachten Sie im oberen Teil des Fensters, dass die Änderungen im Bereich Vorschau des verpackten Manifests angezeigt werden.

Jetzt stellen Sie den benutzerdefinierten Feldtyp bereit, indem Sie mit der rechten Maustaste auf das Projekt AtomFieldType klicken und dann Bereitstellen auswählen.

Der benutzerdefinierte Feldtyp und das Feldsteuerelement werden jetzt bereitgestellt und installiert und sind für den Einsatz in einer SharePoint-Website bereit.

Der benutzerdefinierte Feldtyp, das Feldsteuerelement und die Silverlight 3-Anwendung können zwar in einer Microsoft SharePoint Foundation 2010-Website verwendet werden, Sie verwenden jedoch eine oss14long-Veröffentlichungswebsite.

Wechseln Sie zu einer Veröffentlichungswebsite, und navigieren Sie zum Websiteinhaltstyp-Katalog (klicken Sie im Menü Websiteaktionen auf Websiteeinstellungen und dann im Abschnitt Galerien auf den Link Websiteinhaltstypen).

Suchen Sie den Inhaltstyp Artikelseite, und fügen Sie ihm eine neue Websitespalte hinzu. Sie sollten diese Websitespalte ATOM Feed nennen und ihr den Feldtyp ATOM Feed Picker zuweisen.

Nachdem dem Inhaltstyp ein neues Feld hinzugefügt wurde, erstellen Sie ein Seitenlayout, das dem Inhaltstyp Artikelseite zugeordnet wird. Starten Sie SharePoint Designer 2010, und öffnen Sie dann die Veröffentlichungswebsite, die die neue Websitespalte enthält. Klicken Sie im Bereich Navigation unter Websiteobjekte auf Seitenlayouts. Klicken Sie danach im Menüband auf Neues Seitenlayout. Wählen Sie im Dialogfeld Neu, das daraufhin geöffnet wird, den Inhaltstyp Artikelseite in der Liste aus.

Ziehen Sie das Feld ATOM Feed von der Toolbox in das Seitenlayout, das Sie erstellt haben. Wenn die Toolbox nicht angezeigt wird, klicken Sie auf der Registerkarte Einfügen im Menüband auf SharePoint und dann auf Toolbox anzeigen. Speichern Sie die Änderungen in der Datei, checken Sie die Datei ein, und veröffentlichen Sie dann die Änderungen.

Erstellen Sie im Browser eine Seite unter Verwendung des neuen Seitenlayouts. Nachdem die Seite erstellt wurde, sollte der Browser sie im Bearbeitungsmodus anzeigen. Das neue Feldsteuerelement sollte mit dem sich drehenden ATOM-Symbol angezeigt werden, wie in Abbildung 8 dargestellt.

Abbildung 8. Feldsteuerelement mit sich drehendem ATOM-Symbol

Feldsteuerelement mit rotierendem ATOM-Symbol

Klicken Sie auf die Schaltfläche, und geben Sie dann die URL eines bekannten ATOM-Feeds ein. Klicken Sie auf die Schaltfläche Title & Publication Date und anschließend auf OK. Auf der Seite sollten jetzt die ATOM-Feedelemente dargestellt werden. Schließlich checken Sie die Seite ein. Daraufhin wird die im Bearbeitungsmodus angezeigte Schaltfläche verborgen, weil sich die Seite jetzt im Präsentationsmodus befindet und wie in Abbildung 9 aussehen sollte.

Abbildung 9. Seite im Präsentationsmodus

Seite im Präsentationsmodus

In diesem Artikel wird gezeigt, wie ein benutzerdefinierter Feldtyp und ein Feldsteuerelement zur Verwendung in einer SharePoint-Website erstellt werden. SharePoint bietet Entwicklern die Möglichkeit, benutzerdefinierte Steuerelemente und Feldsteuerelemente zu erstellen, wenn die systemeigenen Optionen zum Speichern und Darstellen von Feldern im Anzeige- und Bearbeitungsmodus nicht den Geschäftsanforderungen entsprechen. Zudem wird in diesem Artikel demonstriert, wie mit Microsoft Silverlight 3 eine benutzerdefinierte Anzeige und eine interessante Bearbeitungsoption für den Benutzer erstellt werden kann. In diesem Zusammenhang geht der Artikel auch auf die Anforderungen der Aktualisierung von SharePoint-Webanwendungen zum Hosten von Silverlight 3-Anwendungen ein.

Ich möchte mich bei folgenden Personen bedanken: Karine Bosch (SharePoint MVP) für ihre Unterstützung beim Erstellen des Beispiels, das in diesem Artikel verwendet wird.

Anzeigen: