|
Creando un Gadget
Paso a Paso
Crear un Gadget es tan simple como crear
una página Web y añadirle
funcionalidad con algún lenguaje
de Scripting.
A continuación se explican los pasos
necesarios para lograrlo, que serán
complementados con un ejemplo
práctico que podrá servirle
de referencia para empezar a crear sus propios
Gadgets.
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>© 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.
DESAFIO GADGET
|
