Desarrollo de un Widget de Yahoo! para TV
para la solicitud de Cita Mdica
Proyecto Fin de Carrera
Mara Len Bujes
Proyecto dirigido por Dr. Jos Ramn Cerquides Bueno
Departamento de Teora de la Seal y Comunicaciones Escuela Superior de Ingenieros de Sevilla
Universidad de Sevilla
Mayo 2012
A mis padres,
Juan Antonio y Paqui.
DESARROLLO DE UN WIDGET DE YAHOO! PARA TV PARA LA SOLICITUD DE CITA MDICA Proyecto Fin de Carrera Mara Len Bujes
3
ndice
1. Objetivo del proyecto ......................................................................................................... 5
2. Connected TV: Concepto y plataformas ............................................................................. 6
2.1 Definicin de Connected TV ...................................................................................... 6
2.2 Principales plataformas de Connected TV ................................................................ 7
2.3 Las compaas de Internet a la conquista de la televisin ........................................ 8
3. Yahoo! Connected TV: descripcin de la plataforma ......................................................... 9
3.1 Interfaz de usuario .................................................................................................. 10
3.2 El mando a distancia como dispositivo de entrada ................................................. 12
3.3 Funcionamiento de la plataforma ........................................................................... 14
3.4 Perfiles de dispositivo .............................................................................................. 15
4. Desarrollo de widgets de Yahoo! para TV ........................................................................ 16
4.1 Metodologa de desarrollo basada en Framework ................................................. 16
4.1.1 Introduccin al KONtx Framework .............................................................. 16
4.1.2 Vistas y clases de vista ................................................................................. 18
4.1.3 Gestin de eventos ...................................................................................... 20
4.2 Archivos de un widget ............................................................................................. 23
4.2.1 Estructura de carpetas ................................................................................. 23
4.2.2 Archivo main.TV ........................................................................................... 25
4.2.3 Archivo widget.xml ...................................................................................... 25
4.2.4 El archivo init.js ............................................................................................ 27
4.3 Widget Development Kit ......................................................................................... 29
4.3.1 Descarga e instalacin ................................................................................. 29
4.3.2 Primeros pasos con el simulador ................................................................. 30
4.3.3 Depuracin de cdigo con la consola del simulador ................................... 31
DESARROLLO DE UN WIDGET DE YAHOO! PARA TV PARA LA SOLICITUD DE CITA MDICA Proyecto Fin de Carrera Mara Len Bujes
4
4.4 Testeo de widgets en un televisor .......................................................................... 31
4.5 Publicacin en la Galera de TV Widgets de Yahoo! ............................................... 35
5. Tecnologas utilizadas en el desarrollo del Widget de Cita Mdica ................................. 36
5.1 Javascript ................................................................................................................. 36
5.2 PHP .......................................................................................................................... 37
5.3 XML y JSON .............................................................................................................. 38
6. Desarrollo del Widget de Cita Mdica .............................................................................. 40
6.1 Esquema de funcionamiento de la aplicacin......................................................... 40
6.2 Cdigo del Widget de Cita Mdica (JavaScript) ...................................................... 40
6.2.1 Implementacin de las vistas ...................................................................... 40
6.2.2 Implementacin de dilogos ....................................................................... 45
6.2.3 Uso del objeto XMLHttpRequest de JavaScript ........................................... 48
6.2.4 Comprobacin del estado de la red antes de las peticiones XHR ............... 51
6.2.5 JSON Parser .................................................................................................. 56
6.2.6 Gestin de usuarios guardados y almacenamiento persistente ................. 58
6.3 Web API en el servidor intermedio (PHP) ............................................................... 64
6.3.1 Peticiones al servidor de InterS@S con libcurl ............................................ 64
6.3.2 Mantenimiento de la sesin ........................................................................ 66
6.3.3 Parseando la respuesta: HTML DOM parser ............................................... 67
6.3.4 Produccin de una cadena JSON: json_enconde() ...................................... 69
7. Seguridad de los datos en el Widget de Cita Mdica ....................................................... 70
8. Posibles ampliaciones y mejoras ...................................................................................... 72
9. Bibliografa ........................................................................................................................ 73
Anexo I ..................................................................................................................................... 74
Anexo II .................................................................................................................................. 136
DESARROLLO DE UN WIDGET DE YAHOO! PARA TV PARA LA SOLICITUD DE CITA MDICA Proyecto Fin de Carrera Mara Len Bujes
5
1. Objetivo del proyecto
El objetivo del proyecto propuesto es el desarrollo de un widget para la plataforma Yahoo!
Connected TV que permita a los usuarios solicitar, consultar y cancelar cita con su mdico (o
con el pediatra, si se gestiona para un menor) a travs de su televisor, usando el mando a
distancia como dispositivo de entrada.
El SAS ya permite realizar estos y otros trmites a travs de Internet por medio de InterS@S,
una oficina virtual que proporciona a los andaluces servicios de informacin personal y
tramitacin on-line en su relacin con la asistencia sanitaria. La filosofa de funcionamiento
del widget cuyo desarrollo aborda el presente proyecto consiste en realizar peticiones a un
servidor intermedio que, a su vez, interactuar con el servidor de InterS@S. El servidor
intermedio se encargar de ofrecer las respuestas del servidor de InterS@S en formato
JSON, el formato de datos ms adecuado para ser consumido por nuestro widget, widget
que ser el que finalmente muestre al usuario el estado de su solicitud de cita en la pantalla
del televisor, todo ello mientras disfruta de su programa de televisin favorito.
Por tanto, el widget de peticin de cita mdica, en adelante Widget de Cita Mdica, pone a
disposicin del usuario el servicio de peticin de cita ofertado por InterS@S pero a travs
del televisor, es decir, ofrece una nueva forma de acceso distinta de la interfaz web que
lleva tiempo funcionando. Se acerca as dicho servicio a un cierto tipo de usuario que estara
ms predispuesto a aprender nuevas funcionalidades de un electrodomstico con el que
est familiarizado y que utiliza cada da, como es el televisor, que a iniciarse en el uso de
algo menos cotidiano para l, como puede ser un ordenador o un navegador web. Se
consigue as reducir la brecha digital y hacer partcipes de la Sociedad de la Informacin a un
mayor nmero de ciudadanos.
Con este objetivo siempre presente, durante el desarrollo del Widget de Cita Mdica se ha
dado especial importancia a la sencillez y facilidad de uso y a la claridad a la hora de
presentar la informacin, con idea de favorecer la utilizacin de la aplicacin por parte de
cualquier tipo de usuario, independientemente de su edad o grado familiaridad con el
manejo de las TIC.
DESARROLLO DE UN WIDGET DE YAHOO! PARA TV PARA LA SOLICITUD DE CITA MDICA Proyecto Fin de Carrera Mara Len Bujes
6
2. Connected TV: concepto y plataformas
2.1 Definicin de Connected TV
Connected TV, Hybrid TV o Smart TV son trminos que hacen referencia a la tendencia
actual de integracin de caractersticas de Internet y la Web 2.0 en los modernos aparatos
de televisin y set top boxes, as como a la convergencia tecnolgica entre computadoras y
estos nuevos aparatos de televisin/set top boxes. En estos nuevos dispositivos suelen tener
una gran importancia los contenidos interactivos online, la Web TV o el over-the-top
content1 as como el vdeostreaming bajo demanda, frente a generaciones anteriores de
aparatos de televisin o set top boxes en los que casi de forma exclusiva primaba la difusin
tradicional de contenidos audiovisuales. Pero adems, los Connected TV tambin
proporcionan a los consumidores acceso a contenido generado por el propio usuario (ya sea
almacenado en un disco duro externo, en su pc, o en la nube) y a una enorme variedad de
servicios interactivos y aplicaciones de Internet. Esta evolucin est teniendo lugar de forma
anloga a cmo Internet, los web widgets y las aplicaciones software se integraron en los
modernos smartphones. De hecho, el trmino Smart TV se establece por analoga con el
trmino Smart Phone.
Por tanto, un dispositivo Smart TV o Connected TV es un aparato de televisin o un set top
box para televisin que ofrece una mayor capacidad computacional y conectividad que un
aparato de televisin bsico. De hecho, un Connected TV incorpora un Sistema Operativo
completo y proporciona usualmente una plataforma para los desarrolladores de
aplicaciones.
Hay una gran variedad de sistemas operativos mviles disponibles en la actualidad y,
aunque la mayora estn dirigidos a smartphones o tablets, algunos de ellos tambin se
instalan en dispositivos Connected TV o incluso han sido diseados de manera especfica
para su uso en estos dispositivos. Es interesante sealar tambin que la mayor parte de los
sistemas operativos de los Connected TV (o Smart TV) estn basados en Linux, Android, y
otras plataformas de cdigo abierto.
1 En los mbitos de la difusin y la entrega de contenidos, over-the-top content (OTT) hace referencia a la entrega de video y audio sin la implicacin del proveedor de servicios de Internet en el control o distribucin de dicho contenido.
DESARROLLO DE UN WIDGET DE YAHOO! PARA TV PARA LA SOLICITUD DE CITA MDICA Proyecto Fin de Carrera Mara Len Bujes
7
2.2 Principales plataformas de Connected TV
A continuacin se citarn algunas plataformas de Connected TV importantes, que son
usadas como framework2 y middleware3 por los distintos fabricantes:
Plataformas especficas del vendedor:
o LG NetCast de LG Electronics. o Panasonic Viera Connect de Panasonic. o Philips NetTV de Philips, basada en los estndares del Open IPTV Forum. o Samsung Smart TV de Samsung. o Sharp Aquos Net+ de Sharp. o Toshiba Places de Toshiba. o Roku de Roku.
Plataformas disponibles para mltiples fabricantes:
Manejadas por organizaciones de estandarizacin:
o Ginga (SBTVD Middleware). o HbbTV, del Consorcio HbbTV. o Tru2way de CableLabs.
Manejadas por editores especficos:
o Google TV (plataforma basada en Android) de Google, Intel, Sony y Logitech. o Boxee (popular fork4 del XBMC media). o EMAGINE (plataforma popular en la regin asitica del Pacfico) de Select-TV. o Mediaroom de Microsoft. o MeeGo for Smart TV de Linux Foundation, Intel y AMD. Est basada en un
fork de XBMC media center software. o TVBLOB (usado en Tiscali TvBox, TELE System Electronic's Free-To-Air DVB
Receiver, y en el propio BLOBbox de TVBLOB Srl). o Ubuntu TV, de Canonical, basado en la interfaz de usuario Unity y el Sistema
Operativo Ubuntu. o XBMC Media Center, de la XBMC Foundation y su comunidad de cdigo
abierto. o Yahoo! Connected TV (anteriormente Yahoo! GoTV) de Yahoo!.
2 Framework: coleccin de libreras software que proporcionan una determinada Interfaz de Programacin de Aplicaciones (API). 3 Middleware: software que asiste a una aplicacin para interactuar o comunicarse con otras aplicaciones, software, redes, hardware y/o sistemas operativos. 4 Fork: desarrollo software independiente basado en una copia legal del cdigo fuente de un paquete software, que culmina con la creacin de una pieza de software diferente.
DESARROLLO DE UN WIDGET DE YAHOO! PARA TV PARA LA SOLICITUD DE CITA MDICA Proyecto Fin de Carrera Mara Len Bujes
8
Uno de los puntos crticos en el desarrollo de una plataforma de Connected TV es el diseo
de una interfaz adecuada, algo que supone un desafo complejo desde el punto de vista del
software. En efecto, la experiencia de usuario debe ser optimizada para que todas las
fuentes de contenido se integren de forma eficiente y sean fcilmente accesibles a travs un
nico EPG5, algo que requiere una programacin muy avanzada.
2.3 Las compaas de Internet a la conquista de la televisin
El potencial de los Connected TV o televisores web-enabled es muy alto. Segn un estudio
de la consultora iSuppli actualmente hay alrededor de 90 modelos de televisores web-
enabled y en el ao 2013 habr alrededor de entre 88 y 90 millones en los hogares, lo que
supone alrededor del 40% del mercado mundial.
A la luz de estos datos resulta evidente por qu las compaas de Internet se interesan por
conquistar la plataforma de la televisin. En estos momentos se libra una reida lucha en la
carrera por encontrar la mejor forma de llevar contenidos y servicios de Internet a las
pantallas de televisin, algo que determinar qu plataforma acaba convirtindose en la
opcin mayoritaria del mercado.
En esta batalla, Yahoo! y Google, con sus respectivas propuestas (Yahoo! Connected TV y
Google TV), se presentan como dos rivales bien posicionados y con gran proyeccin de
futuro.
Ilustracin 1: Yahoo! y Google tratan de hacerse un hueco en el campo de las Connected TV.
5 EPG: Electronic Programme Guide.
DESARROLLO DE UN WIDGET DE YAHOO! PARA TV PARA LA SOLICITUD DE CITA MDICA Proyecto Fin de Carrera Mara Len Bujes
9
3. Yahoo! Connected TV: descripcin de la plataforma
En la dura batalla por conquistar la plataforma de la televisin, Yahoo!, con su Yahoo!
Connected TV, apuesta por una plataforma de pequeas aplicaciones (widgets) que adaptan
servicios y contenidos de la Red al medio televisivo y que, como novedad en su ltima
versin, incluye interactividad broadcast (la capacidad de reconocer el programa que el
usuario est viendo y ofrecerle informacin o servicios complementarios), lo cual, entre
otras posibilidades, abre el camino a la presentacin de publicidad personalizada, algo
sumamente atractivo para los anunciantes.
Firmas como Samsung, LG Electronics, Sony y Vizio ya han producido televisores de alta
definicin compatibles con la plataforma de Yahoo!, y D-Link ya ha anunciado la prxima
salida al mercado del primer set top box que incorporar Yahoo! Connected TV.
Al tratarse de una plataforma abierta, Yahoo! Connected TV permite que cualquier
desarrollador cree sus propios Widgets de TV, contando para ello con herramientas
suministradas por la propia Yahoo!. Estas aplicaciones son luego puestas a disposicin del
usuario, quien selecciona sus favoritas, y puede configurar su propia experiencia en el uso
de las mismas gracias a la existencia de perfiles de usuario.
Desde mediados de 2011, Yahoo! proporciona adems la oportunidad de desarrollar
widgets de pago para venderlos posteriormente en la Yahoo! Connected TV Store, una
iniciativa que forma parte de su programa para desarrolladores.
Ilustracin 2: Yahoo! Connected TV en el CES 2011 en Las Vegas (Nevada).
En 2009, la propuesta de Yahoo! fue una de las novedades del International Consumer
Electronics Show (CES) y volvi a ser objeto de inters en el CES 2011 gracias a las nuevas
caractersticas incluidas en la ltima versin de la plataforma, entre las que destacan dos: la
interactividad broadcast, ya mencionada, y el nuevo protocolo de comunicacin de
dispositivos que da soporte al paso de mensajes en formato JSON entre el Connected TV y
otros dispositivos con acceso a Internet de la red domstica (smartphones, tablets, etc.).
DESARROLLO DE UN WIDGET DE YAHOO! PARA TV PARA LA SOLICITUD DE CITA MDICA Proyecto Fin de Carrera Mara Len Bujes
10
3.1 Interfaz de usuario
Los widgets de Yahoo! Connected TV despliegan su men principal en un lateral de la
pantalla. De esta forma, el usuario puede acceder en cualquier momento a actualizaciones
de noticias, vdeos, pronstico del tiempo, imgenes fotogrficas o redes sociales, entre
otros servicios, sin necesidad de recurrir al ordenador y sin dejar de ver la televisin.
Los widgets de Yahoo! Connected TV presentan tres vistas bsicas:
1. Snippet: Es la primera vista de un widget, la que el usuario ve en su dock o barra de
widgets personal. Esta barra ocupa la parte inferior de la pantalla del televisor,
superponindose al contenido de televisin en vivo.
Ilustracin 3: Barra de snippets (dock) en la plataforma de Yahoo! Connected TV.
Los Snippets son los bloques que forman este dock y dan acceso cada uno de ellos a
la que podemos considerar la vista de barra lateral principal del widget, pero
tambin pueden mostrar contenido dinmico, actualizado en tiempo real,
proveniente de un servicio web.
2. Sidebar: La segunda vista, la que ms se usar, es la vista de barra lateral (sidebar
view). Esta vista se lanza cuando se activa el snippet en el dock y normalmente
proporciona la funcionalidad completa del widget. En esta vista se puede integrar
casi cualquier fuente web (feed), incluyendo fotos, datos y vdeos. Se lanza cuando
se activa el snippet en el dock.
Los componentes principales de la vista lateral o sidebar view son:
o El logo del widget o botn de ttulo en la parte superior de la vista lateral, el cual devolver el widget al men HOME si no nos encontrsemos en l.
DESARROLLO DE UN WIDGET DE YAHOO! PARA TV PARA LA SOLICITUD DE CITA MDICA Proyecto Fin de Carrera Mara Len Bujes
11
o Contenido de la vista. Si estamos en la vista de barra lateral que se muestra inmediatamente despus de activar el snippet aqu se mostrar la pgina inicial de navegacin o men HOME. El men sirve para implementar la navegacin a otras pginas/vistas del widget.
o La barra de herramientas global en la parte inferior de la vista lateral, que proporciona funciones globales, idnticas para todos los widgets.
Ilustracin 4: Vista lateral de un widget en la plataforma de Yahoo! Connected TV.
Ilustracin 5: Vista lateral y vista de Snippet del Widget de Cita Mdica.
3. Full screen: La tercera vista es la de pantalla completa. La pantalla completa ofrece,
a su vez, dos formas, una en la que la vista del widget oculta el contenido de la TV
(como ocurrira con un juego o un contenido de vdeo) y otra en que se superpone
(mostrando, por ejemplo, el marcador de los deportes en streaming en vivo).
DESARROLLO DE UN WIDGET DE YAHOO! PARA TV PARA LA SOLICITUD DE CITA MDICA Proyecto Fin de Carrera Mara Len Bujes
12
Como se ha comentado antes, el dock es el componente de la interfaz de usuario que
contiene los distintos snippets instalados organizados en una lista horizontal que ocupa la
parte inferior de la pantalla del televisor.
Ilustracin 6: Barra de Snippets (dock).
Al dock se accede apretando un botn del mando a distancia y sus principales funciones
son:
o Presentacin de los snippets.
o Navegacin entre snippets.
o Organizacin de los widgets disponibles para cada usuario.
o Lanzamiento de widgets sin interrupir el visionado del vdeo o del programa de televisin por parte del usuario.
3.2 El mando a distancia como dispositivo de entrada
La plataforma Yahoo! Connected TV puede usarse con muchos tipos de mando a distancia,
desde los ms bsicos hasta los que incorporan componentes de aceleracin, como por
ejemplo un jog-wheell.
Ilustracin 7: Mando a distancia en modo Widgets.
Los mandos a distancia son modales en el sentido de que muchas de sus teclas pueden
tener distintas funciones en modos distintos (por ejemplo modo TV, modo DVD, etc.). Para
dar soporte a los widgets se incluye un "modo widget" en el mando a distancia. Cuando se
DESARROLLO DE UN WIDGET DE YAHOO! PARA TV PARA LA SOLICITUD DE CITA MDICA Proyecto Fin de Carrera Mara Len Bujes
13
muestran los widgets, el "modo widget" est activo y el motor de widgets de Yahoo!, en
adelante Widget Engine, controla (salvo excepciones) todas las teclas del mando a distancia.
Las principales teclas implicadas en el uso de los widgets de Yahoo! para TV se indicarn con
maysculas y son las siguientes:
WIDGETS para activar y desactivar la plataforma y su interfaz de usuario.
EXIT para cerrar el sidebar, el dock, y la vista fullscreen.
UP ARROW para mover el foco arriba.
RIGHT ARROW para mover el foco a la derecha.
OK para seleccionar el elemento sobre el que se encuentra el foco.
LEFT ARROW para mover el foco a la izquierda.
DOWN ARROW para mover el foco hacia abajo.
BACK para abandonar un dilogo modal, volver desde una vista lateral, vdeo o
slideshow a la vista lateral previa, hasta detenerse en el men principal. Esta tecla no
tiene efecto si se aprieta mientras se est mostrando el dock.
El mando a distancia tambin proporciona acceso a las funciones de la barra de
herramientas global: Viewport (tecla AZUL), Add Snippet (tecla AMARILLA), Settings (tecla
VERDE), y Close (tecla ROJA). Cada una de estas teclas se corresponde con un botn que
sigue el mismo cdigo de color en la interfaz de usuario de los widgets. Los fabricantes de
dispositivos pueden configurar las rdenes de las teclas usando los servicios de Yahoo!.
Las teclas de los mandos a distancia usadas por los widgets se clasifican en tres categoras
distintas:
1. Teclas dedicadas: son aquellas que deben ser aadidas al mando a distancia y no
pueden ser sobrecargadas con otra funcionalidad. Estas teclas dedicadas son usadas
por los widgets en todos los modos del mando a distancia. Una de estas teclas
dedicadas es la tecla WIDGETS que adems debe ser fcil de encontrar.
2. Teclas necesarias: son teclas que ya existen en la mayora de los mandos a distancia
y pueden ser sobrecargadas con funcionalidad adicional. Estas teclas usualmente
realizan otras funciones en modos diferentes al "modo widget".
3. Teclas opcionales: son teclas que pueden existir en algunos mandos a distancia, y
pueden ser sobrecargadas con funcionalidad adicional. Las teclas opcionales pueden
proporcionar un acceso ms conveniente a funciones de los widgets.
DESARROLLO DE UN WIDGET DE YAHOO! PARA TV PARA LA SOLICITUD DE CITA MDICA Proyecto Fin de Carrera Mara Len Bujes
14
3.3 Funcionamiento de la plataforma
Los widgets de Yahoo! Connected TV se implementan usando nicamente JavaScript y XML.
El empleo de JavaScript para el desarrollo de aplicaciones destinadas a Smart TVs puede
sorprender en un primer momento pero, si lo pensamos, hace tiempo que JavaScript dej
de usarse nicamente en navegadores. Por el contrario, podemos encontrarlo ya en
aplicaciones para dispositivos mviles (smartphones, tablets, etc.) e incluso en servidores
(Node.JS) y, ahora, tambin en televisores conectados.
En sntesis, los principales elementos que intervienen en el funcionamiento de la plataforma
de Yahoo! Connected TV son los siguientes:
Los widgets de Yahoo! para TV, escritos usando JavaScript y XML.
En informtica, un widget es una pequea aplicacin o programa, usualmente
presentado en archivos o ficheros pequeos que son ejecutados por un motor de
widgets o Widget Engine.
El Yahoo! Widget Engine Toolbox Framework (KONtx Framework).
El KONtx Framework es el framework JavaScript en el que se basa el desarrollo de
widgets de Yahoo! para TV. Se caracteriza por su orientacin a objetos y por
presentar un modelo de clases similar al de MooTools.
El motor de JavaScript SpyderMonkey, usado internamente por la plataforma.
SpyderMonkey es el motor de JavaScript de Mozilla, usndose en varios de sus
productos, incluido Firefox. Escrito en C/C++, est disponible bajo licencia GPL.
El Motor de Widgets de Yahoo!
Este motor de widgets se basa en Konfabulator y combina un entorno de ejecucin
JavaScript (SpyderMonkey) y un intrprete XML para ejecutar los widgets.
Un Sistema Operativo Linux embebido6 sobre el que corre el motor de widgets.
Como ya se ha mencionado, la mayor parte de los sistemas operativos de los Smart
TVs estn basados en Linux, Android, y otras plataformas de cdigo abierto y la
plataforma de Yahoo! no es una excepcin.
6 Un sistema embebido o empotrado es un sistema o mdulo electrnico alojado dentro de un sistema de
mayor entidad (host o anfitrin) y diseado para realizar una o varias funciones concretas. Al contrario de lo
que ocurre con los ordenadores de propsito general que estn diseados para cubrir un amplio rango de
necesidades, los sistemas embebidos se disean para cubrir necesidades especficas y para ello emplean uno o
varios procesadores (CPUs) ya sea en formato microprocesador, microcontrolador o DSP.
DESARROLLO DE UN WIDGET DE YAHOO! PARA TV PARA LA SOLICITUD DE CITA MDICA Proyecto Fin de Carrera Mara Len Bujes
15
3.4 Perfiles de dispositivo
La siguiente tabla muestra los perfiles hardware y software de un dispositivo conectado
ejecutando el motor de widgets de la plataforma Yahoo! Connected TV.
Tipo Plataforma de Widgets para TV
Perfil Software Yahoo! Widget Engine
RAM 128 MB (el motor de widgets requiere 10 MB y se
necesitan otros 50 MB para el dock)
Resolucin 960 x 540 pixels
Media Player Proporcionado por el fabricante del dispositivo
Codecs de Audio y Vdeo Contenedor: MP4, Codec: H.264, Audio: AAC.
Contenedor: WMV9, Codec: VC-1, Audio: WMA.
Audio multicanal Proporcionado por el fabricante del dispositivo
Formatos de imagen JPG, PNG
DRM
Proporcionado por el fabricante del dispositivo. El
Motor de Widgets soporta Widevine DRM para
implementacin especfica del fabricante.
Formatos Contenedor Proporcionados por el fabricante del dispositivo
Lenguajes KON, JS, XML
Acceso a Contenido Propio Proporcionado por el fabricante del dispositivo
Almacenamiento Flash Memory
DESARROLLO DE UN WIDGET DE YAHOO! PARA TV PARA LA SOLICITUD DE CITA MDICA Proyecto Fin de Carrera Mara Len Bujes
16
4. Desarrollo de widgets de Yahoo! para TV
4.1 Metodologa de desarrollo basada en Framework
4.1.1 Introduccin al KONtx Framework
En el contexto del presente proyecto, los widgets pueden considerarse como RIAs
(aplicaciones de Internet enriquecidas) que corren en dispositivos electrnicos Connected
TV y que hacen uso de servicios de Internet para entregar contenido dinmico a la audiencia
mientras ve un vdeo o un programa de televisin.
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 diseo e implementacin de estos Widgets de TV se utiliza una
metodologa 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 mltiples
controles estndar (botones, elementos de texto, imgenes...), que permiten al
desarrollador crear vistas personalizadas muy rpidamente. Un par de lneas de cdigo son
suficientes para aadir un elemento de texto, una imagen, un grid o un botn.
Adems, como se coment anteriormente, el KONtx Framework sigue un modelo de
herencia clsico, similar al usado por el MOOtools browser JS framework7. Esto permite
extender fcilmente los controles bsicos proporcionando funcionalidad adicional.
En efecto, cada control presenta una estructura de eventos bien definida y consistente, que
permite al desarrollador aadir su propia lgica con el mnimo 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 encapsulacin de objetos primitivos para proveer funcionalidad
extendida.
Proporciona una interfaz de programacin normalizada consistente.
7 Moo Tools es un framework JavaScript orientado a objetos compacto y modular, diseado para el desarrollador JavaScript con un nivel de intermedio a avanzado. Permite escribir un cdigo potente, flexible y cross-browser con su coherente y bien documentada API.
DESARROLLO DE UN WIDGET DE YAHOO! PARA TV PARA LA SOLICITUD DE CITA MDICA Proyecto Fin de Carrera Mara Len Bujes
17
Facilita y promueve la adopcin de lneas de diseo comunes por parte de todos los
desarrolladores.
Los estndares 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, adems de proporcionar componentes de interfaz de usuario
pre-empaquetados y "bloques de construccin" 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 travs del widget Container. El Container es el software de encapsulamiento que
maneja la comunicacin y la presentacin de los widgets en el dispositivo y est a cargo de
todos esos elementos que estn fuera del control de los widgets individuales (por ejemplo,
dock, barra lateral, barra de herramientas global, activacin de snippets, aadir y borrar
widgets, y otras).
Resumiendo, un Widget de TV, escrito usando la notacin literal de Objetos de JavaScript,
hace llamadas al KONtx Framework que se comunica con el motor de widgets a travs del
widget Container y la API del Container. El widget Container maneja el dock y todos los
widgets que se ejecutan simultneamente en un perfil de usuario. La figura 6 ilustra la pila
de llamadas que tiene lugar durante la ejecucin de un widget.
El KONtx Framework simplifica el trabajo de desarrollo de widgets al liberar al programador
de un gran nmero de tareas. Tambin 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.
8XPath (XML Path Language): lenguaje que permite construir expresiones que recorren y procesan un
documento XML.
DESARROLLO DE UN WIDGET DE YAHOO! PARA TV PARA LA SOLICITUD DE CITA MDICA Proyecto Fin de Carrera Mara Len Bujes
18
Ilustracin 8: Pila de llamadas en el desarrollo con el KONtx Framework.
4.1.2 Vistas y clases de vista
Gracias al KONtx Framework, el cdigo 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 aplicacin extiende alguna de las
clases de vista base del KONtx Framework.
As, los distintos tipos de vista de cualquier widget (snippet, sidebar y fullscreen) estn
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
mtodos 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 especfica para un perfil determinado. Esta vista se borra cuando
cambiamos de perfil (ingresamos bajo un perfil distinto).
DESARROLLO DE UN WIDGET DE YAHOO! PARA TV PARA LA SOLICITUD DE CITA MDICA Proyecto Fin de Carrera Mara Len Bujes
19
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 mtodos especficos de la misma: createView() y updateView().
Estos mtodos responden a los dos conceptos fundamentales en los cuales se basa la
implementacin de las vistas: la creacin de componentes de interfaz de usuario y la
actualizacin de contenido.
El mtodo createView() es el encargado de crear los componentes bsicos de interfaz de
usuario de la vista. El mtodo createView() se llama una nica vez y en el momento de
hacerlo el contenido an no se ha incluido.
Por su parte, el mtodo updateView() es el que se encarga de dotar de contenido a la
vista. A diferencia del mtodo createView() el mtodo 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 mtodos 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 mtodo
updateView() es rpido 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: activacin,
ejecucin de operaciones y desactivacin.
Cada vista a su vez tambin 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 mtodos llamados durante las transiciones entre estados.
DESARROLLO DE UN WIDGET DE YAHOO! PARA TV PARA LA SOLICITUD DE CITA MDICA Proyecto Fin de Carrera Mara Len Bujes
20
Ilustracin 9: Ciclo de vida de un widget.
La auto-reanudacin es el proceso por el cual una vista se oculta y vuelve a ser mostrada de
nuevo, ya sea a travs del botn volver o por otros medios. Cuando la vista se oculta, se
libera memoria gracias a la accin 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-reanudacin dentro de cada
vista es necesario guardarlo en la estructura this.controls.
Adems de this.controls existen otras estructuras muy tiles en el desarrollo de
widgets. El siguiente listado resume las estructuras ms usadas en la creacin de vistas:
this.config Propiedades pasadas a la vista en la instanciacin de la misma.
this.persist Almacenamiento persistente para cualquier cosa que se quiera
que permanezca cuando la vista se recargue tras la accin del garbage collector.
this.cache Estructuras para datos transitorios.
this.controls Referencias a los controles de la vista.
4.1.3 Gestin de eventos
La gestin de eventos permite a los widgets escuchar los input del usuario (por ejemplo
cuando aprieta un botn 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.
DESARROLLO DE UN WIDGET DE YAHOO! PARA TV PARA LA SOLICITUD DE CITA MDICA Proyecto Fin de Carrera Mara Len Bujes
21
Los 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.
Los Host Events son aquellos eventos del Host, procedentes del Widget Engine, a los que
nuestro widget puede suscribirse.
Para suscribir un widget a un evento del Host se hace uso del mtodo subscribeTo: /*El mtodo subscribeTo() se aade 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 suscripcin se realiza a travs de KONtx.HostEventManager o bien a
travs de KONtx.application. Esto se especifica en el parmetro publishingObject
del mtodo subscribeTo() antes mencionado.
Los dos ejemplos siguientes ilustran los mtodos de suscripcin a eventos a disposicin del desarrollador de widgets.
Ejemplo de suscripcin 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'
]);
DESARROLLO DE UN WIDGET DE YAHOO! PARA TV PARA LA SOLICITUD DE CITA MDICA Proyecto Fin de Carrera Mara Len Bujes
22
Ejemplo de suscripcin a eventos a travs 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 tambin puede hacer que su widget se suscriba a eventos procedentes de
otro publicador. Un ejemplo de publicador distinto es el KONtx message center que, adems
de proporcionar una tabla que almacena pares clave-valor para almacenar mensajes
accesibles desde las distintas vistas, genera eventos broadcast cuando se aaden nuevos
datos o se actualizan los que ya existan.
Ejemplo de suscripcin 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 tambin puede hacer que su widget dispare eventos y los
enve al Widget Engine para que ste acte en consecuencia.
Los Child Events, son aquellos eventos del Host que un widget individual puede disparar y
enviar al Widget Engine usando el mtodo KONtx.HostEventManager.send().
Un ejemplo de Child Event puede ser el evento "Exit to Dock" que un widget puede disparar pasando "exitToDock" como parmetro en la llamada al mtodo send():
KONtx.HostEventManager.send("exitToDock");
Esta llamada tendra 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 documentacin
publicada por Yahoo! sobre la API del TV Widget KONtx Framework (ver bibliografa).
DESARROLLO DE UN WIDGET DE YAHOO! PARA TV PARA LA SOLICITUD DE CITA MDICA Proyecto Fin de Carrera Mara Len Bujes
23
Otro elemento importante de la gestin 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. Despus 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 travs de su publicador (publishing object).
Cuando la memoria utilizada por la vista es liberada por el garbage collector,
automticamente deja de estar suscrita a todos los eventos a los que estaba escuchando.
Es posible sobrescribir los eventos existentes para las vistas, pero los mtodos
createView() y updateView() estn 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 produccin, 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 fcilmente reconocibles porque presentan la extensin .widget
en su nombre.
Cuando se remite el widget a la Galera 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 Mdica 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 estarn
los archivos main.TV y widget.xml.
DESARROLLO DE UN WIDGET DE YAHOO! PARA TV PARA LA SOLICITUD DE CITA MDICA Proyecto Fin de Carrera Mara Len Bujes
24
Tanto el widgetID como el nmero de versin en el nombre del paquete zip deben
corresponder con los que aparezcan en el archivo widget.xml. En caso contrario la
herramienta de publicacin de widgets en la galera 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
extensin .widget en lugar de .zip.
Ilustracin 10: Estructura de carpetas dentro del directorio Contents.
Dentro de la carpeta Contents, adems 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 documentacin 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 funcin que busca la cadena en el idioma adecuado, por
ejemplo:
var localString = widget.getLocalizedString("video_error_dialog_title");
El motor de widgets buscar la traduccin 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 especificacin BCP 47 define la sintaxis de las etiquetas de idioma y puede consultarse de forma on-line en .
DESARROLLO DE UN WIDGET DE YAHOO! PARA TV PARA LA SOLICITUD DE CITA MDICA Proyecto Fin de Carrera Mara Len Bujes
25
Por ejemplo, en el caso del espaol 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 cdigo JavaScript externo a
travs de la etiqueta . Sin embargo, en widgets muy sencillos puede incluir en s
mismo el cdigo de dicho widget. En el Widget de Cita Mdica el contenido del archivo
main.TV es el siguiente:
Es importante que la extensin de archivo .TV de main.TV est escrita con maysculas o el
widget no cargar.
Las rutas de los archivos en el motor de widgets son siempre relativas a la ubicacin de
main.TV. Esto significa que la referencia a un archivo sin especificar ningn 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 ningn caso deben usarse rutas absolutas, que son aquellas que empiezan
con una barra (/).
4.2.3 Archivo widget.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
informacin como el nombre del widget, identificador nico, autor, descripcin e
informacin 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.
DESARROLLO DE UN WIDGET DE YAHOO! PARA TV PARA LA SOLICITUD DE CITA MDICA Proyecto Fin de Carrera Mara Len Bujes
26
Cuando se sube un widget a la galera 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
Adems de los metadatos, en el archivo widget.xml tambin incluye la configuracin de seguridad del widget. El elemento controla el acceso a recursos como pueden ser el sistema de archivos, http, comandos, etc... Esta configuracin de seguridad se define como en el siguiente ejemplo:
full
true
all
A continuacin se har un breve repaso por las principales etiquetas que suelen formar
parte del archivo widget.xml:
Define la declaracin XML.
Indica el comienzo de los metadatos del widget.
Define el nombre del widget.
Define la versin del widget.
Define el identificador nico del widget.
Define el nombre del autor del widget, organizacin y URL de soporte.
Identifica la informacin de copyright.
Proporciona una descripcin para el widget.
Define la versin mnima del motor de widgets requerida.
DESARROLLO DE UN WIDGET DE YAHOO! PARA TV PARA LA SOLICITUD DE CITA MDICA Proyecto Fin de Carrera Mara Len Bujes
27
Define la seguridad para el sistema de archivos, los comandos de sistema, y http del
widget.
Define el logo de pantalla estndar para la parte de arriba de la barra lateral.
Define el icono de pantalla estndar para la galera 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 cdigo
realiza la inicializacin bsica del widget.
La primera lnea del archivo init.js es la encargada de incluir el cdigo del KONtx
Framework. Tras esto se incluyen otra serie de archivos que contienen el cdigo 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 continuacin las primeras lneas del archivo init.js del
Widget de Cita Mdica:
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 inicializacin de las vistas tambin se realiza en el archivo init.js y es implementada
llamando al mtodo 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
DESARROLLO DE UN WIDGET DE YAHOO! PARA TV PARA LA SOLICITUD DE CITA MDICA Proyecto Fin de Carrera Mara Len Bujes
28
inicializar, estando cada una definida por el id de la vista, una clase de vista, y un parmetro
de datos opcional.
A continuacin se comentarn una por una todas las propiedades del objeto config que
deben especificarse en la inicializacin de las vistas:
La matriz de vistas views, en la que cada vista se define por un Id, una clase de vista
y un parmetro de datos opcional.
El defaultViewId, que es el Id de la vista correspondiente al punto de inicio de la
navegacin (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 conexin 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 Mdica 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: "Versin 2.0",
message2: "Cita Mdica" , message3: "Servicio Andaluz de Salud"} },
],
defaultViewId: 'view-Main',
settingsViewId: 'view-About',
});
Como el Widget de Cita Mdica requiere conexin no hemos tenido que asignar un valor a
la propiedad widgetNeedsNetwork ya que por defecto su valor es true.
DESARROLLO DE UN WIDGET DE YAHOO! PARA TV PARA LA SOLICITUD DE CITA MDICA Proyecto Fin de Carrera Mara Len Bujes
29
Otra de las tareas que se realizan en el archivo init.js es la suscripcin de nuestro widget
a eventos del host. Esta cuestin se analiza pormenorizadamente en el apartado 4.1.3 y en
el 6.2.4 se explica su aplicacin en el Widget de Cita Mdica, por lo que no se profundizar
en ella dentro de este apartado.
4.3 Widget Development Kit
4.3.1 Descarga e instalacin
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 cmo funcionan sus widgets y depurar su cdigo
antes de probarlos en un dispositivo real.
El Simulador est disponible a travs de un paquete Debian llamado Yahoo! Widget Engine-
Widget Development kit (YWE-WDK) el cual contiene la ltima versin del motor de
widgets. El simulador slo ha sido testeado sobre la mquina 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 Mdica se ha utilizado VMware Player 3.0.0 como software de
virtualizacin pero tambin se ha testeado la aplicacin con xito usando Virtual Box 4.1.10.
Los pasos que se han seguido para la instalacin y puesta en marcha del Simulador son:
1. Instalar el software de Virtualizacin VMware Player.
2. Descargar y descomprimir la mquina virtual Linux Ubuntu 10.04 distribuida por
Yahoo! Connected TV.
3. Abrir la mquina virtual distribuida por Yahoo! con VMware Player, e instalar el
paquete Debian YWE-WDK dentro de la mquina virtual.
4. Arrancar el Simulador elegido de los nueve disponibles. Para arrancar el simulador
de LG, por ejemplo, los pasos seran Applications>TV Widgets>LG>LG Simulator.
El equipo utilizado es un porttil 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 mquina 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.
DESARROLLO DE UN WIDGET DE YAHOO! PARA TV PARA LA SOLICITUD DE CITA MDICA Proyecto Fin de Carrera Mara Len Bujes
30
El color en el monitor no es representativo del color en los televisores.
La calidad del sonido no es representativa.
La calidad de la reproduccin de vdeo en el simulador no es representativa de la
reproduccin de vdeo en el televisor.
En el simulador no estn presentes las tecnologas de DRM (Digital Rights
Management).
4.3.2 Primeros pasos con el simulador
Para determinar la versin del KONtx Framework presente en el simulador basta con lanzar
alguno de los simuladores disponibles para, a continuacin, 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 versin del KONtx Framework es la 1.3.28 que es la que viene con la
ltima versin 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 cdigo del mismo. Para ver los
cambios guardados basta con cerrar y volver a lanzar el simulador. Eso s, en caso de aadir
un nuevo widget a la carpeta /devwidgets habra que volver a resetear el simulador para
cargar dicho widget en el dock.
Si queremos probar en el simulador un idioma distinto al ingls, que es el idioma por
defecto, hay que usar la variable de entorno KF_LANG. Para establecer el espaol 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 traduccin de las distintas cadenas de texto.
DESARROLLO DE UN WIDGET DE YAHOO! PARA TV PARA LA SOLICITUD DE CITA MDICA Proyecto Fin de Carrera Mara Len Bujes
31
4.3.3 Depuracin de cdigo 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 ejecucin.
Existen una serie de comandos que podemos escribir en la ventana de terminal que ejecuta
la consola del simulador para facilitar la tarea de depuracin del cdigo. La lista de
comandos completa puede obtenerse escribiendo:
/help
En el desarrollo del Widget de Cita Mdica result de gran utilidad restringir los mensajes de
consola. Restringiendo los mensajes nicamente a aquellos relativos al widget cuyo cdigo
estamos depurando es mucho ms fcil encontrar los mensajes que aportan informacin
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 lneas 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 Mdica esta lnea se
modific de la siguiente forma:
restrict_console=es.us.tv.cita8
Donde es.us.tv.cita8 es el identificador de la ltima versin del Widget de Cita Mdica.
4.4 Testeo de widgets en 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 aprobacin.
El Widget de Cita Mdica ha sido testeado con xito en un televisor Samsung modelo
UE40B8000XW.
DESARROLLO DE UN WIDGET DE YAHOO! PARA TV PARA LA SOLICITUD DE CITA MDICA Proyecto Fin de Carrera Mara Len Bujes
32
Para saber la versin de los distintos componentes software de la plataforma instalados en
el televisor, se accedi a la categora Settings>System Software del widget "Widget
Gallery" (ver Ilustracin 12). As se comprob que la versin del Widget Application
Framework instalada en el televisor es la 1.3.12.C, mientras que la versin del Yahoo!
Widget Engine es la 5.0.0. Por su parte, la versin del Widget Container es la 1.2.66.C.
Ilustracin 11: Componentes software instalados en el televisor.
El primer paso para probar el funcionamiento del Widget de Cita Mdica en un dispositivo
real consisti en la obtencin del cdigo de desarrollador del televisor en el que se iban a
llevar a cabo las labores de testeo. Los pasos para la obtencin de este cdigo 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 botn verde para lanzar la vista "Settings".
3. En la vista Settings se selecciona el botn "Developer Settings".
4. Se pone a "On" el botton "Show My Test Widgets".
5. A continuacin es necesario logarse con nuestro id de Yahoo!.
6. Se mostrar un cdigo de cuatro letras que es el "Developer Code".
DESARROLLO DE UN WIDGET DE YAHOO! PARA TV PARA LA SOLICITUD DE CITA MDICA Proyecto Fin de Carrera Mara Len Bujes
33
Ilustracin 12: Cdigo de Desarrollador del televisor en el que se han realizado las labores de testeo.
La herramienta de publicacin nos solicitar est cdigo en el momento de subir el widget a
la galera. Para acceder a la herramienta de publicacin hay que identificarse con nuestro id
de Yahoo! en
Ilustracin 13: Formulario previo a la subida del widget.
La herramienta permite, una vez subido el widget, aadir nuevos testers. Cada tester queda
definido por el cdigo de desarrollador (Developer Code) y por su id de Yahoo!.
DESARROLLO DE UN WIDGET DE YAHOO! PARA TV PARA LA SOLICITUD DE CITA MDICA Proyecto Fin de Carrera Mara Len Bujes
34
Ilustracin 14: Datos requeridos para aadir un nuevo tester al widget.
Una vez subido, ya es posible ver el widget en el televisor de cualquiera de los testers
aadidos. 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 pgina.
4. Seleccionar la categora "Test Widgets".
5. Seleccionar el widget que se quiere testear y aadirlo a su perfil. El widget aparecer
entonces en el dock y se podr probar.
Ilustracin 15: Vista en la que se aade al perfil actual el Widget de Cita Mdica 0.2.8 para su testeo.
DESARROLLO DE UN WIDGET DE YAHOO! PARA TV PARA LA SOLICITUD DE CITA MDICA Proyecto Fin de Carrera Mara Len Bujes
35
4.5 Publicacin en la Galera de TV Widgets de Yahoo!
Para que nuestro widget est disponible para todos los usuarios en la Galera de Widgets de
Yahoo!, previamente debe pasar por un proceso de validacin 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 aprobacin de Yahoo! el cdigo de dicho
widget debe cumplir con una serie de condiciones entre las que destacan dos:
No se realizarn llamadas sncronas, de forma que el usuario puede seguir
interactuando con el widget mientras el servidor responde a una peticin
XMLHttpRequest.
El Widget debe manejar adecuadamente un fallo sbito de conexin 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 conexin se
recupere. El testeo en el caso de estado de red "Desconectado" es parte de la QA10
del widget y del proceso de aprobacin de Yahoo! previos a la inclusin de dicho
widget en la Galera de Widgets en entornos de produccin.
Ilustracin 16: Portada del documento sobre Criterios de Aceptacin de Widgets para TV de Yahoo!
10 QA: Quality Assurance. En espaol puede traducirse como certificacin de la calidad.
DESARROLLO DE UN WIDGET DE YAHOO! PARA TV PARA LA SOLICITUD DE CITA MDICA Proyecto Fin de Carrera Mara Len Bujes
36
5. Tecnologas utilizadas en el desarrollo del Widget de
Cita Mdica
Aunque los lenguajes de programacin utilizados (JavaScript y PHP) son de sobra conocidos
y estn ampliamente documentados, se incluir en este apartado una breve resea de cada
uno de ellos, as como algunas caractersticas generales del formato de intercambio de
datos utilizado, el formato JSON.
5.1 Javascript
JavaScript es un lenguaje de programacin interpretado, es decir, diseado para ser
ejecutado por un intrprete, por lo que no requiere compilacin. Es muy utilizado en
pginas web, embebido en el cdigo HTML. En este caso son los navegadores los que
interpretan los cdigos JavaScript incluidos en las pginas web. Es por ello que se considera
un lenguaje del lado del cliente, si bien existe una forma de JavaScript del lado del servidor
(Server-side JavaScript). Adems de en el mbito web, su uso tambin es significativo en
aplicaciones de escritorio (widgets en su mayor parte).
JavaScript es un lenguaje basado en prototipos, pues las nuevas clases se generan clonando
las clases base (prototipos) y extendiendo sus funcionalidades. Tambin se define como
orientado a objetos, imperativo, dbilmente tipado y dinmico.
Creado por Brendan Eich de Netscape, aparece por primera vez en el navegador Netscape
Navigator 2.0. Inicialmente se llam Mocha, luego LiveScript y finalmente vi la luz como
JavaScript en un anuncio conjunto entre Sun Microsystems (creadores de JAVA) y Netscape
el 4 de diciembre de 1995. El cambio de nombre gener confusin ya que daba pie a pensar
que se trataba de una prolongacin de Java, cuando en realidad el cambio de nombre se
debi a una estrategia de mercadotecnia de Netscape orientada a sacar partido de la
popularidad de JAVA, que era la ltima novedad en ese momento.
La existencia de distintas versiones de JavaScript incompatibles llev al World Wide Web
Consortium (W3C) a disear un estndar llamado DOM (Document Object Model) que
incopora Internet Explorer 6 en adelante, Opera versin 7 en adelante y Mozilla Firefox.
En 1997 los autores propusieron JavaScript para que fuera adoptado como estndar de la
European Computer Manufacturers Association (ECMA), que, a pesar de su nombre, no es
europeo sino internacional, con sede en Ginebra. En junio de 1997 fue adoptado como un
DESARROLLO DE UN WIDGET DE YAHOO! PARA TV PARA LA SOLICITUD DE CITA MDICA Proyecto Fin de Carrera Mara Len Bujes
37
estndar ECMA, con el nombre de ECMAScript11 y poco despus tambin como un estndar
ISO.
5.2 PHP
PHP es un lenguaje de programacin interpretado, diseado originalmente para la creacin
de pginas web dinmicas. Se usa principalmente para la interpretacin del lado del servidor
pero actualmente puede ser utilizado tambin desde una interfaz de lnea de comandos o
para la creacin de otros tipos de programas incluyendo aplicaciones con interfaz grfica
haciendo uso de las bibliotecas Qt o GTK+.
Las siglas PHP corresponden a un acrnimo recursivo que significa PHP Hypertext Pre-
processor. PHP fue creado originalmente por Rasmus Lerdorf en 1994; sin embargo la
implementacin principal de PHP corre ahora a cargo de The PHP Group y sirve como el
estndar de facto para PHP al no haber una especificacin formal. Publicado bajo la PHP
License, la Free Software Foundation considera esta licencia como software libre.
Puede ser desplegado en la mayora de los servidores web y en casi todos los sistemas
operativos y plataformas sin costo alguno. El lenguaje PHP se encuentra instalado en ms de
20 millones de sitios web y en un milln de servidores. Es tambin el mdulo Apache ms
popular entre las computadoras que utilizan Apache como servidor web.
Cuando el cliente hace una peticin al servidor para que le enve una pgina web, el servidor
ejecuta el intrprete de PHP. ste procesa el script solicitado que generar el contenido de
manera dinmica (por ejemplo obteniendo informacin de una base de datos). El resultado
es enviado por el intrprete al servidor, quien a su vez se lo enva al cliente.
El gran parecido que posee PHP con los lenguajes ms comunes de programacin
estructurada, como C y Perl, permiten a la mayora de los programadores crear aplicaciones
complejas con una curva de aprendizaje muy corta. Tambin les permite involucrarse con
aplicaciones de contenido dinmico sin tener que aprender todo un nuevo grupo de
funciones.
Permite la conexin a diferentes tipos de servidores de bases de datos tales como MySQL,
PostgreSQL, Oracle, ODBC, DB2, Microsoft SQL Server, Firebird y SQLite.
11 Estndar ECMAScript:
DESARROLLO DE UN WIDGET DE YAHOO! PARA TV PARA LA SOLICITUD DE CITA MDICA Proyecto Fin de Carrera Mara Len Bujes
38
PHP tambin tiene la capacidad de ser ejecutado en la mayora de los sistemas operativos,
tales como Unix (y de ese tipo, como Linux o Mac OS X) y Microsoft Windows, y puede
interactuar con los servidores web ms populares ya que existe en versin CGI, mdulo para
Apache, e ISAPI.
PHP es una alternativa a las tecnologas de Microsoft ASP y ASP.NET (que utiliza C# y Visual
Basic .NET como lenguajes), a ColdFusion de la empresa Adobe, a JSP/Java y a CGI/Perl.
Comparndola con otras, PHP es, y probablemente seguir siendo, una tecnologa
tremendamente abierta. A pesar de que el cdigo PHP se ejecuta en el servidor y
permanece oculto para el usuario web, existe una enorme comunidad de desarrolladores
dispuesta a compartir sus conocimientos y experiencias con el lenguaje. Basta con buscar un
poco en la Web para encontrar multitud de ejemplos y tutoriales de PHP, desde los ms
bsicos hasta algunos realmente complejos.
5.3 XML y JSON
XML es un metalenguaje extensible de etiquetas utilizado para el intercambio de
informacin estructurada. Desarrollado por la W3C, se defini con la intencin de
convertirse en el estndar para el intercambio de datos entre diferentes plataformas.
JSON por su parte es un subconjunto de la notacin literal de objetos de JavaScript y est
adquiriendo cada vez una mayor notoriedad en la programacin web debido a las ventajas
que ofrece sobre XML. Entre estas ventajas destaca que, el anlisis de una cadena JSON es
algo inmediato usando la funcin eval() de JavaScript, en comparacin con la laboriosa
tarea de recorrer un XML. Este es uno de los motivos por los cuales los desarrolladores
estn volcando sus esfuerzos en esta herramienta de intercambio de datos.
JSON se emplea habitualmente en entornos donde el tamao del flujo de datos entre
cliente y servidor es de vital importancia. Sin embargo, la utilizacin de eval()para analizar
JSON es algo delicado y puede atentar la seguridad del sitio si, en lugar de datos, la cadena
contuviese cdigo malintencionado. Este inconveniente se soslaya en la plataforma de
Yahoo! Connected TV poniendo a disposicin de los desarrolladores un analizador JSON que
adems resulta ser entre 3 y 4 veces ms rpido que su versin JavaScript. En el apartado
6.2.5 se incluye una descripcin detallada del uso de este analizador JSON incluido en la
plataforma en el desarrollo del Widget de Cita Mdica.
Al estar escritos en JavaScript, JSON es el formato de transferencia de datos ms
conveniente para los widgets de Yahoo! Connected TV. No obstante, XML tambin forma
parte del desarrollo de cualquier widget, ya que se utiliza para definir el punto de inicio del
DESARROLLO DE UN WIDGET DE YAHOO! PARA TV PARA LA SOLICITUD DE CITA MDICA Proyecto Fin de Carrera Mara Len Bujes
39
mismo. En efecto, el primer archivo que el motor de widgets carga es un archivo XML,
concretamente el archivo main.TV, ya mencionado.
Tambin se utiliza XML para definir los metadatos del widget. Estos metadatos se
encuentran en el archivo widget.xml que, como tambin se ha comentado ya, contiene el
nombre del widget, su identificador, su descripcin, la informacin de seguridad, etc.
DESARROLLO DE UN WIDGET DE YAHOO! PARA TV PARA LA SOLICITUD DE CITA MDICA Proyecto Fin de Carrera Mara Len Bujes
40
6. Desarrollo del Widget de Cita Mdica
6.1 Esquema de funcionamiento de la aplicacin
El widget de cita mdica basa su funcionamiento en la realizacin de peticiones por medio
del objeto XMLHttpRequest de JavaScript a un servidor intermedio. Este servidor es el que,
a su vez, se encarga de realizar peticiones al servidor de InterS@S haciendo uso de la librera
libcurl de PHP. El servidor intermedio procesar la respuesta ofrecida por el servidor de
InterS@S con ayuda de la clase Simple HTML DOM parser, obteniendo as los datos
necesarios para el widget de cita mdica. Finalmente, el servidor intermedio se encargar
de presentar estos datos en formato JSON, el formato de datos ms adecuado para ser
consumido por los widgets de Yahoo! Connected TV.
Ilustracin 17: Esquema de funcionamiento de la aplicacin.
6.2 Cdigo del Widget de Cita Mdica (JavaScript)
6.2.1 Implementacin de las vistas
Como ya se coment en el apartado 4.2.4, el cdigo de cada uno de los archivos cargados
por init.js desde la carpeta Javascript/views/ extiende alguna de las clases base
del KONtx Framework que implementan los distintos tipos de vistas existentes. Por tanto, es
en estos archivos donde se construye y define el aspecto y funcionalidad de las distintas
vistas del widget.
DESARROLLO DE UN WIDGET DE YAHOO! PARA TV PARA LA SOLICITUD DE CITA MDICA Proyecto Fin de Carrera Mara Len Bujes
41
En efecto, en las primeras lneas del archivo init.js del Widget de Cita Mdica, adems
de cargar el KONtx Framework y otros archivos necesarios para nuestro widget se cargan los
catorce archivos contenidos en la carpeta JavaScript/views/ que corresponden a cada
una de las vistas del Widget de Cita Mdica:
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");
El Widget de Cita Mdica consta de catorce vistas, de las cuales trece son vistas de barra
lateral por lo que en su definicin extienden la clase base KONtx.system.SidebarView.
A continuacin y a modo de ejemplo se citan las primeras lneas del cdigo del archivo
VistaCitaAsignada.js, en el que se define la clase VistaCitaAsignada.
var VistaCitaAsignada = new KONtx.Class({
ClassName: 'MiVistaCitaAsignada',
Extends: KONtx.system.SidebarView,
createView: function() {
...
La vista nmero catorce es la vista de Snippet del widget y extiende la clase base
KONtx.system.SnippetView. En este caso, el archivo VistaSnippet.js empieza de la
siguiente manera:
var VistaSnippet = new KONtx.Class({
ClassName: 'MiVistaSnippet',
Extends: KONtx.system.SnippetView,
...
En la ilustracin 17 se muestran las doce vistas de barra lateral diseadas especficamente
para el Widget de Cita Mdica. En ellas se contemplan todos los posibles casos que pueden
darse durante el proceso de peticin de cita con el mdico a travs del widget.
DESARROLLO DE UN WIDGET DE YAHOO! PARA TV PARA LA SOLICITUD DE CITA MDICA Proyecto Fin de Carrera Mara Len Bujes
42
Ilustracin 18: Vistas del Widget de Cita Mdica.
La inicializacin de las vistas es implementada llamando al mtodo
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 inicializar, estando cada
una definida por el id de la vista, una clase de vista, y un parmetro de datos opcional.
DESARROLLO DE UN WIDGET DE YAHOO! PARA TV PARA LA SOLICITUD DE CITA MDICA Proyecto Fin de Carrera Mara Len Bujes
43
//Inicializacin de las vistas
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: VistaSnippet, data: { message1: "Versin 2.7",
message2: "Cita Mdica" , message3: "Servicio Andaluz de Salud"} },
],
defaultViewId: 'view-Main',
settingsViewId: 'view-About',
});
Dentro del objeto config tambin se especifica el id de la vista por defecto (la vista que se
despliega al activar el Snippet) as como la vista que se mostrar al seleccionar el botn
verde (Settings) ubicado en la barra de herramientas global que se encuentra en la parte
inferior de las vistas de barra lateral del widget.
Ilustracin 19: Aspecto de la vista view-About.
Como ya se coment anteriormente, la forma de crear una nueva vista es extender la clase
base correspondiente sobrescribiendo los mtodos createView() y updateView() de
dicha clase.
Es en el cdigo del mtodo createView() donde se aaden los controles que definen la
estructura de la vista. En el Widget de Cita Mdica los controles aadidos a cada vista se
guardan en la estructura this.controls (donde this representa a la vista en cuestin).
DESARROLLO DE UN WIDGET DE YAHOO! PARA TV PARA LA SOLICITUD DE CITA MDICA Proyecto Fin de Carrera Mara Len Bujes
44
Haciendo esto se consigue que, si la vista se oculta, cuando vuelva a mostrarse ofrezca un
contexto consistente al usuario, reanudndose con los mismos datos, foco y estado que
presentaba cuando se ocult. Un ejemplo del uso de la estructura this.controls en el
Widget de Cita Mdica se encuentra en el siguiente fragmento de cdigo:
var VistaMostrarUsuarios = new KONtx.Class({
ClassName: 'MiVistaMostrarUsuarios',
Extends: KONtx.system.SidebarView,
createView: function() {
this.controls.backButton = new KONtx.control.BackButton({
label:'Usuarios Guardados',
guid: "back_button",
}).appendTo(this);
this.controls.texto0 = new KONtx.element.Text({
data: "Escoja el usuario para el que desea pedir cita.",
wrap:true,
styles: {
vOffset: this.controls.backButton.outerHeight+20,
hOffset: 5,
width: this.width-5,
fontSize: KONtx.utility.scale(16),
color: '#FFFFFF'
}
}).appendTo(this);
this.controls.botonusuario1 = new KONtx.control.TextButton({
label: 'Usuario1',
guid: "botonusuario1",
styles: {
vOffset: this.controls.texto0.outerHeight+20,
},
events: {
onSelect: function(event) {
datosusuario1json=currentAppConfig.get('usuario1');
datosusuario1=JSON.parse(datosusuario1json);
KONtx.messages.store('nuss', datosusuario1.nuss);
KONtx.messages.store('dia', datosusuario1.dia);
KONtx.messages.store('mes', datosusuario1.mes);
KONtx.messages.store('anio', datosusuario1.anio);
KONtx.messages.store('dni', datosusuario1.dni);
KONtx.application.addViewConfig({ id: 'view-Esperar',
viewClass: VistaEsperar });
KONtx.application.loadView('view-Esperar');
}
}
}).appendTo(this);
this.controls.botonusuario1.hide();
...
En aquellos casos en los que el widget ha requerido que los datos mostrados en la vista se
actualicen cuando sta se cargue se ha implementado una llamada XMLHttpRequest en el
mtodo updateView() de dicha vista y se ha usado la respuesta para actualizar los textos
o datos mostrados. As ocurre en el mtodo updateView() de la clase VistaMostrarDias (el
cdigo ntegro del archivo VistaMostrarDias.js puede consultarse en el Anexo I).
DESARROLLO DE UN WIDGET DE YAHOO! PARA TV PARA LA SOLICITUD DE CITA MDICA Proyecto Fin de Carrera Mara Len Bujes
45
En este punto cabe preguntarse cmo se pueden recuperar datos presentes en una
determinada vista cuando estamos en otra vista diferente. En el Widget de Cita Mdica este
problema se soluciona recurriendo al Centro de Mensajes del KONtx Framework.
El Centro de Mensajes del KONtx Framework proporciona una tabla basada en claves para el
almacenamiento de mensajes, combinada con eventos broadcast que se disparan cuando se
aaden datos nuevos o se actualizan los ya existentes en la tabla. Esta tabla puede
describirse como un buzn de almacenamiento en el que se guardan los mensajes de un
widget individual.
Para realizar el paso de mensajes entre las diferentes vistas del Widget de Cita Mdica se
utilizan los mtodos KONtx.messages.store(key, value), para almacenar el array,
objeto o tipo primitivo value asociado a la clave key, y KONtx.messages.fetch(key)
para recuperarlo posteriormente.
6.2.2 Implementacin de dilogos
En el desarrollo del Widget de Cita Mdica se han utilizado distintos dilogos con objeto de
ofrecer informacin al usuario durante el proceso de peticin de cita.
Ilustracin 20: Dilogo de alerta de dato no vlido y dilogo de confirmacin de cancelacin de cita.
En la vista en la que el usuario introduce sus datos se han implementado dilogos de alerta
que se muestran si el nmero de la seguridad social, la fecha de nacimiento o el D.N.I.
introducidos no superan la validacin pertinente, en cuyo caso no se llega a realizar la
peticin al servidor intermedio y en consecuencia tampoco al servidor de InterS@S. La
DESARROLLO DE UN WIDGET DE YAHOO! PARA TV PARA LA SOLICITUD DE CITA MDICA Proyecto Fin de Carrera Mara Len Bujes
46
validacin de los datos la realizan una serie de funciones incluidas en el archivo
Javascript/core/API.js que devuelven un valor diferente segn se haya detectado o
no un error. Si hay error se mostrar al usuario el dilogo que corresponda para facilitarle la
correccin del mismo. A modo de ejemplo, a continuacin se cita un fragmento del cdigo
de deteccin de errores incluido en el archivo API.js:
function mayor_edad(edad,dia1,mes1,anio1){
hoy=new Date(getRealTime()*1000);
log(hoy);
var dia=hoy.getDay();
var mes=hoy.getMonth()+1;
var anio=hoy.getFullYear();
if ( (anio-anio1)>edad )
{ return true; }
if ( (anio-anio1)==edad && (mes-mes1)>0 )
{ return true; }
if ( (anio-anio1)==edad && (mes-mes1)==0 ){
if ((dia1-dia)
DESARROLLO DE UN WIDGET DE YAHOO! PARA TV PARA LA SOLICITUD DE CITA MDICA Proyecto Fin de Carrera Mara Len Bujes
47
else{
if(dia1==''||mes1==''||anio1==''){alerta1_2.show();}
else{
if (validar_ss(nuss)==false){alerta2.show();} //Nmero de la seguridad
social incorrecto
else{//Comprobamos la validez de la fecha de nacimiento
contenido=dia1+'/'+mes1+'/'+anio1;
switch (comprueba_fecha(contenido)){
/*
case 1:
alerta3.show();//Carcter no vlido en la fecha de nacimiento
break;
case 2:
alerta4.show();//Fecha de nacimie