Naukę każdej nowej technologii zaczyna się od aplikacji Hello World. Trzymając się tej tradycji, pierwszą aplikacją Windows Store będzie prosta aplikacja złożona z formularza oraz pola tekstowego wyświetlającego wprowadzone dane.

Pisanie aplikacji zaczniemy od utworzenia nowego projektu. W tym celu z menu File wybieramy opcję New project. Pojawi się nam okno z wyborem języka oraz szablonu aplikacji.

new_project

Ponieważ aplikację będziemy tworzyć w HTML i JavaScript, w drzewie znajdującym się po lewej stronie rozwijamy JavaScript, by wyświetlić dostępne szablony projektu. Do dyspozycji mamy pięć zdefiniowanych szablonów. Są to:

  • Blank app – pusta aplikacja składająca się z jednej strony bez zdefiniowanego layoutu oraz kontrolek
  • Grid app – aplikacja złożona z trzech stron – siatki wyświetlającej wszystkie prezentowane elementy, zgrupowanych elementów oraz szczegółów pojedynczego elementu
  • Split app – aplikacja składająca się z dwóch stron – grupowanie elementów oraz szczegóły pojedynczego elementu
  • Fixed layout app – aplikacja z ustawionym na sztywno rozmiarem, który skaluje się względem okna
  • Navigation app – aplikacja z predefiniowanymi kontrolkami do nawigacji po stronach

Dla naszych potrzeb w zupełności wystarczy Blank app. Wybieramy ten szablon, w polu Name wpisujemy HelloWorld i klikamy OK. W tym momencie Visual Studio utworzy pusty projekt zawierający podstawowe pliki, bez których nasza aplikacja nie mogłaby działać. Plikami tymi są:

  • css/default.css – domyślny plik ze stylami
  • js/default.js – domyślny plik ze skryptami
  • images/logo.png – logo aplikacji wyświetlane na ekranie startowym
  • images/smalllogo.png – małe logo aplikacji wyświetlana na liście aplikacji
  • images/splashscreen.png – grafika wyświetlana podczas uruchamiania aplikacji
  • images/storelogo.png – logo aplikacji wyświetlane w sklepie z aplikacjami
  • default.html – strona główna aplikacji
  • package.appxmanifest – manifest aplikacji zawierający informacje o nazwie aplikacji, jej opisie, ikonach, wersji, itp.

Po utworzeniu projektu możemy od razu go uruchomić.

default_app

Jak widać, domyślna aplikacja na kolana nie powala, ale przynajmniej wiemy, że działa. Pora dodać kilka elementów. Zaczniemy od pola tekstowego, przycisku i elementu blokowego, w którym wyświetlimy wpisany w formularzu tekst. Wszystkie elementy dodajemy w pliku default.html w sekcji body.

<h1>Hello World!</h1>
<input type="text" id="name" placeholder="Jak się nazywasz?" />
<input type="button" value="Wyślij" id="btn_send" />
<p id="message"></p>

Po uruchomieniu aplikacji powinniśmy zobaczyć coś takiego.

hello_app

Jak widzimy, wygląd naszej aplikacji jest dostosowany do Modern UI. Nagłówki, pola formularza, przyciski, listy i wszystkie pozostałe elementy zostały domyślnie ostylowane w taki sposób, by jak najbardziej upodobnić naszą aplikację do stylu panującego w Windows 8. Dzieje się tak ponieważ w sekcji head znajduje się odwołanie do domyślnego pliku css – ui-dark.css. Podczas tworzenia aplikacji Windows Store mamy do dyspozycji dwa zdefiniowane pliki – wspomniany przed chwilą ui-dark.css oraz ui-light.css. Różnią się one od siebie tym, że pierwszy ostyluje naszą aplikację w ciemnych barwach, drugi w jasnych. Poza ostylowaniem poszczególnych elementów HTML, otrzymujemy do dyspozycji szereg reguł CSS, które możemy zastosować w naszym kodzie. Dokładny opis tych reguł znajduje się pod adresem http://msdn.microsoft.com/en-us/library/windows/apps/hh770583.aspx

Najwyższa pora zabrać się za napisanie obsługi dodanych elementów. Zrobimy to poprzez dodanie w pliku default.js obsługi zdarzenia click na przycisku. Zanim jednak to zrobimy, warto przyjrzeć się zawartości pliku default.js.

(function () {
    "use strict";

    WinJS.Binding.optimizeBindingReferences = true;

    var app = WinJS.Application;
    var activation = Windows.ApplicationModel.Activation;

    app.onactivated = function (args) {
        if (args.detail.kind === activation.ActivationKind.launch) {
            if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
            } else {
            }
            args.setPromise(WinJS.UI.processAll());
        }
    };

    app.oncheckpoint = function (args) {
    };

    app.start();
})();

W domyślnej wersji zawiera on inicjalizację kontrolek oraz obsługę zmiany stanu aplikacji. Dokładny opis tych zdarzeń przedstawię w następnym wpisie poświęconym aplikacjom Windows Store, więc nie będę się teraz zagłębiał w szczegóły. Niecierpliwych odsyłam do dokumentacji – http://msdn.microsoft.com/en-us/library/windows/apps/hh464925.aspx

Funkcja obsługi przycisku wygląda następująco.

function btnClick(event) {
    var name = document.getElementById("name").value;
    var msg = "Witaj " + name;
    document.getElementById("message").innerText = msg;
}

Na koniec wystarczy zarejestrować słuchacza, który uruchomi utworzoną przed chwilą funkcję.

var btn = document.getElementById("btn_send");
btn.addEventListener("click", btnClick, false);

Słuchacza dodajemy w metodzie onactivated po args.setPromise(WinJS.UI.processAll());

Jeśli słuchacz zostanie umieszczony w innym miejscu, może się okazać, że odwołuje się on do elementu, który jeszcze nie został zadeklarowany, co spowoduje pojawienie się błędu.

Po uruchomieniu aplikacji i wpisaniu w pole tekstowe imienia, otrzymamy następujący wynik.

hello_app2

W ten oto prosty sposób napisaliśmy aplikację Hello World. W kolejnej części opiszę cykl życia aplikacji.