En este tutorial, aprenderá a usar la gran cantidad de plantillas TVML que Apple ha proporcionado para crear algunas interfaces impresionantes. Usarás estas plantillas para crear una pantalla completa para los videos de RWDevCon 2015, que incluirá una amplia gama de información sobre el video y lo mostrará de una manera atractiva y reconocible.

Primeros pasos

Puede descargar el proyecto inicial de este tutorial aquí.

La aplicación de ejemplo para este tutorial es wenderTV; le permite navegar y ver raywenderlich.contenido de vídeo com en tu Apple TV, para que puedas disfrutar de una gran cantidad de conocimientos y chistes malos desde la comodidad de tu sofá. En este momento, wenderTV está bastante vacío.

wenderTV incluye muchos recursos que usará durante este tutorial; también hemos reorganizado parte del código para que sea más fácil de entender.

Compile y ejecute el proyecto de inicio de wenderTV desde Xcode; notará que la pantalla está completamente en blanco. Esto se debe a que aún no hay documentos TVML en wenderTV. Antes de que pueda dedicar su atención a la creación de algunos documentos TVML, tiene que hacer un poco de limpieza.

Nota: Aunque puedes usar Xcode para escribir todo el código que necesitas para una aplicación basada en TVML, puede ser una experiencia bastante dolorosa. Xcode es bueno para editar Swift u Objective-C, pero solo tiene soporte rudimentario para XML y JavaScript. Definitivamente vale la pena usar Xcode cuando lo necesite y luego cambiar a un editor más capaz como Sublime Text, Atom, Visual Studio Code o MacVim para trabajar con documentos TVML y archivos JavaScript.

Cargando scripts

El proyecto para wenderTV ya tiene ResourceLoaderJS dividido en su propio archivo, por lo que debe descubrir cómo importarlo a main.js.

TVJS proporciona la función evaluateScripts() que toma una matriz de URL de archivos JavaScript y una devolución de llamada. La función lee cada URL a su vez, intenta analizarla y agrega las funciones y definiciones de objetos contenidas al objeto global del contexto. Finalmente, invoca la devolución de llamada suministrada con un booleano que indica éxito o fracaso.

El AppDelegate contiene código que proporciona a la aplicación JavaScript una lista de direcciones URL a los archivos JavaScript necesarios como parte del objeto opciones de lanzamiento. Abre la central.js y agregue el siguiente código a la función 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."); } });

Tomando este nuevo cuerpo de funciones paso a paso:

  1. El objeto options se prepara en Swift y luego se pasa a la aplicación JavaScript en el delegado de aplicación, mientras que la propiedad initialJSDependencies es una matriz de direcciones URL para los diferentes archivos JavaScript que deben cargarse cuando se inicia la aplicación. evaluateScript() realiza esta acción y luego invoca la devolución de llamada indicando si se realizó correctamente.
  2. Si las fuentes JavaScript se evaluaron correctamente, cree un objeto ResourceLoaderJS antes de usarlo para cargar el documento inicial y, a continuación, empujar este documento TVML a la pila de navegación. loadInitialDocument() es actualmente un método stub que completarás en un momento.
  3. Si los archivos JavaScript no se cargaron, no hay nada más que la aplicación pueda hacer. Por lo tanto, utiliza _createAlert(), definido en la parte inferior de main.js para crear y presentar un documento de alerta y luego lanzar un error.

Añádase lo siguiente a loadInitialDocument():

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

Utiliza el cargador de recursos para obtener el archivo TVML del paquete de recursos de la aplicación y devolverlo como un objeto DOM.

A continuación, tendrás que crear el archivo que tu app intenta cargar: video.tvml.

Diríjase a Xcode y haga clic con el botón derecho en el grupo diseños en el navegador de proyectos. Seleccionar Nuevo Archivo…:

Vaya a tvOS\Other\Empty y presione Siguiente. Nombre el archivo de vídeo.tvml y asegúrese de que el destino wenderTV esté marcado:

Abra el nuevo archivo en su editor XML favorito (o Xcode, si insiste) y agregue las siguientes líneas:

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

Esto define un documento TVML simple utilizando un nuevo tipo de plantilla: productTemplate.

Compile y ejecute la aplicación para ver cómo se ven las cosas hasta ahora:

Hmm. La pantalla sigue en blanco. Aunque ha creado el archivo y proporcionado la plantilla, no ha proporcionado ningún contenido. Lo arreglarás en breve, pero primero debes cubrir un poco el fondo de las plantillas TVML.

Plantillas TVML

Un documento TVML es solo un documento XML (Lenguaje de marcado extensible) con un esquema específico definido por Apple. Si has usado HTML en el pasado, el XML te resultará familiar. HTML no es realmente XML (a pesar de algunos esfuerzos fallidos con XHTML), pero la sintaxis y la estructura son bastante similares.

Dado que los documentos TVML son XML, deben comenzar con la siguiente línea:

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

Esto se conoce como el prólogo XML; señala que este archivo es un documento XML y qué codificación de caracteres utiliza.

El documento TVML tiene un elemento raíz , que es un elemento único en el nivel superior del documento y el padre (o antepasado) de todos los demás elementos. El elemento tiene un único descendiente directo, que puede ser una de las 18 etiquetas de plantilla posibles.

Una etiqueta de plantilla especifica el diseño de nivel superior que los tvOS deben usar para representar el documento en pantalla. Además de especificar la apariencia en pantalla, las etiquetas de plantilla también transmiten información semántica sobre el contenido que contienen. Las plantillas pueden parecer similares, pero tienen propósitos completamente diferentes.

Las plantillas TVML se pueden dividir en las siguientes categorías:

  • Informativo: Muestra una pequeña cantidad de información al usuario y, opcionalmente, solicita información al usuario. No está diseñado para contenido navegable. Incluye placa de alerta y placa de carga.
  • Entrada de datos :La experiencia del usuario de ingresar datos en televisores es bastante horrible, y el Apple TV no es diferente. Sin embargo, hay algunas plantillas para solicitar datos al usuario, incluidas searchTemplate y ratingTemplate.
  • Artículo único: Muestra información o contenido sobre un solo producto o elemento, como una película o un episodio de una serie de televisión. Incluye placa de producto, placa de Oneupt, placa de compilación y placa de Showcaset.Colecciones
  • : Muestra una colección de productos, como una serie de televisión, un género de películas o pistas de un álbum. Incluye stackTemplate, listTemplate y productBundle.
  • Otros: Incluye menuBarTemplate, que aloja un conjunto de otras plantillas, y divTemplate, que es una pizarra completamente limpia sobre la que se dibuja.
Nota: En lugar de entrar en detalles aquí sobre todas y cada una de las plantillas, la referencia de Apple es un gran recurso para obtener información detallada sobre las diferentes plantillas, sus capacidades y diseños: apple.co/1PJuOAV.

La plantilla de producto

El primer documento que creará utiliza , que está diseñado para mostrar toda la información relacionada con un producto específico, en este caso, un video.

Abrir vídeo.tvml y agregue el siguiente código entre las etiquetas :

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

Este fragmento de código introduce muchos tipos de elementos nuevos. Tomarlos uno por uno:

  • <banner>: Muestra contenido en la parte superior de una página.
  • <infoList>: Muestra una lista de elementos , dispuestos en una lista vertical.
  • <info>: Actúa como un contenedor para que este contenido aparezca como un elemento en un o un .
  • <header>: Sirve como descripción del contenido de la sección en la que reside.
  • <title>: Contiene el texto de un título corto.
  • <text>: Muestra texto.

Compile y ejecute la aplicación para ver cómo se ve su nuevo TVML:

Esta página representa un video, pero actualmente carece de título. Es hora de cambiar eso.

Agregue lo siguiente dentro de las etiquetas <banner>, justo después de la etiqueta de cierre :

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

Esta sección presenta más elementos TVML:

  • <stack>: Las pilas presentan su contenido verticalmente hacia abajo de la pantalla de una manera similar a . Hay una gama más amplia de etiquetas que pueden estar en una pila.
  • <row&gt: Una fila es como una pila, pero con una orientación horizontal en lugar de vertical.
  • <badge&gt: Las insignias muestran una pequeña imagen en línea. La URL es proporcionada por el atributo src.

Observe que la URL de las dos imágenes de insignia comienza con resource://. Este es un esquema de URL especial que apunta a imágenes que existen dentro de tvOS. Estas imágenes incluyen iconos de acción comunes, como» reproducir», imágenes de clasificación para diferentes países e información de video como HD.

Nota: Para obtener una lista completa de las imágenes de recursos disponibles en tvOS, consulte la documentación de Apple en apple.co/1T930o9.

Compilar y ejecutar de nuevo para ver cómo se está perfilando la página:

Está empezando a verse bien, pero aún queda un largo camino por recorrer. Antes de continuar con la codificación de plantillas, primero debe considerar la separación de los datos y la vista.

Inyección de datos

Tal y como se encuentra actualmente su documento de vídeo, todos los datos están codificados. Para mostrar información sobre un video diferente, tendrías que crear una página completamente nueva. Si quisieras reformatear la página de vídeo una vez que hayas creado todas las páginas, tendrías que volver y editar cada una de ellas.

Un enfoque mucho mejor es utilizar un motor de plantillas, en el que se construye la página de vídeo como plantilla y se especifica dónde se deben inyectar los datos. En tiempo de ejecución, el motor de plantillas toma la plantilla de página junto con los datos y genera la página TVML para que se muestren los tvOS.

Nota: La palabra «plantilla» se utiliza ahora para dos propósitos diferentes: las plantillas TVML son los diseños proporcionados por tvOS que muestran sus documentos en la pantalla, mientras que un motor de plantillas utiliza documentos de plantilla combinados con datos para generar documentos TVML completos. No te preocupes demasiado por la distinción; será mucho más claro una vez que los hayas usado a ambos.

Bigote.js es un popular motor de plantillas simples para JavaScript. Es posible que reconozca la sintaxis de plantillas que se basa en llaves:

{{property-name}}

El Bigote.la biblioteca js ya es parte de wenderTV, pero necesita construir los mecanismos para usarla. Esto le presenta varias tareas para llevar a cabo:

  • Los datos se almacenan como archivos JSON en el paquete de aplicaciones. La aplicación JavaScript necesita la capacidad de solicitarlos.
  • Cuando se carga un documento, ahora requiere datos, y esto debe combinarse con la cadena de documento usando Bigote.js.
  • Las imágenes que están presentes en el paquete de aplicaciones necesitan su URL completa sustituida.
  • El documento de vídeo debe actualizarse para convertirlo en un documento con plantilla.

Dirigirás cada una de ellas en orden.

Nota: A partir de tvOS 11, TVML admite el concepto de prototipos en TVML que aprovechan el enlace de datos para vincular elementos de datos al TVML. Esto reduce la redundancia de código y mejora el rendimiento al paginar conjuntos de contenido grandes, como una gran lista de videos de YouTube en formato de vista de cuadrícula.

Sin embargo, la creación de prototipos solo está disponible en el nivel <section>, mientras la usas en este tutorial para mucho más, como en la sección <header> de tu TVML. Seguirás usando bigote.js como motor de plantillas para esta sección del libro, pero si termina teniendo que manejar conjuntos de contenido grandes en sus aplicaciones tvOS, lea sobre creación de prototipos y enlace de datos en apple.co/2utDXXm.

Lectura de JSON Del Paquete de aplicaciones

Cargador de recursos abierto.js y agregue el siguiente método a ResourceLoaderJS:

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

Esta función utiliza el cargador de recursos nativo para extraer el archivo JSON del paquete de aplicaciones antes de analizarlo en un objeto JavaScript.

Nota: Sería relativamente sencillo reemplazar esta funcionalidad con un método que llame a un servidor remoto para obtener datos en lugar de encontrar datos estáticos dentro del paquete de aplicaciones. El resto de este enfoque de plantillas continuaría funcionando tal como está.

Inyectar datos En la cadena de documento

Ahora que puede obtener los datos de una página determinada, debe combinarlos con la plantilla del documento en sí. Actualice getDocument() en ResourceLoaderJS para que coincida con lo siguiente:

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

Aquí ha agregado un argumento data adicional al método y ha utilizado render en Mustache para convertir la plantilla y los datos en un documento completo. Como antes, se utiliza DOMParser para convertir la cadena de documento en un objeto DOM.

Resolución de URL de imágenes

Para simplificar, los datos de muestra almacenan imágenes como nombres de archivos en el paquete de aplicaciones, que deben convertirse en URL antes de poder mostrarlas. Las funciones de utilidad para hacer esto ya están en el cargador de recursos, por lo que solo necesita llamarlas. Lo hará al mismo tiempo que actualiza la carga inicial del documento para usar el motor de plantillas.

Abrir principal.js y actualizar loadInitialDocument() para que coincida con lo siguiente:

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

Primero, cargue los datos utilizando el nuevo método getJSON(). A continuación, utilice las funciones de utilidad para realizar la conversión de nombre de imagen a URL. Estos convierten tres fuentes de nombres de imagen diferentes:

  • Cada valor en el objeto images en la matriz de datos.
  • Cada valor asociado a una clave de image en cualquier lugar de la estructura de datos JSON.
  • Un conjunto de imágenes compartidas que son útiles para todos los documentos de wenderTV.

Que se encarga de la fontanería debajo; está listo para usar esta nueva y poderosa funcionalidad.

Usando el Bigote.Plantillas js

Trabajo en equipo abierto.json y echa un vistazo a los datos que usarás para rellenar la página de vídeo. Hay una gran cantidad de datos, pero es un objeto JSON estándar y bastante fácil de entender. Debes detectar algunos campos como title, presenter y duration que ya hayas codificado en video.tvml. Ahora vas a cambiarlos.

Abrir vídeo.tvml y encuentra la etiqueta de título que contiene a Ray Wenderlich. Reemplace el nombre por {{presenter}}, de modo que la primera sección ahora se vea así:

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

La sintaxis para Bigote.js es muy simple; reemplazará {{presenter}} por el valor de presenter en el objeto de datos que se le suministre.

Ahora que he cogido el tranquillo a eso, usted puede reemplazar el siguiente contenido con las respectivas etiquetas de plantilla:

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

Generar y ejecutar; usted no ve ninguna diferencia, que es exactamente lo que usted desea. La página ahora está basada en datos, y aún mejor, no rompiste nada. ¡Bonus! :]

Todavía hay algunas partes de la plantilla que no has tocado: subtítulos cerrados, HD y etiquetas. Estos usan algunas partes ligeramente más avanzadas del bigote.motor de plantillas js.

Secciones de plantilla

Elimine las tres etiquetas en la sección Etiquetas y agregue lo siguiente en su lugar:

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

Esta nueva sintaxis define una sección de plantilla. Mira el trabajo en equipo.json y verás que tags es una matriz de cadenas. El Bigote.aquí, la sintaxis js recorre el array, con {{.}} mostrando el contenido del índice actual.

Finalmente, debe manejar las dos insignias booleanas. Reemplace las insignias cc y hd con las siguientes:

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

Una vez más, estás usando secciones, pero esta vez están estructuradas como una instrucción if. Si la propiedad especificada existe y tiene un valor true, renderice esta sección; de lo contrario, ignórela.

Compilar y ejecutar de nuevo; echa un vistazo a tu página de vídeo con plantilla recién creada.

Para confirmar que la inyección de datos está funcionando, abra main.js y cambiar el archivo de datos cargado en loadInitialDocument() de trabajo en equipo.json a identidad.json. Compile y vuelva a ejecutar para ver el cambio de datos.

Ahora puedes ver los detalles de la charla de Vicki sobre identidad — ¡dulce!

en

Rellenar la plantilla TVML

La página de vídeo sigue pareciendo un poco estéril. Es hora de duplicar la adición de contenido.

Abrir vídeo.tvml y agregue lo siguiente dentro del <stack>, justo debajo del existente <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>

Una vez más, esto introduce algunos nuevos elementos TVML:

  • <description>: Muestra una mayor cantidad de texto que se utiliza para describir el contenido. Si el texto es demasiado largo para el área de visualización, se mostrará una etiqueta con un título definido por el atributo moreLabel.
  • &ltbuttonLockup>: Un lockup es una clase de elemento que une a sus hijos como un solo elemento. Un bloqueo de botón puede contener texto y una insignia y aparecerá como un botón.

Recuerde que todos estos elementos están contenidos dentro de un <stack>, por lo que aparecerán uno encima del otro.

Antes de revisar su trabajo, debe agregar un elemento más al banner superior. Agregue la siguiente línea inmediatamente después de la etiqueta de cierre </stack> :

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

Un elemento heroImg es una imagen grande que define el contenido de este documento. Aparece dentro de <banner> y tvOS lo usa para definir el fondo de página borroso.

Compilar y ejecutar para ver el banner superior completado:

Está empezando a verse muy bien, ¡Pero espera! Es posible que ahora haya notado que el color del texto ha cambiado de negro a blanco. ¿Cómo pasó eso?

tvOS decidió que, debido a que la imagen de fondo que especificó es más oscura que un umbral determinado, necesitaba aumentar el contraste de su texto, por lo que cambió el color predeterminado del texto.

Actualice la etiqueta <productTemplate> para que coincida con lo siguiente:

<productTemplate theme="light">

Construye y corre para ver la diferencia:

El efecto visual en el fondo ha cambiado junto con los colores de fuente del primer plano. Puede cambiar el atributo theme a dark si desea forzar el aspecto anterior si lo prefiere.

Nota: El comportamiento predeterminado ha cambiado desde la versión anterior de tvOS, por lo que es posible que deba definir explícitamente theme para obtener el efecto al que está acostumbrado. Además, no confundas este comportamiento con el nuevo modo oscuro introducido por Apple en tvOS 10. Eso se tratará con más detalle más adelante en el libro.

Agregar Estantes

El resto de la productTemplate se compone de «estantes». Un estante es una sección horizontal de la página con elementos de contenido que se desplazan dentro y fuera de la pantalla.

Agregue lo siguiente debajo de la etiqueta </banner> de cierre, hacia la parte inferior 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>

Este estante muestra un conjunto de otros vídeos que el usuario puede disfrutar según se define en la propiedad recommendations del modelo de datos. Cada recomendación tiene un image y un title, cada uno de los cuales se utiliza en el código anterior.

Hay otros dos elementos introducidos en este segmento de código:

  • <section>: Define un conjunto de contenidos relacionados que deben estar todos juntos. Una sección puede contener un título y varios elementos de bloqueo.
  • <lockup>: Viste <buttonLockup> antes; lockup es un tipo de bloqueo más general. Proporciona un diseño para una imagen, un título, una insignia y una descripción.

Ahora agregue otro estante debajo del que acaba de crear:

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

Este estante muestra una lista de personas asociadas con la producción; se almacena en la propiedad people en el modelo de datos.

Esto introduce los elementos y , que te permiten representar a una persona cuando un avatar no está disponible. Al igual que los otros elementos de bloqueo, un bloqueo de monograma simplemente bloquea su contenido.

Un monograma tiene atributos firstName y lastName, a partir de los cuales genera un monograma (iniciales) y lo coloca en un círculo grande.

Construye y corre para ver cómo están tomando forma tus estanterías. Tendrás que desplazarte hacia abajo para revelar el estante inferior:

Echa un vistazo a la descripción de la charla sobre «Identidad». Observe que la etiqueta más ha aparecido, porque hay demasiado texto para mostrar en el espacio disponible. Navegue hasta la etiqueta y verá que puede centrarse en la descripción y presionar seleccionar para activar una acción. Esta acción no hace nada actualmente, pero ¿no sería bueno que mostrara el texto completo?

Tiempo para otra plantilla TVML.

Manejo de desbordamiento de texto

La plantilla de alerta descriptiva proporciona espacio para un área extendida de texto y botones. Suena ideal para este propósito. Usarás esta plantilla y un poco de JavaScript para conectarla.

En el proyecto Xcode, haga clic con el botón derecho en el grupo diseños y seleccione Nuevo archivo…. Elija tvOS \ Other \ Empty y nombre el archivo expandedDetailText.tvml.

Abra el nuevo archivo y agregue lo siguiente:

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

Esto debería ser bastante sencillo de entender. Está el prólogo XML habitual, la etiqueta y algunos elementos que has usado antes. Observe que la etiqueta button tiene un atributo action; este es un atributo definido por el usuario que no forma parte de la especificación TVML.

Puede definir los atributos que desee (siempre que no entren en conflicto con los atributos existentes) y luego leerlos desde su aplicación JavaScript. Escribirás un poco de código para manejar esta acción dismiss en solo un poco.

Abrir vídeo.tvml y encuentra la etiqueta . Actualice el elemento para que coincida con lo siguiente:

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

Has añadido dos atributos nuevos: action y title. Usarás ambos en el controlador de eventos para crear el documento de texto con detalles expandidos.

Gestión de eventos

Ahora que las plantillas de documentos están listas para usar, puede dirigir su atención al JavaScript que lo conecta todo.

Abrir principal.js y agregue la siguiente función:

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

Tomando esta pieza por pieza:

  1. La propiedad target del argumento event representa el objeto DOM que disparó el evento. getAttribute() de un objeto DOM devolverá el valor para el atributo especificado. Aquí lo estás usando para encontrar el valor del atributo action que agregaste anteriormente.
  2. Active el atributo action para invocar el código apropiado.
  3. Si la acción es showOverflow, entonces tiene un campo de descripción con demasiado contenido. Construya un objeto con los datos requeridos por el documento de texto con detalles expandidos. Una vez más, estás usando getAttribute() junto con textContent, que devuelve el contenido de la etiqueta en sí.
  4. Cargue el texto detallado expandido.documento tvml de la manera habitual, agregue un receptor de eventos y use presentModal() en NavigationDocument para mostrar el nuevo documento encima del documento actual.
  1. Si la acción está establecida en dismiss, use dismissModal() en NavigationDocument para realizar la desestimación.

Ahora que ha creado este controlador de eventos, necesita enviar el documento inicial. Agregue la siguiente línea a App.onLaunch, justo después de llamar loadInitialDocument():

initialDoc.addEventListener("select", _handleEvent);

Esto registra _handleEvent como un oyente para el evento select y usa el burbujeo de eventos para manejar todos los eventos activados dentro del documento.

Compile y ejecute la aplicación, vaya a la descripción completa y presione el botón seleccionar. Verás tu nueva página de texto con detalles expandidos:

Puede usar el botón descartar para volver a la pantalla de vídeo.

Calificaciones de los espectadores

En la parte final de este tutorial, agregará una nueva sección de calificaciones a la página de video y permitirá que el usuario seleccione una calificación utilizando una nueva plantilla.

Abrir vídeo.tvml y agregue el siguiente estante nuevo debajo del estante de producción:

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

Por ahora, reconocerá la mayoría de los elementos TVML, pero todavía hay algunos nuevos:

  • <ratingCard>: Muestra una pequeña tarjeta adecuada para mostrar las calificaciones de un producto.
  • <ratingBadge>: Una insignia especializada para mostrar una clasificación por estrellas. El atributo value debe ser un valor entre 0 y 1, que se convertirá en una proporción de cinco estrellas.
  • <reviewCard>: Una tarjeta para mostrar comentarios de usuarios o críticos.

Observe que el elemento tiene de nuevo el atributo personalizado action. Usarás esto más adelante para mostrar la página de calificación.

Compile y ejecute para ver cómo se ve el nuevo estante:

Cuando el usuario selecciona la tarjeta de calificación, desea que elija una calificación para el video actual. Para esto es exactamente para lo que sirve la plantilla TVML de calificaciones.

Recopilación de clasificaciones

En Xcode, haga clic con el botón derecho en el grupo diseños y seleccione Nuevo archivo…. Elija tvOS \ Other \ Empty y asigne un nombre a la videoRación del archivo.tvml.

Abra el nuevo archivo y agregue lo siguiente:

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

Este nuevo archivo utiliza , que simplemente muestra y recopila calificaciones. Contiene un <title> y un <ratingBadge>, los cuales ya has visto.

La plantilla está lista; solo tiene que mostrarla. Abre la central.js y agregue lo siguiente case a la instrucción switch en _handleEvent():

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

Estas pocas líneas cargan el nuevo documento que ha creado y proporcionan el título al motor de plantillas. A continuación, muestra el documento de forma modal.

Compilar y ejecutar, vaya a la tarjeta de calificación y presione seleccionar para ver la nueva página de calificaciones:

Ahora que es una interfaz de aspecto impresionante y extensible.

a Dónde Ir Desde Aquí?

Puede descargar el proyecto final de este tutorial aquí.

En este tutorial, ha creado una aplicación TVML de gran apariencia y ha utilizado tres de las plantillas integradas junto con una amplia gama de elementos específicos de TVML. También integró un motor de plantillas JavaScript para separar la interfaz de usuario de los datos. Adoptar excelentes técnicas de desarrollo desde el principio es una victoria para cualquiera.

Puede consultar la documentación de Apple (apple.co/1PJuOAV) para obtener información específica sobre las plantillas y los elementos que se tratan en este tutorial.

Si disfrutaste de lo que aprendiste en este tutorial, ¿por qué no echas un vistazo al libro completo de aprendices de tvOS, disponible en nuestra tienda?

He aquí una muestra de lo que hay en el libro:

Sección I: Arquitectura

Esta sección está diseñada para darle una vista panorámica de cómo funciona tvOS y ayudarlo a decidir qué leer a continuación.

Sección II: Aplicaciones TVML

Esta sección cubre los aspectos básicos para crear una aplicación a través del enfoque TVML. Desde lo básico de Hello World hasta un ejemplo del mundo real, al final de esta sección sabrás todo lo que necesitas para crear aplicaciones cliente / servidor para Apple TV.

Sección III: Aplicaciones tradicionales

Esta sección cubre los conceptos básicos para crear aplicaciones a través del enfoque tradicional. Conocerás las nuevas bibliotecas creadas para Apple TV y cómo se pueden usar las bibliotecas portadas de iOS.

Sección IV: Marcos avanzados

Esta sección cubre algunos de los marcos más avanzados que necesitará para muchos casos de uso de aplicaciones de TV. Ya sea que haya adoptado el enfoque TVML o el enfoque tradicional, será importante comprender estos marcos para que su aplicación destaque.

Sección V: Diseño

Esta sección cubre conceptos de diseño importantes para tvOS. Para que tu aplicación se distinga del resto, necesitarás entender bien estos conceptos de diseño.

Capítulo de bonificación

Y eso no es todo — además de lo anterior, tenemos un capítulo de bonificación para ti que te ofrece un curso intensivo de JavaScript.

Al final de este libro, tendrás una gran experiencia práctica con la construcción de aplicaciones emocionantes y atractivas para el Apple TV.

Y para ayudar a endulzar el trato, la edición digital del libro está a la venta por 4 49.99! Pero no espere, este precio de venta solo está disponible por un tiempo limitado.

Hablando de dulces ofertas, asegúrate de echar un vistazo a los grandes premios que regalaremos este año con la Fiesta de Lanzamiento de iOS 11, ¡incluidos más de 9 9,000 en regalos!

Para entrar, simplemente retuitea esta publicación usando el hashtag # ios11launchparty usando el botón de abajo:

Tweet

¡Esperamos que disfrute de esta actualización y esté atento a más lanzamientos y actualizaciones de libros!

raywenderlich.com Semanalmente

raywenderlich.com el boletín de noticias es la forma más fácil de mantenerse al día sobre todo lo que necesita saber como desarrollador móvil.

Obtenga un resumen semanal de nuestros tutoriales y cursos, y reciba un curso gratuito en profundidad por correo electrónico como bono!

la Calificación Promedio

5/5

Añadir una clasificación para este contenido

iniciar sesión para añadir una clasificación

1 clasificación

Deja una respuesta

Tu dirección de correo electrónico no será publicada.