v tomto tutoriálu se dozvíte, jak používat nepřeberné množství šablon TVML, které společnost Apple poskytla, aby vytvořila některá ohromující rozhraní. Tyto šablony použijete k vytvoření komplexní obrazovky pro videa RWDevCon 2015, která bude obsahovat širokou škálu informací o videu a zobrazí je přitažlivým a rozpoznatelným způsobem.

Začínáme

zde si můžete stáhnout projekt starter pro tento tutoriál.

ukázková aplikace pro tento tutoriál je wenderTV; umožňuje procházet a sledovat raywenderlich.com video obsahu na Apple TV, takže si můžete vychutnat obrovské množství znalostí – a špatné vtipy-z pohodlí vaší pohovky. Právě teď je wenderTV docela prázdná.

wenderTV obsahuje mnoho zdrojů, které budete používat během tohoto tutoriálu; také jsme reorganizovali některé z kódu, aby bylo snazší pochopit.

Sestavte a spusťte projekt wendertv starter z Xcode; všimnete si, že obrazovka je zcela prázdná. Je to proto, že ve wenderTV ještě nejsou žádné dokumenty TVML. Než budete moci obrátit svou pozornost na vytváření některých dokumentů TVML, musíte udělat trochu úklidu.

poznámka: Ačkoli můžete použít Xcode k napsání veškerého kódu, který potřebujete pro aplikaci založenou na TVML, může to být docela bolestivý zážitek. Xcode je vhodný pro editaci Swift nebo Objective-C, ale má pouze základní podporu pro XML a JavaScript. Rozhodně stojí za to použít Xcode, když potřebujete, a poté přepnout na schopnější editor, jako je Sublime Text, Atom, Visual Studio Code nebo MacVim, pro práci s dokumenty TVML a soubory JavaScriptu.

načítání skriptů

projekt pro wenderTV již má ResourceLoaderJS rozdělen do vlastního souboru, takže musíte zjistit, jak jej importovat do main.js.

TVJS poskytuje funkci evaluateScripts(), která přijímá řadu adres URL souborů JavaScript a zpětné volání. Funkce načte každou adresu URL, pokusí se ji analyzovat a přidá všechny obsažené funkce a definice objektů do globálního objektu kontextu. Nakonec vyvolá dodané zpětné volání s Boolean označující úspěch nebo neúspěch.

AppDelegate obsahuje kód, který poskytuje aplikaci JavaScript seznam adres URL požadovaných souborů JavaScript jako součást objektu možnosti spuštění. Otevřít hlavní.js a přidejte následující kód do funkce App.onLaunch() :

// 1:evaluateScripts(options.initialJSDependencies, function(success){ if (success) { // 2: resourceLoader = new ResourceLoaderJS(NativeResourceLoader.create()); var initialDoc = loadInitialDocument(resourceLoader); navigationDocument.pushDocument(initialDoc); } else { // 3: var alert = _createAlert("Evaluate Scripts Error", "Error attempting to evaluate the external JS files."); navigationDocument.presentModal(alert); throw ("Playback Example: unable to evaluate scripts."); } });

přijetí této nové funkce tělo krok za krokem:

  1. objekt options je připraven v aplikaci Swift a poté předán aplikaci JavaScript v delegátu aplikace, zatímco vlastnost initialJSDependencies je pole adres URL pro různé soubory JavaScriptu, které je třeba načíst při spuštění aplikace. evaluateScript() provede tuto akci a poté vyvolá zpětné volání s uvedením, zda byla úspěšná.
  2. pokud zdroje JavaScriptu byly úspěšně vyhodnoceny, vytvořte objekt ResourceLoaderJS, než jej použijete k načtení počátečního dokumentu a poté zatlačte tento dokument TVML do navigačního zásobníku. loadInitialDocument() je v současné době metoda pahýlu, kterou trochu naplníte.
  3. pokud se soubory JavaScriptu nepodařilo načíst, aplikace nemůže nic udělat. Proto používá _createAlert(), definované v dolní části hlavní.js vytvořit a předložit výstražný dokument a pak hodit chybu.

přidejte do loadInitialDocument():

return resourceLoader.getDocument("video.tvml");

To používá zavaděč prostředků k získání souboru TVML ze svazku zdrojů aplikace a jeho vrácení jako objektu DOM.

Dále budete muset vytvořit soubor, který se aplikace pokouší načíst: video.tvml.

přejděte do Xcode a klepněte pravým tlačítkem myši na skupinu rozvržení v navigátoru projektu. Vyberte nový soubor…:

přejděte na tvOS \ Other\Empty a stiskněte další. Pojmenujte video souboru.tvml a ujistěte se, že je zkontrolován cíl wenderTV:

Otevřete nový soubor buď ve vašem oblíbeném editoru XML (nebo Xcode, pokud na tom trváte) a přidejte následující řádky:

<?xml version="1.0" encoding="UTF-8" ?><document> <productTemplate> </productTemplate></document>

to definuje jednoduchý dokument TVML pomocí nového typu šablony: productTemplate.

sestavení a spuštění aplikace vidět, jak to vypadá tak daleko:

Hmm. Obrazovka je stále prázdná. Přestože jste soubor vytvořili a poskytli šablonu, neposkytli jste žádný obsah. Brzy to opravíte, ale nejprve musíte pokrýt trochu pozadí na šablonách TVML.

šablony TVML

dokument TVML je pouze dokument XML (eXtentible Markup Language) se specifickým schématem definovaným společností Apple. Pokud jste v minulosti používali HTML, XML bude vypadat povědomě. HTML není ve skutečnosti XML (navzdory některým neúspěšným snahám s XHTML), ale syntaxe a struktura jsou docela podobné.

vzhledem k tomu, že dokumenty TVML jsou XML, měly by začínat následujícím řádkem:

<?xml version="1.0" encoding="UTF-8" ?>

Toto je známé jako XML prolog; konstatuje, že tento soubor je dokument XML a které kódování znaků používá.

dokument TVML má kořenový prvek , který je jediným prvkem na nejvyšší úrovni dokumentu a nadřazeným (nebo předkem) všech ostatních prvků. Prvek má jediného přímého potomka, což může být jedna z 18 možných značek šablon.

značka šablony určuje rozložení nejvyšší úrovně, které by tvOS měl použít k vykreslení dokumentu na obrazovce. Kromě určení vzhledu naobrazovky, značky šablon také sdělují některé sémantické informace o obsahu, který obsahují. Šablony mohou vypadat podobně, ale mají zcela odlišné účely.

TVML šablony lze rozdělit do následujících kategorií:

  • informační: zobrazuje malé množství informací pro uživatele, a volitelně požaduje vstup od uživatele. Není určen pro prohlížení obsahu. Zahrnuje alertTemplate a loadingTemplate.
  • zadávání dat: uživatelská zkušenost se zadáváním dat na televizorech je docela strašná a Apple TV se neliší. Existuje však několik šablon pro vyžádání dat od uživatele, včetně searchTemplate a ratingTemplate.
  • Jedna Položka: Zobrazuje informace nebo obsah o jednom produktu nebo položce, jako je film nebo epizoda v televizním seriálu. Zahrnuje productTemplate, oneupTemplate, compilationTemplate a showcaseTemplate.
  • kolekce: zobrazuje kolekci produktů, jako je televizní seriál, žánr filmů nebo skladeb na albu. Zahrnuje stackTemplate, listTemplate a productBundle.
  • Ostatní: zahrnuje menuBarTemplate, který hostí sadu dalších šablon, a divTemplate, což je zcela čistý štít, na kterém kreslíte.
Poznámka: Spíše než jít do podrobností zde o každé šablony, Apple reference je skvělý zdroj pro získání low-down na různých šablon, jejich schopnosti a rozvržení: apple.co/1PJuOAV.

šablona produktu

první dokument, který vytvoříte, používá , který je určen k zobrazení všech informací týkajících se konkrétního produktu — v tomto případě videa.

otevřít video.tvml a přidejte následující kód mezi značky :

<banner> <infoList> <info> <header> <title>Presenter</title> </header> <text>Ray Wenderlich</text> </info> <info> <header> <title>Tags</title> </header> <text>development</text> <text>teams</text> <text>business</text> </info> </infoList></banner>

tento úryvek kódu představuje mnoho nových typů prvků. Brát je jeden po druhém:

  • <banner>: zobrazuje obsah v horní části stránky.
  • <infoList>: zobrazí seznam prvků, uspořádaných ve svislém seznamu.
  • <info>: slouží jako kontejner pro obsah, který se zobrazí jako položka v nebo .
  • <header>: slouží jako popis obsahu sekce, ve které se nachází.
  • <title>: obsahuje text krátkého názvu.
  • <text>: zobrazí text.

Sestavte a spusťte aplikaci a podívejte se, jak vypadá váš nový TVML:

Tato stránka představuje video, ale v současné době postrádá název. Je čas to změnit.

přidejte následující do značek <banner>, těsně za uzavírací značku :

<stack> <title>Teamwork</title> <row> <text>17m 54s</text> <text>Inspiration</text> <text>2015</text> <badge src="resource://nr" />is <badge src="resource://cc" /> <badge src="resource://hd" /> </row></stack>

tato část představuje další prvky TVML:

  • <stack>: zásobníky rozloží svůj obsah svisle dolů po obrazovce podobným způsobem jako . Existuje širší škála značek, které mohou být v zásobníku.
  • <row&gt: řádek je jako stoh, ale s horizontální orientací místo vertikální.
  • <badge&gt: odznaky zobrazují malý vložený obrázek. Adresa URL je poskytována atributem src.

Všimněte si, že adresa URL dvou obrázků odznaku začíná resource://. Toto je speciální schéma URL, které ukazuje na obrázky, které existují v samotném tvOS. Tyto obrázky zahrnují běžné akční ikony, například „play“, hodnocení obrázků pro různé země a video informace, jako je HD.

Poznámka: úplný seznam obrázků zdrojů dostupných v rámci tvOS naleznete v dokumentaci společnosti Apple na adrese apple.co/1T930o9.

Sestavte a spusťte znovu, abyste viděli, jak se stránka formuje:

začíná to vypadat dobře, ale je před námi ještě dlouhá cesta. Než budete pokračovat v kódování šablony, musíte nejprve zvážit oddělení dat a zobrazení.

data Injection

jak váš video dokument aktuálně stojí, všechna data jsou pevně zakódována. Chcete-li zobrazit informace o jiném videu, musíte vytvořit zcela novou stránku. Pokud byste chtěli stránku videa přeformátovat, jakmile vytvoříte všechny stránky, museli byste se vrátit a upravit každou z nich.

mnohem lepším přístupem je použití šablonovacího motoru, kde vytvoříte stránku videa jako šablonu a určíte, kam mají být data vložena. Za běhu šablony motor vezme šablonu stránky spolu s daty a vygeneruje stránku TVML pro zobrazení tvOS.

Poznámka: slovo „šablona“ se nyní používá pro dva různé účely: šablony TVML jsou rozvržení poskytované tvOS, které vykreslují vaše dokumenty na obrazovce, zatímco šablonovací stroj používá šablony dokumentů v kombinaci s daty ke generování úplných dokumentů TVML. Nebojte se příliš mnoho o rozdílu; to bude mnohem jasnější, jakmile jste použili oba.

knír.JS je populární jednoduchý šablonovací engine pro JavaScript. Můžete rozpoznat syntaxi šablon, která je založena na složených závorkách:

{{property-name}}

ten knír.knihovna js je již součástí wenderTV, ale musíte vytvořit mechanismy, abyste ji mohli používat. To vám přináší několik úkolů, které musíte splnit:

  • data jsou uložena jako JSON soubory v balíčku aplikací. Aplikace JavaScript potřebuje možnost požádat o ně.

  • když je dokument načten, nyní vyžaduje data, a to by mělo být kombinováno s řetězcem dokumentu pomocí kníru.js.
  • obrázky, které jsou přítomny v balíčku aplikací, potřebují nahradit úplnou adresu URL.
  • video dokument by měl být aktualizován, aby se změnil na šablonový dokument.

budete řešit každý z nich v pořadí.

poznámka: od tvOS 11 podporuje TVML koncept prototypů v TVML, které využívají vazbu dat k propojení datových prvků s TVML. To snižuje redundanci kódu a zlepšuje výkon při stránkování velkých sad obsahu, jako je obrovský seznam videí YouTube ve formátu zobrazení mřížky.

prototypování je však k dispozici pouze na úrovni <section>, zatímco jej používáte v tomto tutoriálu pro mnohem více, například v sekci <header> vašeho TVML. Budete i nadále používat knír.js jako šablonovací motor pro tuto část knihy, ale pokud nakonec budete muset ve svých aplikacích tvOS zpracovávat velké soubory obsahu, přečtěte si prototypování a vazbu dat na apple.co/2utDXXm.

čtení JSON z App Bundle

Open ResourceLoader.js a přidejte následující metodu ResourceLoaderJS:

getJSON(name) { var jsonString = this.nativeResourceLoader .loadBundleResource(name); var json = JSON.parse(jsonString); return json;}

Tato funkce Používá nativní zavaděč prostředků k vytažení souboru JSON ze svazku aplikací před jeho analýzou do objektu JavaScriptu.

poznámka: Bylo by relativně jednoduché nahradit tuto funkci metodou, která volá vzdálený server pro data místo nalezení statických dat uvnitř balíčku aplikací. Zbytek tohoto šablonového přístupu by nadále fungoval tak, jak je.

vložení dat do řetězce dokumentu

Nyní, když můžete získat data pro danou stránku, musíte je zkombinovat se samotnou šablonou dokumentu. Aktualizace getDocument() v ResourceLoaderJS odpovídá následujícímu:

getDocument(name, data) { data = data || {}; var docString = this.nativeResourceLoader .loadBundleResource(name); var rendered = Mustache.render(docString, data); return this.domParser.parseFromString(rendered, "application/xml");}

zde jste k metodě přidali další argument data a použili render na Mustache k převodu šablony a dat na dokončený dokument. Stejně jako dříve použijete DOMParser k převodu řetězce dokumentu na objekt DOM.

řešení adres URL obrázků

z důvodu jednoduchosti ukládají ukázková data obrázky jako názvy souborů v balíčku aplikací, které je třeba převést na adresy URL, než je budete moci zobrazit. Funkce nástroje k tomu jsou již v zavaděči prostředků, takže je stačí zavolat. Uděláte to současně s aktualizací počátečního načítání dokumentu, abyste mohli používat templating engine.

otevřít hlavní.js a aktualizace loadInitialDocument() tak, aby odpovídala následujícím:

function loadInitialDocument(resourceLoader) { var data = resourceLoader.getJSON("teamwork.json"); data = resourceLoader .convertNamesToURLs(data); data = resourceLoader .recursivelyConvertFieldsToURLs(data, "image"); data = _sharedImageResources(resourceLoader); return resourceLoader.getDocument("video.tvml", data);}

nejprve načtete data pomocí nové metody getJSON(). Poté pomocí obslužných funkcí provedete převod názvu obrázku na adresu URL. Tyto převádějí tři různé zdroje názvů obrázků:

  • každá hodnota v objektu images v datovém poli.
  • každá hodnota spojená s klíčem image kdekoli v datové struktuře JSON.
  • sada sdílených obrázků, které jsou užitečné pro všechny dokumenty ve wenderTV.

, který se stará o instalaci pod ním; jste připraveni použít tuto novou výkonnou funkci.

pomocí kníru.šablony JS

otevřete týmovou práci.json a podívejte se na data, která použijete k naplnění stránky videa. Existuje spousta dat, ale je to standardní objekt JSON a poměrně snadno pochopitelný. Měli byste si všimnout některých polí, jako jsou title, presenter a duration, které jste již pevně zakódovali do videa.tvml. Teď je vyměníš.

otevřít video.tvml a najděte značku názvu, která obsahuje Ray Wenderlich. Nahraďte název {{presenter}}, takže první část nyní vypadá takto:

<info> <header> <title>Presenter</title> </header> <text>{{presenter}}</text></info>

syntaxe pro knír.js je opravdu jednoduché; nahradí {{presenter}} hodnotou presenter v datovém objektu, který mu byl dodán.

Nyní, když to máte na kloub, můžete nahradit následující obsah příslušnými značkami šablon:

  • Teamwork{{title}}
  • 17m 54s{{duration}}
  • Inspiration{{category}}
  • 2015{{year}}
  • resource://nrresource://

stavět a spustit; neměli byste vidět žádný rozdíl, což je přesně to, co chcete. Stránka je nyní řízena daty, a ještě lépe, nic jste neporušili. Bonus! :]

stále existují některé části šablony, kterých jste se nedotkli: Skryté titulky, HD a značky. Používají některé mírně pokročilejší části kníru.JS templating engine.

sekce šablon

odstraňte tři značky v sekci značky a přidejte na jejich místo následující:

{{#tags}} <text>{{.}}</text>{{/tags}}

tato nová syntaxe definuje sekci Šablony. Podívejte se na týmovou práci.json a uvidíte, že tags je pole řetězců. knír.syntaxe js zde prochází polem, přičemž {{.}} vykresluje obsah aktuálního indexu.

nakonec musíte zvládnout dva Booleovské odznaky. Vyměňte odznaky cc a hd za následující:

{{#closed-captions}} <badge src="resource://cc" />{{/closed-captions}}{{#hd}} <badge src="resource://hd" />{{/hd}}

opět používáte sekce, ale tentokrát jsou strukturovány jako příkaz if. Pokud zadaná vlastnost existuje a má hodnotu true, vykreslete tuto sekci; jinak ji ignorujte.

Sestavte a spusťte znovu; podívejte se na nově vytvořenou stránku videa.

Chcete-li potvrdit, že vstřikování dat skutečně funguje, Otevřete main.js a změňte datový soubor načtený v loadInitialDocument() z týmové práce.json identitě.json. Sestavte a znovu spusťte, abyste viděli změnu dat.

nyní můžete vidět podrobnosti o Vickiho rozhovoru o identitě-sladké!

na

vyplnění šablony TVML

stránka videa stále vypadá trochu neplodně. Je čas zdvojnásobit přidání nějakého obsahu.

otevřít video.tvml a přidejte následující uvnitř <stack>, těsně pod existující <row>:

<description allowsZooming="true" moreLabel="more">{{description}}</description><text>{{language}}</text><row> <buttonLockup type="play"> <badge src="resource://button-play" /> <title>Play</title> </buttonLockup> <buttonLockup type="buy"> <text>.99</text> <title>Buy</title> </buttonLockup></row>

opět to představuje některé nové prvky TVML:

  • <description>: zobrazí větší množství textu, který se používá k popisu obsahu. Pokud je text pro oblast zobrazení příliš dlouhý, zobrazí se štítek s názvem definovaným atributem moreLabel.
  • &ltbuttonLockup>: uzamčení je třída prvku, který spojuje své děti dohromady jako jeden prvek. Uzamčení tlačítka může obsahovat text a odznak a zobrazí se jako tlačítko.

nezapomeňte, že všechny tyto prvky jsou obsaženy v <stack>, takže se objeví na sobě.

před kontrolou práce musíte do horního banneru přidat ještě jeden prvek. Ihned za uzavírací značku </stack> přidejte následující řádek:

<heroImg src="{{images.hero}}" />

a heroImg element je velký obrázek, který definuje obsah tohoto dokumentu. Objeví se uvnitř <banner> a tvOS jej používá k definování rozmazaného pozadí stránky.

sestavení a spuštění pro zobrazení dokončeného horního banneru:

začíná to vypadat opravdu skvěle – ale počkejte! Možná jste si všimli, že barva textu se změnila z černé na bílou. Jak se to stalo?

tvOS se rozhodl, že protože zadaný obrázek na pozadí je tmavší než určitá prahová hodnota, potřeboval zvýšit kontrast textu, takže změnil výchozí barvu textu.

Aktualizujte značku <productTemplate> tak, aby odpovídala následujícímu:

<productTemplate theme="light">

Sestavte a spusťte, abyste viděli rozdíl:

vizuální efekt na pozadí se změnil spolu s barvami písma v popředí. Atribut theme můžete změnit na dark, pokud chcete vynutit předchozí vzhled, pokud jej dáváte přednost.

Poznámka: Výchozí chování se změnilo od předchozí verze tvOS, takže možná budete muset explicitně definovat theme, abyste získali efekt, na který jste zvyklí. Také si prosím nezaměňujte toto chování s novým tmavým režimem zavedeným společností Apple v tvOS 10. To bude podrobněji popsáno později v knize.

přidání polic

zbytek productTemplate je tvořen „policemi“. Police je vodorovná část stránky s prvky obsahu posouvajícími se na obrazovce a mimo ni.

přidejte následující text pod uzavírací značku </banner> směrem ke spodní části videa.tvml:

<shelf> <header> <title>You might also like</title> </header> <section> {{#recommendations}} <lockup> <img src="{{image}}" width="402" height="226" /> <title>{{title}}</title> </lockup> {{/recommendations}} </section></shelf>

tato police zobrazuje sadu dalších videí, která si uživatel může užít, jak je definováno ve vlastnosti recommendations datového modelu. Každé doporučení má image a title, z nichž každé používáte ve výše uvedeném kódu.

v tomto segmentu kódu jsou zavedeny další dva prvky:

  • <section>: definuje soubor souvisejícího obsahu, který by měl být rozložen společně. Sekce může obsahovat název a více prvků uzamčení.
  • <lockup>: viděli jste <buttonLockup> dříve; lockup je obecnější typ uzamčení. Poskytuje rozvržení pro obrázek, název, odznak a popis.

Nyní přidejte další polici pod tu, kterou jste právě vytvořili:

<shelf> <header> <title>Production</title> </header> <section> {{#people}} <monogramLockup> <monogram firstName="{{firstname}}" lastName="{{lastname}}"/> <title>{{firstname}} {{lastname}}</title> <subtitle>{{role}}</subtitle> </monogramLockup> {{/people}} </section></shelf>

tato police zobrazuje seznam lidí spojených s výrobou; je uložena ve vlastnosti people v datovém modelu.

to představuje prvky a , které vám umožňují reprezentovat osobu, když avatar není k dispozici. Stejně jako ostatní uzamykací prvky, uzamčení monogramu jednoduše uzamkne jeho obsah dohromady.

monogram má atributy firstName a lastName, ze kterých generuje monogram (iniciály) a umístí jej do velkého kruhu.

Sestavte a spusťte, abyste viděli, jak se vaše police formují. Budete muset posunout dolů a odhalit spodní polici:

podívejte se na popis rozhovoru „identita“. Všimněte si, že se objevilo více štítků, protože v dostupném prostoru je příliš mnoho textu. Přejděte na štítek a uvidíte, že se můžete zaměřit na popis a stisknutím tlačítka Vybrat spusťte akci. Tato akce v současné době nic nedělá, ale nebylo by hezké, kdyby zobrazovala celý text?

čas pro další šablonu TVML.

zpracování přetečení textu

popisná šablona Upozornění poskytuje prostor pro rozšířenou oblast textu a tlačítek. Zní to ideální pro tento účel. Tuto šablonu a místo JavaScriptu použijete k připojení.

v projektu Xcode klepněte pravým tlačítkem myši na skupinu rozvržení a vyberte nový soubor…. Zvolte tvOS \ Other\Empty a pojmenujte soubor expandedDetailText.tvml.

Otevřete nový soubor a přidejte následující:

<?xml version="1.0" encoding="UTF-8" ?><document> <descriptiveAlertTemplate> <title>{{title}}</title> <description>{{text}}</description> <button action="dismiss"> <text>Dismiss</text> </button> </descriptiveAlertTemplate></document>

to by mělo být docela jednoduché pochopit. K dispozici je obvyklý prolog XML, značka a některé prvky, které jste použili dříve. Všimněte si, že značka tlačítka má atribut action; toto je uživatelem definovaný atribut, který není součástí specifikace TVML.

můžete definovat libovolné atributy, které chcete (za předpokladu, že nejsou v rozporu s existujícími atributy) a pak si je přečíst z aplikace JavaScript. Napíšete nějaký kód, abyste tuto akci dismiss zvládli jen trochu.

otevřít video.tvml a najděte značku . Aktualizujte prvek tak, aby odpovídal následujícímu:

<description allowsZooming="true" moreLabel="more" action="showOverflow" title="{{title}}">{{description}}</description>

přidali jste dva nové atributy: action a title. Oba tyto prvky použijete v obslužné rutině událostí k vytvoření rozšířeného detailního textového dokumentu.

zpracování událostí

Nyní, když jsou šablony dokumentů připraveny jít, můžete obrátit svou pozornost na JavaScript, který vše propojuje.

otevřít hlavní.JS a přidejte následující funkci:

function _handleEvent(event) { // 1: var sender = event.target; var action = sender.getAttribute("action"); // 2: switch(action) { case "showOverflow": // 3: var data = { text: sender.textContent, title: sender.getAttribute("title") }; // 4: var expandedText = resourceLoader .getDocument("expandedDetailText.tvml", data); expandedText.addEventListener("select", _handleEvent); navigationDocument.presentModal(expandedText); break; case "dismiss": // 5: navigationDocument.dismissModal(); break; }}

vezmeme to kousek po kousku:

  1. vlastnost target argumentu event představuje objekt DOM, který vypálil událost. getAttribute() objektu DOM vrátí hodnotu zadaného atributu. Zde jej používáte k nalezení hodnoty atributu action, který jste přidali výše.
  2. zapněte atribut action a vyvolejte příslušný kód.
  3. pokud je akce showOverflow, pak máte pole popisu s příliš velkým obsahem. Vytvořte objekt s údaji požadovanými v rozšířeném podrobném textovém dokumentu. Opět používáte getAttribute() spolu s textContent, který vrací obsah samotné značky.
  4. načtěte expandedDetailText.dokument tvml obvyklým způsobem přidejte posluchače událostí a pomocí presentModal() na NavigationDocument zobrazte nový dokument v horní části aktuálního dokumentu.

  1. pokud je akce nastavena na dismiss, použijte dismissModal() na NavigationDocument k provedení propuštění.

Nyní, když jste vytvořili tuto obslužnou rutinu události, musíte ji připojit k počátečnímu dokumentu. Přidejte následující řádek do App.onLaunch, hned po volání loadInitialDocument():

initialDoc.addEventListener("select", _handleEvent);

to registruje _handleEvent jako posluchač pro vybranou událost a používá bublající událost ke zpracování všech událostí spuštěných v dokumentu.

Sestavte a spusťte aplikaci, přejděte dolů na úplný popis a stiskněte tlačítko Vybrat. Uvidíte svou novou rozšířenou textovou stránku s podrobnostmi:

pomocí tlačítka odmítnout se můžete vrátit na obrazovku videa.

hodnocení diváků

v závěrečné části tohoto tutoriálu přidáte na stránku videa novou sekci Hodnocení a necháte uživatele vybrat hodnocení pomocí nové šablony.

otevřít video.tvml a přidejte následující novou polici pod výrobní polici:

<shelf> <header> <title>What other people thought</title> </header> <section> {{#ratings-reviews}} <ratingCard action="addRating"> {{#rw-ratings}} <title>{{out-of-five}} / 5</title> <ratingBadge value="{{badge-value}}"></ratingBadge> <description>Mean of {{count}} ratings.</description> {{/rw-ratings}} </ratingCard> {{#reviews}} <reviewCard> <title>{{title}}</title> <description>{{description}}</description> <text>{{name}} {{date}}</text> </reviewCard> {{/reviews}} {{/ratings-reviews}} </section></shelf>

nyní poznáte většinu prvků TVML, ale stále existuje několik nových:

  • <ratingCard>: zobrazí malou kartu vhodnou pro zobrazení hodnocení produktu.
  • <ratingBadge>: specializovaný odznak pro zobrazení hvězdiček. Atribut value by měl být hodnota mezi 0 a 1, která bude převedena na podíl pěti hvězdiček.
  • <reviewCard>: karta pro zobrazení uživatelských nebo kritických recenzí.

Všimněte si, že prvek má opět vlastní atribut action. Použijete to později k zobrazení stránky hodnocení.

Sestavte a spusťte, abyste viděli, jak vypadá nová police:

když uživatel vybere kartu hodnocení, chcete jim nechat vybrat hodnocení pro aktuální video. To je přesně to, pro co je šablona hodnocení TVML určena.

sbírání hodnocení

v Xcode klepněte pravým tlačítkem myši na skupinu rozvržení a vyberte nový soubor…. Zvolte tvOS \ Other\Empty a pojmenujte soubor videoRating.tvml.

Otevřete nový soubor a přidejte následující:

<?xml version="1.0" encoding="UTF-8" ?><document> <ratingTemplate> <title>{{title}}</title> <ratingBadge /> </ratingTemplate></document>

tento nový soubor používá , který jednoduše zobrazuje a shromažďuje hodnocení. Obsahuje <title> a <ratingBadge>, které jste již viděli.

šablona je připravena, stačí ji zobrazit. Otevřít hlavní.js a do příkazu switch přidejte následující case _handleEvent():

case "addRating": var ratingDoc = resourceLoader.getDocument("videoRating.tvml", {title: "Rate Video"}); navigationDocument.presentModal(ratingDoc); break;

těchto několik řádků načte nový dokument, který jste vytvořili, a poskytne název šablonovacímu modulu. To pak zobrazí dokument modálně.

sestavení a spuštění, přejděte na kartu hodnocení a stisknutím tlačítka Vybrat zobrazíte novou stránku hodnocení:

nyní je to jedno skvělé-a rozšiřitelné-rozhraní.

kam jít odtud?

finální projekt si můžete stáhnout z tohoto tutoriálu zde.

v tomto tutoriálu jste vytvořili skvěle vypadající TVML aplikaci a použili tři vestavěné šablony spolu s širokou škálou prvků specifických pro TVML. Integrovali jste také šablonovací modul JavaScript, který odděluje uživatelské rozhraní od dat. Přijetí skvělých vývojových technik hned od začátku je výhrou v každé knize.

můžete se podívat na dokumentaci společnosti Apple (apple.co/1PJuOAV) pro specifika o šablonách a prvcích obsažených v tomto tutoriálu.

pokud se vám líbilo to, co jste se naučili v tomto tutoriálu, proč se podívat na kompletní knihu tvOS Apprentice, která je k dispozici v našem obchodě?

zde je ochutnávka toho, co je v knize:

Oddíl I: Architektura

tato část je navržena tak, aby vám poskytla ptačí pohled na to, jak tvOS funguje, a pomůže vám rozhodnout, co si přečíst dále.

Oddíl II: TVML aplikace

tato část se zabývá základy pro vytvoření aplikace pomocí přístupu TVML. Od základů Hello World přes příklad skutečného světa, na konci této části budete vědět vše, co potřebujete k vytvoření klientských / serverových aplikací pro Apple TV.

Část III: tradiční aplikace

tato část se zabývá základy pro vytváření aplikací pomocí tradičního přístupu. Dozvíte se nové knihovny vytvořené pro Apple TV a jak lze portované knihovny z iOS použít.

oddíl IV: pokročilé rámce

tato část pokrývá některé z pokročilejších rámců, které budete potřebovat pro mnoho případů použití televizní aplikace. Ať už jste zvolili přístup TVML nebo tradiční přístup, tyto rámce budou důležité pochopit, aby vaše aplikace vynikla.

sekce v: Design

tato část zahrnuje koncepty designu důležité pro tvOS. Aby se vaše aplikace mohla odlišit od ostatních, musíte tyto koncepty designu dobře porozumět.

Bonusová Kapitola

a to není vše-kromě výše uvedeného máme pro vás bonusovou kapitolu, která vám poskytne rychlokurz v JavaScriptu!

na konci této knihy budete mít skvělé praktické zkušenosti s budováním vzrušujících, dobře vypadajících aplikací pro Apple TV!

a pomoci sladit dohodu, digitální vydání knihy je v prodeji za $ 49.99! Ale nečekejte – tato prodejní cena je k dispozici pouze po omezenou dobu.

když už mluvíme o sladkých nabídkách, nezapomeňte se podívat na skvělé ceny, které letos rozdáváme s iOS 11 Launch Party, včetně více než $9,000 v dárcích!

Chcete-li vstoupit, jednoduše retweet tento příspěvek pomocí # ios11launchparty hashtag pomocí tlačítka níže:

Tweet

doufáme, že se vám tato aktualizace bude líbit a zůstaňte naladěni na další vydání a aktualizace knih!

raywenderlich.com týdenní

raywenderlich.com newsletter je nejjednodušší způsob, jak zůstat up-to-date na vše, co potřebujete vědět jako mobilní vývojář.

Získejte týdenní přehled našich výukových programů a kurzů a získejte bezplatný podrobný e-mailový kurz jako bonus!

Průměrné hodnocení

5/5

Přidat hodnocení pro tento obsah

přihlaste se pro přidání hodnocení

1 hodnocení

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna.