Abo
  • Services:
Anzeige
Metro: Wie die Golem.de-App für Windows 8 entstanden ist
(Bild: Alexander Merz/Golem.de)

Die Golem.de-App

Der folgende Teil soll keine Anleitung für eine Nachprogrammierung der Golem.de-App darstellen und ist erst recht kein vollwertiger Kurs für Windows-8-Programmierung. Wir wollen lediglich einen kleinen Einblick geben.

Die App besteht derzeit aus vier sichtbaren Bestandteilen. Praktisch handelt es sich dabei tatsächlich um vier HTML-Seiten mit je einer dazugehörigen Javascript-Datei:

  • die Übersichtsseite für einen Überblick über die Artikel
  • die Artikelseite, die einen Artikel darstellt
  • die Suchseite, die aufgerufen wird, wenn das Such-Charm aufgerufen wird
  • die Galerieseite, welche die Bildergalerie eines Artikels darstellt, sofern vorhanden

Anzeige

Dazu kommen noch statische HTML-Seiten für das Impressum und die Datenschutzerklärung sowie eine "unsichtbare" Seite, welche die überall verfügbare App-Navigationsbar bereitstellt. Hinzu kommen noch je eine Javascript-Datei für die Verwaltung des App-Lebenszyklus und Hilfsfunktionen zur Navigation sowie eine Datei für Javascript-Klassen zum Datenhandling. Die letzten beiden werden in jede der HTML-Seiten eingebunden.

  • Die Übersichtsseite
  • Artikelseite mit Galerievorschau
  • Artikelseite mit eingebetten Videos
  • Bildergalerie im Vollbild
  • Die Suche
Die Übersichtsseite

Die Übersichtsseite

Die Übersichtsseite verwendet ein WinJS.UI.Listview-Widget. Wird dem Listview eine Datenquelle übergeben, so stellt es die vom Win8-Startbildschirm bekannte horizontal scrollende Liste dar. Gibt es Änderungen an der Datenquelle - zum Beispiel weil Einträge hinzugefügt wurden -, dann aktualisiert sich der Listview automatisch.

Wie ein einzelnes Element in dieser Liste dargestellt wird, ist dem Programmierer überlassen. Die einzige Einschränkung: Die Größe muss einem festen Raster folgen. In der Golem.de-App ist das Raster 340 x 140 Pixel. Elemente können in diesem Raster auch größer dargestellt werden, sie müssen aber in das Raster passen, also einem Vielfachen eines Rasterelements zuzüglich der Zwischenräume entsprechen. Der große Eintrag am Anfang der Übersichtsseite entspricht deshalb den Abmaßen 340 x 290 Pixel.

Wer unterschiedliche Größen im Raster nutzen will, kommt nicht umhin, eine Callback-Funktion für das Widget zu schreiben, um ein Element mit der gewünschten Größe zu erzeugen. Wer darauf verzichtet, kann weitgehend die komplette Verknüpfungslogik von Daten und Widget als Teil der Templates im HTML unterbringen. WLJS bringt dafür entsprechende Funktionen mit.

Die Datenquelle für die Liste ist im leichtesten Fall ein WinJS.Binding.List-Objekt, dem ein Array mit den darzustellenden Daten übergeben wird. Damit Nutzer in der Golem.de-App durch alle Artikel scrollen können, ohne dass immer alle geladen werden müssen, was den initialen Ladevorgang sehr langsam machen und entsprechend viel Speicher brauchen würde, haben wir eine eigene Version der Datenquelle geschrieben. Diese lädt immer nur eine begrenzte Anzahl an Einträgen vom Server. Damit der Listview die Quelle nutzen kann, muss sie das Interface WinJS.UI.VirtualizedDataSource implementieren.

Im Zusammenhang mit der Implementierung wird auch das ressourcenschonende Verhalten des Listview deutlich: Es wird nur ein Bruchteil der Einträge tatsächlich gerendert. Nicht sichtbare Elemente werden aus dem Speicher entfernt und bei Bedarf neu geladen. Deshalb wird der Listview auch nicht langsamer, selbst wenn er vermeintlich zehntausende Einträge enthält.

 Javascript und HTMLSuchen und Anzeigen 

eye home zur Startseite
mtx5001 18. Sep 2012

Alexander Merz von Golem.de war inzwischen fleissig - die App ist jetzt auch im...

BLi8819 30. Aug 2012

Wäre schön, wenn man das direkt aus der App raus könnte ;)

spyro2000 28. Aug 2012

Natürlich gilt auch hier die Einrückung (Golem entfernt diese aber leider). spyro

Thaodan 28. Aug 2012

x64 ist x86 den Richtig geschrieben heißt das x86_64. BTW: Build Prozesse automatisiert...

Thaodan 28. Aug 2012

Und da ist Windows 8 ja auch gleich die Wichtigste.



Anzeige

Stellenmarkt
  1. T-Systems International GmbH, München
  2. Bank-Verlag GmbH, Köln
  3. MediaMarktSaturn IT Solutions, München
  4. T-Systems International GmbH, Aachen


Anzeige
Spiele-Angebote
  1. 10% Rabatt auf ausgewählte Top Gaming Artikel mit dem Gutscheincode: PICKYOURLOOT
  2. 15,99€
  3. ab 59,00€ (Vorbesteller-Preisgarantie)

Folgen Sie uns
       


  1. Mass Effect

    Bioware erklärt Arbeit an Kampagne von Andromeda für beendet

  2. Kitkat-Werbespot

    Atari verklagt Nestlé wegen angeblichem Breakout-Imitat

  3. Smarter Lautsprecher

    Google Home erhält Bluetooth-Zuspielung und Spotify Free

  4. Reverb

    Smartphone-App aktiviert Alexa auf Zuruf

  5. Bildbearbeitung

    Google-Algorithmus entfernt Wasserzeichen auf Fotos

  6. Ladestationen

    Regierung lehnt Zwangsverkabelung von Tiefgaragen ab

  7. Raspberry Pi

    Raspbian auf Stretch upgedatet

  8. Trotz Förderung

    Breitbandausbau kommt nur schleppend voran

  9. Nvidia

    Keine Volta-basierten Geforces in 2017

  10. Grafikkarte

    Sonnets eGFX Breakaway Box kostet 330 Euro



Haben wir etwas übersehen?

E-Mail an news@golem.de


Anzeige
Threadripper 1950X und 1920X im Test: AMD hat die schnellste Desktop-CPU
Threadripper 1950X und 1920X im Test
AMD hat die schnellste Desktop-CPU
  1. Ryzen AMD bestätigt Compiler-Fehler unter Linux
  2. CPU Achtkerniger Threadripper erscheint Ende August
  3. Ryzen 3 1300X und 1200 im Test Harte Gegner für Intels Core i3

Sysadmin Day 2017: Zum Admin-Sein fehlen mir die Superkräfte
Sysadmin Day 2017
Zum Admin-Sein fehlen mir die Superkräfte

Ausweis: Prepaid-Registrierung bislang nicht konsequent umgesetzt
Ausweis
Prepaid-Registrierung bislang nicht konsequent umgesetzt
  1. 10 GBit/s Erste 5G-Endgeräte sind noch einen Kubikmeter groß
  2. Verbraucherzentrale Datenlimits bei EU-Roaming wären vermeidbar
  3. Internet Anbieter umgehen Wegfall der EU-Roaming-Gebühren

  1. Fortsetzung Mass Effect & Ende von ME 3

    Erny | 04:22

  2. Re: Danke Electronic Arts...

    Gucky | 03:43

  3. Re: Gpus noch viel zu langsam.

    Sarkastius | 03:20

  4. Re: Das ist nicht die Aufgabe des Staates

    Sarkastius | 03:07

  5. Re: 10-50MW

    Sarkastius | 02:50


  1. 13:33

  2. 13:01

  3. 12:32

  4. 11:50

  5. 14:38

  6. 12:42

  7. 11:59

  8. 11:21


  1. Themen
  2. A
  3. B
  4. C
  5. D
  6. E
  7. F
  8. G
  9. H
  10. I
  11. J
  12. K
  13. L
  14. M
  15. N
  16. O
  17. P
  18. Q
  19. R
  20. S
  21. T
  22. U
  23. V
  24. W
  25. X
  26. Y
  27. Z
  28. #
 
    •  / 
    Zum Artikel