In questo tutorial, imparerete come utilizzare la pletora di modelli TVML che Apple ha fornito per fare alcune interfacce mozzafiato. Utilizzerai questi modelli per creare uno schermo completo per i video RWDevCon 2015, che includerà una vasta gamma di informazioni sul video e lo visualizzerà in modo accattivante e riconoscibile.

Guida introduttiva

Puoi scaricare il progetto starter per questo tutorial qui.

L’applicazione di esempio per questo tutorial è wenderTV; esso consente di sfogliare e guardare raywenderlich.com contenuti video sul vostro Apple TV, in modo da poter godere di una grande quantità di conoscenza – e brutti scherzi – dalla comodità del vostro divano. In questo momento, wenderTV è abbastanza vuoto.

wenderTV include molte risorse che utilizzerai durante questo tutorial; abbiamo anche riorganizzato parte del codice per renderlo più facile da capire.

Crea ed esegui il progetto wenderTV starter da Xcode; noterai che lo schermo è completamente vuoto. Questo perché non ci sono ancora documenti TVML in wenderTV. Prima di poter rivolgere la tua attenzione alla creazione di alcuni documenti TVML, hai un po ‘ di pulizia da fare.

Nota: sebbene sia possibile utilizzare Xcode per scrivere tutto il codice necessario per un’app basata su TVML, può essere un’esperienza piuttosto dolorosa. Xcode è utile per modificare Swift o Objective-C, ma ha solo un supporto rudimentale per XML e JavaScript. Vale sicuramente la pena usare Xcode quando è necessario, quindi passare a un editor più capace come Sublime Text, Atom, Visual Studio Code o MacVim per lavorare con documenti TVML e file JavaScript.

Caricamento degli script

Il progetto per wenderTV ha già ResourceLoaderJS diviso nel proprio file, quindi è necessario scoprire come importarlo in main.js.

TVJS fornisce la funzione evaluateScripts() che accetta una serie di URL di file JavaScript e una richiamata. La funzione legge ogni URL a sua volta, tenta di analizzarlo e aggiunge tutte le funzioni contenute e le definizioni di oggetti all’oggetto globale del contesto. Infine, richiama il callback fornito con un valore booleano che indica il successo o il fallimento.

Il AppDelegate contiene il codice che fornisce all’applicazione JavaScript un elenco di URL per i file JavaScript richiesti come parte dell’oggetto Opzioni di avvio. Apri principale.js e aggiungere il seguente codice alla funzione 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."); } });

Prendendo questo nuovo corpo funzione passo-passo:

  1. L’oggetto options viene preparato in Swift e quindi passato all’app JavaScript nel delegato dell’app, mentre la proprietà initialJSDependencies è un array di URL per i diversi file JavaScript che devono essere caricati all’avvio dell’app. evaluateScript() esegue questa azione e quindi richiama il callback che indica se ha avuto successo.
  2. Se le origini JavaScript sono state valutate correttamente, creare un oggetto ResourceLoaderJS prima di utilizzarlo per caricare il documento iniziale e quindi spingere questo documento TVML nello stack di navigazione. loadInitialDocument() è attualmente un metodo stub che popolerai in un po’.
  3. Se i file JavaScript non sono stati caricati, non c’è più nulla che l’app possa fare. Pertanto utilizza _createAlert(), definito nella parte inferiore del main.js per creare e presentare un documento di avviso e quindi generare un errore.

Aggiungere quanto segue loadInitialDocument():

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

Questo utilizza il resource loader per ottenere il file TVML dal bundle di risorse dell’app e restituirlo come oggetto DOM.

Successivamente, dovrai creare il file che la tua app sta tentando di caricare: video.tvml.

Entra in Xcode e fai clic con il pulsante destro del mouse sul gruppo layout nel navigatore del progetto. Seleziona nuovo file…:

Passare a tvOS \ Altro \ Vuoto e premere Avanti. Assegna un nome al file video.tvml e assicurarsi che il target wenderTV sia controllato:

Apri il nuovo file nel tuo editor XML preferito (o Xcode, se insisti) e aggiungi le seguenti righe:

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

Questo definisce un semplice documento TVML utilizzando un nuovo tipo di modello: productTemplate.

Crea ed esegui l’app per vedere come appaiono le cose finora:

Hmm. Lo schermo è ancora vuoto. Sebbene tu abbia creato il file e fornito il modello, non hai fornito alcun contenuto. Lo risolverai a breve, ma prima devi coprire un po ‘ di sfondo sui modelli TVML.

Modelli TVML

Un documento TVML è solo un documento XML (eXtentible Markup Language) con uno schema specifico definito da Apple. Se hai usato HTML in passato, XML avrà un aspetto familiare. HTML non è in realtà XML (nonostante alcuni sforzi falliti con XHTML), ma la sintassi e la struttura sono abbastanza simili.

Poiché i documenti TVML sono XML, dovrebbero iniziare con la seguente riga:

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

Questo è noto come il prologo XML; nota che questo file è un documento XML e quale codifica dei caratteri utilizza.

Il documento TVML ha un elemento root , che è un singolo elemento al livello superiore del documento e il genitore (o antenato) di tutti gli altri elementi. L’elemento ha un singolo discendente diretto, che può essere uno dei 18 possibili tag modello.

Un tag modello specifica il layout di primo livello che tvOS dovrebbe utilizzare per il rendering del documento sullo schermo. Oltre a specificare l’aspetto sullo schermo, i tag modello trasmettono anche alcune informazioni semantiche sul contenuto che contengono. I modelli potrebbero sembrare simili, ma hanno scopi completamente diversi.

I modelli TVML possono essere suddivisi nelle seguenti categorie:

  • Informativo: Mostra una piccola quantità di informazioni per l’utente, e facoltativamente richiede input da parte dell’utente. Non è progettato per contenuti sfogliabili. Include alertTemplate e loadingTemplate.
  • Data Entry: L’esperienza utente di inserire i dati sui televisori è piuttosto orrendo, e Apple TV non è diverso. Tuttavia, ci sono alcuni modelli per la richiesta di dati da parte dell’utente, tra cui searchTemplate e ratingTemplate.
  • Articolo singolo: Visualizza informazioni o contenuti su un singolo prodotto o elemento, ad esempio un film o un episodio di una serie TV. Include productTemplate, oneupTemplate, compilationTemplate e showcaseTemplate.
  • Collezioni: visualizza una collezione di prodotti, come una serie TV, un genere di film o tracce su un album. Include stackTemplate, listTemplate e productBundle.
  • Altro: include menuBarTemplate, che ospita una serie di altri modelli, e divTemplate, che è una lavagna completamente pulita su cui si disegna.
Nota: Piuttosto che entrare nei dettagli qui su ogni modello, il riferimento Apple è una grande risorsa per ottenere il low-down sui diversi modelli, le loro capacità e layout: apple.co/1PJuOAV.

Il modello di prodotto

Il primo documento che creerai utilizza , progettato per visualizzare tutte le informazioni relative a un prodotto specifico, in questo caso un video.

Apri video.tvml e aggiungere il seguente codice tra i tag :

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

Questo frammento di codice introduce molti nuovi tipi di elementi. Prendendoli uno per uno:

  • <banner>: Visualizza il contenuto nella parte superiore di una pagina.
  • <infoList>: Visualizza un elenco di elementi, disposti in un elenco verticale.
  • <info>: Agisce come un contenitore perquesto è il contenuto da visualizzare come un elemento in un o un .
  • <header>: Serve come una descrizione del contenuto della sezione in cui risiede.
  • <title>: Contiene il testo di un titolo breve.
  • <text>: Visualizza il testo.

Crea ed esegui l’app per vedere come appare il tuo nuovo TVML:

Questa pagina rappresenta un video, ma al momento manca un titolo. E ‘ ora di cambiare le cose.

Aggiungi quanto segue all’interno dei tag <banner>, subito dopo il tag di chiusura :

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

Questa sezione introduce più elementi TVML:

  • <stack>: Le pile dispongono il loro contenuto verticalmente lungo lo schermo in un modo simile a . C’è una gamma più ampia di tag che possono essere in una pila.
  • <row&gt: Una riga è come una pila, ma con un orientamento orizzontale anziché verticale.
  • <badge&gt: I badge mostrano una piccola immagine in linea. L’URL è fornito dall’attributo src.

Si noti che l’URL delle due immagini del badge inizia con resource://. Questo è uno schema URL speciale che punta alle immagini che esistono all’interno di tvOS stesso. Queste immagini includono icone di azione comuni, come “play”, immagini di valutazione per i diversi paesi e informazioni video come HD.

Nota: per un elenco completo delle immagini delle risorse disponibili all’interno di tvOS, controlla la documentazione di Apple all’indirizzo apple.co/1T930o9.

Crea ed esegui di nuovo per vedere come si sta configurando la pagina:

Sta cominciando a guardare bene, ma c’è ancora molta strada da fare. Prima di continuare con la codifica del modello, è necessario prima considerare la separazione dei dati e della vista.

Data Injection

Come si trova attualmente il documento video, tutti i dati sono hard-coded. Per mostrare informazioni su un video diverso, dovresti creare una pagina completamente nuova. Se si desidera riformattare la pagina del video una volta create tutte le pagine, è necessario tornare indietro e modificare ciascuna di esse.

Un approccio molto migliore consiste nell’utilizzare un motore di template, in cui si costruisce la pagina video come modello e si specifica dove i dati devono essere iniettati. In fase di esecuzione, il motore di modello prende il modello di pagina insieme ai dati e genera la pagina TVML per tvOS da visualizzare.

Nota: La parola “modello” viene ora utilizzata per due scopi diversi: i modelli TVML sono i layout forniti da tvOS che rendono i documenti sullo schermo, mentre un motore di template utilizza documenti modello combinati con dati per generare documenti TVML completi. Non preoccuparti troppo della distinzione; sarà molto più chiaro una volta che li avrai usati entrambi.

Baffi.js è un popolare motore di template semplice per JavaScript. È possibile riconoscere la sintassi dei modelli basata su parentesi graffe:

{{property-name}}

I baffi.js library è già parte di wenderTV, ma è necessario costruire i meccanismi per usarlo. Questo si presenta con diversi compiti da svolgere:

  • I dati vengono memorizzati come file JSON nel pacchetto app. L’app JavaScript ha bisogno della possibilità di richiederli.
  • Quando un documento viene caricato, ora richiede dati, e questo dovrebbe essere combinato con la stringa di documento utilizzando Baffi.js.
  • Le immagini presenti nel pacchetto app devono essere sostituite con l’URL completo.
  • Il documento video deve essere aggiornato per trasformarlo in un documento basato su modelli.

Affronterai ciascuno di questi in ordine.

Nota: A partire da tvOS 11, TVML supporta il concetto di prototipi in TVML che sfruttano l’associazione dei dati per collegare elementi di dati al TVML. Ciò riduce la ridondanza del codice e migliora le prestazioni quando si impaginano set di contenuti di grandi dimensioni, come un enorme elenco di video di YouTube in un formato di visualizzazione a griglia.

Tuttavia, la prototipazione è disponibile solo a livello <section>, mentre lo si utilizza in questo tutorial per molto di più, ad esempio nella sezione <header> di TVML. Continuerai a usare i baffi.js come motore di template per questa sezione del libro, ma se si finisce per dover gestire set di contenuti di grandi dimensioni nelle app tvOS, leggere la prototipazione e l’associazione dei dati su apple.co/2utDXXm.

Lettura di JSON dal pacchetto App

Apri ResourceLoader.js e aggiungere il seguente metodo a ResourceLoaderJS:

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

Questa funzione utilizza il caricatore di risorse nativo per estrarre il file JSON dal pacchetto di app prima di analizzarlo in un oggetto JavaScript.

Nota: Sarebbe relativamente semplice sostituire questa funzionalità con un metodo che chiama un server remoto per i dati invece di trovare dati statici all’interno del pacchetto di app. Il resto di questo approccio templare continuerebbe a funzionare così com’è.

Iniezione di dati nella stringa di documento

Ora che è possibile ottenere i dati per una determinata pagina, è necessario combinarli con il modello di documento stesso. Aggiorna getDocument() in ResourceLoaderJS per abbinare quanto segue:

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

Qui è stato aggiunto un ulteriore argomento data al metodo e utilizzato render su Mustache per convertire il modello e i dati in un documento completato. Come prima, si utilizza un DOMParser per convertire la stringa del documento in un oggetto DOM.

Risoluzione degli URL delle immagini

Per semplicità, i dati di esempio memorizzano le immagini come nomi di file nel pacchetto app, che devono essere convertiti in URL prima di poterli visualizzare. Le funzioni di utilità per farlo sono già nel caricatore di risorse, quindi è sufficiente chiamarle. Lo farai nello stesso momento in cui aggiorni il caricamento iniziale del documento per utilizzare il motore di template.

Apri principale.js e aggiornamento loadInitialDocument() per abbinare il seguente:

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

Innanzitutto, si caricano i dati utilizzando il nuovo metodo getJSON(). Quindi si utilizzano le funzioni di utilità per eseguire la conversione dal nome all’URL dell’immagine. Questi convertono tre diverse fonti di nome immagine:

  • Ogni valore nell’oggetto images nell’array di dati.
  • Ogni valore associato a una chiave di image ovunque all’interno della struttura dati JSON.
  • Un insieme di immagini condivise che sono utili per tutti i documenti in wenderTV.

Che si prende cura dell’impianto idraulico sottostante; sei pronto per utilizzare questa nuova potente funzionalità.

Usando i baffi.modelli js

Lavoro di squadra aperto.json e dai un’occhiata ai dati che utilizzerai per popolare la pagina del video. Ci sono molti dati, ma è un oggetto JSON standard e abbastanza facile da capire. Dovresti individuare alcuni campi come title, presenter e duration che hai già codificato nel video.tvml. Ora li scambierai.

Apri video.tvml e trovare il tag titolo che contiene Ray Wenderlich. Sostituisci il nome con {{presenter}}, in modo che la prima sezione ora assomigli a questa:

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

La sintassi per i baffi.js è davvero semplice; sostituirà {{presenter}} con il valore di presenter nell’oggetto dati fornito.

Ora che hai ottenuto il blocco di che, è possibile sostituire il contenuto con il rispettivo tag di template:

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

compilare ed eseguire; non si deve vedere la differenza, che è esattamente ciò che si desidera. La pagina è ora data-driven, e ancora meglio, non hai rotto nulla. Bonus! :]

Ci sono ancora alcune parti del modello che non hai toccato: sottotitoli, HD e tag. Questi usano alcune parti leggermente più avanzate dei baffi.motore di template js.

Sezioni di template

Rimuovi i tre tag nella sezione Tags e aggiungi quanto segue al loro posto:

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

Questa nuova sintassi definisce una sezione del modello. Guarda il lavoro di squadra.json e vedrai che tags è un array di stringhe. baffo.la sintassi js qui scorre attraverso l’array, con {{.}} che rende il contenuto dell’indice corrente.

Infine, è necessario gestire i due badge booleani. Sostituire i badge cc e hd con quanto segue:

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

Ancora una volta stai usando le sezioni, ma questa volta sono strutturate come un’istruzione if. Se la proprietà specificata esiste e ha un valore true, renderizza questa sezione; altrimenti, ignorala.

Crea ed esegui di nuovo; controlla la tua nuova pagina video basata su modelli.

Per confermare che l’iniezione dei dati sta effettivamente funzionando, aprire main.js e modificare il file di dati caricato in loadInitialDocument() dal lavoro di squadra.json all’identità.json. Costruisci ed esegui di nuovo per vedere la modifica dei dati.

È ora possibile vedere i dettagli del discorso di Vicki su identità-dolce!

su

Compilando il modello TVML

La pagina video sembra ancora un po ‘ sterile. È tempo di raddoppiare l’aggiunta di alcuni contenuti.

Apri video.tvml e aggiungere quanto segue all’interno del <stack>, appena sotto l’esistente <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>

Ancora una volta, questo introduce alcuni nuovi elementi TVML:

  • <description>: Visualizza una quantità maggiore di testo utilizzato per descrivere il contenuto. Se il testo è troppo lungo per l’area di visualizzazione, verrà visualizzata un’etichetta con un titolo definito dall’attributo moreLabel.
  • &ltbuttonLockup>: Un lockup è una classe di elemento che unisce i suoi figli insieme come un singolo elemento. Un blocco pulsante può contenere testo e un badge e apparirà come un pulsante.

Ricorda che questi elementi sono tutti contenuti in un <stack>, quindi appariranno uno sopra l’altro.

Prima di controllare il tuo lavoro, devi aggiungere un altro elemento al banner in alto. Aggiungi la seguente riga subito dopo il tag di chiusura </stack> :

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

Un elemento heroImg è un’immagine di grandi dimensioni che definisce il contenuto di questo documento. Appare all’interno di <banner> e tvOS lo usa per definire lo sfondo sfocato della pagina.

Crea ed esegui per vedere il banner in alto completato:

Sta cominciando a guardare davvero cool-Ma aspetta! Potresti aver notato che il colore del testo è cambiato da nero a bianco. Com’e ‘ successo?

tvOS ha deciso che poiché l’immagine di sfondo specificata è più scura di una certa soglia, era necessario aumentare il contrasto del testo, quindi ha cambiato il colore del testo predefinito.

Aggiorna il tag <productTemplate> in modo che corrisponda a quanto segue:

<productTemplate theme="light">

Costruisci e corri per vedere la differenza:

L’effetto visivo sullo sfondo è cambiato insieme ai colori dei caratteri di primo piano. È possibile modificare l’attributo theme in dark se si desidera forzare l’aspetto precedente se lo si preferisce.

Nota: Il comportamento predefinito è cambiato dalla versione precedente di tvOS, quindi potrebbe essere necessario definire esplicitamente theme per ottenere l’effetto a cui sei abituato. Inoltre, per favore non confondere questo comportamento con la nuova modalità dark introdotta da Apple in tvOS 10. Che sarà coperto più in dettaglio più avanti nel libro.

Aggiunta di scaffali

Il resto del productTemplate è costituito da “scaffali”. Uno scaffale è una sezione orizzontale della pagina con elementi di contenuto che scorrono sullo schermo e fuori.

Aggiungi quanto segue sotto il tag di chiusura </banner>, verso la parte inferiore del 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>

Questo scaffale visualizza una serie di altri video che l’utente potrebbe godere come definito nella proprietà recommendations del modello di dati. Ogni raccomandazione ha un image e un title, ognuno dei quali viene utilizzato nel codice sopra.

Ci sono altri due elementi introdotti in questo segmento di codice:

  • <section>: Definisce un insieme di contenuti correlati che dovrebbero essere disposti insieme. Una sezione può contenere un titolo e più elementi di blocco.
  • <lockup>: Hai visto <buttonLockup> prima; lockup è un tipo più generale di blocco. Fornisce il layout per un’immagine, un titolo, un badge e una descrizione.

Ora aggiungi un altro ripiano sotto quello appena creato:

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

Questo scaffale visualizza un elenco di persone associate alla produzione; è memorizzato nella proprietà people nel modello di dati.

Introduce gli elementi e , che consentono di rappresentare una persona quando un avatar non è disponibile. Come gli altri elementi di blocco, un blocco monogramma blocca semplicemente il suo contenuto insieme.

Un monogramma ha attributi firstName e lastName, dai quali genera un monogramma (iniziali) e lo posiziona in un grande cerchio.

Costruisci e corri per vedere come stanno prendendo forma i tuoi scaffali. Si dovrà scorrere verso il basso per rivelare il ripiano inferiore:

Date un’occhiata alla descrizione per il discorso “Identità”. Si noti che l’etichetta più è apparso, perché c’è troppo testo da visualizzare nello spazio disponibile. Passare all’etichetta e vedrete è possibile concentrarsi sulla descrizione e premere Seleziona per attivare un’azione. Questa azione al momento non fa nulla, ma non sarebbe bello se visualizzasse il testo completo?

Tempo per un altro modello TVML.

Gestione dell’overflow del testo

Il modello di avviso descrittivo offre spazio per un’area estesa di testo e pulsanti. Sembra ideale per questo scopo. Userai questo modello e un po ‘ di JavaScript per collegarlo.

Nel progetto Xcode, fare clic con il pulsante destro del mouse sul gruppo layout e selezionare Nuovo file…. Scegliere tvOS \ Other \ Empty e assegnare un nome al file expandedDetailText.tvml.

Apri il nuovo file e aggiungi quanto segue:

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

Questo dovrebbe essere abbastanza semplice da capire. C’è il solito prologo XML, il tag e alcuni elementi che hai usato prima. Si noti che il tag pulsante ha un attributo action; questo è un attributo definito dall’utente che non fa parte della specifica TVML.

È possibile definire gli attributi desiderati (a condizione che non si scontrino con gli attributi esistenti) e quindi leggerli dall’app JavaScript. Scriverai del codice per gestire questa azione dismiss in un po’.

Apri video.tvml e trova il tag . Aggiorna l’elemento in modo che corrisponda a quanto segue:

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

Sono stati aggiunti due nuovi attributi: actione title. Utilizzerai entrambi questi nel gestore eventi per creare il documento di testo di dettaglio espanso.

Gestione eventi

Ora che i modelli di documento sono pronti per l’uso, puoi rivolgere la tua attenzione al JavaScript che collega tutto.

Apri principale.js e aggiungere la seguente funzione:

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

Prendendo questo pezzo per pezzo:

  1. La proprietà target dell’argomento event rappresenta l’oggetto DOM che ha generato l’evento. getAttribute() di un oggetto DOM restituirà il valore per l’attributo specificato. Qui lo stai usando per trovare il valore dell’attributo action che hai aggiunto sopra.
  2. Attivare l’attributo action per richiamare il codice appropriato.
  3. Se l’azione è showOverflow, allora hai un campo descrizione con troppo contenuto. Costruisci un oggetto con i dati richiesti dal documento di testo di dettaglio espanso. Ancora una volta stai usando getAttribute() insieme a textContent, che restituisce il contenuto del tag stesso.
  4. Carica expandedDetailText.documento tvml nel solito modo, aggiungere un listener di eventi e utilizzare presentModal() su NavigationDocument per visualizzare il nuovo documento in cima al documento corrente.
  1. Se l’azione è impostata su dismiss, utilizzare dismissModal() su NavigationDocument per eseguire il licenziamento.

Ora che hai creato questo gestore di eventi, devi collegarlo al documento iniziale. Aggiungi la seguente riga a App.onLaunch, subito dopo aver chiamato loadInitialDocument():

initialDoc.addEventListener("select", _handleEvent);

Questo registra _handleEvent come listener per l’evento select e utilizza il bubbling degli eventi per gestire tutti gli eventi attivati all’interno del documento.

Crea ed esegui l’app, vai alla descrizione completa e premi il pulsante Seleziona. Vedrai la tua nuova pagina di testo di dettaglio espansa:

È possibile utilizzare il pulsante Ignora per tornare alla schermata video.

Valutazioni del visualizzatore

Nella parte finale di questo tutorial, aggiungerai una nuova sezione valutazioni alla pagina video e lascerai che l’utente selezioni una valutazione utilizzando un nuovo modello.

Apri video.tvml e aggiungere il seguente nuovo scaffale sotto lo scaffale di produzione:

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

Ormai, riconoscerai la maggior parte degli elementi TVML, ma ce ne sono ancora alcuni nuovi:

  • <ratingCard>: Visualizza una piccola scheda adatta per mostrare le valutazioni di un prodotto.
  • <ratingBadge>: Un distintivo specializzato per mostrare una stella. L’attributo value dovrebbe essere un valore compreso tra 0 e 1, che verrà convertito in una proporzione di cinque stelle.
  • <reviewCard>: Una scheda per la visualizzazione di recensioni di utenti o critici.

Si noti che l’elemento ha di nuovo l’attributo custom action. Potrai utilizzare questo in seguito per visualizzare la pagina di valutazione.

Costruisci ed esegui per vedere come appare il nuovo scaffale:

Quando l’utente seleziona la scheda di valutazione, si desidera consentire loro di scegliere una valutazione per il video corrente. Questo è esattamente ciò che il modello di rating TVML è per.

Raccolta delle valutazioni

In Xcode, fare clic con il pulsante destro del mouse sul gruppo layout e selezionare Nuovo file…. Scegliere tvOS \ Other \ Empty e assegnare un nome al file videoRating.tvml.

Apri il nuovo file e aggiungi quanto segue:

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

Questo nuovo file utilizza il che visualizza semplicemente e raccoglie le valutazioni. Contiene un <title> e un <ratingBadge>, entrambi i quali hai già visto.

Il modello è pronto; devi solo visualizzarlo. Apri principale.js e aggiungere il seguente case all’istruzione switch in _handleEvent():

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

Queste poche righe caricano il nuovo documento creato e forniscono il titolo al motore di template. Quindi visualizza il documento in modo modale.

Crea ed esegui, vai alla scheda di valutazione e premi Seleziona per visualizzare la pagina nuove valutazioni:

Ora che è uno swell-looking – ed estensibile-interfaccia.

Dove andare da qui?

È possibile scaricare il progetto finale da questo tutorial qui.

In questo tutorial hai creato una grande app TVML e utilizzato tre dei modelli incorporati insieme a una vasta gamma di elementi TVML specifici. È stato inoltre integrato un motore di template JavaScript per separare l’interfaccia utente dai dati. L’adozione di grandi tecniche di sviluppo fin dall’inizio è una vittoria nel libro di chiunque.

Puoi controllare la documentazione di Apple (apple.co/1PJuOAV) per le specifiche sui modelli e gli elementi trattati in questo tutorial.

Se ti è piaciuto quello che hai imparato in questo tutorial, perché non controllare il libro completo tvOS Apprentice, disponibile nel nostro negozio?

Ecco un assaggio di ciò che è nel libro:

Sezione I: Architettura

Questa sezione è progettata per darti una visione a volo d’uccello di come funziona tvOS e aiutarti a decidere cosa leggere dopo.

Sezione II: TVML Apps

Questa sezione copre le basi per la creazione di un’app tramite l’approccio TVML. Dalle basi di Hello World attraverso un esempio del mondo reale, alla fine di questa sezione saprai tutto ciò di cui hai bisogno per creare app client / server per Apple TV.

Sezione III: Applicazioni tradizionali

Questa sezione copre le basi per la creazione di applicazioni tramite l’approccio tradizionale. Imparerai le nuove librerie create per Apple TV e come possono essere utilizzate le librerie portate da iOS.

Sezione IV: Quadri avanzati

Questa sezione copre alcuni dei framework più avanzati necessari per molti casi d’uso delle app TV. Sia che tu abbia adottato l’approccio TVML o l’approccio tradizionale, questi framework saranno importanti da capire per far risaltare la tua app.

Sezione V: Progettazione

Questa sezione copre concetti di design importanti per tvOS. Affinché la tua app si distingua dal resto, dovrai comprendere bene questi concetti di progettazione.

Capitolo bonus

E non è tutto — in cima a quanto sopra, abbiamo un capitolo bonus per voi che vi dà un corso accelerato in JavaScript!

Alla fine di questo libro, avrai una grande esperienza pratica con la creazione di app eccitanti e di bell’aspetto per Apple TV!

E per contribuire ad addolcire l’affare, l’edizione digitale del libro è in vendita per $49.99! Ma non aspettare-questo prezzo di vendita è disponibile solo per un tempo limitato.

Parlando di offerte dolci, assicuratevi di controllare i grandi premi che stiamo dando via quest’anno con il partito di lancio di iOS 11, tra cui oltre $9,000 in omaggi!

Per entrare, è sufficiente retweet questo post utilizzando l’hashtag # ios11launchparty utilizzando il pulsante qui sotto:

Tweet

Ci auguriamo che questo aggiornamento, e rimanete sintonizzati per ulteriori versioni di libri e aggiornamenti!

raywenderlich.com Settimanale

Il raywenderlich.com newsletter è il modo più semplice per rimanere up-to-date su tutto quello che c’è da sapere come uno sviluppatore mobile.

Ottieni un digest settimanale dei nostri tutorial e corsi e ricevi un corso e-mail di approfondimento gratuito come bonus!

Valutazione Media

5/5

Aggiungere una valutazione per questo contenuto

Sign in per aggiungere una valutazione

1 valutazione

Lascia un commento

Il tuo indirizzo email non sarà pubblicato.