Erstellen Ihrer ersten App mit Project Siena

 

In Project Siena können Sie eigene coole, interessante und nützliche Apps für Windows entwerfen und erstellen, ohne dass Sie Kenntnisse in Programmiersprachen benötigen.Mit einer Project Siena-App können Sie Daten nachverfolgen und anzeigen, die Sie selbst eingegeben haben, ganz gleich, ob Sie Schnäppchen in Onlineauktionen finden oder potenzielle Kunden für sich gewinnen möchten.Sie können auch größere Datensets aus vorhandenen Quellen wie Excel, SharePoint, aus sozialen Medien, Azure oder einem REST-Dienst hinzufügen.Anschließen können Sie die App installieren, um sie selbst zu nutzen, oder Sie können sie für Freunde, die Familie oder ein Unternehmen freigeben.

Indem Sie sich an die Schritte in diesem Thema halten, sammeln Sie die Stimmen von Benutzern auf einem Bildschirm der App und fassen die Ergebnisse auf einem anderen Bildschirm zusammen.

Drei senkrecht angeordnete Schaltflächen in drei Farben mit jeweils unterschiedlichem Text.

Three labels that show how many of each vote was cast

Wenn Sie sich mit diesem grundlegenden Prozess vertraut gemacht haben, können Sie eine etwas komplexere Auflistung erstellen und verwalten oder Daten aus einer externen Quelle hinzufügen.Wenn Sie Ihren ersten Datensatz gesammelt oder hinzugefügt haben, können Sie ihn in einer Galerie anzeigen, die Daten filtern und sortieren und weitere Aufgaben ausführen.

  • Einen Überblick über Project Siena und Links zu Ressourcen wie Beispiel-Apps, videogestützte Lernprogramme und Foren finden Sie unter Project Siena.

  • Weitere Beispiele für Apps, die Sie in Project Siena erstellen können, finden Sie in den Videos auf Channel 9.

Voraussetzungen

Sie können nur mit Project Siena eine App entwickeln und testen, müssen jedoch verschiedene andere Voraussetzungen erfüllen, um die App installieren zu können.

Installieren und öffnen Sie Project Siena

  1. Installieren Sie Project Siena aus dem Windows Store, und öffnen Sie die App auf die gleiche Weise, wie Sie auch jede andere Windows-App öffnen.

    Project Siena, Bildschirmkachel "Start"

    Apps werden nicht standardmäßig an den Startbildschirm angeheftet, Sie können aber einfacher auf Project Siena zugreifen, wenn Sie den Schritten im Abschnitt "Anheften häufig verwendeter Apps" unter "Die Startseite" im Windows-Lernprogramm folgen.

  2. Schauen Sie sich das kurze Video an, das automatisch gestartet wird, wenn Sie Project Siena zum ersten Mal öffnen, oder klicken Sie auf Einführung überspringen in der rechten unteren Ecke.

  3. (Optional) Speichern Sie Ihre App, indem Sie STRG+S drücken, einen Namen in das Textfeld eingeben und dann auf Speichern klicken.

    Standardmäßig werden Project Siena-Dateien im Ordner "Dokumente" des aktuellen Benutzers gespeichert, Sie können aber auch einen anderen Speicherort angeben.

Hinzufügen, Größenänderung und Verschieben eines Steuerelements

  1. Klicken Sie in der Mitte des Bildschirms auf Visuelles Element hinzufügen, um eine Liste von Steuerelementen anzuzeigen, die Sie zu Ihrer App hinzufügen können.

    Sie können diese Liste auch öffnen, indem Sie ALT+V drücken oder auf das Pluszeichen klicken, das in der oberen rechten Ecke des Fenster angezeigt wird, wenn die obere App-Leiste geschlossen ist.

    Visuelle Schaltfläche hinzufügen

  2. Blättern Sie in der Liste der Steuerelemente nach unten, bis das Steuerelement Schaltfläche erscheint, und klicken Sie dann darauf.

    Click this icon to add a button to your app

    Die Schaltfläche wird auf dem Bildschirm für Ihre App angezeigt, und das Dialogfeld Text wird automatisch geöffnet.Dieses Dialogfeld wird später in diesem Verfahren verwendet, aber zunächst können Sie es schließen.

  3. Klicken Sie in den Bereich außerhalb des Dialogfelds Text, um es zu schließen, und klicken Sie dann auf die Schaltfläche, um sie auszuwählen.

    Ein breites, graues Feld, das ein ausgewähltes Benutzeroberflächenelement umschließt.

    Die Schaltfläche ist nun von einem dicken grauen Auswahlfeld umgeben, das anzeigt, dass sie ausgewählt ist, und der Name der Schaltfläche wird in der Liste der Steuerelemente am oberen Rand des Fenster angezeigt.

  4. Benennen Sie die Schaltfläche um, indem Sie am oberen Rand des Fensters auf Schaltfläche1 klicken, sodass ein Cursor angezeigt wird, geben Sie Option1 ein, und drücken Sie die EINGABETASTE.

    Benennen Sie ein Benutzeroberflächenelement um, indem Sie in der Liste am oberen Rand des Fensters klicken und dann Text eingeben.

  5. Wenn Sie die Schaltfläche ausgewählt haben, ändern Sie ihre Größe, indem Sie am kleinen weißen Dreieck in der oberen rechten Ecke des Auswahlfelds ziehen.

    Sie können die Größe der Schaltfläche so ändern, dass sie doppelt so breit ist wie ursprünglich, und dann ihre Höhe vergrößern, sodass sie eine quadratische Form erhält.

    Schaltfläche muss ein Quadrat sein, das zwei Mal so breit ist wie das Original.

  6. Verschieben Sie die Schaltfläche nach unten, indem Sie das Auswahlfeld so ziehen, sodass es sich in mittlerer Höhe am linken Rand des Bildschirms befindet.

    Hinweis

    Wenn Sie eine Steuerelement löschen möchten, markieren Sie es, und drücken Sie dann die ENTF-TASTE.

Konfigurieren eines Steuerelements

In diesem Abschnitt konfigurieren Sie die Eigenschaften des Steuerelements, das sie im vorherigen Abschnitt hinzugefügt haben.Diese Eigenschaften werden in drei Kategorien eingeteilt: Entwurf, Daten und Verhalten.Mit den Eigenschaften in der Kategorie "Entwurf" legen Sie das Aussehen eines Steuerelements fest, und mit den Eigenschaften in der Kategorie "Daten" legen Sie fest, was in einem Steuerelement angezeigt wird.Die Eigenschaften in der Kategorie "Verhalten" bestimmen, wie die App sich verhält, wenn das Steuerelement verwendet wird (wenn ein Benutzer beispielsweise auf eine Schaltfläche klickt).Dieselben Kategorien gelten auch für andere Steuerelemente, die Sie Ihrer App hinzufügen können.

  1. Zeigen Sie die Entwurfseigenschaften der Schaltfläche an, indem Sie sie markieren und dann auf das Symbol Entwurf klicken, wenn es am unteren Rand des Fensters angezeigt wird.

    Symbol entwerfen

  2. Öffnen Sie das Dialogfeld zum Ändern des Schaltflächentexts, indem Sie am unteren Rand des Fensters auf das Symbol Text klicken.

  3. Vergrößern Sie den Text der Schaltfläche, indem Sie auf der linken Seite des nun angezeigten Dialogfelds auf 11 klicken, und ziehen Sie dann den Schieberegler, oder geben Sie 40 in das Textfeld ein.

    Eine blaue Schaltfläche mit Textgröße 40

  4. (Optional) Klicken Sie auf das Symbol Füllung und anschließend auf das grüne Feld im angezeigten Dialogfeld.

    Hinweis

    Sie können auch die Farbe ändern, indem Sie die Werte im Textfeld bearbeiten.Sie können z. B. RGBA(0; 176; 80; 1) eingeben, damit die Schaltfläche in Grün angezeigt wird.

    Eine Schaltfläche mit grüner Füllung

  5. Markieren Sie die Schaltfläche, und zeigen Sie ihre Dateneigenschaften an, indem Sie das auf Symbol Daten klicken, wenn es in der linken unteren Ecke des Fensters angezeigt wird.

    Symbol für die Daten-Kategorie von Eigenschaften

  6. Klicken Sie auf das Symbol Text, und geben Sie im dann angezeigten Dialogfeld "Ja" (einschließlich der Anführungszeichen) ein.

    Festlegen der Texteigenschaft einer Schaltfläche

    Hinweis

    Wenn Sie nicht sicher sind, zu welcher Kategorie eine Eigenschaft gehört, können Sie auf das Symbol Expressansicht in der unteren rechten Ecke des Fensters klicken, um eine Liste von Eigenschaften anzuzeigen.Wenn die gewünschte Eigenschaft nicht standardmäßig angezeigt wird, klicken Sie auf den Pfeil nach unten für jede Kategorie, die einen solchen aufweist.Alle Eigenschaften der betreffenden Kategorie werden angezeigt.Wenn Sie die Expressansicht schließen möchten, klicken Sie erneut auf das Symbol in der rechten unteren Ecke des Fensters.

Sammeln von Daten

In diesem Abschnitt sammeln Sie Daten dazu, wie häufig Sie auf jede Schaltfläche Ihrer App geklickt haben.In Project Siena ist eine Auflistung ein Datenset, das mindestens einen Datensatz mit mindestens einem Feld enthält.So kann ein Adressbuch beispielsweise einen Datensatz für jede Person oder jedes Unternehmen enthalten, und in jedem Datensatz können sich der Name, die Adresse und die Telefonnummer in unterschiedlichen Feldern befinden.

Wenn Sie Ihre eigene App entwerfen, werden Sie wahrscheinlich Daten aus einer vorhandenen Quelle hinzufügen, andere Arten von Daten von Ihren Benutzern sammeln oder beide Methoden verwenden.In diesem Beispiel können Sie mit nur minimaler Vorbereitung lernen, wie es geht.

  1. Klicken Sie am unteren Rand des Fensters auf das Symbol BeiAuswahl.

    Schaltfläche "OnSelect" an der Bildschirmunterseite

    Die Eigenschaft BeiAuswahl gehört zur Kategorie Verhalten, die keine anderen Eigenschaften für dieses Steuerelement enthält.Wenn Steuerelemente mehr als eine Eigenschaft in dieser Kategorie aufweisen, klicken Sie auf das Symbol Verhalten, um Symbole für die Eigenschaften in dieser Kategorie anzuzeigen.

    Symbol für die Verhaltens-Kategorie von Eigenschaften

  2. Geben Sie im dann angezeigten Dialogfeld die folgende Funktion ein:

    Auflisten(Antworten; "Ja")

    Später öffnen Sie den Modus Vorschau und klicken dann auf diese Schaltfläche, um eine einspaltige Auflistung mit Namen Antworten zu erstellen, und fügen dieser Auflistung eine Zeile hinzu, die den Eintrag "Ja" enthält.Weitere Informationen zu Auflistungen finden Sie unter Erstellen und Verwalten einer Auflistung in Project Siena.

  3. Markieren Sie die Schaltfläche, drücken Sie STRG+C, um sie zu kopieren, und drücken Sie zwei Mal STRG+V, um zwei weitere Schaltflächen zu erstellen.

  4. Nennen Sie die beiden neuen Schaltfläche Option2 und Option3, indem Sie die neuen Namen in die Liste der Steuerelemente am oberen Rand des Fensters eingeben.

  5. Verschieben Sie die Schaltfläche Option2 auf die rechte Seite von Option1, und verschieben Sie die Schaltfläche Option3 auf die rechte Seite von Option2, sodass alle drei Schaltflächen in einer Linie in der vertikalen Bildschirmmitte angezeigt werden.

    Hinweis

    Sie können die Namen aller Steuerelemente auf dem Bildschirm anzeigen, indem Sie ALT drücken.

    Drei Schaltflächen in einer Reihe

  6. Ändern Sie die Eigenschaft Text der Schaltfläche Option2 in "Nein", und ändern Sie die Eigenschaft Text der Schaltfläche Option3 in "Vielleicht".

     

    Hinweis

    Sie können die Eigenschaft Text einer Schaltfläche ändern, indem Sie auf den Standardtext doppelklicken und dann den gewünschten Text eingeben.

  7. Ändern Sie die Eigenschaft Füllung der Schaltfläche Option2 in Rot, und ändern Sie die Eigenschaft Füllung der Schaltfläche Option3 in Gelb.

    Drei senkrecht angeordnete Schaltflächen in drei Farben mit jeweils unterschiedlichem Text.

  8. Legen Sie die Eigenschaft BeiAuswahl der Schaltfläche Option2 auf die folgende Funktion fest:

    Auflisten(Antworten; "Nein")

  9. Legen Sie die Eigenschaft BeiAuswahl der Schaltfläche Option3 auf die folgende Funktion fest:

    Auflisten(Antworten; "Vielleicht")

    Wenn die Auflistung nicht bereits existiert, wenn Sie auf eine der drei Schaltflächen klicken, wird sie erstellt, und die erste Zeile enthält die Daten für die Schaltfläche, auf die Sie geklickt haben.Wenn die Auflistung bereits existiert, werden die Daten in eine folgende Zeile eingefügt.

    Hinweis

    Wenn Sie die Daten der einzelnen Sitzungen speichern möchten, müssen Sie sie vor dem Schließen der App speichern und sie dann beim erneuten Öffnen der App wieder in die Auflistung laden.Weitere Informationen finden Sie unter Erstellen und Verwalten einer Auflistung in Project Siena.

Testen der App

  1. Drücken Sie F5, um den Vorschaumodus zu öffnen.

    Hinweis

    Sie können den Vorschaumodus auch öffnen, indem Sie mit der rechten Maustaste auf einen Bereich des Fensters klicken und anschließend auf das Symbol "Vorschau" am rechten Rand der oberen App-Leiste klicken.

    Siena, Vorschau

  2. Klicken Sie in beliebiger Reihenfolge ein paar Mal auf jede Schaltfläche, und drücken Sie die ESC-Taste, um den Vorschaumodus zu schließen und in den Entwurfsarbeitsbereich zurückzukehren.

    Hinweis

    Diese Schaltflächen funktionieren im Entwurfsarbeitsbereich, aber das gilt nicht für alle Steuerelemente.Bevor Sie Ihre App für andere Benutzer veröffentlichen und verteilen, testen Sie alle Features im Vorschaumodus, um sicherzustellen, dass sie sich wie erwartet verhalten.

  3. Drücken Sie ALT+F, um die obere App-Leiste zu öffnen, und klicken Sie dann auf App-Daten sowie auf Auflistungen.

    In einer Vorschau werden die ersten fünf Zeilen der Auflistung Antworten angezeigt.

    Die ersten fünf Zeilen der Auflistung "Antworten"

  4. Drücken Sie ESC, um zum Entwurfsarbeitsbereich zurückzukehren.

Hinzufügen von anderen Bildschirmen und Navigationselementen

Sie haben nun einen Bildschirm erstellt, auf dem ein Benutzer auf eine Schaltfläche klicken kann, um Daten an eine Auflistung zu übermitteln.In den folgenden beiden Abschnitten erstellen Sie einen Bildschirm, der die Daten in der von Ihnen erstellten Auflistung zusammenfasst.

  1. Klicken Sie in der linken oberen Ecke des Fensters auf Bildschirm1, sodass der Cursor angezeigt wird, und geben Sie dann Abstimmung ein.

    Umbenennen von "Bildschirm1" in "Abstimmen"

  2. Drücken Sie ALT+F, um die obere App-Leiste zu öffnen, und klicken Sie dann auf Bildschirm hinzufügen.

    Schaltfläche zum Hinzufügen eines Bildschirms zu Ihrer App

  3. Klicken Sie auf den gerade hinzugefügten Bildschirm, und benennen Sie ihn in Ergebnisse um.

  4. Kehren Sie zum vorherigen Bildschirm zurück, indem Sie auf den Pfeil nach unten neben Ergebnisse und anschließend auf Abstimmung klicken.

  5. Drücken Sie ALT+V, klicken Sie auf Formen (ungefähr auf halber Höhe der angezeigten Liste), und klicken Sie anschließend auf das Steuerelement Weiter-Pfeil (unten in der angezeigten Liste), um es zu Ihrem Bildschirm hinzuzufügen.

    Nach rechts weisender Pfeil (in einem Kreis)

  6. Ziehen Sie den Pfeil in die rechte untere Ecke des Bildschirms, und klicken Sie anschließend auf das Symbol BeiAuswahl in der linken unteren Ecke des Fensters.

  7. Klicken Sie im Dialogfeld BeiAuswahl auf Navigieren. Dadurch wird die BeiAuswahl-Eigenschaft des Pfeils auf die folgende Funktion festgelegt:

    Navigieren(Ergebnisse; Bildschirmübergang!Übergang)

    Wenn Sie den Modus Vorschau öffnen und dann auf den Pfeil klicken, wird der Bildschirm Ergebnisse eingeblendet.

  8. Schließen Sie das Dialogfeld BeiAuswahl, indem Sie auf eine beliebige Stelle außerhalb davon klicken.

  9. Fügen Sie auf dem Bildschirm Ergebnisse einen Rückwärtspfeil hinzu, und legen Sie dessen BeiAuswahl-Eigenschaft auf die folgende Funktion fest:

    Navigieren(Abstimmung; Bildschirmübergang!Übergang)

Anzeigen der Daten

  1. Drücken Sie auf dem Bildschirm Ergebnisse ALT+V, fügen Sie ein Steuerelement vom Typ Beschriftung hinzu, und verschieben Sie es unter den Rückwärtspfeil.

  2. Markieren Sie die Beschriftung, klicken Sie auf die Option Daten, wenn diese in der linken unteren Ecke erscheint, und legen Sie dann die Text-Eigenschaft der Beschriftung auf die folgende Funktion fest:

    "Ja:" & ZählenWenn(Antworten; "Ja" in Wert)

    Diese Beschriftung zeigt an, wie oft in der Auflistung Antworten der EintragJa in der Spalte Wert erscheint.

  3. (Optional) Legen Sie die Schriftgröße der Beschriftung auf 25 fest, formatieren Sie den Text fett, und ändern Sie dann die Größe der Beschriftung entsprechend dem Inhalt.

  4. Erstellen Sie zwei Kopien der Beschriftung, und ordnen Sie sie in einer Spalte unter der ersten Beschriftung an.

  5. Wenn die erste Beschriftung nicht den Namen Beschriftung1 aufweist, benennen Sie sie in Beschriftung1 um.

  6. Benennen Sie die zweite Beschriftung in Beschriftung2 um, und legen Sie ihre Text-Eigenschaft auf die folgende Funktion fest:

    "Nein: " & ZählenWenn(Antworten; "Nein" in Wert)

  7. Benennen Sie die dritte Beschriftung in Beschriftung3 um, und legen Sie deren Eigenschaft Text auf die folgende Funktion fest:

    "Vielleicht: " & ZählenWenn(Antworten; "Vielleicht" in Wert)

    In den drei Beschriftungen wird angezeigt, wie oft jede Schaltfläche auf der Seite Abstimmung angeklickt wurde.

    Three labels that show how many of each vote was cast

Hinzufügen von Features

Nachdem Sie sich nun mit den grundlegenden Aufgaben in Project Siena vertraut gemacht haben, können Sie Ihre App auf vielfältige Weise erweitern.So können Sie beispielsweise die folgenden Features hinzufügen, indem Sie weitere Steuerelemente konfigurieren:

  • Erstellen eines Diagramms der abgegebenen Stimmen.(Klicken Sie auf den Link, mit dem diese Liste einführt wird, erweitern Sie den Abschnitt Steuerelemente und dann den Abschnitt Diagramm.)

  • Aufzeichnen der Stimmen von Benutzern auf anderen Computern in SharePoint.(Klicken Sie auf den Link, mit dem diese Liste eingeführt wird, erweitern Sie den Abschnitt Steuerelemente und dann den Abschnitt SharePoint Update.)

  • Senden einer E-Mail, in der automatisch die zuletzt erfassten Daten angezeigt werden.(Klicken Sie auf den Link, mit dem diese Liste einführt wird, erweitern Sie den Abschnitt Steuerelemente und dann den Abschnitt Office 365 (Preview).)

Installieren Ihrer App

Wenn Sie mit dem Entwickeln und Testen Ihrer App fertig sind, können Sie sie auf dem gleichen Gerät installieren, auf dem Sie sie entwickelt haben, aber auch auf einem Testgerät oder auf beliebigen anderen Geräten in Ihrer Organisation.Bevor Sie Ihre App installieren können, gibt es einige Voraussetzungen, die Sie erfüllen müssen, wie das Vorhandensein einer aktuellen Entwicklerlizenz für Windows 8.Die Lizenz ist kostenlos, Sie müssen sie jedoch erneuern, damit Ihre App weiterhin ausgeführt werden kann.Sie benötigen außerdem einen App-Schlüssel, wenn eine Verbindung zu einer Datenquelle (wie Bing-Suche) besteht, die einen solchen erfordert.Eine vollständige Liste der Voraussetzungen sowie die entsprechenden Anleitungen finden Sie unter Installieren einer Project Siena-App.