Tuesday, January 15, 2008

Build Your First Smart Space Gadget

Whenever I start a new development endeavor I almost always look to sample code to get started, and it is even better if it is a simple sample. So with that I will attempt to give you my version of a ‘Hello World’ sample for Smart Space gadgets. Changing things up a bit I will make this a notepad sample as this is pretty common in the Gadget/Widget world.

For this sample I am using Smart Space 9.3.1 and Visual Studio 2005 and will be writing my code in C# (sorry VB’ers). I have the Smart Space client installed on my machine and I have the Smart Space SDK Wizard installed. The SDK Wizard is what enables you to create gadget projects in Visual Studio. Let’s get started:

First launch Visual Studio and select New Project from the File menu. You will get the following new project dialog. In this dialog select the root node for the language you plan to develop in. Smart Space has templates for Visual C# or Visual Basic. Select the gadget template, type a name for your gadget solution and click the ‘OK’ button. Remember the project name will end up being the name of the gadget that your users will see, so select something easy like DeskNotes or Notes instead of something like gadget1.

Once you click OK the project will get created and you will be presented with the following dialog. From this dialog you simply need to give the gadget a namespace. This is used to identify the gadget in the xml file associated with the gadget. (currently named gadgets.xml)

Once you click finish on the dialog you can begin writing code or interacting with the project.
To keep this sample simple we are going to use the designer in Visual Studio to layout our gadget. For this sample, layout should be simple, all we really need is a textbox.

  1. In the project double click the user control named Gadget and you will be put in design mode.

  2. In the toolbox select the textbox control and add it to the user control.

  3. Edit the properties of the textbox to make it like work like a note pad. Here is what I changed:

    • Set Multiline to True
    • Set Dock to Fill
    • Set BackColor to Yellow
    • Set BorderStyle to None

  4. Resize the gadget to a starting size that you want when the user opens the gadget.

From here you can run your project to test it out and see your first gadget in action. Please take note that we have not written one line of code!

Now let’s add a bit of code to make this gadget more useful. For starters lets add menu items to change the color of the notes. You can add this code on almost any event for the gadget but I usually use the load event for the gadget user control.

//create the commands to be added to the default menu
ICommand commandYellow = CommandHelper.CreateCommand("Yellow", "Yellow", "Yellow");
ICommand commandBlue = CommandHelper.CreateCommand("Blue", "Blue", "Blue");

//add events for the commands
commandYellow.Executed += new EventHandler(commandYellow_Executed);
commandBlue.Executed += new EventHandler(commandBlue_Executed);

//add the commands to the default gadget menu

This will add two sub menus under the default gadget menu named Yellow and Blue. You can also add these to the toolbar with a slight variation in the code.

//add the commands to the gadget toolbar

All that needs to be added is the code to execute when the events are fired on these new commands. Here is a sample for one.

private void commandBlue_Executed(object sender, EventArgs e)
this.textBox1.BackColor = System.Drawing.Color.Blue;

Now the user can decide what color they want their note to be. Now there is one last thing to do to make this gadget really useable; save the text and color of the note so it will be restored when the user switches Smart Space desktops or restarts Smart Space. As a developer this is something you can handle on your own but is can get pretty tricky because of gadget and desktop instances in Smart Space. Because of this there are some methods and interfaces that will make this easy.

To do this start off with a new public structure with variables to store the settings, and you need to then create a local variable of that type.

public struct GadgetPreferences
public String noteText;
public Color noteColor;

private GadgetPreferences preferences;

When closing the gadget add code to save your preferences. This is usually done in the ‘stop’ event for the gadget but can be done at anytime.

public override void Stop()
preferences.noteText = this.textBox1.Text;
preferences.noteColor = this.textBox1.BackColor;

//save the preferences for the gadget

When loading the gadget you will want to restore these preferences if they exist. Again this can be done in many places but I usually do them in the load event for the gadget user control.

//get the preferences for the gadget
preferences = this.LoadGadgetPreferences();
this.textBox1.Text = preferences.noteText;
this.textBox1.BackColor = preferences.noteColor;

When loading the preferences you may need to account for the fact that the preferences are blank or null. I often have some if statements or try catch blocks to assist when loading the preferences.

Well there you have it, a fully functional notepad gadget. You may decide that you want to expand on the concept and allow for more colors, use a RichTextBox control, support various fonts, use images for the notes background, etc.


Mr.M said...
This comment has been removed by the author.
Mr.M said...

wow this is very complete tutorial than before I found

tahnks dude, waiting your next tutorial