Kochrezept für Windows 8 Apps in HTML5/Javascript

Von Christian Vorhemus Autor Feed 20. March 2013 15:05

Man nehme eine Portion Motivation und eine gute Entwicklungsumgebung (Visual Studio 2012), würze alles mit einer Prise Kreativität und fertig ist die Windows 8 App! In dieser Kochshow sollen Konzepte und Sourcode gezeigt werden, mit denen Apps für Windows 8 sehr schnell und einfach in HTML5/Javascript geschrieben werden können.

Voraussetzung für dieses kleine Tutorial sind nur Basiskenntnisse in HTML und Javascript, Erfahrung in höheren Programmiersprachen ist nicht nötig. Ziel ist es, dem geneigten Leser einen Überblick über die Entwicklung von Windows 8 Apps in HTML und Javascript zu verschaffen, einige Hintergrundinformationen zu Windows 8 typischen Funktionalitäten zu liefern und Code vorzustellen, mit dem bereits die ersten Apps erstellt werden können. Wir halten uns in diesem Tutorial an folgendes Rezept:

 

Die Struktur eines Projekts

Um den Aufbau einer App gleich am Praxisobjekt erforschen zu können, öffnen wir Visual Studio 2012 (Visual Studio Express 2012 für Windows 8 kann hier heruntergeladen werden), klicken oben links auf Datei > Neu > Projekt. Im nun erscheinenden Fenster wählen wir links im Menü “installiert” den Unterpunkt “Vorlagen” und als Sprache “JavaScript” aus. Danach klicken wir auf “Windows Store” und wählen “Navigations-App”.

1


Weiter unten in diesem Fenster können wir im Textfeld “Name” unser Projekt noch benennen und mit einem Klick auf “OK” tauchen wir bereits ein, in die Welt der App-Entwicklung.

Nach kurzer Ladezeit wird automatisch die default.js-Datei im Codefenster angezeigt, rechts daneben sehen wir den Projektmappen-Explorer, in dem die verschiedensten Ordner und Dateien unseres Projekts angezeigt werden.
Apps können aus mehreren Seiten bestehen, etwa einer Hauptseite mit mehreren Items und Unterseiten, auf denen detaillierte Infos zu den Items eingeblendet werden. Die Seiten einer App befinden sich im Ordner “pages”, wobei jede Seite einen eigenen Unterordner erhält. Standardmäßig wird für uns gleich eine erste Seite erstellt, die “home” lautet. Eine Seite wiederum besteht aus 3 Dateien: Eine HTML-Datei, eine CSS-Datei und eine JS-Datei. Während HTML und CSS für das Design zuständig sind (ähnlich wie XAML-files) befindet sich die Steuerungslogik in den JS-Dateien (ähnlich wie die “code behind”-Dateien in C#).

Wenn ein Benutzer unsere App öffnet, gelangt er aber nicht gleich auf unsere home.html-Seite, sondern stets auf default.html. In dieser Datei kann selbst Inhalt stehen, oder auf eine andere Seite verwiesen werden. Dies passiert mit folgendem Code:

   1:  <div id="contenthost" data-win-control="Application.PageControlNavigator" 
   2:   data-win-options="{home: '/pages/home/home.html'}"></div>

Zwei Dinge sind hier interessant: Zum einen die data-win-control property, zum anderen die data-win-options property. Mittels data-win-control weisen wir unserem <div>-Element eine spezielle Windows 8 spezifische Eigenschaft zu – in diesem Fall soll das <div> als Navigationselement dienen. Es existieren eine Reihe an vordefinierten controls, die unsere leeren <div>-Tag wie durch Zauberhand in allerlei nützliche Steuerungselemente verwandeln, zum Beispiel können durch ein control aus einem <div> rating-Sternen erzeugt werden, was mit folgendem Code funktioniert:

   1:  <div data-win-control="WinJS.UI.Rating"></div>

Mit data-win-options werden weitere Optionen für den in data-win-control definierten control angegeben. In unserem Beispiel wird hier auf die Seite “home” verwiesen, die sich im Ordner “/pages/home/home.html” befindet.

Im Ordner css und im Ordner js befinden sich Dateien, die den Namen “default” tragen. Hier können Funktionen bzw. Styles definiert werden, die für die gesamte App gültig sind. Ein Beispiel dafür sind App-Bars: Die App-Bar soll auf jeder Unterseite meiner App erscheinen, sobald ich die rechte Maustaste klicke, daher definiere ich sie in meiner default.html. Zusammenfassend lässt sich also sagen: default.html sowie die im Ordner js befindliche default.js und die im css-Ordner befindliche default.css definieren den “Rahmen” und das Layout, das für alle Unterseiten der App gültig ist. Seitenspezifische styles werden in den im Ordner “pages” befindlichen css-Seiten definiert.

… und wie in allen App-Projekten, findet sich auch in einem JavaScript-Projekt die Datei package.appmanifest in der unter anderem die Hintergrundfarbe für den SplashScreen vergeben wird oder ausgewählt werden kann, welche Funktionen die App nutzen darf (Internetverbindung, Kamera, Mikrofon, …).

Anonyme Funktionen und WinJS

Werfen wir gleich einen Blick in die JS-Datei unserer home-Seite: Durch einen Doppelklick auf die entsprechende Datei können wir uns den Code anzeigen lassen:

2

Wir sollten folgenden Code sehen:

   1:  (function () {
   2:      "use strict";
   3:   
   4:      WinJS.UI.Pages.define("/pages/home/home.html", {
   5:          // Diese Funktion wird immer aufgerufen, wenn ein 
   6:          // Benutzer zu dieser Seite wechselt. Sie
   7:          // füllt die Seitenelemente mit den Daten der App auf.
   8:          ready: function (element, options) {
   9:              // TODO: Die Seite hier initialisieren.
  10:          }
  11:      });
  12:  })();

Hier wird eine (anonyme) Funktion definiert, die automatisch aufgerufen wird, wenn der User die Seite home.html anzeigen lässt. Mit den zwei Wörtern “use strict” wird definiert, dass unser Code im “strict mode” ausgeführt wird und damit bestimmte Regeln eingehalten werden müssen, damit der Code kompiliert werden kann (zB müssen alle Variablen mit dem Schlüsselwert var deklariert werden, bevor ihnen ein Wert zugewiesen werden kann).
In Zeile 4 wird auf WinJS verwiesen. WinJS ist eine Javascript-Bibliothek die eine Reihe an Funktionalitäten zur Verfügung stellt um uns die Arbeit zu erleichtern. Hier wird eine PageControl definiert, damit wir – vereinfacht gesagt – mit unserer home.html-Seite interagieren können.
In Zeile 8 befindet sich die Funktion ready. Code, der in dieser Funktion steht wird aufgerufen, während die Seite geladen wird. Das bedeutet, hier sollten zB Event-Listener (dazu siehe sogleich) definiert werden.

Formelemente, Event-Listener und Debugging

Die Grundfunktionalität einer jeden App ist es, die Aktionen, die ein Benutzer ausführt aufzufangen und entsprechende weitere Schritte zu setzen. Immer wenn ein User auf einen Button klickt oder eine Wischgeste ausführt, möchten wir diese Aktionen empfangen können, und auf die Eingaben reagieren. Wie in vielen anderen Frameworks, wird auch für Windows 8 das Konzept der Event-Listener verwendet, um Eingaben zu registrieren.

Wechseln wir zurück in Visual Studio und wagen wir uns an die erste simple Interaktion, die wir implementieren: Immer ein ein User auf einen Button klickt, soll ein Eintrag in die Javascript-Konsole geschrieben werden.
Da die HTML-Seiten das User-Interface darstellen, legen wir unseren Button auch in der home.html Datei an. Dazu löschen wir den Eintrag

   27:  <p>Hier Inhalt einfügen</p>

aus Zeile 27 und fügen stattdessen folgenden Code ein:

   27:  <button id="beispielbutton1">Beispielbutton</button>

Der <button></button> Tag definiert einen simplen Button der mehr oder weniger nur aus einem weißen Rechteck mit Text besteht. Äußert wichtig ist für unsere Zwecke die property id, mit der unser Element für den Event-Listener eindeutig identifizierbar wird.
Wer eine schnelle Übersicht sucht, welche Elemente eingefügt werden können, möge in der Menüzeile auf “Ansicht” klicken und dann “Werkzeugkasten” auswählen.

3

Es öffnet sich daraufhin ein Fenster mit einer Auswahl an Formelementen, die mit einem Doppelklick auf das jeweilige Objekt in die App eingefügt werden können.

In der Regel möchten wir nun auch gerne sehen, wie unsere Button später in der App aussehen wird. Um die App anzuzeigen, klicken wir im oberen Menü auf “Lokaler Computer”, woraufhin ein (schwarzes) Fenster mit einem weißen durchkreuzten Rechteck angezeigt wird – der Splashscreen – und kurze Zeit darauf unsere home.html-Seite erscheint, die in etwa so aussieht:

5

Um die App zu schließen und zu Visual Studio zurückzukehren, fahren wir entweder mit der Maus auf die obere Kante und ziehen die App mit gedrückter Maustaste nach unten oder brechen die Ausführung mit Alt+F4 ab.

Wenn wir in Visual Studio zurückkehren, sehen wir anhand des roten Balkens am unteren Bildschirmrand, dass das Debugging noch läuft. Um dies zu beenden wählen wir entweder den Shortcut Shift+F5 oder klicken im oberen Menü auf “Debugging beenden”

6

Im nächsten Schritt fügen wir nun den Event-Listener hinzu. Hierbei handelt es sich um Steuerungslogik und diese wird in Javascript-files definiert. Wir wechseln daher in home.js und fügen in der ready-Funktion folgenden Code hinzu:

   1:  var button1 = document.getElementById("beispielbutton1");
   2:  button1.addEventListener("click", buttonClick, false);

In Zeile 1 greifen wir mittels document.getElementById() auf unseren Button zu und speichern das so erhaltene button-Objekt in der Variable button1. In Zeile 2 fügen wir unserem Button aus der home.html-Datei einen Event-Listener hinzu: Im ersten Argument dieser Funktion definieren wir, auf welches Event wir achten: “click”, also ein Mausklick bzw. ein Fingertab bei Touchscreens. Das zweite Argument gibt an, welche Funktion bei einem Klick auf den Button ausgeführt werden soll: “buttonClick” – diese Funktion müssen wir noch definieren. Im dritte Argument wird definiert, ob “capture” aktiviert werden soll (für dieses Beispiel nicht notwendig, daher false).

Wir haben nun definiert, dass mit einem Klick auf den Button mit der ID “beispielbutton1” die Funktion “buttonClick” aufgerufen werden soll. Diese Funktion müssen wir nun ebenfalls im home.js-file definieren. Unser Datei home.js sieht damit insgesamt wie folgt aus:

   1:  (function () {
   2:      "use strict";
   3:      
   4:      WinJS.UI.Pages.define("/pages/home/home.html", {
   5:          ready: function (element, options) {
   6:              var button1 = document.getElementById("beispielbutton1");
   7:              button1.addEventListener("click", buttonClick, false);
   8:          }
   9:      });
  10:   
  11:      function buttonClick() {
  12:          console.log("Auf Button geklickt");
  13:      }
  14:   
  15:  })();

In Zeile 12 definieren wir, dass der Text “Auf Button geklickt” in die Javascript-Konsole geschrieben werden soll. Wenn wir nun die App starten und einige Male auf den Button klicken, die App danach schließen und zurück in Visual Studio wechseln, sollte in unserer Konsole nun entsprechend oft der Text angezeigt werden:

7

Wer bereits öfter in Javascript entwickelt hat, hat vielleicht des Öfteren die alert()-Funktion zum Debuggen verwendet. Das ist zwar eine relativ unschöne Methode, ist für schnelles Auffinden von Fehlern im laufenden Betrieb dennoch manchmal sinnvoll. In Windows 8 gibt es die alert()-Funktion nicht, wir können und diese jedoch sehr schnell selbst basteln, indem wir unterhalb der buttonClick-Funktion folgenden Code einfügen:

   1:  function alert(text) {
   2:      var messagedialogpopup = new Windows.UI.Popups.MessageDialog(text, "Überschrift");
   3:      messagedialogpopup.showAsync();
   4:  }

Wir ersetzen nun den console-Eintrag in der buttonClick-Funktion durch einen Aufruf der alert()-Funktion sodass die gesamte home.js-Datei wie folgt aussieht:

   1:  (function () {
   2:      "use strict";
   3:      
   4:      WinJS.UI.Pages.define("/pages/home/home.html", {
   5:          ready: function (element, options) {
   6:              var button1 = document.getElementById("beispielbutton1");
   7:              button1.addEventListener("click", buttonClick, false);
   8:          }
   9:      });
  10:   
  11:      function buttonClick() {
  12:          alert("Auf Button geklickt");
  13:      }
  14:   
  15:      function alert(text) {
  16:          var messagedialogpopup = new Windows.UI.Popups.MessageDialog(text, "Überschrift");
  17:          messagedialogpopup.showAsync();
  18:      }
  19:   
  20:  })();

Wenn wir nun die App starten und auf den Button klicken, erscheint ein MessageDialog. Wir müssen nun nicht zurück in Visual Studio wechseln, wenn wir uns zB die aktuelle Variablenbelegung ansehen wollen, sondern können uns alle möglichen Infos direkt in der App anzeigen lassen:

8

Navigation und Seiten

Bisher haben wir alle Aktionen auf unserer home-Seite ausgeführt ohne diese zu verlassen. Bei größeren Projekten ist es rein aus strukturellen Gründen besser, mehrere Seiten anzulegen, zwischen denen der User navigieren kann. Das Windows 8 Framework, allen voran WinJS nimmt uns auch hier wieder einen großen Teil der Arbeit ab, unter anderem müssen wir uns nicht um das Erscheinen bzw. das Layout eines “Zurück”-Buttons kümmern, wenn wir zu einer Unterseite navigieren – dies wird ganz automatisch eingefügt (und kann natürlich auch gelöscht werden, wenn wir der Meinung sind, keinen solchen Button zu benötigen).

Wir erweitern die bisher geschriebene App nun so, dass wir mit einem Klick auf unseren Button, der sich bekanntlich auf der “home”-Seite befindet, auf eine “detail”-Seite wechseln. Dazu klicken wir mit der rechten Maustaste auf unseren “pages”-Ordner, wählen “Hinzufügen” > “Neuer Ordner” und nennen diesen “detail”:

9

Wir klicken nun mit der rechten Maustaste auf den soeben erstellten “detail” Ordner, wählen wieder “Hinzufügen” und “Neues Element”. In der nun erscheinenden Liste wählen wir “Seitensteuerelement” und im Textfeld “Namen” geben wir “detail” ein:

10

Visual Studio fügt nun in unserem detail-Ordner die Dateien detail.html, detail.css und detail.js hinzu. Diese dreigeteilte Struktur kommt uns bereits bekannt vor, es ist wenig überraschend das selbe Prinzip wie auf unserer “home”-Seite, wenngleich der Code nicht exakt der selbe ist.

Wir wechseln nun in unsere home.js-Datei, löschen die dort befindliche buttonClick-Funktion und ersetzen sie mit folgendem Code:

   1:  function buttonClick(eventInfo) {
   2:      WinJS.Navigation.navigate("/pages/detail/detail.html");
   3:  }

In Zeile 2 greifen wir auf unsere altbekannte WinJS-library zurück und rufen die Funktion navigate() auf, die uns zur Verfügung gestellt wird, um bei einem Klick auf den Button in home.html zu detail.html zu navigieren. In unsere detail.html schreiben wir noch ein Rezept für einen lecker schmeckenden flockigen Becherkuchen, der ebenso schnell und einfach zu machen ist, wie unsere App. Hier der Quellcode der gesamten detail.html-Datei:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta charset="utf-8" />
    <title>detail</title>
 
    <!-- WinJS-Verweise -->
    <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
 
    <link href="detail.css" rel="stylesheet" />
    <script src="detail.js"></script>
</head>
<body>
    <div class="detail fragment">
        <header aria-label="Header content" role="banner">
            <button class="win-backbutton" aria-label="Back" disabled type="button">
           </button>
            <h1 class="titlearea win-type-ellipsis">
                <span class="pagetitle">Becherkuchen Rezept</span>
                <span style="font-size:20px;">von Christine Hudetz</span>
            </h1>
        </header>
        <section aria-label="Main content" role="main">
 
            Um einen flockigen Becherkuchen zaubern zu können benötigt man: Erst einmal 
            die unersetzlichen Grundzutaten:<p>
            <li> 1 Becher Joghurt/Sauerrahm/Schlagobers (letzerer ist am flockigsten)
            <li> 1 Becher (ja, den Joghurt/Sauerrahm/Schlagobersbecher) Mehl (am 
            besten „Universal“)
            <li> 1 Becher (noch immer derselbe) Zucker
            <li> ½ (!) Becher Öl
            <li> 1 Packerl Backpulver
            <li> 3 Eier
            <p>
            Hat man diese flotten Essenzen nun alle (egal in welcher Reihenfolge) 
            in eine Schüssel zusammenpurzeln lassen, darf man seiner Fantasie freien
            Lauf lassen und hinzufügen, wozu man grade Lust und Laune hat.
            <p>
            Im klassischen Flockkuchen befindet sich (mind.) 1 Becher Kakao (Erfahrene 
            Flockbäcker schütten den Kakao einfach nach Gefühl in die Schüssel – ein 
            einziger Becher erscheint alteingesessenen Flockkennern meist etwas banal)
            Eine weitere klassische Zutat sind geriebene Nüsse – egal welcher Sorte – 
            sie geben dem Becherkuchen ein noch flockigeres Geschmacksspektrum. 
            Für einen wohltuenden Schokolade-Schock empfiehlt sich jedoch die 
            reine Kakao-Variante.
            <p>
            Weitere typische Zutaten wären:<br>
            <li> ganze Nüsse
            <li> Schokoladestücke
            <li> Rosinen
            <li> Kokosraspeln
            <li> Zimt (gibt dem Kuchen einen flockig weihnachtlichen Touch!)
            <li> Vanille(zucker)*
            <li> usw usf - Der Kreativität der Flockisten sind keine Grenzen gesetzt!
            <p>
            *Anm.: Eine rein mentale Zutat. Bringt geschmacklich keine merkliche 
            Veränderung.
            <p>
            Nachdem man mit der Wahl seiner Zutaten zufrieden geworden ist und die 
            Schüssel nach Belieben mit flockigen Substanzen bereichert hat, mixt man 
            das Ganze bis alles gut vermischt harmonisch vor sich her döst.<br>
            Währenddessen kann man schon mal den Ofen auf 180° (Ober- und Unterhitze) 
            einschalten und vorglühen lassen. Dann darf man sich ein Stück Butter 
            krallen und damit vergnügt die Backform (Gugelhupf, Rehrücken, 
            Tortenform,...) auskleiden. Als krönenden Abschluss bespreuselt man 
            die ausgebutterte Form dann noch mit Semmelbröseln – möglichst ohne 
            bröselfreie Zonen, um potentiellem Festkleben des Kuchens keine Chance 
            zu geben und ein einwandfreies Loslösen des fertigen Kuchens zu 
            garantieren.<br>
            Ist die Form nun fertig ausgebröselt füllt man sie grazil mit dem 
            flockig-vermixten Teig.
            Wer jetzt noch nicht genug Spaß am Herumflocken hatte, kann noch 
            Schokoladestückchen in die Backform plumpsen lassen. Oder Schokostreusel, 
            oder Rosinen, oder Kokosraspeln,...<p>
 
            Danach schiebt man die Form auf mittlerer Schiene in den Backofen und 
            wartet ab. Solange, bis der Kuchen schön flauschig geworden ist 
            (ca. 45-50 min. - je nachdem wie lange man den Ofen verheizen hat lassen).
            <br>
            Hat der Kuchen die perfekte Konsistenz erreicht, holt man ihn aus dem 
            Backrohr und stülpt ihn aus der Form. Ambitionierte Einbutterer und 
            Ausstreusler können sich nun sicher über ein einwandfreies Ergebnis 
            freuen. Faulere Individuen werden mit kleinen Verlusten zu rechnen haben.
            <p>
            Der fertiggebackene Kuchen kann nun beliebig mit Staubzucker, Streusel 
            oder (für den Extra-Schoko-Flash) Schokoladeüberguss dekoriert werden.
            <p>
            Dines flockiger Becherkuchen eignet sich selbstverständlich auch perfekt 
            für Geburtstags- und Hochzeitstorten – ein wahres Universalrezept also.
            <p>
            Viel Spaß beim Nachflocken, wünscht Dine.
 
        </section>
    </div>
</body>
</html>

Wenn wir nun mit dem Shortcut F5 die App starten und auf den Button klicken, sollten wir auf unsere detail.html Seite gelangen, auf der sich nun unser Rezept befindet. Automatisch angelegt wurde neben der Überschrift auch ein “Zurück”-Button.

Auffällig ist hierbei, dass – je nach Auflösung – der Text abgeschnitten ist und ein langweiliger schwarzer Hintergrund sowie ein einfacher Button niemanden vom Hocker haut. In einem letzten Schritt wagen wir uns jetzt an das Design, um unserer App ein bisschen Leben einzuhauchen.

Pimp your site with CSS

Wir wollen in diesem Abschnitt unserer App ein Hintergrundbild verpassen sowie den Button auf der home-Seite durch ein Vorschaubild mit Text ersetzen. Kümmern wir uns zunächst um das Hintergrundbild. In diesem Beispiel soll für jede Seite das gleiche Bild verwendet werden, wir müssen daher unsere default.css Datei anpassen, die sich im Ordner css befindet. Hier fügen wir ganz am Ende des default.css-files folgenden Eintrag hinzu:

   1:  body {
   2:      background-image:url(/images/background.png);
   3:  }

Damit wird für den <body>-Tag das Hintergrundbild background.png definiert, das im Ordner images liegt. Nur: Noch liegt im Ordner images kein solches Bild. Wenn wir einen Blick in images werfen, werden wir dort einige Bilder vorfinden, es handelt sich dabei um verschiedene Logos, die wir uns ebenfalls noch ansehen werden. Zuvor aber suchen wir uns ein nettes Bild mit ausreichend guter Auflösung und ziehen dieses einfach mit gedrückter Maustaste in unseren image-Ordner:

11

Wenn wir die App starten sollte nun bereits unser Hintergrundbild auf allen Seiten angezeigt werden. Passen wir nun im nächsten Schritt auch den Button an. Dazu wechseln wir in unsere home.html-Datei und ersetzen den Button, den wir angelegt haben mit folgendem Code:

<div id="beispielbutton1" class="ManipulationElement" style="-ms-grid-column: 2">
    <img alt="Cliff" src="/images/becherkuchen.jpg" style="width:250px;height:250px;"/>
    <div class="overlay">
        <h2>Becherkuchen</h2>
        <p>von Christine Hudetz</p>
    </div>
</div>

Hier passiert nicht viel Magisches: Wir definieren lediglich einen <div>-Bereich, weisen diesem die ID zu, die zuvor unser Button hatte und definieren eine class-property die wir sogleich benötigen, um das Element in CSS stylen zu können. Innerhalb des <div> liegt ein Bild, das in der src auf ein Bild eines Becherkuchens verweist, das wir ebenso wie das Hintergrundbild in den images-Ordner ziehen müssen. Zuletzt folgt ein weiterer <div>-Tag, in dem Text definiert wird, der später halbtransparent am Bild erscheinen soll.

Wechseln wir nun in die home.css Datei und fügen folgenden Code am Ende hinzu:

.ManipulationElement {
    position: relative;
    display: -ms-grid;
    -ms-grid-columns: 1fr;
    -ms-grid-rows: 1fr;
    height: 250px;
    width:  250px;
    top:  50px;
}
 
    .ManipulationElement .overlay
    {
        position: relative;
        -ms-grid-row-align: end;
        background-color: rgba(0,0,0,0.65);
        height: 50px;
        padding:  15px 15px;
        overflow: hidden;
        -ms-grid-column: 1;
    }
    
    
        .ManipulationElement .overlay h2,
        .ManipulationElement .overlay p
        {
            color: rgba(255, 255, 255, 0.8);
            margin: 0px;
        }

Hier wird im wesentlichen die Klasse “ManipulationElement” definiert, die unserem <div> in der home.html bestimmte Styles hinzufügt. Wenn wir nun die App starten, sieht die App – natürlich abhängig von den verwendeten Bildern – etwa wie folgt aus:

12

Im letzten Schritt soll nun der Text auf der detail.html-Seite, der abgeschnitten ist, sichtbar gemacht werden. Dazu verwenden wir eine schnelle, einfache (und unsaubere) Lösung und ersetzen in Zeile 17 den Code

<div class="detail fragment">

durch

<div class="detail fragment" style="overflow:scroll;">

Dadurch werden der Seite einfach Scrollbars hinzugefügt.

Wenn wir nun eine Rezeptesammlung mit vielen Rezepten bauen wollen, freut es viele sicher zu lesen, dass es schon fertige Vorlagen gibt, mit denen Apps im Stil einer Grid – so wie wir sie jetzt händisch Stück für Stück gebaut haben – schnell erstellt werden können. Wir klicken dazu im Menü oben auf “Datei” > “Neu” > “Projekt” und wählen “Raster-App” aus. Wenn wir diese App mit F5 starten, sieht sie so aus:

13

Die grauen Quadrate sind Bilder, die im Ordner images liegen und können natürlich nun im Fall einer Rezepte-App einfach durch eigene Bilder von Speisen und Kuchen ersetzt werden. Alle Daten der App werden übrigens im Ordner js im file data.js definiert.

Zuletzt passen wir noch die Logos an, damit auch unser SplashScreen hübscher wird. Wenn wir auf das Logo splashscreen.png doppelklicken, öffnet sich der in Visual Studio integrierte Grafik-Editor. Hier können einfache Änderungen an der Bildern vorgenommen werden. Mit etwas Motivation lässt sich schnell ein Kuchen-Icon basteln, das ganz im Stil der Standard-Win8-Tiles schlicht und weiß gehalten sein soll.

14

Die Farbe des SplashScreens lässt sich mit einem Doppelklick auf package.appxmanifest in der Zeile “Hintergrundfarbe” ändern.

15

Das für den SplashScreen erstellt Logo, können wir nun auch für die anderen Logos verwenden. 

Die weiteren Schritte

Wenn wir eine App erstellt haben, möchten wir diese in der Regel auch einem breiten Publikum vorstellen und sie im Windows Store veröffentlichen. Um dies zu bewerkstelligen, navigiere man zunächst auf die Registrierungs-Seite des Windows Dev-Centers. Nach einem klick auf “Jetzt registrieren” können sich Besitzer eines Windows-Accounts einloggen oder neue User mit einem Klick auf “Weiter” in der linken Spalte registrieren. Für die Registrierung ist neben der Angaben von persönlichen Daten auch eine Kreditkarte erforderlich. Für Studenten ist (im Rahmen des DreamSpark Programms) die Mitgliedschaft kostenlos.

Ist der Account angelegt und die App fertig, steht der Veröffentlichung nichts mehr im Wege. In diesem Blogeintragfindet sich eine Schritt-für-Schritt-Anleitung, um die App in den Store zu bekommen und typische Fehler zu vermeiden.

Ressourcen

Add comment

  Country flag

biuquote
  • Comment
  • Preview
Loading

Datenschutzhinweis: Sie stimmen durch "Kommentar speichern" der Speicherung Ihrer Angaben durch Microsoft Österreich für die Beantwortung der Anfrage zu. Sie erhalten dadurch keine unerwünschten Werbezusendungen. Ihre Emailadresse wird auf Ihren Wunsch dazu verwendet Sie über neue Kommentare zu informieren.

Microsoft respektiert den Datenschutz. Datenschutz & Cookies

Entwickler Wettbewerbe:

Wettbewerbe

Entwickler Events:

Developer Events

App für Windows 8, Windows Phone oder/und Azure? Diese Events zeigen Dir, wie es geht:

Mehr Information

Aktuelle Downloads

Visual Studio Downloads
 
Windows Azure Free Trial
Instagram
CodeFest.at on Facebook

Datenschutz & Cookies · Nutzungsbedingungen · Impressum · Markenzeichen
© 2013 Microsoft. Alle Rechte vorbehalten · BlogEngine.NET 2.7.0.0 · Diese Website wird für Microsoft von atwork gehostet.
powered by atwork