i den här handledningen lär du dig hur du använder den mängd TVML-mallar som Apple har tillhandahållit för att göra några fantastiska gränssnitt. Du använder dessa mallar för att bygga en omfattande skärm för rwdevcon 2015-videor, som kommer att innehålla ett brett utbud av information om videon och visa den på ett tilltalande och igenkännligt sätt.

komma igång

du kan ladda ner startprojektet för denna handledning här.

exempelappen för denna handledning är wenderTV; det låter dig bläddra och titta på raywenderlich.com – videoinnehåll på din Apple TV, så att du kan njuta av en stor mängd kunskap – och dåliga skämt – från soffan. Just nu är wenderTV ganska tomt.

wenderTV innehåller många resurser du kommer att använda under denna handledning; vi har också omorganiserat en del av koden för att göra det lättare att förstå.

Bygg och kör wenderTV starter project från Xcode; du kommer att märka att skärmen är helt tom. Detta beror på att det inte finns några TVML-dokument i wenderTV än. Innan du kan rikta din uppmärksamhet på att skapa några TVML-dokument har du lite hushållning att göra.

Obs: även om du kan använda Xcode för att skriva all kod du behöver för en TVML-baserad app, kan det vara en ganska smärtsam upplevelse. Xcode är bra för redigering av Swift eller Objective-C, men har bara rudimentärt stöd för XML och JavaScript. Det är definitivt värt att använda Xcode när du behöver, och sedan byta till en mer kapabel redaktör som Sublime Text, Atom, Visual Studio Code eller MacVim för att arbeta med TVML-dokument och JavaScript-filer.

laddar skript

projektet för wenderTV har redan ResourceLoaderJS delat ut i sin egen fil, så du måste upptäcka hur du importerar den till main.js.

TVJS tillhandahåller funktionen evaluateScripts() som tar en rad webbadresser till JavaScript-filer och en återuppringning. Funktionen läser varje URL i tur och ordning, försöker tolka den och lägger till alla innehöll funktioner och objektdefinitioner till kontextets globala objekt. Slutligen åberopar den medföljande återuppringning med en boolesk betecknar framgång eller misslyckande.

AppDelegate innehåller kod som ger JavaScript-applikationen en lista med webbadresser till de nödvändiga JavaScript-filerna som en del av objektet startalternativ. Öppna huvud.js och Lägg till följande kod till funktionen 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."); } });

med denna nya funktion kropp steg-för-steg:

  1. objektet options förbereds i Swift och skickas sedan till JavaScript-appen i appdelegaten, medan egenskapen initialJSDependencies är en rad webbadresser för de olika JavaScript-filerna som måste laddas när appen startar. evaluateScript() utför den här åtgärden och anropar sedan återuppringningen som anger om den lyckades.
  2. om JavaScript-källorna utvärderas framgångsrikt skapar du ett ResourceLoaderJS – objekt innan du använder det för att ladda det ursprungliga dokumentet och sedan trycka på det här TVML-dokumentet på navigeringsstacken. loadInitialDocument() är för närvarande en stubmetod som du kommer att fylla i lite.
  3. om JavaScript-filerna inte kunde laddas finns det inget mer som appen kan göra. Därför använder den _createAlert(), definierad längst ner i main.js för att bygga och presentera ett varningsdokument och sedan kasta ett fel.

Lägg till följande i loadInitialDocument():

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

detta använder resurslastaren för att hämta TVML-filen från appens resurspaket och returnera den som ett DOM-objekt.

Därefter måste du skapa filen som din app försöker ladda: video.tvml.

gå in i Xcode och högerklicka på gruppen layouter i project navigator. Välj Ny fil…:

navigera till tvOS \ Other \ Empty och tryck på Nästa. Namnge filen video.tvml och se till att wenderTV-målet är kontrollerat:

öppna den nya filen i antingen din favorit XML-redigerare (eller Xcode, om du insisterar) och Lägg till följande rader:

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

detta definierar ett enkelt TVML-dokument med en ny typ av Mall: productTemplate.

Bygg och kör appen för att se hur saker ser ut så långt:

Hmm. Skärmen är fortfarande tom. Även om du har skapat filen och tillhandahållit mallen har du inte tillhandahållit något innehåll. Du fixar det inom kort, men först måste du täcka lite bakgrund på TVML-mallar.

Tvml-mallar

ett TVML-dokument är bara ett XML-dokument (eXtentible Markup Language) Med ett specifikt schema definierat av Apple. Om du har använt HTML tidigare kommer XML att se bekant ut. HTML är faktiskt inte XML (trots vissa misslyckade ansträngningar med XHTML), men syntaxen och strukturen är ganska lika.

eftersom TVML-dokument är XML bör de börja med följande rad:

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

detta är känt som XML-prologen; den noterar att den här filen är ett XML-dokument och vilken teckenkodning den använder.

tvml-dokumentet har ett root – element, som är ett enda element på dokumentets översta nivå och förälder (eller förfader) till alla andra element. Elementet har en enda direkt ättling, som kan vara en av 18 möjliga malltaggar.

en malltagg anger vilken layout som tvOS ska använda för att återge dokumentet på skärmen. Förutom att ange utseendet på skärmen förmedlar malltaggar också viss semantisk information om innehållet de innehåller. Mallar kan se liknande ut, men har helt olika syften.

tvml-mallar kan delas in i följande kategorier:

  • information: visar en liten mängd information till användaren, och eventuellt begär inmatning från användaren. Det är inte utformat för bläddringsbart innehåll. Inkluderar alertTemplate och loadingTemplate.
  • datainmatning: användarupplevelsen att mata in data på TV-apparater är ganska hemsk, och Apple TV är inte annorlunda. Det finns dock några mallar för att begära data från användaren, inklusive searchTemplate och ratingTemplate.
  • Enstaka Objekt: Visar information eller innehåll om en enskild produkt eller artikel, till exempel en film eller ett avsnitt i en TV-serie. Inkluderar productTemplate, oneupTemplate, compilationTemplate och showcaseTemplate.
  • samlingar: visar en samling produkter, till exempel en TV-serie, en genre av filmer eller spår på ett album. Inkluderar stackTemplate, listTemplate och productBundle.
  • Övrigt: inkluderar menuBarTemplate, som är värd för en uppsättning andra mallar, och divTemplate, som är en helt ren skiffer som du ritar på.
notera: I stället för att gå in i detalj här om varje mall, Apple reference är en stor resurs för att få låg ner på de olika mallarna, deras kapacitet och layouter: apple.co/1PJuOAV.

Produktmallen

det första dokumentet du skapar använder , som är utformat för att visa all information om en viss produkt — i det här fallet en video.

öppna video.tvml och Lägg till följande kod mellan – taggarna:

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

detta kodavsnitt introducerar många nya elementtyper. Ta dem en efter en:

  • <banner>: visar innehåll överst på en sida.
  • <infoList>: visar en lista med element, ordnade i en vertikal lista.
  • <info>: fungerar som en behållare forthis är innehållet som ska visas som ett objekt i en eller en .
  • <header>: fungerar som en beskrivning av innehållet i det avsnitt där det finns.
  • <title>: innehåller texten till en kort titel.
  • <text>: visar text.

Bygg och kör appen för att se hur din nya TVML ser ut:

den här sidan representerar en video, men den saknar för närvarande en titel. Dags att ändra på det.

Lägg till följande inuti <banner> – taggarna, strax efter stängningstaggen:

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

det här avsnittet introducerar fler TVML-element:

  • <stack>: stackar lägger ut innehållet vertikalt ner på skärmen på ett sätt som liknar . Det finns ett bredare utbud av taggar som kan vara i en stapel.
  • <row&gt: en rad är som en stapel, men med en horisontell orientering istället för vertikal.
  • <badge&gt: märken visar en liten inline-bild. Webbadressen tillhandahålls av attributet src.

Lägg märke till att webbadressen till de två märkesbilderna börjar med resource://. Detta är ett speciellt URL-schema som pekar på bilder som finns inom tvOS själv. Dessa bilder inkluderar vanliga åtgärdsikoner, till exempel” play”, betygsbilder för olika länder och videoinformation som HD.

Obs: För en fullständig lista över de resursbilder som finns tillgängliga i tvOS, kolla in Apples dokumentation på apple.co/1T930o9.

Bygg och kör igen för att se hur sidan ser ut:

det börjar se bra ut, men det finns fortfarande en lång väg att gå. Innan du fortsätter med mallkodningen måste du först överväga separationen av data och vyn.

data Injection

som ditt videodokument för närvarande står är alla data hårdkodade. För att visa information om en annan video måste du skapa en helt ny sida. Om du vill formatera om videosidan när du har skapat alla sidor måste du gå igenom och redigera var och en av dem.

ett mycket bättre tillvägagångssätt är att använda en mallmotor, där du bygger videosidan som en mall och anger var data ska injiceras. Vid körning tar mallmotorn sidmallen tillsammans med data och genererar TVML-sidan för tvOS att visa.

Obs: ordet ”mall” används nu för två olika ändamål: tvml-mallar är de layouter som tillhandahålls av tvOS som gör dina dokument på skärmen, medan en mallmotor använder malldokument i kombination med data för att generera kompletta TVML-dokument. Oroa dig inte för mycket om skillnaden; det blir mycket tydligare när du har använt dem båda.

mustasch.js är en populär enkel mallmotor för JavaScript. Du kanske känner igen mallsyntaxen som är baserad på lockiga hängslen:

{{property-name}}

mustaschen.js library är redan en del av wenderTV, men du måste bygga mekanismerna för att använda den. Detta ger dig flera uppgifter att utföra:

  • data lagras som JSON-filer i app bundle. JavaScript-appen behöver möjligheten att begära dem.
  • när ett dokument laddas kräver det nu data, och detta bör kombineras med dokumentsträngen med mustasch.js.
  • bilder som finns i app bundle behöver deras fullständiga URL ersättas.
  • videodokumentet ska uppdateras för att göra det till ett mallat dokument.

du adresserar var och en av dessa i ordning.

OBS: från och med tvOS 11 stöder TVML begreppet prototyper i TVML som utnyttjar databindning för att länka dataelement till TVML. Detta minskar kodredundans och förbättrar prestanda vid paginering av stora innehållsuppsättningar, till exempel en enorm lista med YouTube-videor i ett rutnätformat.

prototyping är dock endast tillgängligt på <section> – nivån, medan du använder den i den här handledningen för mycket mer, till exempel i avsnittet <header> i din TVML. Du kommer att fortsätta använda mustasch.js som en mallmotor för den här delen av boken, men om du slutar behöva hantera stora innehållsuppsättningar i dina tvOS-appar, Läs upp prototyper och databindning på apple.co/2utDXXm.

läsa JSON från App Bundle

Open ResourceLoader.js och Lägg till följande metod till ResourceLoaderJS:

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

den här funktionen använder den inbyggda resurslastaren för att dra JSON-filen från apppaketet innan den analyseras i ett JavaScript-objekt.

Obs: Det skulle vara relativt enkelt att ersätta den här funktionen med en metod som kallar en fjärrserver för data istället för att hitta statiska data i apppaketet. Resten av denna mallmetod skulle fortsätta att fungera som den ser ut.

injicera Data i Dokumentsträngen

nu när du kan få data för en viss sida måste du kombinera den med själva dokumentmallen. Uppdatera getDocument() i ResourceLoaderJS för att matcha följande:

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

här har du lagt till ett extra data – argument till metoden och använt renderMustache för att konvertera mallen och data till ett färdigt dokument. Som tidigare använder du en DOMParser för att konvertera dokumentsträngen till ett DOM-objekt.

lösa Bildadresser

för enkelhetens skull lagrar dina exempeldata bilder som namnen på filer i apppaketet, som måste konverteras till webbadresser innan du kan visa dem. Verktygsfunktionerna för att göra detta finns redan i resurslastaren, så du behöver bara ringa dem. Du gör detta samtidigt som du uppdaterar den ursprungliga dokumentbelastningen för att använda mallmotorn.

öppna huvud.js och update loadInitialDocument() för att matcha följande:

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

först laddar du data med den nya getJSON() – metoden. Sedan använder du verktygsfunktionerna för att utföra konverteringen av bildnamn till URL. Dessa konverterar tre olika bildnamnskällor:

  • varje värde i images – objektet i datamatrisen.
  • varje värde associerat med en nyckel på image var som helst inom JSON-datastrukturen.
  • en uppsättning delade bilder som är användbara för alla dokument i wenderTV.

som tar hand om VVS Under; du är redo att använda denna kraftfulla nya funktionalitet.

använda mustaschen.JS mallar

Öppet lagarbete.json och ta en titt på de data du använder för att fylla i videosidan. Det finns ganska mycket data, men det är ett vanligt JSON-objekt och ganska lätt att förstå. Du bör upptäcka några fält som title, presenter och duration som du redan har hårdkodat i video.tvml. Du kommer nu att byta ut dessa.

öppna video.tvml och hitta titeltaggen som innehåller Ray Wenderlich. Ersätt namnet med {{presenter}} , så att det första – avsnittet nu ser ut så här:

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

syntaxen för mustasch.js är verkligen enkelt; det kommer att ersätta {{presenter}} med värdet presenter i dataobjektet som levereras till det.

nu när du har hängt på det kan du ersätta följande innehåll med respektive malltaggar:

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

Bygg och kör; du borde inte se någon skillnad, vilket är exakt vad du vill ha. Sidan är nu datadriven, och ännu bättre, du bröt ingenting. Bonus! :]

det finns fortfarande vissa delar av mallen som du inte har rört: undertexter, HD och taggar. Dessa använder några lite mer avancerade delar av mustaschen.js mall motor.

Mallavsnitt

ta bort de tre taggarna i avsnittet taggar och Lägg till följande i deras ställe:

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

den här nya syntaxen definierar ett mallavsnitt. Titta på lagarbete.json och du ser att tags är en rad strängar. mustasch.JS syntax här loopar genom arrayen, med {{.}} rendering innehållet i det aktuella indexet.

Slutligen måste du hantera de två Booleska märkena. Byt ut cc – och hd-märkena med följande:

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

återigen använder du sektioner, men den här gången är de strukturerade som ett if uttalande. Om den angivna egenskapen finns och har ett true – värde, gör sedan det här avsnittet. annars ignorerar du det.

Bygg och kör igen; kolla in din nyligen mallade videosida.

för att bekräfta att datainjektionen faktiskt fungerar, Öppna main.js och ändra datafilen laddas i loadInitialDocument() från lagarbete.json till identitet.json. Bygg och kör igen för att se dataändringen.

du kan nu se detaljer om Vickis samtal om identitet-söt!

fyll i Tvml-mallen

videosidan ser fortfarande lite karg ut. Det är dags att dubbla på att lägga till lite innehåll.

öppna video.tvml och Lägg till följande inuti <stack>, strax under den befintliga <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>

återigen introducerar detta några nya TVML-element:

  • <description>: visar en större mängd text som används för att beskriva innehåll. Om texten är för lång för visningsområdet visas en etikett med en titel definierad av attributet moreLabel.
  • &ltbuttonLockup>: en låsning är en klass av element som förenar sina barn tillsammans som ett enda element. En knapplåsning kan innehålla text och ett märke och visas som en knapp.

kom ihåg att dessa element alla finns i en <stack>, så de kommer att visas ovanpå varandra.

innan du kontrollerar ditt arbete måste du lägga till ytterligare ett element i toppbannern. Lägg till följande rad omedelbart efter </stack> stängningstaggen:

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

ett heroImg – element är en stor bild som definierar innehållet i detta dokument. Den visas inuti <banner> och tvOS använder den för att definiera den suddiga sidbakgrunden.

Bygg och kör för att se den färdiga toppbannern:

det börjar se riktigt coolt ut – men vänta! Du kanske nu har märkt att textfärgen har ändrats från svart till vitt. Hur gick det till?

tvOS har bestämt att eftersom bakgrundsbilden du angav är mörkare än en viss tröskel, behövde den öka kontrasten i din text, så den ändrade standardtextfärgen.

uppdatera taggen <productTemplate> så att den matchar följande:

<productTemplate theme="light">

Bygg och kör för att se skillnaden:

den visuella effekten på bakgrunden har förändrats tillsammans med förgrundsfontfärgerna. Du kan ändra attributet theme till dark om du vill tvinga föregående utseende om du föredrar det.

notera: Standardbeteendet har ändrats sedan den tidigare versionen av tvOS, så du kan behöva uttryckligen definiera theme för att få den effekt du är van vid. Låt inte detta beteende förväxlas med det nya mörka läget som Apple introducerade i tvOS 10. Det kommer att behandlas mer detaljerat senare i boken.

lägga till hyllor

resten av productTemplate består av ”hyllor”. En hylla är en horisontell del av sidan med innehållselement som rullar på och utanför skärmen.

Lägg till följande under den avslutande </banner> – taggen, längst ner i videon.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>

denna hylla visar en uppsättning andra videor som användaren kan njuta av enligt definitionen i egenskapen recommendations i datamodellen. Varje rekommendation har en image och en title, som du använder i koden ovan.

det finns två andra element som introduceras i detta kodsegment:

  • <section>: definierar en uppsättning relaterat innehåll som alla ska läggas ut tillsammans. Ett avsnitt kan innehålla en titel och flera låsningselement.
  • <lockup>: du såg <buttonLockup> innan; lockup är en mer allmän typ av låsning. Det ger layout för en bild, en titel, ett märke och en beskrivning.

lägg nu till en annan hylla under den du just skapade:

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

den här hyllan visar en lista över personer som är associerade med produktionen; den lagras i egenskapen people i datamodellen.

detta introducerar elementen och , som låter dig representera en person när en avatar inte är tillgänglig. Liksom de andra låsningselementen låser en monogramlåsning helt enkelt innehållet.

ett monogram har firstName och lastName attribut, från vilka det genererar ett monogram (initialer) och placerar det i en stor cirkel.

Bygg och kör för att se hur dina hyllor tar form. Du måste rulla ner för att avslöja den nedre hyllan:

ta en titt på beskrivningen för” identitet ” – samtalet. Lägg märke till att ju mer etikett har dykt upp, eftersom det finns för mycket text att visa i det tillgängliga utrymmet. Navigera till etiketten så ser du att du kan fokusera på beskrivningen och trycka på Välj för att utlösa en åtgärd. Den här åtgärden gör för närvarande ingenting, men skulle det inte vara trevligt om det skulle visa hela texten?

tid för en annan tvml Mall.

hantering av Textspill

den beskrivande varningsmallen ger utrymme för ett utökat område med text och knappar. Det låter perfekt för detta ändamål. Du använder den här mallen och en plats för JavaScript för att koppla upp den.

i Xcode-projektet högerklickar du på gruppen layouter och väljer ny fil…. Välj tvOS \ Other \ Empty och namnge filen expandedDetailText.tvml.

öppna den nya filen och Lägg till följande:

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

detta borde vara ganska enkelt att förstå. Det finns den vanliga XML-prologen, taggen och några element du har använt tidigare. Lägg märke till att knapptaggen har ett action attribut; Detta är ett användardefinierat attribut som inte ingår i tvml-specifikationen.

du kan definiera alla attribut du vill ha (förutsatt att de inte kolliderar med befintliga attribut) och sedan läsa dem från din JavaScript-app. Du skriver lite kod för att hantera denna dismiss – åtgärd på bara lite.

öppna video.tvml och hitta taggen . Uppdatera elementet så att det matchar följande:

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

du har lagt till två nya attribut: action och title. Du använder båda dessa i händelsehanteraren för att skapa det utökade detaljtextdokumentet.

händelsehantering

nu när dokumentmallarna är redo att gå kan du rikta din uppmärksamhet mot JavaScript som kopplar upp allt.

öppna huvud.js och Lägg till följande funktion:

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

tar denna bit-för-bit:

  1. egenskapen target för argumentet event representerar DOM-objektet som avfyrade händelsen. getAttribute() för ett DOM-objekt returnerar värdet för det angivna attributet. Här använder du det för att hitta värdet på attributet action som du har lagt till ovan.
  2. slå på attributet action för att åberopa lämplig kod.
  3. om åtgärden är showOverflow har du ett beskrivningsfält med för mycket innehåll. Konstruera ett objekt med de data som krävs av det utvidgade detaljtextdokumentet. Återigen använder du getAttribute() tillsammans med textContent, som returnerar innehållet i själva taggen.
  4. ladda expandedDetailText.tvml-dokument på vanligt sätt lägger du till en händelselyssnare och använder presentModal()NavigationDocument för att visa det nya dokumentet ovanpå det aktuella dokumentet.

  1. om åtgärden är inställd på dismiss, använd dismissModal()NavigationDocument för att utföra uppsägningen.

nu när du har skapat den här händelsehanteraren måste du ansluta den till det ursprungliga dokumentet. Lägg till följande rad till App.onLaunch, precis efter att du har ringt loadInitialDocument():

initialDoc.addEventListener("select", _handleEvent);

detta registrerar _handleEvent som lyssnare för select-händelsen och använder händelsebubbling för att hantera alla händelser som utlöses i dokumentet.

Bygg och kör appen, navigera ner till den fullständiga beskrivningen och tryck på Välj-knappen. Du kommer att se din nya utökade detalj textsida:

du kan använda avfärda-knappen för att återgå till videoskärmen.

Tittarbetyg

i den sista delen av denna handledning lägger du till ett nytt betygsavsnitt på videosidan och låter användaren välja ett betyg med en ny mall.

öppna video.tvml och Lägg till följande nya hylla under Produktionshyllan:

<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 kommer du att känna igen de flesta TVML-elementen, men det finns fortfarande några nya:

  • <ratingCard>: visar ett litet kort som är lämpligt för att visa betyg för en produkt.
  • <ratingBadge>: ett specialiserat märke för att visa en stjärnklassificering. Attributet value ska vara ett värde mellan 0 och 1, vilket kommer att konverteras till en andel av fem stjärnor.
  • <reviewCard>: ett kort för att visa användar-eller kritikerrecensioner.

Lägg märke till att – elementet har det anpassade action – attributet igen. Du kommer att använda detta senare för att visa betygssidan.

Bygg och kör för att se hur den nya hyllan ser ut:

när användaren väljer ratingkortet vill du låta dem välja ett betyg för den aktuella videon. Detta är precis vad betyg TVML Mall är för.

samla betyg

i Xcode högerklickar du på gruppen layouter och väljer ny fil…. Välj tvOS \ Other \ Empty och namnge filen videoRating.tvml.

öppna den nya filen och Lägg till följande:

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

den här nya filen använder som helt enkelt visar och samlar betyg. Den innehåller en <title> och en <ratingBadge>, båda som du redan har sett.

mallen är klar; du behöver bara visa den. Öppna huvud.js och Lägg till följande case till switch – satsen i _handleEvent():

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

dessa få rader laddar det nya dokumentet du skapade och ger titeln till mallmotorn. Det visar sedan dokumentet modalt.

Bygg och kör, navigera till ratingkortet och tryck på Välj för att se sidan nya betyg:

nu är det ett svällande utseende – och utbyggbart-gränssnitt.

vart ska man gå härifrån?

du kan ladda ner det slutliga projektet från denna handledning här.

i denna handledning har du skapat en snygg TVML-app och använt tre av de inbyggda mallarna tillsammans med ett brett utbud av TVML-specifika element. Du integrerade också en JavaScript-mallmotor för att skilja användargränssnittet från data. Att anta bra utvecklingstekniker redan från början är en vinst i någons bok.

du kan kolla in Apples dokumentation (apple.co/1PJuOAV) för detaljer om mallarna och elementen som omfattas av denna handledning.

om du gillade det du lärde dig i den här handledningen, varför inte kolla in hela tvOS Apprentice-boken, som finns i vår butik?

här är en smak av vad som finns i boken:

avsnitt i: arkitektur

det här avsnittet är utformat för att ge dig en fågelperspektiv över hur tvOS fungerar och hjälpa dig att bestämma vad du ska läsa nästa.

avsnitt II: Tvml-appar

det här avsnittet täcker grunderna för att skapa en app via tvml-metoden. Från grunderna i Hello World genom ett verkligt världsexempel, i slutet av det här avsnittet vet du allt du behöver för att skapa klient – / serverappar för Apple TV.

avsnitt III: traditionella appar

det här avsnittet täcker grunderna för att skapa appar via det traditionella tillvägagångssättet. Du lär dig de nya biblioteken som skapats för Apple TV och hur de portade biblioteken från iOS kan användas.

avsnitt IV: avancerade ramar

det här avsnittet täcker några av de mer avancerade ramarna du behöver för många TV-appanvändningsfall. Oavsett om du tog TVML-metoden eller det traditionella tillvägagångssättet, kommer dessa ramar att vara viktiga att förstå för att få din app att sticka ut.

avsnitt V: Design

detta avsnitt omfattar designkoncept som är viktiga för tvOS. För att din app ska skilja sig från resten måste du förstå dessa designkoncept väl.

bonuskapitel

och det är inte allt — utöver ovanstående har vi ett bonuskapitel för dig som ger dig en snabbkurs i JavaScript!

i slutet av den här boken har du en bra praktisk erfarenhet av att bygga spännande, snygga appar för Apple TV!

och för att hjälpa till att söta affären är den digitala upplagan av boken till försäljning för $49.99! Men vänta inte-detta försäljningspris är endast tillgängligt under en begränsad tid.

på tal om söta erbjudanden, se till att kolla in de fantastiska priserna vi ger bort i år med iOS 11 lanseringsfest, inklusive över $9,000 i giveaways!

för att komma in, retweeta bara det här inlägget med hashtaggen #ios11launchparty genom att använda knappen nedan:

Tweet

vi hoppas att du njuta av den här uppdateringen, och håll ögonen öppna för fler bokreleaser och uppdateringar!

raywenderlich.com vecka

den raywenderlich.com nyhetsbrev är det enklaste sättet att hålla dig uppdaterad om allt du behöver veta som mobilutvecklare.

få en veckovis sammanfattning av våra handledning och kurser och få en gratis fördjupad e-postkurs som en bonus!

genomsnittligt betyg

5/5

Lägg till ett betyg för detta innehåll

logga in för att lägga till ett betyg

1 betyg

Lämna ett svar

Din e-postadress kommer inte publiceras.