desarrollo de un widget de yahoo! connected tv para solicitud de cita médica en el sas

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


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


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.


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.


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.


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.


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


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.


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


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


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.


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.


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


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.


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.


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


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.


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.


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'

]);


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


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.


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 .


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.


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.


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


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.


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.


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.


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.


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


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


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.


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.


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


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:


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


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.


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.


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.


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.


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


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


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


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)


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

desarrollo de un widget de yahoo! connected tv para solicitud de cita médica en el sas

Documents