Blog-Serie zu Projekt Siena, Teil 2: Entwicklung einer ersten Siena App


Im ersten Teil meiner Blog-Serie zu Projekt Siena habe ich beschrieben, was Projekt Siena eigentlich ist, wer damit Windows 8 Apps entwickeln kann und wie man am schnellsten mit Siena loslegen kann.

In diesem Artikel soll es nun um die Entwicklung einer ersten, kleinen Siena App gehen.

Schritt 1: Erstellung einer Datenquelle (in Excel)

Sofern eine Anwendung erstellt werden soll, in die die anzuzeigenden Daten (Text, Bilder etc.) nicht alle direkt eingefügt werden, muss zunächst eine Datenquelle angelegt werden. Aus dieser kann Siena dann die Daten importieren. Zum aktuellen Zeitpunkt stehen folgende Datenquellen zur Verfügung:

  • Excel-Dokumente
  • Windows Azure Mobile Services
  • RSS-Feeds
  • RESTful Services
  • SharePoint Listen

Am einfachsten ist die Arbeit mit einem Excel-Dokument (es ist kein Server nötig, von wo aus die Daten bezogen werden können). Deshalb wird in den folgenden Schritten die Arbeit mit einem Excel-Dokument gezeigt, das die Daten für Siena bereitstellt. Erstellen Sie eine Excel Datei wie folgt:

  1. Öffnen Sie Excel und legen Sie ein leeres Dokument an.
  2. Speichern Sie das Dokument unter dem Namen SienaSalesReportStarter.xlsx.
  3. Legen Sie eine Tabelle an, die einen Vertriebsbericht enthält. Fügen Sie den Spaltenüberschriften Country, Actual, Budget, VTB, VTB_Percent ein.
  4. Tragen Sie nun ein paar Werte in die Tabelle ein.
  5. Formatieren Sie die Tabelle auch als Excel-Tabelle und benennen Sie sie SalesReport. Gehen Sie hierzu in den Tab Insert. Wählen Sie dort das Element Table. Markieren Sie dann den Datenbereich. Nach erfolgreichem Abschluss sollte die Tabelle farblich hervorgehoben sein. Wechseln Sie in den Tab Table Tools. Tragen Sie dort unter Table Name den Wert SalesReport ein. Dies ist erforderlich, damit Siena die Tabelle identifizieren kann.

Das Excel Dokument sollte nun in etwa wie folgt aussehen.

image

Schritt 2: Installation der Siena App

Im zweiten Schritt muss – falls noch nicht geschehen – auf dem eigenen Windows 8 PC/Tablet die Siena App installiert werden. Die App selbst kann über folgenden Link (kostenlos) bezogen werden: https://aka.ms/GetProjectSiena. Der Link führt direkt in den Windows Store, von wo aus die App installiert werden kann.

In Windows 8 ist die App dann direkt mit einer Kachel auf dem Start-Bildschirm eingerichtet. In Windows 8.1 kann die App über “Alle Apps” aufgerufen (und auch auf den Start-Bildschirm geheftet werden).

Beim ersten Start zeigt sich die Siena App wie folgt:

image

Schritt 3: Anlegen einer neuen Siena App

In Siena sind drei Konzepte von zentraler Bedeutung:

  • Apps sind aus Screens aufgebaut. Per Voreinstellung enthält eine App mindestens einen Screen. Um einen weiteren hinzuzufügen, öffnen Sie das App Menü (Klick mit der rechten Maustaste in der App) und wählen Sie den Menüpunkt Add Screen.
  • Screens enthalten Visuals, d.h. grafische Elemente (Labels, Listen, Buttons, …). Visuals lassen sich über das Visuals Flyout auswählen und der App hinzufügen. Zum Öffnen des Flyouts klicken Sie auf das “+”-Symbol oben rechts. Visuals können über die App Bar konfiguriert werden. D.h. es kann die äußere Erscheinung (Position, Höhe, Breite, Farben etc.) und das Verhalten (Reaktion auf Ereignisse wie das Anklicken) definiert werden. Die Konfiguration kann auch auf Datenwerten einer DataSource basieren (z.B. angezeigter Text, Farbe basierend auf einem Datenwert, …).
  • DataSources können Daten für Visuals bereitstellen. DataSources können über das App Menü über den Menüpunkt File/Data Sources hinzufügen.

Wenn sie Siena (ohne bestehende App) starten, wird automatisch eine neue, leere App angelegt. Starten Sie also Siena. Speichern Sie die noch leere App unter dem Namen SienaSalesReportStarter ab. Wählen Sie hierzu im App Menü den Eintrag File/Save As.

Im folgenden Schritt soll die Anwendung um Oberflächenelemente und einfache Anwendungslogik erweitert werden.

Schritt 4: Hinzufügen von Bildschirmelementen

Führen Sie folgende Schritte durch, um Ihre erste Siena App zu erstellen:

  1. Fügen Sie der App einen weiteren Screen hinzu.
  2. Benennen Sie den ersten Screen mit OverviewPage und den zweiten Screen mit DetailsPage. Führen Sie diese Änderung in der Dropdown-Liste oben links durch.
  3. Formatieren Sie den Hintergrund beider Screens dunkelgrau. Wählen Sie hierzu in der AppBar die Schaltfläche Fill und wählen sie die entsprechende Farbe.
  4. Fügen Sie der DetailsPage einen Button hinzu. Wählen Sie als Beschriftung Overview. Konfigurieren Sie als Reaktion auf das Anklicken eine Navigation zur OverviewPage. Wählen Sie hierzu in der AppBar die Schaltfläche Behaviour und anschließend die Schaltfläche OnSelect. Konfigurieren Sie als Reaktion Navigate und legen die OverviewPage als Ziel und ScreenTransition!Cover als Übergangsanimation fest.     
         
    image 
               
  5. Fügen Sie der DetailsPage einen entsprechenden Button hinzu. Benennen Sie diesen mit Overview und konfigurieren Sie als Navigationsziel die OverviewPage mit entsprechender Animation.

    Testen Sie Ihre Anwendung, indem sie F5 wählen. Sie sollten nun in der laufenden über die Buttons zwischen den beiden Seiten hin- und herspringen können. Beenden Sie den Test mit ESC.

  6. Konfigurieren Sie eine neue Datenquelle. Diese Datenquelle definiert das oben erstellte Excel Sheet als Grundlage für die Anzeigen. Wählen Sie im App Menü den Punkt File/Data Sources. Wählen Sie das oben erstellte Excel Sheet als Datenquelle. Siena zeigt daraufhin alle im Excel Sheet definierten Tabellen, also SalesReport, an. Markieren Sie diese eine Tabelle und wählen Sie die Schaltfläche Import data.

    image
     
    Siena sollte nun die Daten der Excel Tabelle anzeigen.

    image
     

  7. Fügen Sie auf der OverviewPage acht Labels ein. Konfigurieren Sie die Schriftgröße auf 14 und die Textfarbe auf weiß.
  8. Wählen Sie das erste Label. Setzen Sie das Text-Attribut auf ”Worldwide Budget:”.
  9. Wählen Sie das zweite Label. Lassen Sie dieses die Summe der Budgets aller Länder des Sales Reports anzeigen. Setzen Sie hierzu das Text-Attribut auf folgende Zeichenfolge: Text(Sum(SalesReport, Budget), "#0.00 €"). Dies ist eine Verkettung zweier, bereits von Excel bekannter Funktionen: Text() und Sum(). Eine genauere Beschreibung aller in Siena verfügbaren Funktionen findet sich unter: https://aka.ms/ProjectSienaFunctionReference.
  10. Wählen Sie das dritte Label. Setzen Sie das Text Attribut auf “Worldwide Actuals:”.
  11. Wählen Sie das vierte Label. Setzen Sie das Text Attribut auf “Text(Sum(SalesReport, Actual), "#0.00 €")”.
  12. Wählen Sie das fünfte Label. Setzen Sie das Text Attribut auf “Worldwide VTB:”.
  13. Wählen Sie das sechste Label. Setzen Sie das Text Attribut auf “Text(Sum(SalesReport, VTB), "#0.00 €")”.
  14. Wählen Sie das siebte Label. Setzen Sie das Text Attribut auf “Worldwide VTB [%]:”.
  15. Wählen Sie das achte Label. Setzen Sie das Text Attribut auf “Text(Sum(SalesReport, VTB)/Sum(SalesReport, Budget)*100, "#0.00 %")”.
  16. Nun soll das achte Label, das das Vertriebsergebnis anzeigt, noch in Abhängigkeit vom Ergebnis (positiv oder negativ) farblich markiert werden. Rot, wenn das Ergebnis negativ ist, grün sonst. Wählen Sie dazu das Color-Attribut des Labels. Setzen Sie dort als Wert: “If(Sum(SalesReport,VTB)<0,RGBA(255, 0, 0, 1),RGBA(0, 255,0, 1))”.
  17. Testen Sie Ihre Anwendung erneut. Das Ergebnis sollte wie folgt aussehen.

    image
     

  18. Wechseln Sie nun in die DetailsPage.
  19. Fügen Sie der Seite eine vertikale TextGallery hinzu.

    image
     

  20. Richten Sie die Gallery so aus, dass sie die Seite ausfüllt (ohne Überschrift und Schaltfläche zu überdecken.

    image
     

  21. Markieren Sie das erste (!) Element der Gallery. Dieses dient als Vorlage für die weiteren Elemente der Gallery.
  22. Setzen Sie den Wert für die Template Größe auf If(Gallery2!Layout = Layout!Horizontal, 380, 40) und das Template Padding auf 10.
  23. Wählen Sie als Datenquelle für die Gallery den SalesReport. Markieren Sie hierzu die Gallery und wählen in der AppBar den Eintrag Data/Items. Tragen Sie dann als Wert SalesReport ein.

    image
     
    Die Gallery zeigt nun die Werte des Sales Report an.
     

  24. Löschen Sie nun alle Labels aus dem ersten Gallery Element.
  25. Fügen Sie dann zwei neue Labels in das erste Gallery Element. Verknüpfen Sie das erste Element mit dem Feld Country. Setzen Sie hierzu das Text-Attribut des Labels auf ThisItem!Country.
  26. Setzen Sie das Text-Attribut des zweiten Labels auf Text(ThisItem!Budget, "#0.00 €").
  27. Fügen Sie in das erste Gallery Element ein Rechteck ein. Setzen Sie das Breadth-Attribut auf den Wert 150*ThisItem!Budget/Max(SalesReport, Budget). Damit erhält jedes Gallery Element einen Balken, der die relative Größe der Budgets zueinander zeigt, wobei das größte Budget 150 Pixel breit ist.
  28. Fügen Sie ein weiteres Label in das erste Gallery Element ein und setzen Sie das Text-Attribut auf den Wert Text(ThisItem!Actual, "#0.00 €").
  29. Fügen Sie ein weiteres Label in das erste Gallery Element ein und setzen Sie das Text-Attribut auf den Wert Text(ThisItem!VTB, "#0.00 €").
  30. Fügen Sie ein weiteres Label in das erste Gallery Element ein und setzen Sie das Text-Attribut auf den Wert Text(ThisItem!VTB_Percent, "#0.00 €").
  31. Fügen Sie nun noch ein Rechteck in das erste Gallery Element ein. Setzen Sie das Fill-Attribut auf den Wert If(ThisItem!VTB_Percent<0,RGBA(255, 0, 0, 1),RGBA(0, 255,0, 1)). Damit werden Balken, für positive Vertriebsergebnisse grün und für negative auf rot gesetzt. Setzen sie das X-Attribut auf den Wert: If(ThisItem!VTB_Percent<0,950+300*VTB_Percent,950). Setzen Sie das Width-Attribut auf den Wert: 300*Abs(ThisItem!VTB_Percent).
  32. Fügen Sie noch ein Label (Text-Attribut: “Sort by:”) und eine Liste (Text-Attribut: [“Country”, “Budget”, “VTB [%]”]) auf die DetailsPage ein. Positionieren Sie diese oben rechts. Benennen Sie die Liste mit SortByColumn.
  33. Ändern Sie die Datenquelle der Gallery auf folgenden Wert: If(SortByColumn!Selected!Value="Budget",Sort(SalesReport, Budget, Descending),If(SortByColumn!Selected!Value="VTB [%]",Sort(SalesReport, VTB_Percent, Descending),Sort(SalesReport, Country, Ascending))). Damit wird es möglich, zu wählen, ob die Gallery die Daten sortiert nach Land (aufsteigent), Budget (absteigend) oder prozentualem Vertriebsergebnis (absteigend) anzeigen soll.

Damit ist die Anwendung fertig. Testen Sie sie ein letztes Mal. Wählen Sie dabei alternative Sortierkriterien. Die App sollte damit in etwa wie folgt aussehen:

image

In weiteren Artikeln dieser Blog-Reihe werde ich darauf eingehen, wie eine solche Siena App verteilt werden kann, so dass auch weitere Anwender Zugriff darauf erhalten.

Weitere Informationen

Comments (0)

Skip to main content