Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Entwicklung & Design

So programmierst du einen RSS-Reader in 30 Minuten (Teil 1/2)

Mit unserer Mini-Serie für Web-Entwickler „WebDev hands on“ geben wir euch in Kooperation mit Microsoft modern.ie spannende Einblicke in Developer-Themen. Heute gibt es Teil 1 unserer Anleitung für einen selbst programmierten RSS-Reader.

Im Rahmen zweier Tutorials erkläre ich, wie man von Grund auf einen kleinen RSS-Reader programmiert – und zwar mit HTML5, CSS3 und WinJS, dem Microsoft-JavaScript-Framework für Windows 8. Wir werden anschließend eine Windows-RT-App für den Windows-Store erstellen, die den Gestaltungsprinzipien von Windows-8-UI folgt und Expression Blend 5 verwendet. An und für sich sollte das Durcharbeiten dieser beiden Artikel in 30 Minuten erledigt sein.

Der erste Artikel erklärt das Erstellen des Startbildschirms, der ein WinJS-ListView-Steuerelement verwenden wird. Dieses Element wird alle kürzlich veröffentlichten Blog-Posts durch hübsche Thumbnails anzeigen. Der zweite Artikel geht auf die Detailansicht ein, die ihr nach dem Klick auf einen der Listeneinträge seht. Am Ende des Tutorials findet ihr die fertige Lösung zum Download. Betrachtet den Quellcode als hilfreiche, kostenlose Referenz, falls einige Teile des Artikels weiterer Klärung bedürfen.

Voraussetzungen: Um diesen Artikeln folgen zu können, müsst ihr zuerst Folgendes tun:

  1. Ladet euch Windows 8 RTM auf Ihren Computer und installiert es: http://msdn.microsoft.com/en-US/windows/apps/br229516.aspx (hier gibt es eine kostenlose 90-Tage Trial-Version).
  2. Ladet euch Visual Studio 2012 Express RTM for Windows 8 und installiert es: http://msdn.microsoft.com/en-US/windows/apps/br229516.aspx (Diese Version ist kostenlos, aber ihr könnt natürlich auch eine kommerzielle Version verwenden).

Anmerkung: Keine Panik, wenn ihr einen Mac habt. Dank BootCamp funktioniert trotzdem alles perfekt oder ihr könnt es auch in einer virtuellen Maschine, zum Beispiel in Parallels, laufen lassen.

Anmerkung 2: Dieser Artikel wurde am 21. August 2012 überarbeitet, um die Änderungen in der UI und dem Code zwischen Windows 8 Release Preview und RTM zu berücksichtigen. Wollen Sie eine eigene Anwendung von der Release Preview migrieren, sollten Sie dieses Dokument lesen: „braking changes document”. In unserem Fall waren lediglich Teile betroffen, die mit der neuen UI und Benennungen in Visual Studio zu tun hatten.

Anmerkung 3: Ich habe noch einen extra Beitrag veröffentlicht, der WordPress und Community gewidmet ist: „Windows 8 HTML5 Metro Style App: RSS reader in 30min - building your WordPress version

Hier ist ein kurzer Überblick des Inhalts des ersten Teils:

  • Schritt 1: Eine leere Anwendung erstellen
  • Schritt 2: Das HTML & CSS Grundgerüst unserer Hauptseite erstellen
  • Schritt 3: Erster Kontakt mit Blend
  • Schritt 4: Daten mit XHR laden und diese an das ListView-Steuerelement binden
  • Schritt 5: Ein Template benutzen und das Design mit Blend verändern
  • Schritt 6: Quellcode zum Herunterladen

Beachtet bitte: Diese Tutorials basieren auf der BUILD-Session „Tools for building Metro style apps” mit Chris Sell und Kieran Mockford. Ich habe den Inhalt lediglich für Windows 8 RTM aktualisiert.

Schritt 1: Eine leere Anwendung erstellen

Ruft Visual Studio 2012 auf, geht auf File -> New Project und erstellt ein neues JavaScript -> Windows Store -> Blank-App-Projekt:

BU fehlt
BU fehlt

Benennt euer Projekt „SimpleChannel9Reader”, da wir den RSS-Feed aus dem Coding4Fun-Bereich auf Channel9 herunterladen werden. Hier ist die URL: http://channel9.msdn.com/coding4fun/articles/RSS

Schritt 2: Das HTML & CSS Grundgerüst unserer Hauptseite erstellen

Öffnet die Datei „default.html”. Sie beschreibt die erste Seite , die beim Start der Anwendung angezeigt wird. Anstelle des folgenden HTML-Teils:

<p>Content goes here</p>

Fügt ihr diesen Teil ein:

<div id="main">
    <header id="banner">
        <button id="backbutton"></button>
        <h1 id="maintitle">Welcome to Channel 9!</h1>
    </header>
    <section id="content"></section>
</div>

Wir haben jetzt einen globalen <div>-Container mit der ID „main” und zwei inneren Containern genannt „banner” und „content”. Der <header> wird natürlich oben auf der Seite dargestellt und die <section> mit dem Inhalt direkt darunter. Lasst uns hierzu ein wenig CSS hinzufügen, indem wir die Datei „default.css” öffnen, die im „css”-Ordner liegt. Ihr werdet sehen, dass es schon einige vordefinierte CSS-Regeln gibt, um die verschiedenen verfügbaren Windows-8-Ansichten über Media Queries zu formatieren. In diesen beiden Artikeln konzentriere ich mich auf die "fullscreen-landscape"-Ansicht. Also springt direkt zu diesem Bereich und fügt das folgende CSS ein:

#main {
    width: 100%;
    height: 100%;
}

#banner {
    width: 100%;
    height: 100%;
}

#backbutton {
}

#maintitle {
}

#content {
    width: 100%;
    height: 100%;
}

Dies sorgt dafür, dass der verfügbare Platz für die drei Hauptcontainer verwendet wird.

Lasst eure Anwendung laufen, indem ihr die F5-Taste drückt oder auf den folgenden Button klickt:

Anwendung ausführen

Ihr solltet nun dieses Bild sehen:

Erste Ausführung des Programms

Und ihr solltet auch ein offensichtliches Gestaltungsproblem erkennen: Der Zurück-Button und der Titel sind nicht nebeneinander angeordnet. Lösen lässt sich das Problem mit Blend 5!

 

Schritt 3: Erster Kontakt mit Blend

Startet Blend und geht zum Ordner, wo sich euer SimpleChannel9Reader-Projekt befindet. Blend wird dann Folgendes anzeigen:

Die Anwengund in Blend

Das Ziel ist, zwei Raster (Grid) zu erstellen. Das erste ist für den main-Container. Es umfasst eine Spalte, die die volle Breite einnimmt sowie zwei Zeilen. Das zweite Raster ist definiert durch eine Zeile und zwei Spalten für den Zurück-Button und den Titel.

Beginnen wir mit der Auswahl des main-Elements, indem wir das Live-DOM-Fenster verwenden:

"Live DOM"-Fenster

Geht zu "CSS Properties", wählt die #main-Regel im Layout-Fenster aus und ändert den Wert für display auf „-ms-grid”:

CSS-properties-Fenster

Wir werden die CSS-Grid-Layout-Spezifikation verwenden, die zurzeit nur vom IE10 unterstützt wird, aber bald auch von anderen Browsern beherrscht werden sollte. Wenn ihr mehr über die Art von Layout erfahren wollt, die im Metro-Mode unterstützt wird, könnt ihr diesen Artikel lesen: Choosing a CSS3 layout for your app.

Wenn ihr die Möglichkeiten in der CSS3-Grid-Spezifikation entdecken wollt, dann spielt ein wenig mit dieser IE Test Drive Demo: Hands On: CSS3 Grid Layout

Nach dem Zuweisen des notwendigen grid-Werts zur Eigenschaft display müssen wir nun unser Raster definieren. Springt hierfür zu dem Bereich „Grid” und setzt die folgenden Eigenschaften:

Grid-Fenster

Wir werden eine einzige Spalte über die gesamte Breite des Displays (was auch immer die Auflösung sein wird) und zwei Zeilen haben. Die erste Zeile wird eine feste Höhe von 132px haben und die andere wird die restliche verfügbare Höhe einnehmen. Ihr könnt dies in der Blend-Designeroberfläche sehen:

Blend-Designeroberfläche

Nun werden wir das content-Element in die zweite Zeile packen. Wählt dazu im „Live DOM” aus, klickt auf die #content-Regel und geht dann zu dessen Grid-Eigenschaften. Ändert den Wert von „-ms-grid-row” auf 2. Ihr könnt auch das banner-Element in die Zeile 1 packen; dies ist ohnehin die Voreinstellung, auch wenn ihr es nicht ausdrücklich setzt.

Nun werden wir unsere erste Zeile in zwei Spalten teilen, um jedes der beiden Elemente an seinen richtigen Platz zu setzen. Wählt das banner-Element aus, ändert seine display-Eigenschaft auf „-ms-grid” und definiert eine 1fr breite Zeile und zwei Spalten, die erste 120px breit und die zweite 1fr:

Grid-Fenster 2

Setzt das maintitle-Element in die Spalte 2 und zentriert es vertikal, indem ihr die Eigenschaft „-ms-grid-row-align” auf center stellen:

 

Grid-Fenster 3

Wählt das backbutton-Element aus und geht zum Layout-Teil. Setzt den oberen Abstand (top margin) auf 54px und den linken Abstand (left margin) auf 40 px. Wenn ihr bisher nichts vergessen habt, solltet ihr jetzt Folgendes auf der Designoberfläche sehen:

Blend-Designoberfläche 2

Speichert alle Änderungen mit File -> Save All und kehrt zu Visual Studio zurück. Öffnet die Datei „default.css” und ihr werdet sehen, dass Blend bei den richtigen CSS-Regeln einige „saubere” Ergänzungen vorgenommen hat:

@media screen and (-ms-view-state: fullscreen-landscape)
{

    #main {
        width: 100%;
        height: 100%;
        display: -ms-grid;
        -ms-grid-columns: 1fr;
        -ms-grid-rows: 132px 1fr;
    }

    #banner {
        width: 100%;
        height: 100%;
        display: -ms-grid;
        -ms-grid-columns: 120px 1fr;
        -ms-grid-rows: 1fr;
    }

    #backbutton {
        margin-top: 54px;
        margin-left: 40px;
    }

    #maintitle {
        -ms-grid-column: 2;
        -ms-grid-row-align: center;
    }

    #content {
        width: 100%;
        height: 100%;
        -ms-grid-row: 2;
    }
}

Checkt kurz, ob die Anwendung wie erwartet funktioniert, indem ihr einfach F5 drückt.

Finde einen Job, den du liebst

Bitte beachte unsere Community-Richtlinien

2 Reaktionen
Sebastian Anderie

Komplettes Tutorial durch und 1:1 nachgebaut, funktioniert nicht!

Antworten
Flo

Duplicate Content! ;-)

Antworten

Melde dich mit deinem t3n-Account an oder fülle die unteren Felder aus.

Abbrechen