DESARROLLO DE UN WIDGET DE YAHOO! PARA TV PARA LA SOLICITUD DE CITA MÉDICA

Proyecto Fin de Carrera María León Bujes

4. Desarrollo de widgets de Yahoo! para TV 4.1 Metodología de desarrollo basada en Framework 4.1.1 Introducción al KONtx Framework En el contexto del presente proyecto, los widgets pueden considerarse como RIAs (aplicaciones de Internet enriquecidas) que corren en dispositivos electrónicos Connected TV y que hacen uso de servicios de Internet para entregar contenido dinámico a la audiencia mientras ve un vídeo o un programa de televisión. Como ya se ha mencionado, la plataforma Yahoo! Connected TV basada en el Yahoo! Widget Engine permite a los desarrolladores programar widgets usando únicamente JavaScript y XML. Para el diseño e implementación de estos Widgets de TV se utiliza una metodología de desarrollo basada en framework (concretamente en el KONtx Framework). El Yahoo! Widget Engine Toolbox Framework (KONtx Framework), el cual está definido en el archivo JavaScript Framework/kontx/version/src/all.js, proporciona múltiples controles estándar (botones, elementos de texto, imágenes...), que permiten al desarrollador crear vistas personalizadas muy rápidamente. Un par de líneas de código son suficientes para añadir un elemento de texto, una imagen, un grid o un botón. Además, como se comentó anteriormente, el KONtx Framework sigue un modelo de herencia clásico, similar al usado por el MOOtools browser JS framework7. Esto permite extender fácilmente los controles básicos proporcionando funcionalidad adicional. En efecto, cada control presenta una estructura de eventos bien definida y consistente, que permite al desarrollador añadir su propia lógica con el mínimo esfuerzo. El uso del Yahoo! Widget Toolbox, implementado por el KONtx Framework, ofrece las siguientes ventajas: 

Ayuda a racionalizar el proceso de desarrollo de widgets.



Proporciona encapsulación de objetos primitivos para proveer funcionalidad extendida.



Proporciona una interfaz de programación normalizada consistente.

7

Moo Tools es un framework JavaScript orientado a objetos compacto y modular, diseñado para el desarrollador JavaScript con un nivel de intermedio a avanzado. Permite escribir un código potente, flexible y cross-browser con su coherente y bien documentada API.

16

DESARROLLO DE UN WIDGET DE YAHOO! PARA TV PARA LA SOLICITUD DE CITA MÉDICA



Proyecto Fin de Carrera María León Bujes

Facilita y promueve la adopción de líneas de diseño comunes por parte de todos los desarrolladores.

Los estándares soportados en el Yahoo! Widget Toolbox son: 

Estructura de nodos DOM 2.



Modelo de eventos DOM 2.



XPath8.



CSS Limitado: o No se admiten selectores CSS, los estilos se especifican inline. o No hay posicionamiento relativo. o Modelo de cajas (box model) limitado.

Pero el KONtx Framework, además de proporcionar componentes de interfaz de usuario pre-empaquetados y "bloques de construcción" para el desarrollador de widgets, es el encargado de encapsular todas las comunicaciones con el Yahoo! Widget Engine. El KONtx Framework escucha los eventos procedentes del Yahoo! Widget Engine que son pasados al widget a través del widget Container. El Container es el software de encapsulamiento que maneja la comunicación y la presentación de los widgets en el dispositivo y está a cargo de todos esos elementos que están fuera del control de los widgets individuales (por ejemplo, dock, barra lateral, barra de herramientas global, activación de snippets, añadir y borrar widgets, y otras). Resumiendo, un Widget de TV, escrito usando la notación literal de Objetos de JavaScript, hace llamadas al KONtx Framework que se comunica con el motor de widgets a través del widget Container y la API del Container. El widget Container maneja el dock y todos los widgets que se ejecutan simultáneamente en un perfil de usuario. La figura 6 ilustra la pila de llamadas que tiene lugar durante la ejecución de un widget. El KONtx Framework simplifica el trabajo de desarrollo de widgets al liberar al programador de un gran número de tareas. También contribuye a mejorar el rendimiento de los widgets y en consecuencia la experiencia de usuario, al maximizar el uso de la caché del motor de widgets.

8

XPath (XML Path Language): lenguaje que permite construir expresiones que recorren y procesan un documento XML.

17

DESARROLLO DE UN WIDGET DE YAHOO! PARA TV PARA LA SOLICITUD DE CITA MÉDICA

Proyecto Fin de Carrera María León Bujes

Ilustración 8: Pila de llamadas en el desarrollo con el KONtx Framework.

4.1.2 Vistas y clases de vista Gracias al KONtx Framework, el código de los widgets se estructura en torno a vistas y a clases base de vistas. Cada una de las vistas inicializadas por el manejador de aplicación extiende alguna de las clases de vista base del KONtx Framework. Así, los distintos tipos de vista de cualquier widget (snippet, sidebar y fullscreen) están representadas por las siguientes clases base: 

KONtx.system.SnippetView Esta vista es una clase base abstracta para snippets. Para crear snippets deben usarse AnchorSnippetView y ProfileSnippetView en su lugar. Si se usa KONtx.system.SnippetView la clase que la extiende tiene que implementar sus métodos abstractos.



KONtx.system.AnchorSnippetView Estamos ante la vista principal del snippet. Esta vista no se borra al cambiar de perfil si los dos perfiles tienen el widget instalado.



KONtx.system.ProfileSnippetView Vista de snippet específica para un perfil determinado. Esta vista se borra cuando cambiamos de perfil (ingresamos bajo un perfil distinto). 18

DESARROLLO DE UN WIDGET DE YAHOO! PARA TV PARA LA SOLICITUD DE CITA MÉDICA



Proyecto Fin de Carrera María León Bujes

KONtx.system.SidebarView Vista lateral.



KONtx.system.FullscreenView Vista a pantalla completa.

Para crear una vista de un widget basta extender la clase de vista base correspondiente, sobrescribiendo dos métodos específicos de la misma: createView() y updateView(). Estos métodos responden a los dos conceptos fundamentales en los cuales se basa la implementación de las vistas: la creación de componentes de interfaz de usuario y la actualización de contenido. El método createView() es el encargado de crear los componentes básicos de interfaz de usuario de la vista. El método createView() se llama una única vez y en el momento de hacerlo el contenido aún no se ha incluido. Por su parte, el método updateView() es el que se encarga de dotar de contenido a la vista. A diferencia del método createView() el método updateView() se llama cada vez que el usuario accede a la vista, o cuando los datos en la vista han sido actualizados. Los componentes de interfaz de usuario de la vista no necesitan ser renderizados de nuevo para actualizar los datos de la vista. El uso de los métodos createView() y updateView() permiten al motor de widgets optimizar su renderizado de vistas. Una vez que createView() es llamado, el motor de widgets no necesita crear los elementos XML en la pantalla de nuevo. Llamar al método updateView() es rápido porque en él se sustituye el contenido dentro de la vista sin tener que volver a generar el XML con la estructura de la misma. Cada widget tiene un ciclo de vida durante el cual va haciendo visibles las distintas vistas de su interfaz de usuario. Un ejemplo de ciclo de vida en un widget puede ser: activación, ejecución de operaciones y desactivación. Cada vista a su vez también tiene un ciclo de vida. Así, una vista es cargada, hecha visible y descargada. El siguiente diagrama resume el ciclo de vida de un widget, incluyendo los estados de las vistas y los métodos llamados durante las transiciones entre estados.

19

DESARROLLO DE UN WIDGET DE YAHOO! PARA TV PARA LA SOLICITUD DE CITA MÉDICA

Proyecto Fin de Carrera María León Bujes

Ilustración 9: Ciclo de vida de un widget.

La auto-reanudación es el proceso por el cual una vista se oculta y vuelve a ser mostrada de nuevo, ya sea a través del botón volver o por otros medios. Cuando la vista se oculta, se libera memoria gracias a la acción del garbage collector. Para ofrecer un contexto consistente al usuario, es posible que el desarrollador del widget desee que la vista se reanude con los mismos datos, foco y estado que mostraba cuando se mostró previamente. Para que un control sea reconocido como objeto de esta auto-reanudación dentro de cada vista es necesario guardarlo en la estructura this.controls. Además de this.controls existen otras estructuras muy útiles en el desarrollo de widgets. El siguiente listado resume las estructuras más usadas en la creación de vistas: 

this.config – Propiedades pasadas a la vista en la instanciación de la misma.



this.persist – Almacenamiento persistente para cualquier cosa que se quiera

que permanezca cuando la vista se recargue tras la acción del garbage collector. 

this.cache – Estructuras para datos transitorios.



this.controls – Referencias a los controles de la vista.

4.1.3 Gestión de eventos La gestión de eventos permite a los widgets escuchar los input del usuario (por ejemplo cuando aprieta un botón del mando a distancia) y, en general, escuchar los eventos del Widget Engine así como disparar y enviar eventos a este último. Como se mencionó anteriormente, una de las funciones del KONtx Framework es encapsular las comunicaciones entre los widgets y el Yahoo! Widget Engine. 20

DESARROLLO DE UN WIDGET DE YAHOO! PARA TV PARA LA SOLICITUD DE CITA MÉDICA

Los

Proyecto Fin de Carrera María León Bujes

eventos

procedentes del Widget Engine son capturados por la clase KONtx.application y redifundidos a los widgets individuales como eventos del tipo KONtx.system.Event. Host Events son aquellos eventos del Host, procedentes del Widget Engine, a los que nuestro widget puede suscribirse. Los

Para suscribir un widget a un evento del Host se hace uso del método subscribeTo: /*El método subscribeTo() se añade a todas las instancias del objeto Function con la ayuda del objeto prototype de JavaScript*/ void Function.prototype.subscribeTo(Object publishingObject, StringOrArray eventTypes, Object bindingScope);

Al suscribir nuestro widget o una determinada vista a un evento del Host, dependiendo de dicho evento, la suscripción se realiza a través de KONtx.HostEventManager o bien a través de KONtx.application. Esto se especifica en el parámetro publishingObject del método subscribeTo() antes mencionado. Los dos ejemplos siguientes ilustran los métodos de suscripción a eventos a disposición del desarrollador de widgets. Ejemplo de suscripción a eventos por medio del KONtx.HostEventManager: function hostEventViewSpecificDispatcher(event) { switch(event.type) { case 'onActivateAppButton': switch(event.payload.type) { case 'app-back': break; case 'app-home': case 'app-title': break; case 'app-settings': break; case 'app-fav-add': case 'app-fav-delete': break; } break; case 'onSelect': break; case 'onUnselect': break; } } hostEventViewSpecificDispatcher.subscribeTo(KONtx.HostEventManager, [ 'onActivateAppButton', 'onSelect', 'onUnselect' ]);

21

DESARROLLO DE UN WIDGET DE YAHOO! PARA TV PARA LA SOLICITUD DE CITA MÉDICA

Proyecto Fin de Carrera María León Bujes

Ejemplo de suscripción a eventos a través de KONtx.application: var EventHandlers = { onApplicationStartup: function(event) { }, onCountryCodeChanged: function(event) { }, getProfileSnippetConfs: function(event) { }, onNetworkRestored: function(event) { } }; EventHandlers.onApplicationStartup.subscribeTo(KONtx.application, ['onApplicationStartup'], EventHandlers); EventHandlers.onCountryCodeChanged.subscribeTo(KONtx.application, ['onCountryCodeChanged'], EventHandlers); EventHandlers.getProfileSnippetConfs.subscribeTo(KONtx.application, ['getProfileSnippetConfs'], EventHandlers); EventHandlers.onNetworkRestored.subscribeTo(KONtx.application, ['onNetworkRestored','onNetworkConnectionReconnect'], EventHandlers);

El desarrollador también puede hacer que su widget se suscriba a eventos procedentes de otro publicador. Un ejemplo de publicador distinto es el KONtx message center que, además de proporcionar una tabla que almacena pares clave-valor para almacenar mensajes accesibles desde las distintas vistas, genera eventos broadcast cuando se añaden nuevos datos o se actualizan los que ya existían. Ejemplo de suscripción al evento de cambio en los mensajes del KONtx message center: function logDatasetChange(event) { log("Data for key: " + event.payload.key + " changed value to: "+ event.payload.value); } logDatasetChange.subscribeTo(KONtx.messages, KONtx.messages.eventType); KONtx.messages.store("fibseq", [1,1,2,3,5,8,13,21]);

Por otra parte, un desarrollador también puede hacer que su widget dispare eventos y los envíe al Widget Engine para que éste actúe en consecuencia. Los Child Events, son aquellos eventos del Host que un widget individual puede disparar y enviar al Widget Engine usando el método KONtx.HostEventManager.send(). Un ejemplo de Child Event puede ser el evento "Exit to Dock" que un widget puede disparar pasando "exitToDock" como parámetro en la llamada al método send(): KONtx.HostEventManager.send("exitToDock");

Esta llamada tendría como resultado que el widget devuelve el control al Widget Engine, el cual muestra el dock en la pantalla. Un listado completo de los diferentes eventos puede encontrarse en la documentación publicada por Yahoo! sobre la API del TV Widget KONtx Framework (ver bibliografía). 22

DESARROLLO DE UN WIDGET DE YAHOO! PARA TV PARA LA SOLICITUD DE CITA MÉDICA

Proyecto Fin de Carrera María León Bujes

Otro elemento importante de la gestión de eventos del KONtx Framework es la clase KONtx.system.Event. Esta clase es utilizada para gestionar y construir sistemas de eventos. En el siguiente ejemplo se muestra la forma de crear un nuevo evento a partir de un evento del host (hostEvent): var event = new KONtx.system.Event(hostEvent.subject, JSON.parse(hostEvent.data), null,hostEvent);

De esta forma se definen los eventos personalizados. Después se crea el suscriptor y los manejadores de eventos (event handlers) para configurar los disparadores de eventos y las acciones a realizar (callbacks) respectivamente. Cualquier vista puede suscribirse a un evento a través de su publicador (publishing object). Cuando la memoria utilizada por la vista es liberada por el garbage collector, automáticamente deja de estar suscrita a todos los eventos a los que estaba escuchando. Es posible sobrescribir los eventos existentes para las vistas, pero los métodos createView() y updateView() están pensados para evitar en gran medida la necesidad de utilizar los eventos onSelect, onLoad y onShow. 4.2 Archivos de un widget 4.2.1 Estructura de carpetas En un entorno de producción, los widgets se almacenan en el directorio Widgets. Dentro de este directorio existe una carpeta por cada widget, que contiene los archivos que lo forman. Estas carpetas son fácilmente reconocibles porque presentan la extensión .widget en su nombre. Cuando se remite el widget a la Galería de Widgets de Yahoo! este directorio .widget debe comprimirse en un paquete zip cuyo nombre se construirá de la siguiente forma: 

widgetID-versionNumber.widget

En el caso del Widget de Cita Médica el nombre elegido es: 

es.us.widgets.tv.cita8-0.2.8.widget

Dentro de este paquete zip debe haber un directorio llamado Contents en el cual estarán los archivos main.TV y widget.xml.

23

DESARROLLO DE UN WIDGET DE YAHOO! PARA TV PARA LA SOLICITUD DE CITA MÉDICA

Proyecto Fin de Carrera María León Bujes

Tanto el widgetID como el número de versión en el nombre del paquete zip deben corresponder con los que aparezcan en el archivo widget.xml. En caso contrario la herramienta de publicación de widgets en la galería muestra un mensaje de error y aborta la subida del widget. Otro detalle importante para evitar errores es comprimir la carpeta .widget y no la carpeta Contents que aloja en su interior y asegurarse de que el paquete zip resultante tenga la extensión .widget en lugar de .zip.

Ilustración 10: Estructura de carpetas dentro del directorio Contents.

Dentro de la carpeta Contents, además de los archivos main.TV y widget.xml (cuya utilidad se explica en los apartados 5.2.2 y 5.2.3) se pueden colocar otros archivos o carpetas cualesquiera. No obstante, en la documentación de la plataforma se recomienda organizar los archivos en las carpetas Images, Javascript y Resources. Algunos fabricantes de televisores requieren que se guarde el icono del widget en la carpeta Contents/Images/960x540 de manera que pueda ser reutilizado para representar al widget en diferentes contextos. La utilidad de la carpeta Resources está relacionada con la posibilidad de que el widget pueda ser visto en varios idiomas. Para lograrlo se reemplazan todas las cadenas de texto en el widget por llamadas a una función que busca la cadena en el idioma adecuado, por ejemplo: var localString = widget.getLocalizedString("video_error_dialog_title");

El motor de widgets buscará la traducción de esta cadena en un archivo de idioma de nombre Localizable.strings. El motor de widgets espera encontrar estos archivos en una serie de directorios dentro de la carpeta Resources del widget. Los directorios dentro de la carpeta Resources deben nombrarse usando las etiquetas de idiomas IETF BCP 479.

9

La IETF (Internet Engineering Task Force) publica series numeradas de documentos BCP (Best Current Practice). La especificación BCP 47 define la sintaxis de las etiquetas de idioma y puede consultarse de forma on-line en .

24

DESARROLLO DE UN WIDGET DE YAHOO! PARA TV PARA LA SOLICITUD DE CITA MÉDICA

Proyecto Fin de Carrera María León Bujes

Por ejemplo, en el caso del español el motor de widgets busca el archivo en Resources/es/Localizable.strings. Para saber en qué carpeta debe buscar el archivo Localizable.strings el motor de widgets comprueba el valor de la variable de entorno KF_LANG. 4.2.2 Archivo main.TV El archivo main.TV es el primer archivo que el motor de widgets carga. Es un archivo XML que en la mayor parte de los casos es usado para cargar el código JavaScript externo a través de la etiqueta . Sin embargo, en widgets muy sencillos puede incluir en sí mismo el código de dicho widget. En el Widget de Cita Médica el contenido del archivo main.TV es el siguiente:

Es importante que la extensión de archivo .TV de main.TV esté escrita con mayúsculas o el widget no cargará. Las rutas de los archivos en el motor de widgets son siempre relativas a la ubicación de main.TV. Esto significa que la referencia a un archivo sin especificar ningún directorio, por ejemplo init.js, se buscará en el mismo directorio que main.TV, mientras que una referencia a un archivo con un directorio, por ejemplo Javascript/init.js, se buscará en el subdirectorio especificado dentro de Contents, en este caso el subdirectorio Javascript. En ningún caso deben usarse rutas absolutas, que son aquellas que empiezan con una barra (/). 4.2.3 Archivo w idget.xml Todos los metadatos de un widget se encuentran en el archivo widget.xml. este archivo debe ubicarse en el mismo directorio que main.TV. El archivo widget.xml incluye información como el nombre del widget, identificador único, autor, descripción e información de seguridad. El archivo widget.xml incluye un campo el cual define el identificador único del widget. Se puede usar cualquier valor para este identificador siempre que quede garantizada su unicidad, ya que no puede haber dos widgets con el mismo valor para el identificador de widget.

25

DESARROLLO DE UN WIDGET DE YAHOO! PARA TV PARA LA SOLICITUD DE CITA MÉDICA

Proyecto Fin de Carrera María León Bujes

Cuando se sube un widget a la galería de widgets de Yahoo! la API de subida comprobará que el identificador del widget es único y devolverá un error en caso contrario. El uso de un nombre de dominio inverso puede evitar duplicidades en los identificadores de nuestros widgets. Este tipo de nombres se construye de la siguiente forma: com.mycompany.widgets.mywidget

Además de los metadatos, en el archivo widget.xml también incluye la configuración de seguridad del widget. El elemento controla el acceso a recursos como pueden ser el sistema de archivos, http, comandos, etc... Esta configuración de seguridad se define como en el siguiente ejemplo: full true all

A continuación se hará un breve repaso por las principales etiquetas que suelen formar parte del archivo widget.xml: 



Define la declaración XML. 



Indica el comienzo de los metadatos del widget. 



Define el nombre del widget. 



Define la versión del widget. 



Define el identificador único del widget. 



Define el nombre del autor del widget, organización y URL de soporte. 



Identifica la información de copyright. 



Proporciona una descripción para el widget. 



Define la versión mínima del motor de widgets requerida.

26

DESARROLLO DE UN WIDGET DE YAHOO! PARA TV PARA LA SOLICITUD DE CITA MÉDICA



Proyecto Fin de Carrera María León Bujes



Define la seguridad para el sistema de archivos, los comandos de sistema, y http del widget. 



Define el logo de pantalla estándar para la parte de arriba de la barra lateral. 



Define el icono de pantalla estándar para la galería de widgets. Este icono es usado por varios fabricantes para representar al widget por lo que debe ser una imagen de 44x44 pixels y debe incluirse en el directorio Contents/Images/960x540/. 4.2.4 El archivo init.js Normalmente el primer archivo JavaScript que se carga es el archivo init.js cuyo código realiza la inicialización básica del widget. La primera línea del archivo init.js es la encargada de incluir el código del KONtx Framework. Tras esto se incluyen otra serie de archivos que contienen el código JavaScript del propio widget. Los archivos cargados desde la carpeta Javascript/views extienden alguna de las clases base del KONtx Framework relativas a los tres tipos de vistas existentes (snippet, barra lateral y pantalla completa), construyendo y definiendo el aspecto y funcionalidad de las distintas vistas del widget. A modo de ejemplo se citan a continuación las primeras líneas del archivo init.js del Widget de Cita Médica: include("Framework/kontx/1.1/src/all.js"); include("Javascript/core/API.js"); include("Javascript/views/MainView.js"); include("Javascript/views/VistaSinUsuarios.js"); include("Javascript/views/VistaMostrarUsuarios.js"); include("Javascript/views/VistaBorrarUsuario.js"); include("Javascript/views/VistaIntroducirDatos.js"); include("Javascript/views/VistaEsperar.js"); include("Javascript/views/VistaMostrarDias.js"); include("Javascript/views/VistaMostrarHoras.js"); include("Javascript/views/VistaCitaAsignada.js"); include("Javascript/views/VistaInformacion.js"); include("Javascript/views/VistaInformacionError.js"); include("Javascript/views/VistaOtroDia.js"); include("Javascript/views/AboutView.js"); include("Javascript/views/SnippetView.js");

La inicialización de las vistas también se realiza en el archivo init.js y es implementada llamando al método KONtx.application.init (Object config). El objeto config incluye la propiedad views que consiste en un array con todas las vistas que se van a 27

DESARROLLO DE UN WIDGET DE YAHOO! PARA TV PARA LA SOLICITUD DE CITA MÉDICA

Proyecto Fin de Carrera María León Bujes

inicializar, estando cada una definida por el id de la vista, una clase de vista, y un parámetro de datos opcional. A continuación se comentarán una por una todas las propiedades del objeto config que deben especificarse en la inicialización de las vistas: 

La matriz de vistas views, en la que cada vista se define por un Id, una clase de vista y un parámetro de datos opcional.



El defaultViewId, que es el Id de la vista correspondiente al punto de inicio de la navegación (HOME) del widget.



El settingsViewId, que es el Id de la vista que se muestra al presionar la tecla verde del control remoto, correspondiente al “About Box” del widget y que puede asignarse a la vista por defecto KONtx.views.AboutBox.



La propiedad widgetNeedsNetwork. Si el widget no requiere conexión de red se debe asignar el valor false a esta propiedad ya que el valor por defecto es true.

Tanto la matriz de vistas como la propiedad defaultViewId son obligatorias. En cambio, la propiedad settingsViewId es opcional, si bien se muestra un error por consola en caso de no asignarle un valor. En el caso del Widget de Cita Médica la llamada a KONtx.application.init (Object config) queda de la siguiente forma: KONtx.application.init({ views: [ { id: 'view-Main', viewClass: MainView }, { id: 'view-IntroducirDatos', viewClass: VistaIntroducirDatos }, { id: 'view-Esperar', viewClass: VistaEsperar }, { id: 'view-MostrarDias', viewClass: VistaMostrarDias }, { id: 'view-MostrarHoras', viewClass: VistaMostrarHoras }, { id: 'view-CitaAsignada', viewClass: VistaCitaAsignada }, { id: 'view-Informacion', viewClass: VistaInformacion }, { id: 'view-InformacionError', viewClass: VistaInformacionError }, { id: 'view-OtroDia', viewClass: VistaOtroDia }, { id: 'view-About', viewClass: AboutView }, { id: 'snippet-1', viewClass: SnippetView, data: { message1: "Versión 2.0", message2: "Cita Médica" , message3: "Servicio Andaluz de Salud"} }, ], defaultViewId: 'view-Main', settingsViewId: 'view-About', });

Como el Widget de Cita Médica requiere conexión no hemos tenido que asignar un valor a la propiedad widgetNeedsNetwork ya que por defecto su valor es true.

28

DESARROLLO DE UN WIDGET DE YAHOO! PARA TV PARA LA SOLICITUD DE CITA MÉDICA

Proyecto Fin de Carrera María León Bujes

Otra de las tareas que se realizan en el archivo init.js es la suscripción de nuestro widget a eventos del host. Esta cuestión se analiza pormenorizadamente en el apartado 4.1.3 y en el 6.2.4 se explica su aplicación en el Widget de Cita Médica, por lo que no se profundizará en ella dentro de este apartado. 4.3 Widget Development Kit 4.3.1 Descarga e instalación Durante el desarrollo de los widgets, estos se prueban usando el conjunto de simuladores (uno por fabricante) proporcionado con el Widget Development Kit (WDK). El simulador ofrece al desarrollador la posibilidad de ver cómo funcionan sus widgets y depurar su código antes de probarlos en un dispositivo real. El Simulador está disponible a través de un paquete Debian llamado Yahoo! Widget EngineWidget Development kit (YWE-WDK) el cual contiene la última versión del motor de widgets. El simulador sólo ha sido testeado sobre la máquina virtual Ubuntu 10.04 distribuida por Yahoo! por lo que se descargó e instaló el YWE-WDK dentro de ella. Para el desarrollo del Widget de Cita Médica se ha utilizado VMware Player 3.0.0 como software de virtualización pero también se ha testeado la aplicación con éxito usando Virtual Box 4.1.10. Los pasos que se han seguido para la instalación y puesta en marcha del Simulador son: 1. Instalar el software de Virtualización VMware Player. 2. Descargar y descomprimir la máquina virtual Linux Ubuntu 10.04 distribuida por Yahoo! Connected TV. 3. Abrir la máquina virtual distribuida por Yahoo! con VMware Player, e instalar el paquete Debian YWE-WDK dentro de la máquina virtual. 4. Arrancar el Simulador elegido de los nueve disponibles. Para arrancar el simulador de LG, por ejemplo, los pasos serían Applications>TV Widgets>LG>LG Simulator. El equipo utilizado es un portátil TOSHIBA con procesador Intel Core i5 y CPU M480 @ 2.67GHz., 4,00 GB de memoria RAM y S.O. Windows 7 de 64 bits. Algunas de las limitaciones conocidas del testeo de widgets en el simulador son: 

El rendimiento en la máquina virtual no es representativo del rendimiento en el dispositivo real.



El manejo de memoria en el simulador no es representativo de las limitaciones de memoria en el dispositivo real. 29

DESARROLLO DE UN WIDGET DE YAHOO! PARA TV PARA LA SOLICITUD DE CITA MÉDICA

Proyecto Fin de Carrera María León Bujes



El color en el monitor no es representativo del color en los televisores.



La calidad del sonido no es representativa.



La calidad de la reproducción de vídeo en el simulador no es representativa de la reproducción de vídeo en el televisor.



En el simulador no están presentes las tecnologías de DRM (Digital Rights Management).

4.3.2 Primeros pasos con el simulador Para determinar la versión del KONtx Framework presente en el simulador basta con lanzar alguno de los simuladores disponibles para, a continuación, desde la ventana de consola que se abre, ir al widget principal (widget container) y tras esto imprimir la propiedad JavaScript platform.backend.devinfo.fwversion: /widgets 1 print("KONtx Framework version: " + platform.backend.devinfo.fwversion);

En nuestro caso la versión del KONtx Framework es la 1.3.28 que es la que viene con la última versión del Yahoo! Widget Engine-Widget Development Kit (YWE-WDK 1.2.16). Para testear widgets en el simulador basta con colocarlos en la carpeta /devwidgets, resetear el simulador y lanzarlo. Una vez que el widget aparece en el dock no es necesario volver a resetear el simulador aunque se modifique el código del mismo. Para ver los cambios guardados basta con cerrar y volver a lanzar el simulador. Eso sí, en caso de añadir un nuevo widget a la carpeta /devwidgets habría que volver a resetear el simulador para cargar dicho widget en el dock. Si queremos probar en el simulador un idioma distinto al inglés, que es el idioma por defecto, hay que usar la variable de entorno KF_LANG. Para establecer el español como idioma de la plataforma basta abrir un terminal y escribir: export KF_LANG = es

Una vez hecho esto, para lanzar el simulador Konfabulator Latest desde la consola de comandos se escribe: /usr/local/bin/Konfabulator --Latest

Al hacer KF_LANG = es le estamos diciendo al motor de widgets que busque en Resources/es/Localizable.strings la traducción de las distintas cadenas de texto.

30

DESARROLLO DE UN WIDGET DE YAHOO! PARA TV PARA LA SOLICITUD DE CITA MÉDICA

Proyecto Fin de Carrera María León Bujes

4.3.3 Depuración de código con la consola del simulador La Consola del Simulador (que se ejecuta en una ventana de terminal que se abre cada vez que se lanza el simulador) permite inspeccionar los objetos tanto del motor de widgets como del KONtx Framework durante la ejecución. Existen una serie de comandos que podemos escribir en la ventana de terminal que ejecuta la consola del simulador para facilitar la tarea de depuración del código. La lista de comandos completa puede obtenerse escribiendo: /help

En el desarrollo del Widget de Cita Médica resultó de gran utilidad restringir los mensajes de consola. Restringiendo los mensajes únicamente a aquellos relativos al widget cuyo código estamos depurando es mucho más fácil encontrar los mensajes que aportan información útil. Para restringir los mensajes de consola se selecciona el elemento Simulator Settings del menú Application>TV Widgets. Este elemento del menú lanza una ventana del editor por defecto para revisar y editar el archivo Konfabulator.env que se encuentra en el directorio $HOME/TVWidgets. Este archivo controla las variables de entorno para todos los simuladores. Una de las líneas dentro de este archivo sirve para restringir los mensajes de consola a los del widget que se indique. Para facilitar el desarrollo del Widget de Cita Médica esta línea se modificó de la siguiente forma: restrict_console=es.us.tv.cita8

Donde es.us.tv.cita8 es el identificador de la última versión del Widget de Cita Médica. 4.4 Testeo de widgets e n un televisor Una vez hemos completado las pruebas en el simulador, es posible configurar un televisor en modo desarrollo para probar nuestro widget en un dispositivo real. Esto permite al desarrollador testear la experiencia de usuario con su widget antes de remitirlo a Yahoo! para su aprobación. El Widget de Cita Médica ha sido testeado con éxito en un televisor Samsung modelo UE40B8000XW.

31

DESARROLLO DE UN WIDGET DE YAHOO! PARA TV PARA LA SOLICITUD DE CITA MÉDICA

Proyecto Fin de Carrera María León Bujes

Para saber la versión de los distintos componentes software de la plataforma instalados en el televisor, se accedió a la categoría Settings>System Software del widget "Widget Gallery" (ver Ilustración 12). Así se comprobó que la versión del Widget Application Framework instalada en el televisor es la 1.3.12.C, mientras que la versión del Yahoo! Widget Engine es la 5.0.0. Por su parte, la versión del Widget Container es la 1.2.66.C.

Ilustración 11: Componentes software instalados en el televisor.

El primer paso para probar el funcionamiento del Widget de Cita Médica en un dispositivo real consistió en la obtención del código de desarrollador del televisor en el que se iban a llevar a cabo las labores de testeo. Los pasos para la obtención de este código fueron los siguientes: 1. En el televisor se busca el Snippet del widget de nombre "Widget Gallery" y se selecciona para lanzarlo. 2. Se presiona el botón verde para lanzar la vista "Settings". 3. En la vista Settings se selecciona el botón "Developer Settings". 4. Se pone a "On" el botton "Show My Test Widgets". 5. A continuación es necesario logarse con nuestro id de Yahoo!. 6. Se mostrará un código de cuatro letras que es el "Developer Code". 32

DESARROLLO DE UN WIDGET DE YAHOO! PARA TV PARA LA SOLICITUD DE CITA MÉDICA

Proyecto Fin de Carrera María León Bujes

Ilustración 12: Código de Desarrollador del televisor en el que se han realizado las labores de testeo.

La herramienta de publicación nos solicitará esté código en el momento de subir el widget a la galería. Para acceder a la herramienta de publicación hay que identificarse con nuestro id de Yahoo! en

Ilustración 13: Formulario previo a la subida del widget.

La herramienta permite, una vez subido el widget, añadir nuevos testers. Cada tester queda definido por el código de desarrollador (Developer Code) y por su id de Yahoo!. 33

DESARROLLO DE UN WIDGET DE YAHOO! PARA TV PARA LA SOLICITUD DE CITA MÉDICA

Proyecto Fin de Carrera María León Bujes

Ilustración 14: Datos requeridos para añadir un nuevo tester al widget.

Una vez subido, ya es posible ver el widget en el televisor de cualquiera de los testers añadidos. Estos son los pasos que debe realizar el tester para localizar el widget en su televisor: 1. Registrarse con su id de Yahoo!. 2. Abrir el widget de nombre "Widget Gallery". 3. Seleccionar "Categories" y navegar hasta la última página. 4. Seleccionar la categoría "Test Widgets". 5. Seleccionar el widget que se quiere testear y añadirlo a su perfil. El widget aparecerá entonces en el dock y se podrá probar.

Ilustración 15: Vista en la que se añade al perfil actual el Widget de Cita Médica 0.2.8 para su testeo.

34

DESARROLLO DE UN WIDGET DE YAHOO! PARA TV PARA LA SOLICITUD DE CITA MÉDICA

Proyecto Fin de Carrera María León Bujes

4.5 Publicación en la Galería de TV Widgets de Yahoo! Para que nuestro widget esté disponible para todos los usuarios en la Galería de Widgets de Yahoo!, previamente debe pasar por un proceso de validación a cargo del equipo de Yahoo!. Tras superar este proceso, el widget "aprobado" podrá ser descargado e instalado en cualquier dispositivo Yahoo! Connected TV. Para que el widget supere la QA y el proceso de aprobación de Yahoo! el código de dicho widget debe cumplir con una serie de condiciones entre las que destacan dos: 

No se realizarán llamadas síncronas, de forma que el usuario puede seguir interactuando con el widget mientras el servidor responde a una petición XMLHttpRequest.



El Widget debe manejar adecuadamente un fallo súbito de conexión de red. Debe indicar al usuario que dicho fallo se ha producido, mostrando un mensaje de alerta y unos iconos de advertencia, y volver a funcionar normalmente cuando la conexión se recupere. El testeo en el caso de estado de red "Desconectado" es parte de la QA 10 del widget y del proceso de aprobación de Yahoo! previos a la inclusión de dicho widget en la Galería de Widgets en entornos de producción.

Ilustración 16: Portada del documento sobre Criterios de Aceptación de Widgets para TV de Yahoo!

10

QA: Quality Assurance. En español puede traducirse como certificación de la calidad.

35