Navigace

Stránka default.html slouží pro základní inicializaci aplikace a vlastně představuje aplikaci jako celek. Pomocí PageControlNavigater vkládáte do existující, hlavní stránky, stránky jiné.

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

Jednotlivé stránky aplikace jsou pak definované v dalších html, css a js souborech:

Pokud se podíváte do js souborů jednotlivých stránek, tak tam najdete následující definici:

WinJS.UI.Pages.define("/pages/home/home.html", {
    …
}

Tím vytvoříte objekt stránky s pevně daným URI. Na takto vytvořenou stránku se pak odkazujete pomocí stále stejného URI.

about.addEventListener("click", function () {
    WinJS.Navigation.navigate("/pages/about/about.html");
});

Obrazovka je pak složena vlastně z několika stránek:

Pro návrat na předchozí stránku pak použijete:

btnBack.addEventListener("click", function () {
  if (WinJS.Navigation.canGoBack) {
    WinJS.Navigation.back();
  }
});

Jak vidíte, o veškerou navigaci ve vaší aplikaci se stará WinJS.Navigation. Tento princip výrazně zvyšuje výkon aplikace, protože není třeba vždy sestavovat komplet nový DOM a zpracovávat CSS a Javascript od nuly.

Pokud chcete použít element a ze specifikace HTML, tak je doporučeno na stránce vytvořit vlastní událost, která bude kliknutí na odkaz zpracovávat.

Událost:

linkClickEventHandler: function (eventInfo) {
    eventInfo.preventDefault();
    var link = eventInfo.target;
    WinJS.Navigation.navigate(link.href);
}

Registrace události (v události ready stránky):

WinJS.Utilities.query("a").listen("click", this.linkClickEventHandler, false);

 Tím zajistíte, že se bude stránka správně řadit do fronty pro navigaci.

Aplikační lišta pro navigaci

Aplikační lišta je náhrada za klasickou nabídku. Může být na obrazovce nahoře nebo dole.

Do aplikační lišty můžete umístit libovolné ovládací prvky. Aplikační lištu vložíme do stránky default.html bude tak vždy dostupná.

<div id="appbar" data-win-control="WinJS.UI.AppBar">
  <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmd', label:'Command', icon:'placeholder'}" type="button"></button>
</div>

Přiřazení události pak uděláte v inicializaci stránky, tedy v události activated.

var appbar = document.getElementById("appbar").winControl;

var homeButton = appbar.getCommandById("homeButton");
homeButton.addEventListener("click", goToHomePage, false);

Zdrojové kódy z článku ke stažení.