Anzeigen von RSS-Feeds in einer Projekt Siena-Anwendung

  • Artikel

In einer Project Siena-App können Sie Daten aus einem Blog oder einer anderen Quelle über einen RSS-Feed anzeigen. Wenn ein Benutzer Ihre App öffnet, werden die neuesten Inhalte aus diesem Feed angezeigt, und der Benutzer kann die Quelle direkt in Ihrer App öffnen.

Eine Übersicht und App-Demos finden Sie unter Microsoft Project Siena.

In dieser Anleitung erfahren Sie, wie Sie Inhalte von einer RSS-Quelle importieren und in Ihrer App anzeigen. Die Anweisungen stammen aus dem Project Siena-Blog, aber Sie können auf die gleiche Weise Inhalte aus Ihrer eigenen Quelle integrieren. Wenn Sie dieses Lernprogramm durchgearbeitet haben, ähnelt Ihre App der folgenden Abbildung, in der der Titel, das Veröffentlichungsdatum und der erste Absatz der drei letzten Posts angezeigt werden.

Zeigt drei Blogbeiträge in der abschließenden Form

Voraussetzungen

  • Project Siena, das kostenlos aus dem Windows Store heruntergeladen werden kann.

    Systemanforderungen und andere Informationen finden Sie in den Anmerkungen zu dieser Version.

  • Eine aktive Verbindung mit dem Internet und ein Webbrowser.

In diesem Thema

Importieren von Daten

In diesem Verfahren suchen Sie nach dem RSS-Feed für die Inhalte, die Sie integrieren möchten, und richten Project Siena auf diese Inhalte aus.

  1. Öffnen Sie die Blogseite für Project Siena, und klicken Sie in der oberen rechten Ecke auf RSS für Posts.

  2. Wenn die Feedseite im Browser angezeigt wird, kopieren Sie die URL in der Adressleiste.

  3. Starten Sie Project Siena, indem Sie auf dem Startbildschirm auf die entsprechende Kachel klicken oder tippen.

    Wenn die Kachel auf der Startseite nicht angezeigt wird, können Sie sie suchen, indem Sie ihren Namen ganz oder teilweise eingeben, während die Startseite angezeigt wird. Klicken Sie in den Suchergebnissen auf Microsoft Project Siena, um die App zu öffnen.

    Hinweis

    Sie können die Kachel für ein Suchergebnis an die Startseite heften. Klicken Sie dazu mit der rechten Maustaste auf das Ergebnis, und klicken Sie dann auf Pin to Start.

  4. Zeigen Sie die obere App-Leiste an, indem Sie auf eine beliebige Stelle im Arbeitsbereich klicken, klicken Sie auf App-Daten und anschließend auf Datenquellen.

    Menü "App-Daten" mit "Datenquellen" ausgewählt

  5. Klicken Sie in der Liste der Datenquellen auf RSS-Feed, fügen Sie die URL in das Textfeld ein, und klicken Sie auf Daten importieren.

    Diese Datenquelle wird standardmäßig rss_1 genannt.

  6. Klicken Sie auf die Schaltfläche "Zurück", um zum Canvas zurückzukehren.

Anzeigen von Daten

Dn632702.collapse_all(de-de,VS.111).gifKonfigurieren einer Galerie

in diesem Verfahren fügen Sie eine Textgalerie als Benutzeroberflächenelement zu einem Bildschirm in Ihrer App hinzu. Anschließend konfigurieren Sie die Galerie so, dass sie die Daten, die Sie importiert haben, und jede Art von Informationen an der besten Stelle anzeigt.

  1. Klicken Sie in der oberen rechten Ecke des Arbeitsbereichs, sodass die UI-Elemente angezeigt werden, die Sie der App hinzufügen können.

  2. Klicken Sie in der Liste der Elemente auf Galerien und dann die horizontale Textgalerie, sodass diese der App hinzugefügt wird.

    Schaltfläche mit Symbol zum Hinzufügen einer horizontalen Textgalerie

    Standardmäßig enthält die Galerie einen Platzhaltertext und befindet sich in der oberen linken Ecke des Bildschirms.

  3. Klicken Sie im Dialogfeld Elemente auf rss_1, um die Daten anzuzeigen, die Sie importiert haben.

    Datenbindung an Galerie in Dialogfeld "Objekte"

    Standardmäßig zeigt die Galerie eine Reihe von Daten an unterschiedlichen Orten, die nicht für den Inhalt im Project Siena-Blog geeignet sind. In den nächsten Schritten konfigurieren Sie die App so, dass der Titel jedes Blogbeitrags im großen Text oberhalb der Galerie angezeigt wird, das Veröffentlichungsdatum in kleineren Text unter dem Titel und der erste Absatz des Blogbeitrags unter dem Veröffentlichungsdatum.

  4. Klicken Sie in der rechten oberen Ecke des Dialogfelds Elemente auf Spalte zum Anzeigen auswählen.

  5. Klicken Sie Überschrift1!Text, um die Art von Information festzulegen, die es anzeigen soll.

    Titel anzeigen in Element "Heading1"

  6. Klicken Sie auf Titel und anschließend im Dialogfeld auf die Schaltfläche "Zurück".

    Titelleiste-Element so einstellen, dass der Titel angezeigt wird

  7. Ändern Sie das Untertitelelement so, dass es das Veröffentlichungsdatum anzeigt, und ändern Sie das Textelement so, dass es die Beschreibung anzeigt.

    Verkürzte Daten in Galerie

    An diesem Punkt wird der Inhalt in der Galerie angezeigt, aber der Text passt nicht in die Elemente, wenn diese ihre Standardgröße haben. Dieses Problem wird im nächsten Verfahren behoben.

Dn632702.collapse_all(de-de,VS.111).gifAnpassen der Galerieelemente

In diesem Verfahren erweitern Sie die die Galerie so, dass sie mehr Blogposts anzeigt. Anschließend ändern Sie die Größe der Elemente und verschieben diese in der Galerie, so dass längere Titel korrekt angezeigt werden.

  1. Klicken Sie die Galerie in der Nähe der unteren Kante.

    Der Katalog wird als Hinweis darauf, dass Sie ihn ausgewählt haben, von einem dicken grauen Rahmen umgeben.

    Hinweis

    Wenn ein Element ausgewählt wurde, können Sie seine Größe verändern, indem Sie das kleine weiße Quadrat oder Dreieck im Auswahlfeld ziehen. Bewegen können Sie das ausgewählte Element, wenn Sie das Auswahlfeld selbst ziehen.

  2. Verbreitern Sie die Galerie so, dass sie drei Posts anzeigt.

    Hinweis

    Eventuell müssen Sie horizontal in der Galerie scrollen, um die linke Seite des ersten Posts anzuzeigen.

    Textgalerie erweitern, sodass drei Veröffentlichungen gezeigt werden

  3. Klicken Sie irgendwo in das Beschreibungselement des ersten Beitrags und verkleinern Sie dann das Element soweit, dass nur die ersten paar Linien der Beschreibung sichtbar sind.

    Wenn Sie das erste Element in einer Galerie ändern, wird diese Änderung automatisch für alle Elemente in der Galerie übernommen.

  4. Bewegen Sie das Element mit dem Veröffentlichungsdatum direkt über das Beschreibungselement und machen Sie das Titelelement größer, sodass mehrzeilige Titel korrekt angezeigt werden.

    Titelleiste/Titel-Element erweitern auf zweizeilige Titel

    Hinweis

    Wenn ein Blogbeitrag HTML-Code enthält (beispielsweise einen Link), können Sie das Beschreibungselement durch eine HTML-Bezeichnung aus der Liste der UI-Elemente ersetzen und die neue Bezeichnung konfigurieren, um die Beschreibung anzuzeigen.

Öffnen der Originaldatenquelle

Durch Hinzufügen eines RSS-Feeds zu Ihrer App geben Sie Benutzern genügen Informationen über einen Blogbeitrag, um entscheiden zu können, ob sie ihn ganz lesen möchten. Sie helfen ihnen auch, mit einem Webbrowser zur Quelle zu gelangen. In diesem Verfahren konfigurieren Sie Ihre App so, dass der vollständige Post in einem Browserfenster angezeigt wird, wenn ein Benutzer auf die Beschreibung dieses Posts in der Galerie klickt.

  1. Klicken Sie den Titel des ersten Beitrags und dann OnSelect unten im Arbeitsbereich.

  2. Geben Sie im Dialogfeld BeiAuswahl die folgende Zeichenfolge ein:

    Starten(DiesesElement!link)

    Nachdem Sie diese Aktion hinzugefügt haben, kann der Benutzer den Titel des Beitrags in der App anklicken und diesen dann in einem Webbrowser öffnen.

Siehe auch

Konzepte

Veröffentlichen und Bereitstellen einer Projekt Siena-App