| Primer paso para hacer un gadget es entender la estructura del mismo. Donde se guardan los gadgets dentro de Windows Vista? Dentro de Windows vista 32bits ( los gadgets de silverlight no andan en vista 64 bits por que el sidebar de vista 64bits toma IE 6 y no se ha creado silverlight para esa versión del navegador, aquel que tenga vista 64 bits busque en la carpeta archivosdeprogramax86>windows sidebar>sidebar.exe correra el sidebar pero de 32 bits.) Los gadget se almacenan luego de ser instalador en el siguiente directorio. C:\Users\(sunombredeusuario)\AppData\Local\Microsoft\Windows Sidebar\Gadgets\ para acceder a esta carpeta si no tienen idea de como es el nombre de usuario de su computadora abran el explorer y colocen la siguiente dirección. %userprofile%\AppData\Local\Microsoft\Windows Sidebar\Gadgets Dentro de esa carpeta... para ustedes crear manualmente un gadget y que se los tome el sidebar deben ponerle *.gadget de nombre... ejemplo ivanaprueba.gadget y tener un archivo que llamaremos gadget.xml que permitira el acceso del gadget. como nosotros vamos a crear el gadget en silverlight vamos a comenzar por abrir el visual studio. - Abrir visual studio, crear un proyecto nuevo llamado silverlight con su correspondiente sitio web para alojar la aplicación.
 - Una vez que tenemos esto vamos a crear el archivo gadget.xml de la siguiente forma.
<?xml version="1.0" encoding="utf-8" ?>
<gadget>
<name>Ivana Test</name> //Pongan nombre de el gadget
<namespace>IVANA</namespace>
<version>1.0</version>
<author name="Inthi Soluciones"> //El nombre del autor
<logo src="icon.png" />
<info url="www.inthi.com.ar" /> //link del autor
</author>
<copyright>Copyright© 2008</copyright>
<description>ivana gadget</description> //descripción
<icons>
<icon width="70" height="80" src="icon.png" />
</icons>
<hosts>
<host name="sidebar">
<base type="HTML" apiVersion="1.0.0" src="gadget.html" /> //Este source gadget.html será el que se verá en el sidebar.
<permissions>Full</permissions>
<platform minPlatformVersion="1.0" />
</host>
</hosts>
</gadget> - Lo siguiente que vamos a hacer será comenzar a crear nuestro gadget. Algo que debemos tener en cuenta es lo siguiente. La página gadget.html es la que se verá como principal.... ahora existe algo que llamamos FLYOUT dentro de un gadget que es cuando los gadget tienen una pagina extra que se abre en el lado izquierdo del mismo. Si bien uno puede diseñar los gadgets a su gusto hay tamaños para cada página a ser mostrada... aquí les dejo los tamaños estándares. gadget.html // ancho 130 px alto 150 px flyout.html //ancho 350 px alto 250 px
- Muy bien vamos a crear la primer página gadget.xap.... de la siguiente forma le coloco al xaml tamaño 130 por 150 ... y dentro colocaremos un botón y
<UserControl x:Class="ivanagadget.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="130" Height="150">
<Grid x:Name="LayoutRoot" Background="LightBlue"> </Grid>
</UserControl> dentro de la grillla colocaré un stackpanel con un objeto imagen, un textbox y un botón. Agregué un archivo imagen dentro del proyecto llamado im.jpg. También le agregué un evento al botón llamado hola_click el mismo sólo le agrega un texto al texbox. <StackPanel>
<Image x:Name="foto" Source="im.JPG" Stretch="Fill" Height="100" />
<Button x:Name="hola" Background="#FF083D69" Height="15" Click="hola_Click"/>
<TextBox x:Name="respuesta"/>
</StackPanel> El evento private void hola_Click(object sender, RoutedEventArgs e)
{
respuesta.Text = "Hola mundo";
} Compilamos y generamos el archivo .xap que se aloja en la carpeta clientbin del sitio web. - Ahora trabajamos en el html que generamos el gadget.html.... lo primero que debemos cambiar es... <param name="source" value="x-gadget:///ClientBin/ivanagadget.xap"/> Debido a que vamos a hacer el isntalador del gadget y el mismo se puede instalar en cualquier computadora y como vimos antes el usuario cambia de computadora a computadora no estaremos llamando a la carpeta ClientBin en un lugar determinado por ello agregamos... x-gadget:/// . Lo siguiente que vamos a cambiar es el estilo del html debe quedar de la siguiente manera.
<style type="text/css">
body {
width: 130;
height: 150x;
margin: 0px;
font-size:11px;
background: black;
} #silverlightControlHost {
height: 150x;
width: 120px; }
</style> - Bien ahora lo siguiente que haremos será comprimir los archivos de la carpeta que contiene el html y clientbin. (nota: comprimir LOS ARCHIVOS, gadget.html, gadget.xml y la carpeta clientbin). Pero no la comprimiremos como RAR sino como ZIP.... y una vez comprimida por ejemplo...
- Carpetacomprimida.zip cambiamos la extensión a Carpetacomprimida.gadget y ahi tenemos el instalador y nuestro gadget funcionando :)
Saludos!!!! Pueden bajar el ejemplo aquí First of all to create a gadget we have to understand how it works.
Where are gadgets installed ?
Inside Windows Vsita 32 bits( gadgets made in silverlight do not work on vista 64 bits because it takes IE 6 and there is no silverlight plugin for that browser, so if u have vista 64 bits go to programfiles 86bits>windowssidebar>sidebar.exe will launch sidebar for 32 bit inside vista 64)
gadgets are installed in this address inside your computer.
C:\Users\(username)\AppData\Local\Microsoft\Windows Sidebar\Gadgets\ to locate this folder if you dont know your username open explorer and put this addres %userprofile%\AppData\Local\Microsoft\Windows Sidebar\Gadgets
inside this folder ... to create manually a gadget u have to create a folder and name it *.gadget for example ivanagadget.gadget and inside this folder there has to be a file called gadget.xml which will allow sidebar to take gadget.
we are going to create a gadget from cero so lets open visual studio.
1. Open visual studio and create a silverlight proyect with its corresponden web site to host it.
2. Once we have this we will create the gadget.xml file like this.
<?xml version="1.0" encoding="utf-8" ?>
<gadget>
<name>Ivana Test</name> //name of gadget
<namespace>IVANA</namespace>
<version>1.0</version>
<author name="Inthi Soluciones"> //authors name <logo src="icon.png" />
<info url="www.inthi.com.ar" /> //link authors
</author>
<copyright>Copyright© 2008</copyright>
<description>ivana gadget</description> //descriptión
<icons>
<icon width="70" height="80" src="icon.png" />
</icons>
<hosts>
<host name="sidebar">
<base type="HTML" apiVersion="1.0.0" src="gadget.html" /> //this source gadget.html will be the one that will be displayed on sidebar.
<permissions>Full</permissions>
<platform minPlatformVersion="1.0" />
</host>
</hosts>
</gadget> 3. the next thing we will do is to create our gadget. Something we have to notice is that the gadget.html is the one that will be placed on sidebar... now there is something called flyout inside gadgets that you can see in the gadgets that have an extra page that opens on the left side of the main gadget. Of course u can design gadget as u like but there are sized that are recommended here i will post some of them. gadget.html //width 130px height 150px flyout.html //width 350 px height 250 px 4. Ok so lets create the gadget.xap we will create the xaml changing the size of the default created. <UserControl x:Class="ivanagadget.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="130" Height="150">
<Grid x:Name="LayoutRoot" Background="LightBlue"> </Grid>
</UserControl> inside the grid i will put a stackpanel with an image object, textbox and a button . i added an image calledim.jpg inside my silverlight app i also added an event for the button called hola_click... StackPanel>
<Image x:Name="foto" Source="im.JPG" Stretch="Fill" Height="100" />
<Button x:Name="hola" Background="#FF083D69" Height="15" Click="hola_Click"/>
<TextBox x:Name="respuesta"/>
</StackPanel> the button event private void hola_Click(object sender, RoutedEventArgs e)
{
respuesta.Text = "Hola mundo";
} we compile the app and generate de xap file which is hosted inside clienbin folder. 5. Now we have to change some things in the gadget.html file... first we have to change... <param name="source" value="x-gadget:///ClientBin/ivanagadget.xap"/> we are going to build a gadget installer so as we saw in the first part the username changes in all the computers so... thats why we have to ask for xap located in x-gadget:/// the other thing we have to change in the html is the style of the html.. we have to change it like this.
<style type="text/css">
body {
width: 130;
height: 150x;
margin: 0px;
font-size:11px;
background: black;
} #silverlightControlHost {
height: 150x;
width: 120px; }
</style> 6. Ok so now we have to make the installer... les compress the files not the folder but the file gadget.html, gadget.xml, and the folder clientbin all in one piece... but the file has to be a ZIP file.... once compressed for example.
1. folder.zip we have to change the extention to folder.gadget and the installer is ready. :) greets!!!! you can download the sample here |