in deze tutorial leert u hoe u de overvloed aan TVML-sjablonen kunt gebruiken die Apple heeft geleverd om verbluffende interfaces te maken. U zult deze sjablonen gebruiken om een uitgebreid scherm voor RWDevCon 2015-video ‘ s te bouwen, dat een breed scala aan informatie over de video zal bevatten en deze op een aantrekkelijke en herkenbare manier weer te geven.

aan de slag

u kunt het starter-project voor deze tutorial hier downloaden.

de voorbeeldapp voor deze tutorial is wenderTV; Hiermee kunt u raywenderlich bekijken en bekijken.com-videomateriaal op uw Apple TV, zodat u vanuit het comfort van uw bank kunt genieten van een enorme hoeveelheid kennis en slechte grappen. Op dit moment is wenderTV vrij leeg.

wenderTV bevat veel bronnen die u tijdens deze tutorial zult gebruiken; we hebben ook een deel van de code gereorganiseerd om het gemakkelijker te begrijpen.

bouw en voer het wenderTV starter project uit vanuit Xcode; u zult merken dat het scherm volledig leeg is. Dit komt omdat er nog geen TVML documenten in wenderTV staan. Voordat u uw aandacht kunt richten op het maken van een aantal TVML-documenten, heb je een beetje huishouden te doen.

opmerking: hoewel u Xcode kunt gebruiken om alle code te schrijven die u nodig hebt voor een op TVML gebaseerde app, kan het een nogal pijnlijke ervaring zijn. Xcode is goed voor het bewerken van Swift of Objective-C, maar heeft alleen rudimentaire ondersteuning voor XML en JavaScript. Het is zeker de moeite waard om Xcode te gebruiken wanneer dat nodig is, en vervolgens over te schakelen naar een meer capabele editor zoals Sublime Text, Atom, Visual Studio Code of MacVim om te werken met TVML-documenten en JavaScript-bestanden.

laden van Scripts

het project voor wenderTV heeft al ResourceLoaderJS opgesplitst in zijn eigen bestand, dus je moet ontdekken hoe je het importeert in main.js.

TVJS biedt de evaluateScripts() functie die een array van URL ‘ s van JavaScript-bestanden en een callback neemt. De functie leest elke URL op zijn beurt, probeert deze te ontleden en voegt alle opgenomen functies en objectdefinities toe aan het globale object van de context. Tenslotte roept het de meegeleverde callback aan met een Booleaanse aanduiding voor succes of mislukking.

de AppDelegate bevat code die de JavaScript-toepassing voorziet van een lijst met URL ‘ s van de vereiste JavaScript-bestanden als onderdeel van het object opstartopties. Open de hoofdleiding.js en voeg de volgende code toe aan de functie 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."); } });

het nemen van deze nieuwe functie lichaam stap-voor-stap:

  1. het options object wordt voorbereid in Swift en vervolgens doorgegeven aan de JavaScript-app in de app delegate, terwijl de initialJSDependencies eigenschap een reeks URL ‘ s is voor de verschillende JavaScript-bestanden die moeten worden geladen wanneer de app start. evaluateScript() voert deze actie uit en roept vervolgens de callback aan om aan te geven of deze succesvol was.
  2. als de JavaScript-bronnen succesvol zijn geëvalueerd, maak dan een ResourceLoaderJS – object aan voordat u het gebruikt om het initiële document te laden en vervolgens dit TVML-document op de navigatiestack te duwen. loadInitialDocument() is momenteel een stub methode die u in een bit zult vullen.
  3. als de JavaScript-bestanden niet konden worden geladen, kan de app niets meer doen. Daarom gebruikt het _createAlert(), gedefinieerd aan de onderkant van main.js om een waarschuwingsdocument te bouwen en te presenteren en vervolgens een fout te gooien.

de volgende tekst toevoegen aan loadInitialDocument():

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

dit gebruikt de bronlader om het TVML-bestand uit de bronbundel van de app te halen en terug te sturen als een DOM-object.

vervolgens moet u het bestand aanmaken dat uw app probeert te laden: video.tvml.

Ga naar Xcode en klik met de rechtermuisknop op de groep lay-outs in de projectnavigator. Nieuw bestand selecteren…:

Navigeer naar tvOS \ andere \ leeg en druk op Volgende. Noem het bestand video.tvml en zorg ervoor dat het wenderTV-doel wordt gecontroleerd:

Open het nieuwe bestand in uw favoriete XML-editor (of Xcode, als u erop staat) en voeg de volgende regels:

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

dit definieert een eenvoudig TVML-document met een nieuw type sjabloon: productTemplate.

bouw en voer de app uit om te zien hoe de dingen er tot nu toe uitzien:

Hmm. Het scherm is nog leeg. Hoewel u het bestand hebt gemaakt en de sjabloon hebt verstrekt, hebt u geen inhoud verstrekt. Je zult dat snel oplossen, maar eerst moet je een beetje achtergrond op TVML-sjablonen dekken.

TVML-sjablonen

een TVML-document is slechts een XML-document (Extensible Markup Language) met een specifiek schema dat door Apple is gedefinieerd. Als je in het verleden HTML hebt gebruikt, zal XML er bekend uitzien. HTML is niet echt XML (ondanks enkele mislukte pogingen met XHTML), maar de syntaxis en structuur is vrij vergelijkbaar.

aangezien TVML-documenten XML zijn, moeten ze beginnen met de volgende regel:

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

dit staat bekend als de XML proloog; het merkt op dat dit bestand een XML-document is en welke tekenset het gebruikt.

het TVML-document heeft een root-element , dat een enkel element is op het hoogste niveau van het document en de ouder (of voorouder) van alle andere elementen. Het – element heeft één directe afstammeling, wat een van de 18 mogelijke sjabloontags kan zijn.

een sjabloon-tag specificeert de hoogste lay-out die tvOS moet gebruiken om het document op het scherm weer te geven. Template tags geven niet alleen het uiterlijk op het scherm aan, maar geven ook semantische informatie over de inhoud die ze bevatten. Sjablonen kunnen er vergelijkbaar uitzien, maar hebben totaal andere doeleinden.

TVML-sjablonen kunnen worden onderverdeeld in de volgende categorieën:

  • Informational: toont een kleine hoeveelheid informatie aan de gebruiker, en optioneel vraagt invoer van de gebruiker. Het is niet ontworpen voor browseerbare inhoud. Met inbegrip van alertTemplate en loadingTemplate.
  • gegevensinvoer: de gebruikerservaring van het invoeren van gegevens op tv ‘ s is vrij verschrikkelijk, en Apple TV is niet anders. Echter, er zijn een paar sjablonen voor het aanvragen van gegevens van de gebruiker, met inbegrip van searchTemplate en ratingTemplate.
  • Single Item: Geeft informatie of inhoud weer over een enkel product of item, zoals een film of aflevering in een TV-serie. Inclusief productTemplate, eenuptemplate, compilatietemplate en showcaseTemplate.
  • collecties: toont een verzameling producten, zoals een TV-serie, een genre van films of tracks op een album. Inclusief stackTemplate, listTemplate en productBundle.
  • Overige: omvat menuBarTemplate, waarin een reeks andere sjablonen is ondergebracht, en divTemplate, dat een volledig schone lei is waarop u tekent.
Noot: In plaats van hier in detail te gaan over elke sjabloon, de Apple referentie is een geweldige bron voor het krijgen van de low-down op de verschillende sjablonen, hun mogelijkheden en lay-outs: apple.co/1PJuOAV.

het Productsjabloon

het eerste document dat u maakt gebruikt , dat is ontworpen om alle informatie met betrekking tot een specifiek product weer te geven — in dit geval een video.

video openen.tvml en voeg de volgende code toe tussen de tags:

<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>

dit codefragment introduceert een heleboel nieuwe element types. Ze één voor één nemen:

  • <banner>: toont inhoud boven aan een pagina.
  • <infoList>: toont een lijst met elementen, gerangschikt in een verticale lijst.
  • <info>: fungeert als een container voor deze s de inhoud die moet worden weergegeven als een item in een of een .
  • <header>: dient als een beschrijving van de inhoud van de sectie waarin het zich bevindt.
  • <title>: bevat de tekst van een korte titel.
  • <text>: toont tekst.

bouw en voer de app uit om te zien hoe uw nieuwe TVML eruit ziet:

deze pagina vertegenwoordigt een video, maar het ontbreekt momenteel een titel. Tijd om dat te veranderen.

voeg het volgende toe in de <banner> tags, net na de afsluitende tag:

<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>

deze sectie introduceert meer TVML-elementen:

  • <stack>: stapels leggen hun inhoud verticaal neer op het scherm op een wijze die vergelijkbaar is met . Er is een breder scala aan tags die in een stapel kunnen zitten.
  • <row&gt: een rij is als een stapel, maar met een horizontale oriëntatie in plaats van verticaal.
  • <badge&gt: Badges geven een kleine inline afbeelding weer. De URL wordt geleverd door het src attribuut.

merk op dat de URL van de twee badgeafbeeldingen begint met resource://. Dit is een speciaal URL-schema dat verwijst naar afbeeldingen die binnen tvOS zelf bestaan. Deze beelden omvatten gemeenschappelijke actiepictogrammen, zoals “spelen”, het beoordelen van beelden voor verschillende landen en video-informatie zoals HD.

opmerking: voor een volledige lijst van de bronafbeeldingen die beschikbaar zijn binnen tvOS, kijk op Apple ‘ s documentatie op apple.co/1T930o9.

bouwen en opnieuw uitvoeren om te zien hoe de pagina vorm geeft:

het begint er goed uit te zien, maar er is nog een lange weg te gaan. Voordat u doorgaat met de sjablooncodering, moet u eerst de scheiding van de gegevens en de weergave overwegen.

Gegevensinjectie

zoals uw videodocument momenteel staat, zijn alle gegevens hardgecodeerd. Om informatie over een andere video weer te geven, moet je een hele nieuwe pagina maken. Als u de videopagina opnieuw wilt formatteren nadat u alle pagina ‘ s hebt gemaakt, moet u ze allemaal opnieuw bekijken en bewerken.

een veel betere aanpak is om een templating engine te gebruiken, waarbij u de videopagina als sjabloon bouwt en specificeert waar de gegevens moeten worden geïnjecteerd. Tijdens runtime, de template engine neemt de pagina sjabloon samen met de gegevens en genereert de TVML-pagina voor tvOS weer te geven.

opmerking: het woord “sjabloon” wordt nu gebruikt voor twee verschillende doeleinden: TVML-sjablonen zijn de door tvOS aangeleverde lay-outs die uw documenten op het scherm weergeven, terwijl een templating-engine sjabloondocumenten gebruikt in combinatie met gegevens om complete TVML-documenten te genereren. Maak je geen zorgen te veel over het onderscheid; het zal veel duidelijker zijn als je ze beide hebt gebruikt.

snor.js is een populaire eenvoudige templating engine voor JavaScript. Misschien herkent u de templating syntaxis die is gebaseerd op krullende-bretels:

{{property-name}}

de snor.js library is al onderdeel van wenderTV, maar je moet de mechanismen bouwen om het te gebruiken. Dit presenteert u met verschillende taken te volbrengen:

  • de gegevens worden opgeslagen als JSON-bestanden in de app-bundel. De JavaScript-app heeft de mogelijkheid nodig om ze aan te vragen.
  • wanneer een document wordt geladen, vereist het nu gegevens, en dit moet worden gecombineerd met de documentstring met behulp van snor.js.
  • afbeeldingen die aanwezig zijn in de app-bundel moeten hun volledige URL vervangen.
  • het videodocument moet worden bijgewerkt om er een template van te maken.

u zult elk van deze in volgorde behandelen.

opmerking: vanaf tvOS 11 ondersteunt TVML het concept van prototypes in TVML die gebruikmaken van gegevensbinding om gegevenselementen aan de TVML te koppelen. Dit vermindert redundantie van de code en verbetert de prestaties bij het pagineren van grote inhoud sets, zoals een enorme lijst van YouTube-video ‘ s in een grid view-formaat.

echter, prototyping is alleen beschikbaar op het <section> niveau, terwijl u het gebruikt in deze tutorial voor veel meer, zoals in de <header> sectie van uw TVML. Je blijft een snor gebruiken.js als een templating engine voor dit gedeelte van het boek, maar als je uiteindelijk te behandelen grote inhoud sets in uw tvOS apps, lees op prototyping en Data binding op apple.co/2utDXXm.

lezen van JSON uit de app-bundel

Open ResourceLoader.js en voeg de volgende methode toe aan ResourceLoaderJS:

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

deze functie maakt gebruik van de native resource loader om het JSON-bestand uit de app-bundel te trekken voordat het wordt ontleed in een JavaScript-object.

Opmerking: Het zou relatief eenvoudig zijn om deze functionaliteit te vervangen door een methode die een externe server aanroept voor gegevens in plaats van statische gegevens in de app-bundel te vinden. De rest van deze templating aanpak zou blijven werken zoals het nu is.

gegevens injecteren in de Documentstring

nu u de gegevens voor een bepaalde pagina kunt verkrijgen, moet u deze combineren met de documentsjabloon zelf. Update getDocument() in ResourceLoaderJS om het volgende overeen te komen:

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

hier hebt u een extra data argument toegevoegd aan de methode en render gebruikt op Mustache om de sjabloon en gegevens naar een voltooid document te converteren. Zoals voorheen gebruikt u een DOMParser om de documentstring naar een DOM-object te converteren.

oplossen van Image-URL ‘s

omwille van de eenvoud slaat uw voorbeeldgegevens afbeeldingen op als de namen van bestanden in de app-bundel, die moeten worden geconverteerd naar url’ s voordat u ze kunt weergeven. De utility functies om dit te doen zijn al in de resource loader, dus je hoeft ze alleen maar te bellen. U doet dit op hetzelfde moment als u het eerste document laden bijwerkt om de templating engine te gebruiken.

open main.js en update loadInitialDocument() om aan het volgende te voldoen:

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);}

eerst laadt u de gegevens met behulp van de nieuwe getJSON() methode. Vervolgens gebruik je de utility functies om de afbeelding naam-naar-URL conversie uit te voeren. Deze converteren drie verschillende afbeeldingsnaam bronnen:

  • elke waarde in het images object op de data array.
  • elke waarde geassocieerd met een sleutel van image ergens binnen de JSON-gegevensstructuur.
  • een set gedeelde afbeeldingen die nuttig zijn voor alle documenten in wenderTV.

die zorgt voor het sanitair eronder; u bent klaar om deze krachtige nieuwe functionaliteit te gebruiken.

met de snor.js Templates

open teamwork.json en neem een kijkje op de gegevens die u zult gebruiken om de video pagina bevolken. Er zijn heel veel gegevens, maar het is een standaard JSON-object en vrij gemakkelijk te begrijpen. U dient een aantal velden te herkennen, zoals title, presenter en duration die u al in video hebt gecodeerd.tvml. Je gaat deze nu omruilen.

video openen.tvml en vind de titel tag die Ray Wenderlich bevat. Vervang de naam door {{presenter}}, zodat de eerste sectie er nu zo uitziet:

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

de syntaxis voor snor.js is heel eenvoudig; het zal {{presenter}} vervangen door de waarde presenter in het gegevensobject dat het ontvangt.

Nu u dat onder de knie hebt, kunt u de volgende inhoud vervangen door de respectievelijke sjabloontags:

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

bouwen en draaien; je moet geen verschil zien, dat is precies wat je wilt. De pagina is nu data-driven, en nog beter, je hebt niets gebroken. Bonus! :]

er zijn nog enkele delen van het sjabloon die u niet hebt aangeraakt: closed-captions, HD en tags. Deze gebruiken een aantal iets meer geavanceerde delen van de snor.js templating Motor.

sjabloon secties

verwijder de drie tags in de Tags sectie en voeg het volgende in hun plaats:

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

deze nieuwe syntaxis definieert een sjabloongedeelte. Kijk naar teamwork.json en je zult zien dat tags een array van strings is. De Snor.js syntaxis loopt hier door de array, waarbij {{.}} de inhoud van de huidige index weergeeft.

tenslotte moet u de twee Booleaanse badges afhandelen. Vervang de cc-en HD-badges door de volgende:

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

nogmaals gebruik je secties, maar deze keer zijn ze gestructureerd als een if statement. Als de opgegeven eigenschap bestaat en een true waarde heeft, render dan deze sectie; anders, negeer het.

Build and run again; check out your newly templated video page.

om te bevestigen dat de data-injectie daadwerkelijk werkt, open main.js en wijzig het in loadInitialDocument() geladen gegevensbestand van teamwork.JSON aan identiteit.json. Bouw en voer opnieuw uit om de gegevens te zien veranderen.

je kunt nu details van Vicki ‘ s talk zien op identity-sweet!

op

het invullen van de Tvml-sjabloon

de videopagina ziet er nog steeds een beetje kaal uit. Het is tijd om double-down op het toevoegen van wat inhoud.

video openen.tvml en voeg het volgende toe in de <stack>, net onder de bestaande <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>

nogmaals, dit introduceert een aantal nieuwe TVML-elementen:

  • <description>: toont een grotere hoeveelheid tekst die wordt gebruikt om inhoud te beschrijven. Als de tekst te lang is voor het weergavegebied, wordt een label weergegeven met een titel gedefinieerd door het moreLabel attribuut.
  • &ltbuttonLockup>: een lockup is een klasse van elementen die de kinderen samenbrengt als een enkel element. Een knop lockup kan tekst en een badge bevatten en zal verschijnen als een knop.

onthoud dat deze elementen allemaal in een <stack> zitten, zodat ze bovenop elkaar verschijnen.

voordat u uw werk controleert, moet u nog een element toevoegen aan de bovenste banner. Voeg de volgende regel toe direct na de </stack> sluittag:

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

een heroImg element is een grote afbeelding die de inhoud van dit document definieert. Het verschijnt in de <banner> en tvOS gebruikt het om de onscherpe achtergrond van pagina ‘ s te definiëren.

bouwen en uitvoeren om de voltooide top banner te zien:

het begint er echt cool uit te zien-maar wacht! Je hebt nu misschien gemerkt dat de tekstkleur is veranderd van zwart naar Wit. Hoe is dat gebeurd?

tvOS heeft besloten dat omdat de door u opgegeven achtergrondafbeelding donkerder is dan een bepaalde drempel, het nodig was om het contrast van uw tekst te vergroten, zodat het de standaardkleur van de tekst veranderde.

werk de <productTemplate> tag bij om overeen te komen met het volgende::

<productTemplate theme="light">

bouw en ren om het verschil te zien:

het visuele effect op de achtergrond is veranderd samen met de voorgrond lettertype kleuren. U kunt het theme attribuut veranderen in dark als u de vorige look wilt forceren als u dat wilt.

Noot: Het standaard gedrag is veranderd sinds de vorige versie van tvOS, dus het kan nodig zijn om expliciet theme te definiëren om het effect te krijgen waaraan je gewend bent. Ook, gelieve niet krijgen dit gedrag verward met de nieuwe donkere modus geïntroduceerd door Apple in tvOS 10. Dat zal later in het boek meer in detail worden behandeld.

legplanken

toevoegen de rest van de productTemplate bestaat uit”legplanken”. Een plank is een horizontaal gedeelte van de pagina met inhoudselementen die op en van het scherm scrollen.

voeg het volgende toe onder de afsluitende </banner> tag, aan de onderkant van de video.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>

deze shelf toont een reeks andere video ‘ s die de gebruiker kan gebruiken zoals gedefinieerd in de recommendations eigenschap van het datamodel. Elke aanbeveling heeft een image en een title, die u in de bovenstaande code gebruikt.

er zijn twee andere elementen geïntroduceerd in dit codesegment:

  • <section>: definieert een set van gerelateerde inhoud die allemaal samen moeten worden opgemaakt. Een sectie kan een titel en meerdere lockup elementen bevatten.
  • <lockup>: u zag <buttonLockup> eerder; lockup is een meer algemeen type lockup. Het biedt lay-out voor een afbeelding, een titel, een badge en een beschrijving.

Voeg nu nog een plank toe onder de plank die u zojuist hebt aangemaakt:

<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>

deze shelf toont een lijst van mensen die geassocieerd zijn met de productie; het is opgeslagen in de people eigenschap in het datamodel.

dit introduceert de elementen en , waarmee u een persoon kunt vertegenwoordigen wanneer een avatar niet beschikbaar is. Net als de andere lockup elementen, een monogram lockup gewoon vergrendelt de inhoud samen.

een monogram heeft firstName en lastName attributen, waaruit het een monogram (initialen) genereert en in een grote cirkel plaatst.

bouw en voer uit om te zien hoe uw planken vorm krijgen. Je moet naar beneden scrollen om de onderste plank te onthullen:

neem een kijkje op de beschrijving van de “identiteit” talk. Merk op dat het meer label is verschenen, omdat er te veel tekst is om weer te geven in de beschikbare ruimte. Navigeer naar het label en je ziet dat je je kunt concentreren op de beschrijving en druk op Selecteren Om een actie te activeren. Deze actie doet momenteel niets, maar zou het niet leuk zijn als het de volledige tekst zou weergeven?

tijd voor een andere TVML-sjabloon.

Handling Text Overflow

de beschrijvende alert template biedt ruimte voor een uitgebreid gebied van tekst en knoppen. Het klinkt ideaal voor dit doel. U zult deze sjabloon en een plek van JavaScript gebruiken om het te bedraden.

in het Xcode project, klik met de rechtermuisknop op de groep lay-outs en selecteer Nieuw bestand…. Kies tvOS \ Other \ Empty en noem het bestand expandedDetailText.tvml.

Open het nieuwe bestand en voeg het volgende toe:

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

dit zou heel eenvoudig te begrijpen moeten zijn. Er is de gebruikelijke XML proloog, de tag en een aantal elementen die je eerder hebt gebruikt. Merk op dat de button tag een action attribuut heeft; dit is een door de gebruiker gedefinieerd attribuut dat geen deel uitmaakt van de TVML-specificatie.

u kunt alle attributen definiëren die u wilt (op voorwaarde dat ze niet botsen met bestaande attributen) en ze vervolgens lezen vanuit uw JavaScript-app. U zult een aantal code schrijven om deze dismiss actie in slechts een beetje af te handelen.

video openen.tvml en zoek de tag. Het element bijwerken om aan het volgende te voldoen:

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

u hebt twee nieuwe attributen toegevoegd: action en title. U zult beide gebruiken in de event handler om het uitgebreide detail tekstdocument te maken.

gebeurtenisafhandeling

nu de documentsjablonen klaar zijn, kunt u uw aandacht richten op het JavaScript dat alles bedrading.

open main.js en voeg de volgende functie toe:

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; }}

dit stukje voor stukje nemen:

  1. de eigenschap target van het argument event vertegenwoordigt het DOM-object dat de gebeurtenis heeft afgevuurd. getAttribute() van een DOM-object retourneert de waarde voor het opgegeven attribuut. Hier gebruikt u het om de waarde van het action attribuut te vinden dat u hierboven hebt toegevoegd.
  2. schakel het action attribuut in om de juiste code aan te roepen.
  3. als de actie showOverflow is, dan heeft u een beschrijvingsveld met te veel inhoud. Construeer een object met de gegevens die vereist zijn door het uitgebreide detailtekstdocument. Nogmaals gebruik je getAttribute() samen met textContent, die de inhoud van de tag zelf retourneert.
  4. Laad de uitgevouwen detailtekst.tvml-document voeg op de gebruikelijke manier een gebeurtenisluisteraar toe en gebruik presentModal() op NavigationDocument om het nieuwe document boven het huidige document weer te geven.
  1. als de actie is ingesteld op dismiss, gebruik dan dismissModal() op NavigationDocument om het ontslag uit te voeren.

Nu u deze gebeurtenishandler hebt aangemaakt, moet u deze overzetten naar het oorspronkelijke document. Voeg de volgende regel toe aan App.onLaunch, net na het aanroepen loadInitialDocument():

initialDoc.addEventListener("select", _handleEvent);

dit registreert _handleEvent als een luisteraar voor de select event, en gebruikt event bubbling om alle gebeurtenissen die binnen het document worden geactiveerd af te handelen.

bouw en voer de app uit, navigeer naar de volledige beschrijving en druk op de knop Selecteren. U zult uw nieuwe uitgebreide detailtekstpagina zien:

u kunt de knop ontslaan gebruiken om terug te keren naar het videoscherm.

Viewer Ratings

in het laatste deel van deze handleiding voegt u een nieuwe ratings sectie toe aan de video pagina en laat de gebruiker een waardering selecteren met behulp van een nieuwe sjabloon.

video openen.tvml en voeg de volgende nieuwe plank onder de productie plank:

<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>

Nu zult u de meeste TVML-elementen herkennen, maar er zijn nog een paar nieuwe:

  • <ratingCard>: toont een kleine kaart die geschikt is voor het tonen van de ratings van een product.
  • <ratingBadge>: een speciale badge voor het tonen van een sterrenclassificatie. Het value attribuut moet een waarde tussen 0 en 1 zijn, die zal worden geconverteerd naar een verhouding van vijf sterren.
  • <reviewCard>: een kaart voor het weergeven van gebruiker of criticus beoordelingen.

merk op dat het element opnieuw het aangepaste action attribuut heeft. U zult dit later gebruiken om de beoordelingspagina weer te geven.

bouwen en uitvoeren om te zien hoe de nieuwe plank eruit ziet:

wanneer de gebruiker de rating card selecteert, wilt u hen een rating laten kiezen voor de huidige video. Dit is precies waar de ratings TVML template voor is.

verzamelen van waarderingen

in Xcode, klik met de rechtermuisknop op de groep lay-outs en selecteer Nieuw bestand…. Kies tvOS \ Other \ Empty en noem het bestand videoRating.tvml.

Open het nieuwe bestand en voeg het volgende toe:

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

dit nieuwe bestand gebruikt de die gewoon beoordelingen weergeeft en verzamelt. Het bevat een <title> en een <ratingBadge>, beide heb je al gezien.

het sjabloon is gereed; u hoeft het alleen maar weer te geven. Open de hoofdleiding.js en voeg het volgende case toe aan de verklaring switch in _handleEvent():

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

deze paar regels laden het nieuwe document dat u hebt gemaakt en geven de titel aan de templating engine. Vervolgens wordt het document modaal weergegeven.

bouwen en uitvoeren, navigeer naar de waarderingskaart en druk op Selecteren om de nieuwe waarderingspagina te zien:

nu dat is een swell-looking – en uitbreidbaar-interface.

waar moet ik nu naartoe?

u kunt het uiteindelijke project hier downloaden.

In deze handleiding hebt u een prachtige TVML-app gemaakt en drie van de ingebouwde sjablonen gebruikt samen met een breed scala aan TVML-specifieke elementen. Je hebt ook een JavaScript templating engine geà ntegreerd om de gebruikersinterface van de gegevens te scheiden. Het aannemen van grote ontwikkelingstechnieken vanaf het begin is een overwinning in ieders boek.

u kunt de documentatie van Apple bekijken (apple.co/1PJuOAV) voor meer informatie over de sjablonen en elementen die in deze tutorial worden behandeld.

als u genoten heeft van wat u geleerd heeft in deze tutorial, waarom bekijkt u dan niet het volledige Leerlingenboek tvOS, dat verkrijgbaar is in onze winkel?

hier is een voorproefje van wat er in het boek staat:

Sectie I: architectuur

deze sectie is ontworpen om u een vogelperspectief te geven van hoe tvOS werkt en u te helpen beslissen wat u hierna wilt lezen.

Sectie II: TVML-Apps

deze sectie behandelt de basisprincipes voor het maken van een app via de TVML-aanpak. Vanaf de basisprincipes van Hello World tot een voorbeeld uit de echte wereld, aan het einde van deze sectie Weet je alles wat je nodig hebt om client / server-apps voor Apple TV te maken.

sectie III: traditionele Apps

deze sectie behandelt de basisprincipes voor het maken van apps via de traditionele aanpak. U leert de nieuwe bibliotheken die zijn gemaakt voor Apple TV en hoe de geporteerde bibliotheken van iOS kunnen worden gebruikt.

sectie IV: geavanceerde kaders

deze sectie behandelt een aantal van de meer geavanceerde frameworks die u nodig hebt voor veel TV app use cases. Of u nu de TVML-aanpak of de traditionele aanpak, deze frameworks zal belangrijk zijn om te begrijpen om uw app opvallen.

sectie V: ontwerp

deze sectie behandelt ontwerpconcepten die belangrijk zijn voor tvOS. Om je app te onderscheiden van de rest, moet je deze ontwerpconcepten goed begrijpen.

bonushoofdstuk

en dat is niet alles – bovenop het bovenstaande hebben we een bonushoofdstuk voor u dat u een spoedcursus JavaScript geeft!

aan het einde van dit boek, heb je een aantal geweldige hands-on ervaring met het bouwen van spannende, goed uitziende apps voor de Apple TV!

en om de deal te vergemakkelijken, is de digitale editie van het boek te koop voor $49,99! Maar wacht niet-deze verkoopprijs is alleen beschikbaar voor een beperkte tijd.

over zoete deals gesproken, bekijk zeker de geweldige prijzen die we dit jaar weggeven met de iOS 11 Launch Party, inclusief meer dan $ 9.000 in giveaways!

om in te voeren, retweet u dit bericht met behulp van de # ios11launchparty hashtag met behulp van de onderstaande knop:

Tweet

we hopen dat u geniet van deze update, en blijf op de hoogte voor meer boek releases en updates!

raywenderlich.com wekelijks

de raywenderlich.com nieuwsbrief is de makkelijkste manier om op de hoogte te blijven van alles wat u als mobiele ontwikkelaar moet weten.

ontvang een wekelijks overzicht van onze tutorials en cursussen, en ontvang een gratis uitgebreide e-mail cursus als bonus!

gemiddelde waardering

5/5

voeg een waardering toe voor deze inhoud

Meld u aan om een waardering toe te voegen

1 waardering

Geef een antwoord

Het e-mailadres wordt niet gepubliceerd.