Como crear un Gadget:

Si siempre quisiste crear tu gadget para Windows Vista o simplemente para Windows XP, con este tutorial puedes.

Como crear un Gadget:

Descarga Windows Sidebar: http://www.thoosje.com/index.html

Paso 1: Crear el directorio contenedor de los archivos de desarrollo del Gadget

Se debe crear un directorio para almacenar los archivos que serán desarrollados para el funcionamiento completo del Gadget.

1. Determinar la disponibilidad del Gadget


Con la tecla Windows + R, abra la ventana “Run” y ejecute la siguiente sentencia de acuerdo a la visibilidad que desea que tenga el aplicativo.

a) Si se desea que el Gadget esté disponible para un usuario específico de la PC, debe localizar el directorio donde se creará el Gadget con la siguiente sentencia:


\Users\%userprofile%\AppData\Local\Microsoft\Windows Sidebar\Gadgets

b) Si se desea que el Gadget esté disponible para todos los usuarios de la PC, entonces escriba la siguiente sentencia:
\Program Files\Windows Sidebar\Shared Gadgets

Al ingresar la instrucción antes mencionada, el explorador de Windows se abrirá en el directorio que contiene los Gadgets disponibles para el usuario especificado o para todos los usuarios de la PC, respectivamente.

2. Generar un directorio para el Gadget

Se creará un directorio con el formato NombreDeGadget.gadget en la carpeta de Gadgets localizada en el punto 2 (donde NombreDeGadget debe ser reemplazado por el nombre que hayamos asignado a nuestro Gadget, por ejemplo: Noticias.gadget, FotosEnLinea.gadget, etc).
Es importante que el nombre de la carpeta termine con la extensión .gadget para que el aplicativo sea reconocido por Windows Sidebar y se pueda acceder desde allí posteriormente.

Dentro de este directorio y con el objetivo de mantener el orden dentro del desarrollo, se podrán generar 3 nuevos subdirectorios llamados css, js e imágenes, que serán utilizados posteriormente.

Paso 2: Crear el archivo XML para el manifiesto del Gadget

En la raíz del directorio creado en el paso 1 con el nombre NombreDeGadget.gadget, genere un nuevo archivo llamado gadget.xml, que servirá como manifiesto del Gadget. El nombre del archivo debe ser obligatoriamente gadget.xml para que cumpla su propósito.

El archivo manifiesto del Gadget almacena las configuraciones que serán utilizadas por el aplicativo. Es un archivo de texto plano con formato XML que se puede modificar fácilmente.

<?xml version="1.0" encoding="utf-8" ?>
<gadget>
<name>Nombre del Gadget</name>
<namespace>Namespace.Ejemplo</namespace>
<version>1.0</version>
<author name="Nombre del autor">
<info url="http://www.webdelautor.com" />
<logo src="logo.png"/>
</author>
<copyright>&#169; 2007</copyright>
<description>Aquí va la descripción del Gadget</description>
<icons>
<icon height="48" width="48" src="iconoDelGadget.png" />
</icons>
<hosts>
<host name="sidebar">
<base type="HTML" src="InterfazVisualDelGadget.html" />
<permissions>full</permissions>
<platform minPlatformVersion="1.0" />
<defaultImage src="drag.png" />
</host>
</hosts>
</gadget>

Se destacan los siguientes elementos para configurar correctamente la aplicación

Elemento Descripción
<name> En este elemento se define el nombre del Gadget
<author> Dentro de este elemento se definen los datos del autor del Gadget. Tiene sub elementos que permiten destacar el sitio web y el logo del autor.
<description> Este elemento permite brindar una descripción sobre la funcionalidad del Gadget
<base> Su atributo Src indica a Windows Sidebar qué archivo HTML contiene la interfaz de usuario del Gadget

Paso 3: Crear la interfaz gráfica del Gadget

El usuario podrá interactuar con el Gadget de dos maneras:

• Utilizando los servicios que brinde el aplicativo desde su pantalla principal.
• Configurando las características y el funcionamiento para permitir una parametrización desde una pantalla dispuesta para tal fin.

Estas interfaces serán soportadas por archivos HTML que pueden contener cualquiera de los elementos comúnmente permitidos por los mismos.

La interfaz gráfica con el usuario puede estar basada en elementos simples del estándar HTML como listas desplegables, casillas de selección simple o múltiple, cajas de texto, etc. o bien puede estar desarrollada con un sofisticado diseño en flash, o una combinación de ambos métodos, por mencionar algunas opciones.

En cualquier caso, estas páginas harán uso de las funciones Javascript necesarias para interactuar con el modelo de objetos Gadget (del que se hablará más adelante) para brindar los servicios deseados al usuario.


Siguiendo con los pasos necesarios para hacer funcionar un Gadget realizaremos las siguientes acciones:

1) Crear la pantalla del Gadget
En la raíz del directorio NombreDeGadget.gadget generado en el paso 1, donde ya existe el archivo gadget.xml, genere el archivo HTML de interfaz gráfica que brindará los servicios al usuario y será accedido desde Windows Sidebar como un Gadget.

2) Crear la pantalla de Configuración del Gadget
En la misma ubicación, puede generar el archivo un archivo HTML para que el usuario realice las configuraciones funcionales necesarias que usted, como desarrollador, desee exponer.

3) Mantener el orden entre sus archivos
Es una buena práctica centralizar las configuraciones visuales de los archivos HTML que se exponen al usuario en uno o varios archivos de hoja de estilo en cascada (con extensión .css). En ese caso se pueden almacenar en el directorio css que hemos generado en el primer paso para tal fin.

De la misma manera, las imágenes que sean utilizadas por las pantallas HTML que se hayan creado, pueden ser almacenadas dentro del directorio imágenes, también creado durante el primer paso.


Paso 4: Programar la funcionalidad deseada

Una vez que se ha definido la interfaz gráfica, podrá hacer uso de su talento como programador Javascript o VBScript para dar vida a sus Gadgets.

Además de tener la posibilidad de programar el comportamiento de los elementos dispuestos en las páginas HTML del Gadget, podrá hacer uso del modelo de objetos extendido que provee Windows Vista para lograr grandes funcionalidades.

1) Generar funciones de Scripting
Deberá desarrollar toda la funcionalidad que se desee para interactuar con la interfaz HTML creada. Se podrá codificar en VBScript o Javascript para acceder al modelo de objetos expuesto por DHTML y brindar al usuario los servicios definidos para el Gadget.

2) Interactuar con un modelo de objetos poderoso y extendido
El modelo de objetos DHTML se ve extendido en Windows Vista para interactuar con los objetos y eventos de Windows Sidebar e interactuar con el sistema operativo, accediendo, entre otras, a las funcionalidades de:

• System.Display
• System.Environment
• System.Globalization
• System.Machine
• System.Net.NetworkInformation
• System.Shell

Paso 5: Probar, Depurar e Instalar el Gadget en Windows Sidebar

Como todo desarrollo pequeño o grande, debemos probar la consistencia y funcionalidad de nuestro Gadget antes de distribuirlo.

Si queremos instalar el Gadget en una PC podemos seguir los siguientes pasos:

1) Abrir Windows Sidebar
• Hacer Clic en el signo “+” ubicado en la parte superior de la Windows Sidebar

2) Agregar el Gadget a Windows Sidebar

En la Galería de Gadgets se podrá visualizar el Gadget creado. Para agregarlo, existen tres posibilidades:

• Hacer doble Clic en el Gadget
• Hacer Clic derecho en el Gadget y seleccionar Add
• Arrastrar el Gadget hasta la misma Sidebar.

La Galería de Gadgets reconoce todos los Gadgets que están ubicados en las siguientes direcciones:

• \Users\%userprofile%\AppData\Local\Microsoft\Windows Sidebar\Gadgets (gadgets propios de cada usuario)
• \Program Files\Windows Sidebar\Shared Gadgets (gadgets que a los que pueden acceder todos los usuarios de la computadora)
• \Program Files\Windows Sidebar\Gadgets (gadgets que ya vienen instalados con Windows Vista)

Tips
• El ancho de nuestros Gadgets no deben superar los 130px.
• Es recomendable especificar siempre tanto el ancho como el largo del Gadget, para que no se vea deforme en la Windows Sidebar.
• Se puede crear un paquete de instalación de nuestro Gadget para que, sólo con un doble clic, se instale y se agregue en la Sidebar. Para ello, seleccionamos y comprimimos todos los archivos y carpetas que forman nuestro Gadget. Dado que el ZIP quedará con el formato NombreDeGadget.gadget.zip, le quitamos la extensión zip. Con solo darle doble clic al archivo comprimido se instalará nuestro Gadget.
Descarga gadget para tu siderbar:
http://go.microsoft.com/fwlink/?LinkId=55696
gadget

Rocketdock
y ten más.

Rocketdock de softonic:
http://rocketdock.softonic.com/
Is cool
Accesos directos en la sidebar:
jdsoyyo.spaces.live.com
http://gallery.live.com/liveItemDetail.aspx?li=4ccdc564-3d94-48a5-82f6-4693940e4ab6&bt=1&pl=1

12 comentarios - Como crear un Gadget:

@CarlosLanzi
Joya +5, hacete algo y te doy 5 mas, si posteas la fuente te salvas
@caliescali
Gracias por el aporte eso estuvo una p.........
@Cav83
gracias, era justo lo que buscaba!!! se agradece!!
@dudin_san
vale compañero!!!!
se agradece el aporte
@johnbordon
Y como mierda generas la pantalla de interface grafica??!!!!!!!!!!!!!!!
@gaturronik
Ya que os haz traido tan buena informacion y tan buenos programas yo dejare unos 8 puntos
@brayitan_123
esta muy bueno el post, una pregunta ya que sabers tanto se puede crear uno para poner en mi web y cargar informacion de otras paginas en él? gracias