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

Suchen und Anzeigen

Die Suchseite ist ähnlich aufgebaut wie die Übersichtsseite, inklusive einer eigenen Klasse für die Kapselung der Suchabfrage auf dem Server. Ansonsten ist die Seite etwas einfacher aufgebaut: Alle Elemente werden im Raster gleich groß dargestellt.

Der wichtigste "Trick" für die Einbindung der Suchseite ist die Verknüpfung mit dem Suchen-Charm. Dazu muss in der Manifest-Datei der App die "Suchen"-Deklaration aktiviert werden und wir müssen die Callback-Methode anmelden. Diese wird von Windows mit dem zu suchenden Text als Parameter aufgerufen.

Anzeige

Die Galerie

Die Galerie ist eigentlich nur ein großes Widget: WinJS.UI.FlipView. Es zeigt aus einer Datenquelle genau einen Eintrag an. Zwischen den Einträgen kann entweder per Wischgeste oder über die Anfasser links und rechts gewechselt werden. Das Flipview hat eine feste Größe und die Bilder werden auf diese Größe skaliert, wenn sie größer als der verfügbare Platz sind.

Bei der Datenquelle gab es keinen Grund, mehr Code zu schreiben als nötig. Die URL und Überschriften der Bilder werden in einem Array zusammengefasst und in ein WinJS.Binding.List verpackt.

Die Artikelseite

Auch die Artikelseite ist recht einfach aufgebaut. Der HTML-Code des Artikels wird vom Server geladen und in die Artikelseite eingefügt. Aufwendig wird es erst, wenn der Artikel da ist. Das DIV-Element, welches die Galerievorschau im Artikel umgibt, wird mit einem Listener versehen, der die Galerieseite aufruft. Analog erfolgt das mit Links im Text, die auf andere Golem.de-Artikel verweisen. Damit diese auch innerhalb der App geöffnet werden, müssen sie auf einen internen Aufruf umgebogen werden. Eine weitere Anpassung betrifft Tabellen im Artikel. Sie lassen sich schlecht in das schmale Textlayout pressen. Deswegen tritt an ihre Stelle ein Platzhalter, der auf Klick die eigentliche Tabelle über dem Text anzeigt und so keine Rücksicht auf das Layout nehmen muss.

Das mehrspaltige Layout des Textes wird im Übrigen rein per CSS erzeugt: Die HTML-Render-Engine von Win8 unterstützt das Multi-Column-Layoutmodul von CSS3 vollständig.

Unsichtbar

Im Hintergrund sind noch etwas weiterer Javascript-Code und auch eine "unsichtbare" HTML-Datei am Werk.

In dieser HTML-Datei wird lediglich die sogenannte Navigationsbar definiert. Sie erscheint per Rechtsklick oder über eine Wischgeste vom oberen oder unteren Rand nach innen. Derzeit enthält die untere Leiste nur einen einzelnen Button zur Aktualisierung der Übersichtsseite, in der oberen einen Button, um zur Übersichtsseite zurückzukehren. Die Aufteilung entspricht den Styleguide-Vorgaben: Die untere Leiste soll seitenbezogene Aktionen anbieten, oben Navigationselemente.

Ebenfalls in der Datei enthalten ist die Einbindung des Javascripts zur Behandlung der Lifecycle-Events der App. Diese Events und ihre Behandlung verdienen eine gewisse Aufmerksamkeit, schließlich kennt WinRT nicht nur Programmstart/-ende, sondern kann auch Apps pausieren.

Sonstige Details

Damit ein Artikel geteilt werden kann, war es lediglich notwendig, eine Callback-Funktion zu definieren und anzumelden. Sie muss ein vordefiniertes Array mit den zu teilenden Daten zurückliefern. Der Zurück-Button taucht zwar an verschiedenen Stellen auf, dessen Funktion ist aber zentral definiert - und er kehrt tatsächlich immer zur letzten Seite zurück. Die kleine und die große Kachel der Golem.de-App sind normale PNGs. Das gilt auch für die Grafik beim Programmstart.

 Die Golem.de-AppWie es weitergeht 

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. Bosch Service Solutions Magdeburg GmbH, Berlin
  2. DIEBOLD NIXDORF, Paderborn
  3. Bezirksamt Lichtenberg von Berlin, Berlin
  4. YKK Stocko Fasteners GmbH, Wuppertal


Anzeige
Hardware-Angebote
  1. 29,99€ + 5,99€ Versand (günstiger als die schlechtere Nicht-PCGH-Version)
  2. bei Caseking
  3. ab 799,90€

Folgen Sie uns
       


  1. Deep Descent

    Aquanox lädt in Tiefsee-Beta

  2. Android-Apps

    Google belohnt Fehlersuche im Play Store

  3. Depublizierung

    7-Tage-Löschfrist für ARD und ZDF im Internet fällt weg

  4. Netzneutralität

    Telekom darf Auflagen zu Stream On länger prüfen

  5. Spielebranche

    Kopf-an-Kopf-Rennen zwischen Pro und X erwartet

  6. Thunderobot ST-Plus im Praxistest

    Da gehe ich doch lieber wieder draußen spielen!

  7. Fahrdienst

    Alphabet investiert in Lyft

  8. Virtuelles Haustier

    Bandai kündigt "Classic Mini"-Version des Tamagotchi an

  9. News

    Facebook testet Abos für Nachrichten-Artikel

  10. Elon Musk

    Baut The Boring Company den Hyperloop?



Haben wir etwas übersehen?

E-Mail an news@golem.de


Anzeige
Krack-Angriff: Kein Grund zur Panik
Krack-Angriff
Kein Grund zur Panik
  1. Neue WLAN-Treiber Intel muss WLAN und AMT-Management gegen Krack patchen
  2. Ubiquiti Amplifi und Unifi Erster Consumer-WLAN-Router wird gegen Krack gepatcht
  3. Krack WPA2 ist kaputt, aber nicht gebrochen

Flettner-Rotoren: Wie Schiffe mit Stahlsegeln Treibstoff sparen
Flettner-Rotoren
Wie Schiffe mit Stahlsegeln Treibstoff sparen
  1. Hyperflight China plant superschnellen Vactrain
  2. Sea Bubbles Tragflächen-Elektroboote kommen nach Paris
  3. Honolulu Strafe für Handynutzung auf der Straße

Cybercrime: Neun Jahre Jagd auf Bayrob
Cybercrime
Neun Jahre Jagd auf Bayrob
  1. Antivirus Symantec will keine Code-Reviews durch Regierungen mehr
  2. Verschlüsselung Google schmeißt Symantec aus Chrome raus
  3. Übernahme Digicert kauft Zertifikatssparte von Symantec

  1. Re: Gute Wahl

    chewbacca0815 | 16:42

  2. Re: Yubico ersetzt betroffene Geräte

    GeeGee | 16:42

  3. Soll oder wird?

    Keridalspidialose | 16:38

  4. Re: Nicht nur die Telekommunikationsunternehmen...

    Matty194 | 16:35

  5. Re: Litium-Brände mit Wasser bekämpfen?!

    Eheran | 16:28


  1. 16:10

  2. 15:50

  3. 15:05

  4. 14:37

  5. 12:50

  6. 12:22

  7. 11:46

  8. 11:01


  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