Ovládací prvky ze specifikace HTML5

Ovládací prvky ze specifikace HTML5 používáte naprosto identicky, jako u běžných webových aplikací. Jejich design je však přizpůsoben pro dotykové ovládání. Dalo by se říct, že výchozí styl ovládacího prvku je upraven tak, aby odpovídal požadavkům pro ovládání doteky. Pro toto chování nemusíte vůbec nic měnit ani nastavovat. K těmto ovládacím prvkům přistupujete stejně jako u běžné webové stránky.

Specifické ovládací prvky

Windows Runtime vám nabízí celou řadu ovládacích prvků, které usnadňují vývoj aplikace, ale nejsou součástí specifikace HTML5. Je to podobné, jako když pracuje např. s jQuery UI. Ovládací prvek je do stránky vložen pomocí Custom Data Attributes.

<div data-win-control="WinJS.UI.ToggleSwitch"
     data-win-options="{title: 'Wi-fi'}"
     id="myToggle">
</div>

Atribut data-win-control odkazuje na ovládací prvek ToogleSwitch, který je specifický pro Windows Store aplikace a nemá obdobu ve specifikaci HTML5. Tento ovládací prvek je ale ve finále samozřejmě vykreslen pomocí HTML5. Atributem data-win-options nastavujete vlastnosti ovládacího prvku.

Během inicializace aplikace je třeba všechny Custom Data Attributes zpracovat. O to se stará kód v události onactivated. Tento kód je součástí šablony.

args.setPromise(WinJS.UI.processAll());

Metoda processAll projde DOM a hledá elementy s atributem data-win-control, které zamění za příslušné prvky uživatelského rozhraní. ToogleSwitch je například reprezentován takto:

<div class="win-title" id="ms__id1" role="note">Wi-fi</div>
<div style="display: -ms-grid;">
  <div>On</div><div class="win-label">Off</div><input class="win-switch" role="checkbox" aria-checked="false" aria-disabled="false" aria-labelledby="ms__id1" type="range" max="1" step="1">
</div>

ListView

Představte si, že máte pole objektů, které jsou například vygenerovány z databáze nebo RSS Feed, a toto pole potřebujete zobrazit.

[{ title: "Banana Blast", text: "Low-fat frozen yogurt", picture: "/images/60Banana.png" },
 { title: "Lavish Lemon Ice", text: "Sorbet", picture: "/images/60Lemon.png" },
 { title: "Marvelous Mint", text: "Gelato", picture: "/images/60Mint.png" },
 { title: "Creamy Orange", text: "Sorbet", picture: "/images/60Orange.png" },
 { title: "Succulent Strawberry", text: "Sorbet", picture: "/images/60Strawberry.png" }]

Abyste nemuseli generovat DOM v nějakém cyklu, tak jak to bylo běžné v začátcích PHP, můžete použít ovládací prvek ListView.

<div id="smallListIconTextTemplate"data-win-control="WinJS.Binding.Template"style="display: none">
  <div class="smallListIconTextItem">
    <img src="#"class="smallListIconTextItem-Image"data-win-bind="src: picture"/>
    <div class="smallListIconTextItem-Detail">
      <h4 data-win-bind="innerText: title"></h4>
      <h6 data-win-bind="innerText: text"></h6>
    </div>
  </div>
</div>

<div id="listView"
     class="win-selectionstylefilled"
     data-win-control="WinJS.UI.ListView"
     data-win-options="{
       itemDataSource: myData.dataSource,
       itemTemplate: smallListIconTextTemplate,
       selectionMode: 'none',
       tapBehavior: 'none',
       swipeBehavior: 'none',
       layout: { type: WinJS.UI.GridLayout }
     }"
></div>

Princip je velmi jednoduchý. Pro každý prvek pole vytvoříte tzv. itemTemplate. Je to vlastně šablona, která se zkopíruje tolikrát, kolik je položek v poli a použije se pro vykreslení položek pole. Propojení šablony a objektu v poli se využívá datová vazba pomocí atributu data-win-bind. Datová vazba propojí vlastnost elementu s vlastností objektu. Detailní příklad najdete v příkladu HTML ListView essentials sample. Zdrojové kódy výše uvedeného příkladu najdete v příloze toho článku.

Process Lifetime Management – PLM

Windows Store aplikace jsou svým chováním podobné aplikacím na mobilních telefonech. Pokud není aplikace na popředí (Running), tak aplikace neběží (Suspended) a její vlákna na procesoru jsou zastavena, ale aplikace je stále zavedena v paměti. Mezi stavy Running a Suspended aplikace přechází vlastně okamžitě, stačí spustit její vlákna na procesoru. Aplikace je o přechodu mezi jednotlivými stavy obeznámena pomocí událostí.

Pokud začnou docházet systémové zdroje, tak je aplikace definitivně ukončena. Je odstraněna z paměti a jsou zrušena její vlákna na procesoru. Protože je již aplikace v režimu Suspended (neběží), tak se o přechodu do stavu Not running nedozví. O tom, že byla aplikace „násilně“ ukončena se dozví až při dalším startu. Tato informace je uchována ve vlastnosti args.detail.previousExecutionState.

Je na vás, na programátorech, abyste při události Suspending uložili rozdělanou práci uživatele a při dalším startu, pokud se aplikace dostala až do stavu Not running, jste uživatelovu rozdělanou práci obnovili.

app.onactivated = function (args) {
  if (args.detail.kind === activation.ActivationKind.launch) {
    if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
      // TODO: This application has been newly launched. Initialize
      // your application here.
    } else {
      // TODO: This application has been reactivated from suspension.
      // Restore application state here.
    }
    args.setPromise(WinJS.UI.processAll());
  }
};

app.oncheckpoint = function (args) {
  // TODO: This application is about to be suspended. Save any state
  // that needs to persist across suspensions here. You might use the
  // WinJS.Application.sessionState object, which is automatically
  // saved and restored across suspension. If you need to complete an
  // asynchronous operation before your application is suspended, call
  // args.setPromise().
};

Může běžet aplikace na pozadí?

Ano i ne. Pokud potřebujete, aby vaše aplikace dělala nějakou činnost na pozadí, tak pro tuto činnost musíte najít vhodnou systémovou službu a té práci předat. Například, když víte, že budete stahovat velký objem dat, tak tuto práci nebude dělat vaše aplikace, ale předá ji systémové službě BackgroundTransfer.