Silverlight und BPOS

Logik in einer BPOS-Anwendung

Albrecht Darimont – MindBusiness

Teil 1: Was ist Silverlight

Teil 2: Warum Silverlight und BPOS

Teil 3: Ein Projekt

Teil 4: Was wir brauchen

Teil 5: Lists-WebService einbinden

Teil 6: XAML

Teil 7: Eine ASPX-Seite

Teil 8: Die Anwendung mit dem SharePoint Designer zusammenführen

Für wenn ist dieser Blog geschrieben?

• für .Net-Entwickler, die ein Silverlight–BPOS Projekt nachvollziehen möchten
• für Web-Entwickler, die ihre Seiten mit Logik anreichern und dabei auf Silverlight-Module zurückgreifen möchten
• für Alle, die im Umfeld BPOS arbeiten und auf die Frage, wie kann ich BPOS noch attraktiver machen, eine Antwort suchen

In diesem Blog werde ich nicht auf Fallstricke, Workarounds etc. eingehen. Das wird Thema eines weiteren Blogs sein.

Teil 1: Was ist Silverlight

In diesem Beitrag werde ich darauf eingehen, was Silverlight ist.

Silverlight ist die Microsoft-Technologie, die in unmittelbarer Konkurrenz zu Flash und Java Applets steht. Man kann also mit Silverlight im Browser (!) einen Bereich öffnen, in dem Animationen und Benutzerprozesse ablaufen, die einen Neuaufbau des Bildschirms, also einen HTTP-Request, überflüssig machen. Aus der Sicht des Benutzers ergibt dabei ein Look & Feel wie bei einer Desktop-Anwendung.

Beispiel:

Ohne Silverlight  führen Benutzeraktionen wie Mausklick zu einem kompletten Neuaufbau der Seite, die Anwendung “flimmert”.

Mit Silverlight werden nur Teile des Bildschirm ausgetauscht, die Anwendung “flimmert” nicht. (Den technischen Hintergrund werde ich noch beschreiben)

Webanwendungen, die den Eindruck vermitteln, als handle es sich um eine Desktop-Anwendung, werden auch als Rich Internet Application, RIA, bezeichnet. Wird eine RIA auf Basis von JavaScript, also clientseitig, realisiert, dann spricht man auch von einer Ajax-Anwendung.

Unsere große Herausforderung besteht nun darin, mit Hilfe von Silverlight BPOS-Anwendungen aufzuwerten, indem wir sie mit Silverlight-Komponenten anreichern und damit den Kunden beeindrucken.

Wenn Ihr wissen wollt, was Silverlight kann, dann besucht mal diese Seite:

http://demos.telerik.com/silverlight/myalbums/

Teil 2: Warum Silverlight und BPOS

BPOS ist eine feine Sache, aber man ist relativ eingeschränkt. Es heißt ja, dass wir keine eigene Logik benutzen können, customed code. Das stimmt aber so nicht, denn es gibt ja Silverlight und auch JavaScript.

Wenn wir JavaScript verwenden, dann wird die Logik clientseitig umgesetzt und wir müssen auf JavaScript-Bliotheken wie JQuery oder Prototype zurückgreifen.

Silverlight hat den großen Vorteil, dass wir hier das mächtige .Net Framework verwenden können.

Wir erzeugen mit Silverlight bzw. mit Visual Studio ein Modul, kopieren dies mit Hilfe des SharePoint Designers auf den Server, binden es in eine ASPX-Seite ein und schon haben wir eine eigene Logik. Von dem Möglichkeiten der Animation und Aufwertung der GUI z.B. durch Multimedia-Dateien, mal ganz abgesehen.

Wir werden als Beispiel ein Silverlight-Modul schreiben, mit dem wir eine Liste ein und ausblenden können. Es wird kein flimmern geben und wir haben die Bedingungen geschaffen, um beliebige Logik mit beliebiger Interaktion einzubinden.

Der Nicht-Contentbereich der Site bleibt unverändert, da nur die zu aktualisierenden Inhalte nachgeladen werden.

Und das schönste ist, dass wir diese Logik lokal auf einem beliebigen SharePoint testen können.

Teil 3: Ein Projekt

Unser Projekt deckt folgenden USE-Case ab:

• Der Inhalt einer Liste soll in einem Fenster angezeigt werden.
• Beim ersten Laden der Seite soll die Liste schon vollständig ausgelesen sein.
• Dabei stehen zwei Buttons zur Verfügung.
• Mit einem Button wird die Ausgabe der Liste gelöscht, mit dem anderen Button aktualisiert.

Das Ergebnis sieht dann wie folgt aus:

Klick auf den Button Liste aktualisieren

Klick auf den Button Liste löschen

Im gezeigten Beispiel handelt sich sich um die in der folgende Abbildung gezeigte benutzerdefinierte Liste ProjectList

Teil 4: Was wir brauchen

Wir benötigen folgende Werkzeuge:

• Visual Studio 2008 mit Silverlight 3 Visual Studio Tools oder Visual Studio 2010
• SharePoint Designer 2007 bzw. SharePoint Designer 2010

Die Software so wie Materialien zu Silverlight finden Sie hier:

http://silverlight.net/

Know How:

• .Net Kenntnisse, C# oder Visual Basic
• HTML und ASPX
• Grundverständnis für XML-Verarbeitung
• BPOS – Architektur

Das hier beschriebene Projekt wurde mit einem englischen Visual Studio, dem SharePoint Designer 2007 (deutsch)  unter Windows 7 erzeugt.

Starten Sie nun Visual Studio und legen Sie über File / New / Project wie in den folgenden Abbildungen gezeigt ein Silverlight-Projekt an.

Legen Sie im folgenden Menü als Projekt Typ ASP.NET Web Site fest.

Das erzeugte Silverlight Projekt sieht dann so oder so ähnlich aus. Die für uns relevanten Dateien sind markiert.

Die beiden xaml-Dateien haben zu diesem Zeitpunkt die folgenden Inhalte:

Die Umsetzung des Projektes lässt sich in folgenden Schritten zusammenfassen:

1. Silverlight-Projekt mit Visual Studio erzeugen
2. WebService einbinden
3. xaml-Datei für die GUI definieren
4. Code-Behind für die GUI schreiben
5. Eine ASPX-Seite erzeugen
6. Silverlight-Modul in BPOS importieren
7. Modul in ASPX-Seite einbinden

Fertig!

Teil 5: List WebService einbinden 

Der WebService ist die Grundlage für den Zugriff auf BPOS-Listen in einem Silverlight-Modul. Was ein WebService eigentlich ist, darüber gehen die Meinungen auseinander. Ich möchte hier meine ganz persönliche Definition beschreiben.

Ein WebService zeichnet sich durch vier Dinge aus:

• In der Regel wird das HTTP-Protokoll als Transportprotokoll verwendet, daher Web!
• WebService können von beliebigen Servertechnologien, IIS, JEE Anwendungsserver etc., angeboten werden, daher Service 
• WebService Client können in beliebigen Sprachen geschrieben sein, die einen Service via HTTP und XML nutzen.
• WebService benutzen XML als Datenformat

Für uns wichtig ist die Tatsache, dass der SharePoint einen großen Teil seiner Features als WebService zur Verfügung stellt. Da heißt, dass man prinzipiell auf alle Features des SharePoint zugreifen kann, ohne dafür Anwendungen auf dem Server installieren zu müssen. Und das ist der springende Punkt. Wir haben keinen Zugriff auf das Filesystem des  BPOS-Server, wollen aber eigene Logik benutzen. Konsequenterweise setzen wir auf WebServices. Und Silverlight bietet uns die Möglichkeit, WebServices und .Net zu nutzen.

Im Teil 6 werden Sie sehen, wie wir mit XAML eine GUI definieren. Im Code-Behind greifen wir auf BPOS zu und benutzen dazu einen SOAP-Client (WebService), der via XMLHTTPRequest eine BPOS-Liste als XML-File anfordert und verarbeitet. Dazu müssen wird Bibliotheken einbinden. In Visual Studio geschieht dies durch das Einbinden einer Service Reference.

Und so gehen wir vor.

Nach dem Erstellen des Silverlight-Projektes klicken sie die Anwendung mit rechts und wählen dann Add Service Reference. 

Geben Sie anschließend die Adresse Ihres BPOS-Servers ein und ergänzen Sie diese wie hier gezeigt:

<ihr server>/_vti_bin/lists.asmx?WSDL 

Klicken Sie anschließend auf OK und geben Sie Benutzername und Passwort ein.

Danach stehen Ihnen alle Funktionen des Lists-WebService zur Verfügung. Das sind immerhin 146 Funktionen. 

Teil 6: XAML

Extensible Application Markup Language (XAML) ist eine deklarative Sprache, mit deren Hilfe Objekte wie Buttons, Listenfelder etc. angezeigt werden können. Der Vorteil von XMAL besteht darin, dass die Definition der GUI, das “Aussehen” der Anwendung, von der Logik der Software getrennt werden kann. Die Beschreibung der Oberfläche wird in einer xaml-Datei gespeichert. Dazu gibt es eine Code-Behind-Datei, welche Klassen-Definitionen, Eventhandler etc. enthält. In einem Visual Studio Projekt sieht das ganze dann so aus:

Wir haben die xaml-Datei und den Code-Behind. Dieser ist in unserem Beispiel in C# geschrieben.

Schauen wir uns nun die beiden Dateien etwas genauer an. Zuvor halten Sie sich aber immer vor Augen, dass die beiden Dateien absolut keinen Bezug zu BPOS haben. Die hier zu verarbeitende Liste könnte auch von einer anderen Plattform abgerufen werden.

Die erweiterte Datei MainPage.xaml

Ohne zu sehr in die Details zu gehen können wir folgendes erkennen:

1. Es werden drei Microsoft Namespaces eingebunden
2. Wir definieren ein UserControl als Klasse, Root-Element <UserControl>
3. Die Zeichenfläche in ein Gitternetz, GRID, mit der ID, dem Namen, “LayoutRoot”
4. Im Gitternetz wird eine Listbox gezeichnet, die den Namen, die ID, _list besitzt. 
5. Die Datenquelle ist unidirektional angebunden, also von der Quelle zur Liste
6. Innerhalb der Liste definieren wir ein Item Template, das wiederum aus einem Daten Template besteht
7. Die Daten werden dann in einem Layout Container angezeigt, der StackPanel heißt.
8. Im Container werden die Objekte angezeigt, die als Title, Type und Client gebunden sind.
9. Nach der Listbox folgt die Definition zweier Buttons. Die Attribute definieren Name( ID) , Beschriftung, Höhe. Breite etc. Für die Interaktion wichtig ist die Definition des Click-Attributes. Hier steht der Name eines Event-Handler. Um es für nicht-Entwickler etwas einfacher auszudrücken: Hier wird auf Programmcode verwiesen, der ausgeführt werden soll, wenn der Button geklickt wurde.

Exkurs:
In einem StackPanel kann der Inhalt Vertikal oder Horizontal angeordnet werden, Standard ist vertikal. Es würde also alle Listenelemente untereinander angeordnet werden. In unserem Beispiel haben wir die horizontale Orientierung gewählt.

Bevor wir uns nun den Code-Behind anschauen sollten wir uns nochmals vor Augen halten, dass XAML nur das Layout definiert, keine Logik. Die steht jetzt in der im folgenden abgebildeten Datei MainPage.xaml.cs.

Ich habe diese Datei verkürzt dargestellt um die wichtigsten Dinge hervorzuheben.

Betrachten wir zunächst die beiden using-Direktiven

1. using System.Xml.Linq;
2. using SilverlightApplication.ServiceReference1;

Die erste Direktive bindet für das Parsen von XML-Dateien die Linq-Bibliothek ein. Linq, Language INtegrated Query, ist eine Komponente von .Net zur Abfrage von Datenquellen wie Datenbanken und XML-Dateien.

Die zweite Direktive bindet einen WebService ein, und zwar den SharePoint-WebService für die Abfrage und Manipulation von Listen. Mehr dazu, insbesondere zur Vorgehensweise und zum theoretischen Hintergrund, haben Sie im Teil 5 erfahren.

Durch das Einbinden der beiden Bibliotheken können wir via WebService auf die BPOS-Listen zugreifen und mit diesen arbeiten. Das Besondere dabei ist, dass die Kommunikation zwischen dem Browser und dem BPOS folgende Merkmale hat:

• Der HTTP-Request ist ein XMLHttpRequest, d.h. der Datenaustausch erfolgt im “Hintergrund”, in der Adresszeile ändert sich nichts und nur Teile der Web-Seite werden neu aufgebaut
• Die Daten werden als XML-Daten übertragen

Die folgenden Ausführungen wenden sich  an Entwickler. Für nicht-Entwickler ist vor allem wichtig zu erkennen, dass im Quellcode XML-Daten verarbeitet werden. Die Verarbeitung erfolgt durch den Browser bzw. das Silverlight PlugIn. Die Kommunikation im Hintergrund wird auch Asynchrone Kommunikation genannt.

Nun zum Programm selbst:

1. Als erstes erzeugen wir einen ListsSOAPClient, der die XML-Verarbeitung für uns übernimmt.SOAP ist ein  XML-Dialekt für die Realisierung von WebServices, manchmal auch als Kommunikationsprotokoll bezeichnet (was es definitiv nicht ist).
2. Wir definieren ein XML-Dokument, eine XML Abfrage, einen Container für Listfelder und ein XML-Element für Abfrage-Optionen.

Beim Erzeugen des Silverlight-Objektes geschieht nun folgendes:

1. Es wird ein EventHandler erzeugt, der immer dann aufgerufen wird, nachdem die BPOS-Liste geladen wurde.
2. Dann wird im Konstruktor  ein XML-Dokument erzeugt.
3. Dann wird eine XML-Query erzeugt, die XML-Dokument dient als Factory.
4. In gleicher Weise werden ViewFields und QueryOptions erzeugt.

Zum Schluss erfolgt ein Asynchroner Request, der die Liste lädt und dabei den WebService des BPOS-Servers nutzt.

proxy.GetListItemsAsync(“ProjectList”, “”, query, viewFields, “10″, queryOptions, “”);

Der erste Parameter übergibt den Namen der abzufragenden Liste. Diese Methode ruft automatisch nach dem erhalt der Liste den EvenHandler
void proxy_GetListItemsCompleted(object sender, GetListItemsCompletedEventArgs e)
auf.

Dieser EventHandler wertet die übergebene Liste aus und schreibt sie in das Objekt Projekts, welches dann als Content der ListBox  _list zugewiesen wird.

_list.DataContext = Projects;

Sie erinnern sich, _list ist die Listbox, dir wir mit XAML in der Datei MainPage.xaml beschrieben haben.

Ich hoffe, der Ablauf ist deutlich geworden. Einsteiger müssen sich natürlich noch intensiv mit der Syntax und den hier beschriebenen Objekten auseinander setzen.

Aus der Beschreibung des Quellcodes wird deutlich, dass die Liste sofort dargestellt wird. Mit Hilfe der beiden Buttons kann die Liste aktualisiert werden, indem  die Proxy-Methode nochmals aufgerufen wird.

Oder aber wird setzen die ListBox zurück, wie im EventHandler unseres zweiten Button programmiert.

Damit wäre der Quellcode für die XAML-Datei und die dahinter liegende c#-Datei beschrieben.

Nachdem wir nun beide Dateien erstellt haben können wir die Anwendung kompilieren, build. Blenden Sie danach alle Dateien ein (wenn nicht schon geschehen) und Sie sehen das Ergebnis.

Die entscheidende Datei ist die SilverlightApplication.xap. Das ist eine ZIP-Datei mit folgendem Inhalt:

Auf diese Datei werden wir dann nochmals in Teil 8 zurück kommen. Diese muss nämlich in BPOS importiert werden.

Teil 7: Die ASPX-Seite

Nachdem wir eine Silverlight-Anwendung, eigentlich ein Modul, programmiert haben, müssen wir es nur noch in eine ASPX-Seite integrieren, die zu unserem BPOS gehört.

Und so sieht unsere ASPX-Seite aus:

Wenn Sie den Quelltext kopieren, bitte die Kommentarzeichen entfernen.

Im SharePoint Designer sehen Sie den Quelltext wie abgebildet:

Für Web Entwickler ist das Prinzip nicht neu. In einem Object-Tag wird eine Source referenziert, in diesem Falle die SilverlightApplication.xap. Über width und height wird die Größe der Zeichenfläche definiert. Deren Inhalt und Interaktion wird vom Silverlight-Modul bestimmt. Das Modul kann nun permanent erweitert werden, die ASPX-Seite bleibt immer gleich.

Nun zur Umsetzung.

Teil 8: Die Anwendung mit dem SharePoint Designer zusammenführen

Wir tauschen jetzt die Rolle und werden Web Entwickler. Da wir mit SharePoint arbeiten ist es nur konsequent, auch den SharePoint Designer einzusetzen. Nach dem Start stellen Sie eine Verbindung zu Ihrem BPOS her.

Wir müssen jetzt zwei Dinge tun:

• Zum einen die oben gezeigte ASPX-Seite erstellen
• Zum anderen die xap-Datei, in unserem Fall die  SilverlightApplication.xap, importieren.

Beginnen wir mit dem Import. Wählen Sie Datei / Import / Datei / Datei Hinzufügen und anschließend OK.

Erstellen Sie dann die gezeigte ASPX-Seite über Datei / Neu / Seite

Fügen Sie in der Datei in der Quellcodeansicht die folgenden Zeilen ein und denken Sie daran, die Kommentarzeichen <!– und –> zu entfernen:

<!–
<asp:Content id=”Content1″ runat=”server” contentplaceholderid=”PlaceHolderMain”>
<object data=”data:application/x-silverlight,” type=”application/x-silverlight-2″ width=”300″ height=”400″>
<param name=”source” value=”SilverlightApplication.xap”/>
<param name=”onerror” value=”onSilverlightError” />
<param name=”background” value=”red” />
</object>
</asp:Content>

–>

Das Ergebnis sieht dann in der Ordnerliste so aus:

Wenn Sie nun das Ergebnis Ihrer Arbeit sehen wollen, dann klicken Sie mit rechts auf die erstellen ASPX-Seite und wählen dann Browservorschau.

Die Liste wird beim ersten Laden sofort angezeigt und kann jetzt über die beiden Buttons aus der Ansicht gelöscht oder wieder aktualisiert werden.

Have a lot of fun :-)