Developing Sidebar Gadgets – Part IV

This is the fourth installment in this series and in this series instead of providing you with a set of tips, I plan to walk you through setting up your development environment in a format that I have found works best for creating Sidebar gadgets.

Step 1

The first step is to turn off User Account Control (UAC). There are a couple ways of doing this, but this is the steps I use:

1. Click Start and in the Search box type MSCONFIG and press enter.
2. Click the Tool tab.
3. Select Disable UAC and click Launch.

You will need to restart your system for the effects to take place. I prefer to have UAC off because when I am developing something, I do not want extra delays in the process that UAC causes.

Step 2

Turn ON file extensions and Show Hidden files. Here is the quickest way to do this:

1. Click Start then click Computer.
2. Press the ALT button on the keyboard (the menu bar should appear in Windows Explorer).
3. Click Tools, then click Folder Options.
4. Click the View tab.
5. Click to select "Show hidden files and folders."
6. Click to uncheck "Hide extensions for known file types."
7. Click Ok.

I do a lot of work with files on the system – renaming them, creating some from scratch, etc. Having the extension visible and being able to view the hidden files just makes things move along more quickly for me.

Step 3

Add a shortcut to Notepad in your Send To folder. To do this:

1. Click Start then in the Search box, type: %userprofile%
2. Browse through the following folders: AppData, Roaming, Microsoft, Windows, SendTo.
3. Right-click in the folder and click New, Shortcut.
4. Type Notepad, then click Next.
5. Change the name to Notepad, then click Finish.

I right-click on files a lot and do quick editing and being able to quickly open a JavaScript (js) file or HTML file in Notepad to make a quick change is very convenient.

Step 4

Create a shortcut on your desktop to ALL of the Gadget folders. Now, for this, I use my gadget The Magic Folder. Here are the folders I add to the gadget:

• GLOBAL GADGETS: C:\Program Files\Windows Sidebar\Gadgets
• LOCAL USER GADGETS: C:\Users\<username>\AppData\Local\Microsoft\Windows Sidebar\Gadgets

To add these to the gadget:

1. Click the Settings icon (looks like a little wrench).
2. Click the Folders tab.
3. Click the (+) icon.
4. Type the name like: GLOBAL GADGETS
5. Select, type or browse to (clicking the folder icon) the proper path mentioned above.
6. Click the Disk icon to save the folder location.
7. Repeat until all the folders are added.
8. Click Ok to close the Settings fly out.

To browse to the desired folder, click the gadget, select the folder by the name you gave it. It should then open. This makes jumping around from folder to folder much easier.

Step 5

NOTE: You can download a copy of the template described below from here.

Create a default "drop-in" template for a Gadget. To do this follow these steps:

1. Create a folder on your desktop called: Template.Gadget
2. Open the folder, then right-click and select, New, Folder. Rename it to: scripts.
3. Repeat step 2 for the following folders: css, images, html
4. Right-click and select New, Text Document. Rename it to: gadget.xml.

Your folder should look like this:

 

Now, add the Gadget.xml Code:

1. Right-click on the file gadget.xml, click Send To, Notepad.
2. Paste the following code into the gadget:

   • <?xml version="1.0" encoding="utf-16"?>
     <gadget>
       <name>[TEMPLATE]</name>
       <namespace>microsoft.windows</namespace>
       <version>[VERSION]</version>
       <author name="[AUTHOR_NAME]">
         <info url="[AUTHOR URL]" text="[AUTHOR_TITLE]"/>
         <logo src="images/logo.png"/>
       </author>
       <copyright>© [YEAR]</copyright>
       <description>[DESCRIPTION]</description>
       <icons>
         <icon width="130px" height="130px" src="images/icon.png"/>
       </icons>
       <hosts>
         <host name="sidebar">
           <base type="HTML" apiVersion="1.0.0" src="html/main.html"/>
           <permissions>Full</permissions>
           <platform minPlatformVersion="1.0"/>
         </host>
       </hosts>
     </gadget>

3. On the File menu, click Save.

Now, add the CSS file:

1. Open the folder CSS, right-click, New, Text Document. Rename it to: styles.css.

Now, add the main.html file:

1. Open the folder HTML, right-click, New, Text Document. Rename it to: main.html.
2. Paste the following code into the document, then from the File menu, click Save.

   <html xmlns="http://www.w3.org/1999/xhtml">
   <!-- BEGIN HEAD SECTION -->
   <head>
       <title>[TITLE]</title>
       
       <!-- STYLESHEET -->
       <link href="../css/styles.css" type="text/css" rel="Stylesheet" />
       
       <!-- SCRIPTS -->
       <script src="../scripts/main.js" type="text/javascript"></script>
       <script src="../scripts/prototype.js" type="text/javascript"></script>
   </head>
   <!-- END HEAD SECTION -->
   
   <!-- BEGIN BODY SECTION -->
   <body class="body-style" onload="setupGadget();" onclick="clickGadget();">
       <!-- TOP OF GADGET -->
       <!--<g:background src="../images/background.png" id="bg"> 
       </g:background> -->
   </body>
   <!-- END BODY SECTION -->
   </html>
   

Now, add the flyout.html file:

1. Open the folder HTML, right-click, New, Text Document. Rename it to: flyout.html.
2. Paste the following code into the document, then from the File menu, click Save:

<html xmlns="http://www.w3.org/1999/xhtml">
<!-- BEGIN HEAD SECTION -->
<head>
    <title>[TITLE]</title>
    
    <!-- STYLESHEET -->
    <link href="../css/styles.css" type="text/css" rel="Stylesheet" />
    
    <!-- SCRIPTS -->
    <script src="../scripts/flyout.js" type="text/javascript"></script>
    <script src="../scripts/prototype.js" type="text/javascript"></script>
</head>
<!-- END HEAD SECTION -->

<!-- BEGIN BODY SECTION -->
<body class="body-style" onload="setupFlyout();">
    <!-- TOP OF FLYOUT -->
</body>
<!-- END BODY SECTION -->
</html>

Now, add the settings.html file:

1. Open the folder HTML, right-click, New, Text Document. Rename it to: settings.html.
2. Paste the following code into the document, then from the File menu, click Save:

<html xmlns="http://www.w3.org/1999/xhtml">
<!-- BEGIN HEAD SECTION -->
<head>
    <title>[TITLE]</title>
    
    <!-- STYLESHEET -->
    <link href="../css/styles.css" type="text/css" rel="Stylesheet" />
    
    <!-- SCRIPTS -->
    <script src="../scripts/settings.js" type="text/javascript"></script>
    <script src="../scripts/prototype.js" type="text/javascript"></script>
</head>
<!-- END HEAD SECTION -->

<!-- BEGIN BODY SECTION -->
<body class="body-style" onload="setupSettings();">
    <!-- TOP OF SETTINGS -->
</body>
<!-- END BODY SECTION -->
</html>

New, add the three JS files we have referenced:

1. Open the scripts folder, right-click, New, Text Document. Rename it to main.js.
2. Add the following code:

   function setupGadget()
   {   
   }

3. Open the scripts folder, right-click, New, Text Document. Rename it to flyout.js.
4. Add the following code:

   function setupFlyout()
   {   
   }

5. Open the scripts folder, right-click, New, Text Document. Rename it to settings.js.
6. Add the following code:

   function setupSettings()
   {   
   }

7. Finally, I copy the prototype.js file to this folder as well. Read my previous posts in this series to learn more about why I include this file.

Finally, create placeholder images:

1. Click Start, then in the Search box, type MSPAINT and press enter.
2. On the Image menu, click Attributes.
3. Change the width and height to 130. Click Ok.
4. On the File menu, click Save and save it to the images sub-folder as: icon.png.
5. On the File menu, click Save As and save it to the images sub-folder as: logo.png.

This is very useful when you need to start a project. In just a few minutes of customization you can have a "placeholder" gadget in place that you can immediately open in Visual Studio and start working on. Here is what I do:

1. Copy the Template.Gadget folder to the C:\Program Files\Windows Sidebar\Gadgets folder.
2. I rename it to the project name I desire.
3. I then open Visual Studio 2005, from the File menu, click Open Web Site.
4. I then browse to the new Gadget folder and click Ok.

From there I can easily start working on a new gadget. I start by modifying the XML with all the proper information, I then update the picture files, I then modify the HTML file titles, etc. Finally I begin the work of adding the HTML and JavaScript code to make my gadget a reality.

<><><><><><><><><><>

So this concludes another installment in the series. As usual, I want to hear from you on what you think. Please post comments and or send em a message.