The truth is that I'm a bad person, but that's going to change, I'm going to change.

Mi primer Yahoo! Widget :D

Comentarios (0) Widgets 02/Enero/2008

Mi primer dia de trabajo en este año 2008 que acaba de comenzar y ya comienzan los retos xD

Debo hacer un widget para 3 "plataformas", Yahoo! Widgets, Windows Sidebar (Win Vista) y Dashboard (Mac OS).

Estoy documentandome apenas en Yahoo! Widgets y no es ni tan facil, ni tan dificil, solo hay que entender un poco la estructura de los archivos.

El archivo principal un .kon contiene la informacion sobre ventanas y otros complementos que vayamos a usar en nuestro widget.

Podemos tambien usar javascript para enriquecer nuestra pequeña creación, pero es algo en lo que debo seguir experimentando con Yahoo! Widgets.

Seguramente algunos si no es que a todos nos gustaria crearnos un widget, minimo para aprender no?

Bien, les coloco un codigo con el cual crearan un widget que carga una imagen, es un ejemplo simple pero practico con el cual se daran una idea para la creacion de widgets.

Los ingredientes para este widgets son:
- Yahoo! Widgets SDK
- Notepad
- Una imagen (.jpg, .png, .gif)

Paso 1.
Abrimos nuestro Notepad o algun editor de nuestra preferencia y ponemos el siguiente codigo (codeo, luego explico).



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

<widget version="1.0" minimumVersion="3.0">



<!---

  Code: Rigter | www.rigtersir.com

---!>



<window title="Prueba">

 <name>miVentana</name>

 <width>400</width>

 <height>400</height>

 <shadow>true</shadow>

 <visible>true</visible>

 

 <image>

  <name>Imagen</name>

  <width>400</width>

  <height>400</height>

  <alignment>left</alignment>   

  <hOffset>0</hOffset>

  <vOffset>20</vOffset>

  <opacity>255</opacity>

  <src>imagenes/cover.jpg</src>

 </image>



</window>



</widget>

Las primeras 2 lineas, definen la codificacion del archivo, asi como la version hasta la cual es soportado el widget y el comienzo del widget.



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

<widget version="1.0" minimumVersion="3.0">

Despues, vienen las opciones para la ventana, titulo, nombre de la ventana, anchura, altura, si queremos darle una sombra y si es visible o esta oculta.



<window title="Prueba">

 <name>miVentana</name>

 <width>400</width>

 <height>400</height>

 <shadow>true</shadow>

 <visible>true</visible>

Encontramos ahora, los valores de la imagen.
Como antes hicimos con la ventana, tenemos que darle un nombre, anchura, altura, alineacion, posicion horizontal (hOffset) y vertical (vOffset), opacidad y la ubicacion de la imagen.

Ya que nuestro primer widget sera algo asi como un ".zip", coloque la ruta de la imagen en forma local.



<image>

  <name>Imagen</name>

  <width>400</width>

  <height>400</height>

  <alignment>left</alignment>   

  <hOffset>0</hOffset>

  <vOffset>20</vOffset>

  <opacity>255</opacity>

  <src>imagenes/cover.jpg</src>

 </image>

Y finalmente, cerramos los tags...



</window>

</widget>

Paso 2.
Guardamos el archivo como: widget.kon, puede ser cualquier nombre lo importante es la extension .kon

Paso 3.
Creamos un directorio con el nombre Prueba y colocamos widget.kon dentro de el. Creamos un sub-directorio dentro de Prueba llamado imagenes y colocamos dentro la imagen que hemos elegido para mostrar.

Paso 4.
Abrimos el Widget Converter.widget que viene en el - Yahoo! Widgets SDK y arrastramos el directorio Prueba hacia la pequeña ventana Widget Converter, elegimos Zipped y pulsamos Convert.

Esto nos generara finalmente el .widget que podemos ejecutar y automaticamente se mostrara como un widget mas.

Como mencione antes este solo es una referencia sencilla de lo que podemos hacer con Yahoo! Widgets, seguire documentandome en esta y las otras plataformas para traerles mas tutoriales de este tipo.

Coloco un .rar con los archivos mencionados en esta referencia.