LightSwitch

Erstellen von modernen Produktivitäts-Apps für Unternehmen mit LightSwitch

Jan Van der Haegen
Beth Massi

In diesem Artikel werfen wir einen Blick auf einige der neuen Features in Visual Studio LightSwitch, mit denen Sie moderne, mobile Produktivitäts-Apps für Unternehmen erstellen können.

Visual Studio LightSwitch (im Folgenden kurz LightSwitch genannt) ist darauf ausgerichtet, die Entwicklung von Apps für Unternehmen zu vereinfachen und zu verkürzen. LightSwitch-Apps können eine Vielzahl von Datenquellen verwenden, Geschäfts- und Autorisierungslogik bereitstellen und Clients erstellen, die auf einer ganzen Reihe von Geräten ausgeführt werden können – alles, ohne dass Grundlagencode geschrieben werden muss.

LightSwitch kann mehrere Datenquellen aggregieren und macht automatisch einen Satz offener Datendienste (das Open Data-Protokoll oder OData) verfügbar, um benutzerdefinierte Clients und Szenarios im Bereich Self-Service-Business Intelligence (BI) zu unterstützen. Mit LightSwitch können Sie zudem Code schreiben, um die Apps bei Bedarf anzupassen, ob dies nun die Steuerelemente der Benutzeroberfläche, die Geschäftslogik, Datendienste oder andere Komponenten betrifft.

Im April wurde Visual Studio 2012 Update 2 veröffentlicht. Damit einhergehend können Sie nun mit LightSwitch auch schnell touchzentrierte HTML5-Clients erstellen, die gut auf modernen Mobilgeräten funktionieren. LightSwitch-HTML-Clients basieren auf standardkonformem HTML5 und JavaScript und bieten auf Windows RT- und Windows Phone 8-Geräten, auf iPhones und iPads mit iOS 5 und 6 sowie auf Android 4.x-Geräten eine moderne, vorrangig auf Touch ausgerichtete Umgebung.

Mit dem neuen SharePoint 2013-App-Modell ergänzt LightSwitch zudem SharePoint und Office 365 um die einfache Erstellung von benutzerdefinierten Unternehmens-Apps. Viele Unternehmen nutzen SharePoint heute als Knotenpunkt, um die Zusammenarbeit von Mitarbeitern und das Zusammenwirken von Inhalten und Prozessen zu verbessern. Sie können sich weiterhin dafür entscheiden, die Apps selbst oder in Windows Azure zu hosten. Aber durch die Aktivierung von SharePoint in den LightSwitch-Apps können Sie die App-Lebenszyklusverwaltung, Identitäts- und Zugriffssteuerungsfunktionen in SharePoint verwenden – ganz abgesehen von den Prozessen, die in Ihrem Unternehmen bereits in SharePoint ausgeführt werden, und den bereits in SharePoint vorliegenden geschäftlichen Daten.

LightSwitch-HTML-Client

In LightSwitch beginnen Sie immer mit dem Datenmodell, unabhängig davon, ob Sie neue Daten modellieren oder planen, die App mit vorhandenen Datenquellen zu verbinden. Da wir uns in diesem Artikel verstärkt mit den neuen Features beschäftigen, haben wir bereits ein einfaches Datenmodell erstellt und der Datenbank einige Anfangsdaten hinzugefügt. Somit sind die ersten Schritte schon getan, und Sie können mit dem Erstellen eines Clients beginnen, der dazu dient, bei den interessantesten Sitzungen einer spannenden Konferenz (wie beispielsweise Visual Studio Live!) anwesend zu sein. Wenn Sie sich zum ersten Mal mit LightSwitch befassen, sollten Sie sich unbedingt mit den zahlreichen Qualitäten vertraut machen, was Datenmodellierung, Self-Service-Business Intelligence, Parallelitätsbehandlung und Multithreading betrifft. Lesen Sie dazu früher erschienene MSDN Magazine-Artikel, zum Beispiel „Bringen Sie Ihre Daten mit Visual Studio LightSwitch 2012 in Form“ in der September 2012-Ausgabe (msdn.microsoft.com/magazine/jj618303), oder recherchieren Sie im LightSwitch Developer Center (msdn.com/lightswitch).

Der HTML-Client bietet einen Ansatz zum Erstellen von Einzelseiten-Apps mit Touchpriorisierung, die auf einer breiten Palette von mobilen Geräten ausgeführt werden. Diese Apps werden häufig als Begleit-Apps bezeichnet, um zu signalisieren, dass sie nur eine bestimmte Rolle in einer umfangreicheren Architektur spielen. Eine solche Begleit-App zum Durchsuchen von Daten an einem Speicherort zu erstellen, wie wir es in diesem Artikel tun, ist eine hervorragende Übung für erste Schritte mit dem HTML-Client. Sie ist aber überhaupt nicht repräsentativ für die Vielzahl von Problemen, die mit diesen Apps gelöst werden können. Mit den Begleit-Apps können Unternehmen Zeit und Geld sparen, denn mit diesen Apps können Daten nicht nur abgefragt, sondern auch geändert und zurückgespeichert werden (beispielsweise zur Erfassung einer Kundenunterschrift bei einer Paketlieferung), und manchmal können sogar gerätespezifische Funktionen wie Geolocation genutzt werden (beispielsweise zur Standorterfassung beim Sammeln einer Erdprobe).

Bildschirmvorlagen und Navigation Unabhängig davon, welchen Clienttyp Sie erstellen, definiert LightSwitch Bildschirme mithilfe einer Reihe von vordefinierten Vorlagen, aus denen Sie eine auswählen können. Um einen Bildschirm hinzuzufügen, klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf das Projekt und wählen die Option „Bildschirm hinzufügen“ aus. Dadurch wird ein Dialogfenster geöffnet, in dem Sie eine Bildschirmvorlage auswählen und einige weitere Optionen wie den Namen des Bildschirms und die von diesem verwendeten Daten bestimmen können. Der Bildschirm wird anschließend anhand der ausgewählten Vorlage erstellt und im Bildschirm-Designer geöffnet.

Erfahrenere LightSwitch-Entwickler kennen das bereits, denn die Handhabung zur Entwurfszeit ist fast genauso wie bei der Erstellung von Bildschirmen mit LightSwitch in einer Out-of-Browser-Silverlight-App, was den Lernprozess vereinfacht. Die der App zugrunde liegende Model-View-ViewModel(MVVM)-Architektur in LightSwitch hat sich nicht geändert, und im Bildschirm-Designer werden weiterhin links die Anzeigemodelle angezeigt und rechts die entsprechenden Ansichten dargestellt.

Eine wichtige Änderung betrifft die Einrichtung der Navigation von einem Bildschirm zum anderen (oder die Bindung von beliebigen anderen Aktionen an Ereignisse, die durch ein Tippen des Benutzers auf Bildschirmelemente ausgelöst wurden), die jetzt zu einem wesentlichen Bestandteil im Bildschirm-Designer geworden ist. Das ist eine offensichtliche Verbesserung, nicht nur, weil Apps so touchorientiert sind, sondern auch, weil der LightSwitch-HTML-Client eine Einzelseitenanwendung (Single-page Application, SPA) erstellt. Der Silverlight-Client hatte eine mehrfache Dokumentschnittstellen(MDI)-Shell, dank der viele Bildschirme gleichzeitig geöffnet sein konnten. In LightSwitch-HTML-Apps gewinnt das Navigieren zwischen Bildschirmen immer mehr an Bedeutung.

Wenn Sie beispielsweise die Vorlage zum Durchsuchen von Daten für die Sitzungsentität verwenden, um den ersten Bildschirm in der App zu erstellen, wird ein Bildschirm mit einer Liste von Sitzungen generiert. (Diese Liste wird im Bildschirm-Designer ausgewählt, anschließend klicken Sie im Eigenschaftenfenster auf den Link „Element bearbeiten – Tippaktion“.) Dadurch wird ein Dialogfeld mit stark angepassten Vorschlägen geöffnet: Da der Benutzer die Sitzungen durchsucht und auf ein einzelnes Element getippt hat, wird im Dialogfeld die Aktion vorgeschlagen, einen Bildschirm zu öffnen, in dem der Benutzer die Details der ausgewählten Sitzung anzeigen kann. Ein solcher Bildschirm wurde noch nicht erstellt, und daher wird im Dialogfeld vorgeschlagen, dass Sie den Vorgang fortsetzen und auch diesen Bildschirm erstellen. Dies wird in Abbildung 1 gezeigt.

Setting Up Actions for Touch Events Is Now a First-Class Citizen in the Screen DesignerAbbildung 1: Das Einrichten von Aktionen für Touchereignisse ist jetzt ein wichtiger Bestandteil im Bildschirm-Designer

Nachdem Sie zugestimmt haben, wird die App durch Drücken von F5 erstellt und im Standardbrowser eine neue Debugsitzung gestartet. Die Startseite wird geöffnet. Sie zeigt eine einfache Liste mit Sitzungen an. Wenn Sie auf eine Sitzung tippen, navigiert die App nahtlos zum neu generierten Detailbildschirm, in dem die Details der jeweiligen Sitzung in einem einfachen zweispaltigen Layout angezeigt werden, wie in Abbildung 2 gezeigt.

Adaptive Design Helps to Write a Single App for Multiple Form FactorsAbbildung 2: Adaptive Gestaltung hilft dabei, eine einzelne App für mehrere Formfaktoren zu schreiben

Dieser Bildschirm sieht zwar einfach aus, aber es steckt einiges dahinter. Diese „einfache Sitzungsliste“ wird tatsächlich durch eine vollständig virtualisierte Collection unterstützt, die weitere Elemente lädt, während die Benutzer einen Bildlauf nach unten ausführen, um eine unnütze Übertragung von großen Datenmengen über eine mobile Verbindung zu vermeiden. Das zweispaltige Layout passt sich automatisch an die verfügbare Größe an und ändert sich auf kleineren Geräten in ein einspaltiges Layout. Dies ist ein Schlüsselelement für die Strategie, eine einzelne HTML-App zu schreiben und diese auf einer Vielzahl von Tablets und Telefonen auszuführen, alle mit ihren jeweils eigenen Formfaktoren. Im Visual Studio LightSwitch-Teamblog finden Sie im Beitrag „Entwerfen für mehrere Formfaktoren“ (bit.ly/18F320N) von Program Manager Heinrich Wendel weitere Details zur Vision hinter diesem adaptiven Entwurf, der normalerweise viel Arbeit für die Entwickler bedeutet, in LightSwitch aber mit wenig Aufwand umsetzbar ist.

Zu den weiteren beachtenswerten Elementen im Bildschirm-Designer gehört die erweiterte Nutzung von Popups und Registerkarten, die jeweils ihre eigene Befehlsleiste haben. Ein Beispiel dafür, wie diese das Leben für die Endbenutzer erleichtern, liefert das Hinzufügen eines Filters für die Sitzungen. Dazu wählen Sie zuerst das Sessions-Abfrageelement im Anzeigemodell aus (links im Bildschirm-Designer) und klicken auf „Abfrage bearbeiten“, worauf der Abfrage-Editor geöffnet wird. In diesem können Sie die verwendete Abfrage schnell ändern, indem Sie einige optionale Argumente hinzufügen. Klicken Sie als Nächstes auf die Schaltfläche „Datenelement hinzufügen“, um eine lokale Speaker-Eigenschaft namens „FilterBySpeaker“ hinzuzufügen. Richten Sie eine Datenbindung für diese bestimmte Speaker-ID ein, die auf das entsprechende Abfrageargument ausgerichtet ist, und wiederholen Sie diesen Vorgang für die anderen Entitäten: „Room“, „Time Slot“ und „Track“.

Ziehen Sie zum Abschließen des Bildschirms einfach diese vier neuen Anzeigemodelleigenschaften auf ein neu erstelltes Popup in der Ansicht (rechts im Bildschirm-Designer). LightSwitch schlägt standardmäßig vor, jede der Eigenschaften als Modal Picker-Steuerelement zu visualisieren, was für diese App genau richtig ist. Fügen Sie abschließend der Befehlsleiste eine neue Schaltfläche hinzu, und verwenden Sie dasselbe Dialogfeld, das beim Einrichten von „Element bearbeiten – Tippaktion“ angezeigt wird, um das neu erstellte Popup zu öffnen.

Nun müssen Sie nur noch auf „Speichern“ klicken und den Browser aktualisieren, um den neu hinzugefügten Filter in Aktion zu sehen (für JavaScript ist keine Neukompilierung wie bei herkömmlichen Microsoft .NET Framework-Apps erforderlich). Die Startseite wird geöffnet und zeigt alle Sitzungen in einer virtualisierten Collection an. Zusätzlich wird jetzt eine blaue Befehlsleiste mit der einzelnen Schaltfläche „Filter“ angezeigt. Nach einem Klick auf diese Schaltfläche wird auf verschiedenen Geräten ein Popup mit den vier Filteroptionen angezeigt (siehe Abbildung 3) Sobald Sie eine Auswahl treffen, werden die optionalen Abfrageargumente aufgrund der Datenbindung automatisch aktualisiert. Dies löst wiederum automatisch eine neue HTTP GET-Operation aus, die an den Back-End-Dienst OData gesendet wird, der die Sitzungen mit den richtigen Argumenten filtert und das Ergebnis zurückgibt

The Added Filter in ActionAbbildung 3: Der hinzugefügte Filter in Aktion

Zusammengefasst führt der Bildschirm-Designer hervorragend die richtigen Abstraktionen durch, sodass Sie sich darauf konzentrieren können, mit minimalem Aufwand eine professionelle HTML-App einzurichten. Diese App enthält beispielsweise eine virtualisierte Liste, die gefiltert werden kann, und alles wurde eingerichtet, ohne dass eine einzige Codezeile geschrieben werden musste.

Als Entwickler sollten Sie allerdings nicht zu sehr mit der Philosophie liebäugeln, keinen Code zu verwenden.

Es ist zwar richtig, dass beim Bildschirm-Designer die Abstraktion der eigentlichen Technologie im Mittelpunkt steht, um die Entwicklungsgeschwindigkeit zu erhöhen, und wie bei allen Lösungen zur schnellen Anwendungsentwicklung gehören dazu ein paar Kompromisse hinsichtlich der Anpassungsfähigkeit. LightSwitch bietet jedoch viele Szenarios im Bildschirm-Designer und zudem eine große Anzahl an Erweiterungspunkten. Sie können also die Ärmel hochkrempeln und den Mix aus HTML-, JavaScript- und CSS-Code, aus dem eine App besteht, überschreiben, ändern oder dem Code Elemente hinzufügen.

Sie können der App zum Beispiel eine neue Abfrage hinzufügen, die nur die Sitzungen im nächsten Zeitfenster als Datenelement auf dem Bildschirm zurückgibt, und diese Abfrage auf eine neue Registerkarte auf der Startseite ziehen. Sie können wieder das List-Steuerelement zum Anzeigen der Sitzungen verwenden, aber statt einer einzeiligen Zusammenfassung pro Sitzung (dem Titel) werden mithilfe des Bildschirm-Designers einige Zeilen- und Spaltenlayouts verschachtelt und ein paar zusätzliche Informationen zur Sitzung angezeigt. Das Ergebnis wird in Abbildung 4 im ersten Layout (auf der linken Seite) gezeigt.

Three Different Designs for the Home ScreenAbbildung 4: Drei verschiedene Entwürfe für die Startseite

Branding, Designs und weitere Anpassung Wenn Sie soweit sind, benutzerdefinierten Code hinzuzufügen, können Sie schnell und einfach einige allgemeine Designs und ein Branding übernehmen. Das Logo ist einfach eine PNG-Datei, die Sie aus dem Windows-Explorer heraus ersetzen können, und das Design ist lediglich ein standardmäßiges JQuery Mobile-Design. LightSwitch wird mit einem hellen (Standard) und einem dunklen Design geliefert, die Sie beide mit dem JQuery Mobile-ThemeRoller online ändern können. Nach dem Ändern des Logos und des Designs sehen Sie das Ergebnis in Abbildung 4 im mittleren Layout.

Schließlich können Sie das Aussehen der App mit Render- oder PostRender-Methoden definieren. Wenn Sie im Bildschirm-Designer ein beliebiges LightSwitch-Steuerelement auswählen, wird im Eigenschaftenfenster ein Link zum Bearbeiten von PostRender-Code verfügbar. Durch einen Klick auf diesen Link wird ein JavaScript-Methodenstub generiert, der zur Laufzeit ausgeführt wird, unmittelbar nachdem die LightSwitch-JavaScript-Bibliothek die erforderlichen HTML-Elemente für das bestimmte Steuerelement gerendert hat. Eine Verwendungsmöglichkeit dieses Erweiterungspunkts ist, den Hintergrund der jeweiligen Zeile in der Liste anhand der Kurszugehörigkeit der Sitzung zu ändern. Dazu schreiben Sie in dieser Methode den folgenden Code:

myapp.Home.NextSessionsTemplate_postRender =
  function (element, contentItem) {
  $(element).parent("li").css("background", 
    contentItem.value.Track.Color);
};

Dieser Code erfasst das übergeordnete Element des von LightSwitch hinzugefügten HTML-Elements und legt die CSS-Hintergrundeigenschaft auf die Farbe vom Kurs der aktuellen Sitzung fest („contentItem.value“). Das Ergebnis wird in Abbildung 4 ganz rechts gezeigt.

In Abbildung 4 wird ein offensichtlicher Entwurfsfehler deutlich: Wenn dem Kurs eine helle Farbe zugeordnet wurde, kann ein Element aufgrund des Kontrasts zwischen dem Inhalt und dem Hintergrund unlesbar werden. Um dies zu korrigieren, fügen Sie der Datei „user-customization.css“ zwei wiederverwendbare CSS-Klassen hinzu und ändern den Code, damit er eine dieser Klassen anhängt: 

myapp.Home.NextSessionsTemplate_postRender =
  function (element, contentItem) {
  $(element).parent("li").css("background",
    contentItem.value.Track.Color);
  $(element).addClass(
    (parseInt(contentItem.value.Track.Color.replace(
    "#", ""), 16) > 0xffffff / 2)
    ? 'darkForeground' : 'lightForeground'
  );
};

Die Anpassung des Renderingprozesses durch das Schreiben von PostRender-Methoden kann für eine Reihe von Optionen verwendet werden, die von einfachen CSS-Tricks wie dem Ändern der Hintergrundfarbe bis zum Übernehmen eines wiederverwendbaren JQuery-Benutzeroberflächenwidgets reichen, mit dem alle Elemente der Liste bis auf eines ausgeblendet werden und die Liste zu einem dynamischen Banner- oder Bilderkarussell wird. Die sichtbaren Elemente werden durch einen festgelegten Timer geändert, wie von Koautor Jan Van der Haegen in seinem Blogbeitrag „Erstellen eines JQuery-Schiebereglers für LightSwitch-HTML-Seiten“ (bit.ly/WJwnPw) beschrieben.

Nachdem die Liste der bevorstehenden Sitzungen in ein Banner mit farbcodiertem Hintergrund geändert wurde, kann leicht vergessen werden, welcher Kurs welche Farbe hat. Neben der Änderung von LightSwitch-Standardsteuerelementen mithilfe dieser PostRender-Option können Sie auch das gesamte Rendering von bestimmten Elementen vollständig kontrollieren. Zu diesem Zweck geben Sie im Bildschirm-Designer an, dass die Steuerelemente benutzerdefiniert sind, und schreiben anschließend eigenen Code in der ähnlich generierten JavaScript-Methode „Render“. Um außerdem eine Legende für die Kurse und deren jeweiligen Farbcode zu erhalten, fügen Sie für alle Kurse eine Abfrage als ein Datumselement zum Bildschirmanzeigemodell hinzu und stellen es als „Kachelliste“ dar (ein integriertes alternatives Collectionsteuerelement). Rendern Sie die Farbe für den jeweiligen Kurs in der Vorlage der entsprechenden Kachel mithilfe des folgenden JavaScript-Codes als einfaches Quadrat:

myapp.Home.Color_render = function (element, contentItem) {
  $("<div style='background-color: "+ contentItem.value 
  +";'> </div>").appendTo($(element));
};

Zusätzlich zu den verschiedenen visuellen Anpassungen bietet LightSwitch auch zahlreiche Codeerweiterungspunkte in den ViewModel- und Model-Schichten, mit denen Sie die Ablaufsteuerung und die Geschäftsregeln von Apps optimieren können.

Die App hat jetzt eine erste Registerkarte, die die bevorstehenden Sitzungen in Form eines Banners zeigt. Sie verfügt zudem über eine Legende der Kursfarben und eine zweite Registerkarte mit einer Übersicht über alle Sitzungen, einschließlich eines einfach verwendbaren Filters. Da auf der Startseite bereits alle Kurse gezeigt werden, ist es eine gute Idee, den Filter auf der zweiten Registerkarte auszufüllen, wenn der Benutzer auf der ersten Registerkarte auf einen der Kurse tippt, und die Registerkarte darauf auszurichten, nur die Sitzungen für den ausgewählten Kurs anzuzeigen.

Diese Ablaufsteuerung kann nicht direkt im Bildschirm-Designer eingerichtet werden. Sie können sie aber einfach bewirken, indem Sie die „Kachelliste“ mit den Kursen auswählen und das Registerkartenelement im Eigenschaftenfenster binden, um eine benutzerdefinierte Methode auszuführen. Hiermit wird ein JavaScript-Methodenstub generiert, in dem Sie folgenden Code schreiben können:

myapp.Home.BrowseByTrack_ItemTap_execute = function (screen) {
  screen.getTracks().then(function (tracks) {
    screen.FilterByTrack = tracks.selectedItem;
    screen.showTab("AllSessions");
  });
};

Die App hat jetzt drei verschiedene Blickwinkel, um die Sitzungen zu unterteilen: Anzeigen der bevorstehenden Sitzungen in einem Banner; Klicken auf einen Kurs, um die Liste der Sitzungen nach diesem Kurs gefiltert anzuzeigen oder manuelles Anpassen desselben Filters nach Kurs, Zeitfenster, Redner oder Raum.

Als letzte Perspektive können Sie eine Übersicht über die bevorzugten Sitzungen folgen lassen. Fügen Sie dazu eine einfache Entität namens „FavoriteSessions“ hinzu. Die bevorzugten Sitzungen sind die, für die in der FavoriteSessions-Entität ein Eintrag mit einem bestimmten Namen vorliegt.

Wenn der Bildschirm zum Anzeigen einer bestimmten Sitzung geöffnet wird, bestimmen Sie, ob ein solcher Eintrag vorhanden ist. Dazu führen Sie eine spezielle FindFavoriteSessions-Abfrage auf dem Server aus und speichern das Vorhandensein dieses Ergebnisses in einer booleschen Bildschirmeigenschaft namens „IsFavorite“:

myapp.ViewSession.created = function (screen) {
  myapp.activeDataWorkspace
    .ApplicationData.FindFavoriteSessions(screen.Session.Id)
    .execute().then(
      function (result) {
        screen.IsFavorite = result.results.length != 0;
      }
    );
};

Anschließend fügen Sie der Befehlsleiste der Registerkarte zwei Schaltflächen hinzu: „Favorite“ und „Unfavorite“. Da nur jeweils eine dieser Schaltflächen aktiviert sein kann, verwenden Sie den Codeerweiterungspunkt der Schaltfläche, „CanExecute“. Die LightSwitch-JavaScript-Bibliothek ruft diese Methode zu den richtigen Zeiten auf und stellt sicher, dass die Benutzeroberfläche entsprechend aktualisiert wird. Diese Verhalten kann zwar im Eigenschaftenfenster für jeden Bildschirm überschrieben werden, aber es erfolgt bereits standardmäßig durch Ausblenden der Schaltfläche, die derzeit nicht ausgeführt werden kann. Das spart auf kleinen Geräten wertvollen Platz auf dem Bildschirm:

myapp.ViewSession.Favorite_canExecute
  = function (screen) {
  return !screen.IsFavorite;
};
myapp.ViewSession.Unfavorite_canExecute
  = function (screen) {
  return screen.IsFavorite;
};

Ein besonderes Highlight dieser einfachen Codeausschnitte ist, dass die LightSwitch-JavaScript-Bibliothek verfolgt, wann diese CanExecute-Methoden erneut ausgewertet werden sollen. Genau wie in Silverlight-Out-of-Browser-Apps müssen Sie nicht dafür sorgen, dass bei Änderung einer Eigenschaft Ereignisse ausgelöst werden. Richten Sie einfach einen neuen Wert für die IsFavorite-Eigenschaft an einer beliebigen Stelle der App ein, und die LightSwitch-Laufzeit erkennt automatisch, dass diese speziellen CanExecute-Methoden neu bewertet werden müssen, und aktualisiert die Anzeige nach Bedarf (Ein- oder Ausblenden der Schaltflächen).

Sie müssen jetzt nur noch ein wenig Code schreiben, mit dem bei einem Klick auf die Schaltfläche eine neue „FavoriteSession“ erstellt (oder entfernt) wird:

myapp.ViewSession.Favorite_execute = function (screen) {
  var favored = myapp.activeDataWorkspace.ApplicationData.
    FavoriteSessions.addNew();
  favored.setSession(screen.Session);
  myapp.applyChanges().then(screen.IsFavorite = true);
};

Nachdem Sie die Liste der „FavoriteSessions“ zu einer neuen Registerkarte auf der Startseite hinzugefügt haben, ist die App fertig zum Verpacken und Bereitstellen.

Wie sich zeigt, bietet LightSwitch ein sehr ausgewogenes Verhältnis zwischen dem Entwerfen der App in einem einfachen, aber leistungsfähigen Bildschirm-Designer und der Menge der Anpassungsfähigkeit, die Sie für diese vereinfachte und schnelle Entwicklung einbüßen. Dieses ausgewogene Verhältnis wird durch die Einführung einer großen Anzahl von Erweiterungspunkten erreicht, an denen Sie benutzerdefinierten Code schreiben können, um den Standardentwurf, die Ablaufsteuerung oder das Verhalten der App zu ändern, zu überschreiben oder Code hinzuzufügen.

Integration in SharePoint 2013 und Office 365

Mit SharePoint 2013 wird ein neues, cloudbasiertes App-Modell eingeführt, mit dem Sie Apps erstellen können, die die Funktionen einer SharePoint-Website erweitern. Das Modell unterstützt zudem eine geschichtete Architektur, in der die Geschäftslogik, die Daten und die Benutzeroberfläche der App verteilt werden können. Die Benutzer finden Apps im Office Store oder im privaten App-Katalog ihres Unternehmens, laden die Apps herunter und installieren sie auf ihren SharePoint-Websites. Aufgrund dieses neuen Verteilungsmodells können Sie LightSwitch-Apps erstellen, die auf SharePoint 2013 vor Ort und auf Office 365 ausgerichtet sind. Sie können die LightSwitch-Silverlight-Clients im Browser oder die neuen, mobilbasierten HTML-Clients in SharePoint bereitstellen.

Auf dem Beispiel mit Visual Studio Live! aufbauend, nutzen Sie Office 365-Dienste, damit die Konferenzmitarbeiter den Konferenzplan mit einem SharePoint-Kalender in der LightSwitch-App einrichten können. Wenn eine neue Sitzung genehmigt und ein Zeitfenster ausgewählt wurde, wird dadurch ein neuer Kalendereintrag hinzugefügt. Sie können sich dann eine Reihe von möglichen Workflows vorstellen, die zusätzliche, in SharePoint häufig verwendete Aktionen auslösen. Auf diese Weise erstellen Sie mit LightSwitch touchaktivierte Benutzererfahrungen, mit denen Geschäftsdaten und Prozesse genutzt werden, die im Unternehmen bereits in SharePoint vorliegen bzw. ausgeführt werden.

Aktivieren von SharePoint in LightSwitch-Apps Klicken Sie in den Projekteigenschaften auf die Schaltfläche „SharePoint aktivieren“, und stellen Sie eine lokale oder eine Remote-SharePoint 2013-Website bereit, die Sie für die Entwicklung verwenden möchten. LightSwitch erhält dadurch die Mitteilung, dass die App in SharePoint bereitgestellt werden soll und dass SharePoint-Objekte verwendet werden können. Dem Projekt werden dann die entsprechenden SharePoint-Verweise hinzugefügt.

LightSwitch übernimmt auch automatisch die Behandlung der Authentifizierung für SharePoint über OAuth für Sie. Sie können auch den Zugriffsteuerungsdienst (Access Control Service, ACS) konfigurieren. Dies ist ein weiterer Server, der als Authentifizierungsbroker zwischen der App und SharePoint dient. Wie in Office 365 verwendet die App zur Authentifizierung über ACS ein SharePoint bekanntes Geheimnis. Zur Auswahl steht auch eine Konfiguration mit hoher Vertrauensstufe, sofern diese lokal eingerichtet ist, wie in Abbildung 5 gezeigt.

Enabling SharePoint in a LightSwitch App
Abbildung 5: Aktivieren von SharePoint in einer LightSwitch-App

Um schnell mit dem Entwickeln von SharePoint-Apps zu beginnen, können Sie ein Office 365-Entwicklerabonnement kostenlos testen. Registrieren Sie sich dazu unter dev.office.com. MSDN-Abonnenten erhalten ein einjähriges Abonnement als Bonus über ihre Vorteilswebsite.

SharePoint-Listen als LightSwitch-Entitäten Mit dem Daten-Designer können Sie SharePoint-Listen als Entitäten in das LightSwitch-Datenmodell einbringen. Das ermöglicht, Listendaten direkt über den LightSwitch-Datenkontext zu bearbeiten. Sie können somit Bildschirme unmittelbar für SharePoint-Listendaten erstellen, die Sie bereits eingerichtet haben, und LightSwitch behandelt automatisch die Authentifizierung und die Datenoperationen. Im Szenario für Visual Studio Live! könnten zum Beispiel beliebige der Daten in SharePoint-Listen gespeichert werden, und die Benutzeroberfläche bliebe unverändert.

Wenn Sie SharePoint-Listen in das LightSwitch-Datenmodell einbringen, ist auch ein optimierter Zugriff auf die Listendaten über Code mithilfe der LightSwitch-API möglich. In der App für Visual Studio Live! wollten wir beispielsweise Code schreiben, um automatisch einen SharePoint-Kalender hinzuzufügen, wenn eine neue Sitzung hinzugefügt wird. Klicken Sie dazu im Projektmappen-Explorer mit der rechten Maustaste auf den Serverknoten, und wählen Sie „Datenquelle hinzufügen“ aus. Wählen Sie anschließen SharePoint als Datenquelltyp aus. Geben Sie die SharePoint-Websiteadresse an, und wählen Sie die automatische Auswahl der Benutzeridentität aus. Anschließend werden die SharePoint-Listen angezeigt.

Die verwendete Website enthält bereits einen Kalender namens „ConferenceSchedule“. Fügen Sie diesen in das Datenmodell ein, und richten Sie eine virtuelle Beziehung zu den Sitzungstabellendaten ein. Klicken Sie einfach auf die Schaltfläche „Beziehung“ oben im Daten-Designer, und definieren Sie eine 1:0 oder 1-Beziehung (siehe Abbildung 6).

Setting Up a Virtual Relationship Between Multiple Data Sources
Abbildung 6: Einrichten einer virtuellen Beziehung zwischen mehreren Datenquellen

Erstellen Sie jetzt einen neuen Bildschirm, mit dem die Mitarbeiter neue Sitzungen eingeben können. Sie könnten die ConferenceSchedule-Daten direkt auf dem Bildschirm hinzufügen, aber in diesem Fall wird etwas Servercode geschrieben, damit dies transparent im Hintergrund geschieht. Wenn die Sitzungsdaten gespeichert werden, verwenden Sie die _Inserting- und _Updated-Methoden der Pipeline zum Speichern für die Session-Entität, um einen neuen Eintrag zu dem Plan vom Server hinzuzufügen. Dazu nutzen Sie Visual Basic .NET- oder C#-Code, wie in Abbildung 7 bzw. Abbildung 8 gezeigt. Der Server verfügt über zahlreiche Hooks, mit denen Sie auf diese Weise die Geschäftslogik und die Datenverarbeitung steuern können.

Abbildung 7: Visual Basic .NET-Code zum Hinzufügen eines neuen Eintrags zum SharePoint-Kalender

Private Sub Sessions_Updated(entity As Session)
  Me.UpdateCalendar(entity)
End Sub
Private Sub Sessions_Inserting(entity As Session)
  Me.UpdateCalendar(entity)
End Sub
Private Sub UpdateCalendar(entity As Session)
  If entity.Timeslot IsNot Nothing AndAlso
     entity.Room IsNot Nothing Then
      If entity.ConferenceSchedule Is Nothing Then
        entity.ConferenceSchedule = New ConferenceSchedule()
      End If
      entity.ConferenceSchedule.Title = entity.Title
      entity.ConferenceSchedule.Description = entity.Description
      entity.ConferenceSchedule.StartTime = entity.Timeslot.StartTime
      entity.ConferenceSchedule.EndTime = entity.Timeslot.EndTime
      entity.ConferenceSchedule.Location = entity.Room.Name
      Me.DataWorkspace.VSliveData.SaveChanges()
  End If
End Sub

Abbildung 8: C#-Code zum Hinzufügen eines neuen Eintrags zum SharePoint-Kalender

private void Sessions_Updated(Session entity)
{
  this.UpdateCalendar(entity);
}
private void Sessions_Inserting(Session entity)
{
  this.UpdateCalendar(entity);
}
private void UpdateCalendar(Session entity)
{
  if (entity.Timeslot != null && entity.Room != null)
  {
    if (entity.ConferenceSchedule == null)
    {
      entity.ConferenceSchedule = new ConferenceSchedule();
    }
    entity.ConferenceSchedule.Title = entity.Title;
    entity.ConferenceSchedule.Description = entity.Description;
    entity.ConferenceSchedule.StartTime = entity.Timeslot.StartTime;
    entity.ConferenceSchedule.EndTime = entity.Timeslot.EndTime;
    entity.ConferenceSchedule.Location = entity.Room.Name;
    this.DataWorkspace.VSliveData.SaveChanges();
  }
}

Beim Debuggen der App mit F5 werden Sie zuerst gefragt, ob Sie ihr vertrauen. Nachdem Sie dies bestätigt haben, sehen Sie oben ein SharePoint-Chromsteuerelement, mit dem die Benutzer aus der LightSwitch-App zur SharePoint-Website navigieren können. Fügen Sie eine neue Sitzung hinzu, und klicken Sie dann im Chrom auf „Zurück zur Website“, um den Konferenzplan anzuzeigen. Wenn Sie auf das Event-Element klicken, sehen Sie, dass es von der LightSwitch-App im Namen des Benutzers erstellt wurde. Das zeigt, dass die SharePoint-Benutzeranmeldeinformationen automatisch die LightSwitch-App durchlaufen.

Das SharePoint-Projekt und das clientseitige Objektmodell Neben der Verwendung von Listen als Entitäten gibt es auch andere Methoden, um auf SharePoint-Daten zuzugreifen. Wenn Sie SharePoint in Ihren LightSwitch-Apps aktivieren, steht Ihnen auch das gesamte clientseitige Objektmodell (Client-Side Object Model, CSOM) von SharePoint zur Verfügung. Auf diese Weise können Sie nicht nur Listen bearbeiten, sondern auch auf andere SharePoint-Objekte zugreifen. Wenn Sie beispielsweise eine gewöhnliche App zum Verkauf im SharePoint Store erstellen möchten, müssen Sie SharePoint-Listen auf etwas allgemeinere Weise bereitstellen und bearbeiten.

Beim Aktivieren von SharePoint wird der LightSwitch-Lösung ein SharePoint-Projekt hinzugefügt. Wenn Sie im Projektmappen-Explorer zur „Dateiansicht“ wechseln, sehen Sie diese wie in Abbildung 9 gezeigt. Sie können der App auf diese Weise eine Vielzahl von SharePoint-spezifischen Elementen hinzufügen, die bereitgestellt werden, wenn Sie die App verpacken. Zum Bearbeiten dieser Elemente im Code verwenden Sie anschließend das clientseitige Objektmodell. Fügen Sie dem Projekt beispielsweise eine benutzerdefinierte Liste hinzu, und interagieren Sie dann über das clientseitige Objektmodell mit dieser Liste. LightSwitch macht auf dem Application-Objekt ein SharePoint-Objekt verfügbar, mit dem Sie auf die Host- und App-Webs zugreifen können.

Adding Custom Lists and Other SharePoint Items via the Solution Explorer
Abbildung 9: Hinzufügen von benutzerdefinierten Listen und anderen SharePoint-Elementen im Projektmappen-Explorer

Wir haben zum Beispiel dem VSLive.SharePoint-Projekt eine benutzerdefinierte Liste hinzugefügt, mit der jedes Mal, wenn eine Sitzung hinzugefügt, aktualisiert oder gelöscht wird, Überwachungseinträge geschrieben werden. Wir nutzen wieder die Pipeline zum Speichern und verwenden die Liste über das clientseitige Objektmodell. Importieren Sie zuerst den Microsoft.SharePoint.Client-Namespace. Schreiben Sie anschließend den in Abbildung 10 (Visual Basic .NET) oder Abbildung 11 (C#) gezeigten Code.

Abbildung 10: Bearbeiten einer SharePoint-Liste über das clientseitige Objektmodell in Visual Basic .NET

Private Sub Sessions_Inserted(entity As Session)
  Me.LogAuditEntry(entity, "inserted")
End Sub
Private Sub Sessions_Updated(entity As Session)
  Me.LogAuditEntry(entity, "updated")
End Sub
Private Sub Sessions_Deleted(entity As Session)
  Me.LogAuditEntry(entity, "deleted")
End Sub
Private Sub LogAuditEntry(  entity As Session, actionDescription As String)
  Using ctx = Me.Application.SharePoint.GetAppWebClientContext()
    Dim web As Web = ctx.Web
    Dim lists As ListCollection = web.Lists
    Dim auditLog As List = lists.GetByTitle("AuditList")
    Dim ci As New ListItemCreationInformation()
    Dim auditEntry As ListItem = auditLog.AddItem(ci)
    auditEntry("Title") = String.Format("Session {0} {1}",
    actionDescription,
    entity.Title)
    auditEntry("Name") = Me.Application.User.FullName
    auditEntry("Date") = DateTime.Now
    auditEntry.Update()
    ctx.ExecuteQuery()
  End Using
End Sub

Abbildung 11: Bearbeiten einer SharePoint-Liste über das clientseitige Objektmodell in C#

private void Sessions_Inserted(Session entity)
{
  this.LogAuditEntry(entity, "inserted");
}
private void Sessions_Updated(Session entity)
{
  this.LogAuditEntry(entity, "updated");
}
private void Sessions_Deleted(Session entity)
{
  this.LogAuditEntry(entity, "deleted");
}
private void LogAuditEntry(Session entity, string actionDescription)
{
  using (ClientContext ctx =
     this.Application.SharePoint.GetAppWebClientContext())
  {
    Web web = ctx.Web;
    ListCollection lists = web.Lists;
    List auditLog = lists.GetByTitle("AuditList");
    ListItemCreationInformation ci = new ListItemCreationInformation();
    ListItem auditEntry = auditLog.AddItem(ci);
    auditEntry["Title"] = string.Format("Session {0} {1}",
    actionDescription, 
    entity.Title);
    auditEntry["Name"] = this.Application.User.FullName;
    auditEntry["Date"] = DateTime.Now;
    auditEntry.Update();
    ctx.ExecuteQuery();
  }
}

Weitere Informationen zur Verwendung des clientseitigen Objektmodells mit LightSwitch und andere Tipps und Tricks finden Sie in den Themen zu SharePoint im Visual Studio LightSwitch-Teamblog unter bit.ly/16JIWn6.

Überlegungen zur SharePoint-Bereitstellung LightSwitch-Apps sind einfach Web-Apps und können somit auf eigenen IIS-Webservern oder in einer Cloud wie Windows Azure gehostet werden. Wenn Sie eine SharePoint-App installieren, wird ein Manifest installiert, das Informationen zum Ausführungsort der App enthält. Zum neuen SharePoint-App-Modell gehört, dass jede App mit serverseitigem Code – den alle LightSwitch-Apps enthalten – auf einem separaten Server außerhalb von SharePoint ausgeführt werden muss. Diese Isolierung verbessert die Stabilität der SharePoint-Farm.

LightSwitch unterstützt zwei Arten von SharePoint-Bereitstellungen: automatisch gehostet und vom Anbieter gehostet. Diese Optionen wirken sich möglicherweise direkt auf die Architektur Ihrer Daten aus und müssen daher beim Erstellen der App berücksichtigt werden.

Bei automatisch gehosteten Apps werden die Website und die Datenbank jedes Mal, wenn die App installiert wird, automatisch in Windows Azure bereitgestellt. Die Daten werden in SQL Azure bereitgestellt, und die mittlere Schicht wird in einer Windows Azure-Website bereitgestellt. Das bedeutet, dass jede Instanz der LightSwitch-App, die in SharePoint installiert wird, von allen anderen Instanzen auf anderen SharePoint-Websites isoliert ist. Das ist eine schnelle, einfache Bereitstellungsart. Bei einer Deinstallation der App wird allerdings alles gelöscht, sogar die Daten.

Vom Anbieter gehostete Apps bieten Ihnen die Flexibilität, die Web-App und die Datenbank an jedem gewünschten Ort zu hosten. Bei diesem Modell haben allerdings alle SharePoint-App-Instanzen eine gemeinsame mittlere Schicht und gemeinsame Daten. Sie müssen daher eine eigene Mandantenisolierung bereitstellen. LightSwitch bietet in der Pipeline für die Abfrage Filtermechanismen auf Zeilenebene, um Apps mit mehreren Mandanten zu unterstützen. Auch die Verwaltung der Verfügbarkeit ist erforderlich. Wenn der Server ausfällt, funktionieren Ihre gesamten SharePoint-Apps nicht mehr.

Und Sie müssen angeben, wie die Authentifizierung der App ablaufen soll. Dies ist die Entscheidung zwischen dem Zugriffsteuerungsdienst und der Konfiguration mit hoher Vertrauensstufe, die Sie zu Beginn der Entwicklung mit SharePoint treffen. Wenn Ihr SharePoint-Server oder die Farm den Zugriffssteuerungsdienst verwendet, wie es bei Office 365 der Fall ist, benötigen Sie nur eine Client-ID und ein Geheimnis, das Ihre App und SharePoint teilen.

Verwenden Sie den Assistenten zum Veröffentlichen von LightSwitch-Anwendungen, um diese Angaben zu machen und die App zu verpacken. Abhängig vom Hostingtyp stellt der Assistent den App-Dienst und die Datenbank auf einem Server, den Sie angeben (oder Windows Azure) bereit, wie es beim Hosting durch einen Anbieter der Fall ist, oder fasst alles in einem SharePoint-Bereitstellungspaket zusammen. Dieses Paket installieren Sie dann in Ihrem SharePoint-Websitekatalog. Aus diesem können die Benutzer die App zu ihren Websites hinzufügen.

Weitere Informationen zum Hosting von LightSwitch-Apps in SharePoint finden Sie in den folgenden Beiträgen im Visual Studio LightSwitch-Teamblog: „SharePoint-Hosting- und Authentifizierungsoptionen für LightSwitch“ (bit.ly/10vEJez) und „Veröffentlichen von LightSwitch-Apps für SharePoint im Katalog“ (bit.ly/11wSFqo).

Zusammenfassung

Wie Sie sehen, gibt es in der aktuellen Version von LightSwitch in Visual Studio 2012 Update 2 eine Fülle von neuen Features, die den desktopbasierten Silverlight-Client ergänzen, der bereits seit der ersten Version und auch heute noch verfügbar ist. Da viele Mitarbeiter eigene Geräte an den Arbeitsplatz mitbringen, ist es allerdings kaum machbar, einen systemeigenen Client für jedes Gerät zu erstellen und jede Implementierung in separaten App-Stores bereitzustellen. LightSwitch-HTML-Clients basieren auf standardkonformem HTML5 und JavaScript und bieten auf den aktuellen Mobilgeräten eine moderne, vorrangig auf Touch ausgerichtete Umgebung.

Zudem können Sie durch die Aktivierung von SharePoint in den LightSwitch-Apps geschäftliche Daten, Prozesse, die App-Lebenszyklusverwaltung und Identitäts- und Zugriffssteuerungsfunktionen in SharePoint verwenden, die in vielen Unternehmen bereits heute integriert sind.

Jan Van der Haegen* ist ein Ökocomputerfreak, der sogar Kaffee in Software verwandelt. Er ist fasziniert von .NET und LightSwitch, Autor von Blogbeiträgen, unabhängiger Berater und Onlinekolumnist für MSDN Magazine. Insgeheim träumt er davon, eines Tages ein Leben auf dem Land zu führen. Seine Programmierexperimente finden Sie unter http://janvanderhaegen.com/.*

Beth Massi ist Senior Program Manager im Visual Studio-Team bei Microsoft und Community Champion im Bereich Entwicklung von Geschäftsanwendungen. Sie ist eine häufige Rednerin bei verschiedenen Veranstaltungen zur Softwareentwicklung, und Sie finden ihre Beiträge auf einer Reihe von Entwicklerwebsites, darunter MSDN.com, Channel 9 und ihr Blog bethmassi.com. Sie können ihr auf Twitter unter twitter.com/BethMassi folgen.

Unser Dank gilt den folgenden technischen Experten für die Durchsicht dieses Artikels: Brian Moore (Microsoft) und John Stallo (Microsoft)