TwitterSearch-App für Windows 8 #2

Willkommen zur neuen Serie hier bei tsjDEV.de. Wie der Name es schon vermuten lässt, möchte ich in dieser Serie eine Twitter-Suche implementieren. Im letzten Teil haben wir bereits das Daten-Modell implementiert. In diesem Teil wollen wir nun die Daten aus dem Modell in unserer App anzeigen.

Den Source-Code aus Teil 1 könnt ihr hier herunterladen:

  TwitterSearch - Teil 1 (39,5 KiB)

Zunächst starten wir Visual Studio Express 2012 for Windows 8 und öffnen unser Projekt TwitterSearch. Im Solution-Explorer klicken wir nun doppelt auf die Datei MainPage.xaml. Anschließend öffnet sich diese Datei und wir sehen ein simuliertes Windows 8 Tablet als Vorschauobjekt und den bekannten XAML-Code, welcher die Oberfläche unserer App beschreibt.

unser bisheriges Projekt

unser bisheriges Projekt

Nun wende ich einen kleinen Trick an, denn die vorliegende Seite hat nur wenige Vorgaben und ist noch nicht nach dem Windows Design ausgelegt. Daher klicken wir nun die MainPage.xaml-Datei mit der rechten Maustaste an und klicken auf Delete und bestätigen den Dialog mit OK.

Nun klicken wir mit der rechten Maustaste auf TwitterSearch und wählen Add – New Item. Dort wählen wir Basic Page aus und geben den Namen MainPage ein.

neue 'Basic Page' anlegen

neue ‚Basic Page‘ anlegen

Nun erhalten wir den Hinweis, dass einige Dateien in unserem Projekt fehlen und Visual Studio diese gerne automatisch hinzufügen möchte. Diesen Dialog bestätigen wir mit einen Klick auf Ja.

automatisch Dateien hinzufügen

automatisch Dateien hinzufügen

Anschließend sehen wir eine neue Seite, welche über eine Überschrift und einen Zurück-Button verfügt.

die neue MainPage als 'Basic Page'

die neue MainPage als ‚Basic Page‘

Wir wollen nun den Namen ‚My Application‘ ändern. Dazu suchen wir die folgende Zeile im XAML-Code1:

und ändert den String My Application in TwitterSearch.

Nun gehen wir unterhalb des des Grids mit dem Kommentar <!-- Back button and page title --> und geben dort den folgenden Code ein:

Hier wird zunächst eine scrollbare Ansicht definiert, welche ein Grid beinhaltet. Das Grid besteht aus zwei Spalten. In der ersten Spalte definieren wir eine Überschrift, eine TextBox und ein Button. Die rechte Spalte haben wir noch nicht definiert, aber hier sollen später die Twitter-Ergebnisse angezeigt werden.

In die Lücke zwischen </StackPanel> und </Grid> fügen wir nun noch den folgenden Code ein:

Ihr werdet merken, dass euch Visual Studio die Definition des ItemTemplates blau unterkringelt, denn diese ist noch nicht definiert. Das wollen wir nun nachholen, in dem wir den folgenden Code zwischen <Page.Resources> und </Page.Resources> im oberen Bereich der XAML-Datei einfügen:

Auch hier wird wieder ein zweispaltiges Grid angelegt, welches in der linken Spalte das Bild anzeigt und in der rechten Spalte den Autor und die Twitter-Nachricht.

Nun sind wir auch fast schon fertig und können die App testen, allerdings muss vorher noch eine Verbindung zwischen dem Modell und den UI hergestellt werden. Dafür öffnet ihr die App.xaml.cs-Datei und gebt dort oberhalb von public App() den folgenden Code ein:

Nun wechselt ihr zurück auf die MainPage.xaml und klickt doppelt auf den Button, damit wir die Suche nach dem String noch implementieren können. In die automatisch generierte Methode tragt ihr die folgende Zeile ein, welche einfach die Refresh()-Funktion in unserem Modell aufruft:

Nun gebt ihr in dem Konstruktor, unterhalb von this.InitializeComponent() noch die folgende Code-Zeile ein:

Nun solltet ihr spätestens eine Internetverbindung herstellen und dann könnt ihr über den „Play-Button“ die App ausführen.

die bisherige App

die bisherige App

Somit haben wir jetzt bereits eine lauffähige Version unserer Twitter-Anwendung geschrieben. Diese Stand nehmen wir nun in den weiteren Teilen der Serie als Grundlage und werde somit tolle Windows 8 Features in die App integrieren.

  1. Die Zeile befindet sich innerhalb der Page.Resources. []

You may also like...

2 Responses

  1. Sebastian Bühn sagt:

    Hallo,

    ich habe ein Problem.

    Sobald ich einen Hashtag eingebe und dann auf Suchen klicke, passiert gar nichts. Also es zeigt mir dann keine Ergebnisse an.
    Brauche dringend Hilfe! Danke.

  2. Hallo,
    vielen Dank für den Besuch auf meinem Blog. Leider hat twitter seine API umgestellt, so dass das hier angegebene Sample leider nicht mehr funktioniert. Ich bitte dies zu entschuldigen.
    Viele Grüße,
    Sebastian

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *