Last year (wow, has it really been that long), Matt Dyor contacted me because of my work with The Magic Folder. He had an idea for a type of application/file/anything launcher. We initially started off with a Windows Sidebar Gadget called My.Crocuts. However, Matt – a patent attorney and fellow Microsoft employee – had been recently working with some folks at Office Labs. They were looking for "grassroots innovators" in the company and he pitched the gadget we created to them. They loved it!

About 3 months ago we started working really closely with Office Labs and they assigned a team to our project and really helped us get it off the ground. Actually, they did a lot more than that… a lot. I would have to say that they took our prototype and turned it into a polished piece of professional work.

My.Crocuts was reborn as Speed Launch. You can download it from here and read an article about my partner and I here…and here. Have fun!

• I have been working on a joint project for a new Gadget. I cannot reveal any details at this point, and I know I have referred to it in the past, but it should be coming real soon.
• I am still collecting material for a Part 6 in my Developing Sidebar Gadgets series. I hope to post that in the next few weeks.
• I am also about a month away from another gadget I have been working on.

Finally, I have found some time to update ClipCollector to version 2.0. I have added the most requested feature and that is the ability to save the clips so that they will still be in your collection after a Windows reboot. And if you do not like this feature you can also turn it off in the Settings flyout.

Like any updates, it should be a day or two before it is live on the gallery so keep an eye out for it, update it and then let me know what you think.

It has been a long while since I updated The Magic Folder. I have made two really large additions to the Gadget:

1. New folder graphics. You ca choose from 4 different folder graphics styles (see below).
2. A "The Magic Folder" on your file system. This new folder appears in your C:\Users\<username> folder when you turn on the option. You can save file to this location and have them distributed by file extension wherever you want them.

NOTE: With option #2 you can also add to your right-click Send To folder option to now move files to this location and allow it to be a catchall for all your file types.  I will share more on this in an later blog posting – so stay tuned.

Here is a look at the new folder types:

These styles are (from left to right): Magic, Default, Sideway and Skinny.

I have a few other plans in store for this gadget, namely adding an option to allow you to specify your own default location for "The Magic Folder" on your file system. Also, I am probably going to clean up the new images a little, I just do not feel 100% good about them yet. Finally, and ability to add Internet Folder locations (HTTP and FTP folder locations).

IMPORTANT: As is usual, the update was placed on the site around 3:00PM CST. It takes anywhere from 6 to 48 hours for the gadget to be approved and posted. As soon as it is live you should get prompt from the Gadget itself that the update is available.

Let me know what you think about it.

This project has been on the back burner for some time, but I am planning on releasing version 2.0 of The Magic Folder in the coming month.

I am trying to work out some technical difficulties with the updates, but as soon as I figure them out I will be posting the update. Here is what is planned new for the next release:

• Watch Folder – a folder (c:\Users\<userName>\The Magic Folder) will be placed on your system where you can save files from applications or for downloading items from the web. Anything placed in this folder will cause The Magic Folder to jump into action and do its thing.

  NOTE: Unfortunately, this feature will only be available with the File Extensions option enabled.
  NOTE: In further updates I plan on possibly adding the option to place this folder in another location. I want to get feedback on the feature first, before I begin to customize the gadget further.

• More folder icons to choose from (styles).
• Small enhancements under the hood to make the experience faster/better.

The big change as you can see if the Watch Folder. This is actually a large technical change but I am getting close to completing it.

This is the fifth installment in this series. It has been a very long time since I posted in this series. This is partly because I have several Gadget ideas I am working on and one (in which I am partnering with someone else) that is taking up a ton of my free time. However, I have a few more tips for you:

Tip #1

If anyone looked at the source code for my first major gadget: The Magic Folder, you would find a whole ton of files. Mainly because I have many different fly out windows for different purposes:

1. Error message fly out
2. Status update fly out
3. File Move messages fly out
4. File extension registration fly out
5. And a few others.

Since that time, I have learned a new way of utilizing only one fly out file. That is by using absolute position in my style sheets and by setting the display style setting to none for frames/DIV segments I do not want to be shown. Like this:

.some-style-name
{
   position:absolute;
   display:none;
   top:0px;
   left:0px;
   /* more stuff here */
}

You can then then add a div like this into your HTML file:

<div id="someID" class="some-style-name">
   <!– whatever you want in here –>
</div>

In your JS file you can enable the section you want to display by changing the display property:

someID.style.display="inline";
someOtherID.style.display="none";

Using DHTML like this in gadgets is extremely useful, plus if done right, you can make your gadget look quite professional.

Tip#2

Graphics… oh so important! I covered this very briefly in my first posting in this series. Well, let me tell you what I do. First, I use Microsoft Office PowerPoint 2007 to create my graphics. Some of you may scoff at me for doing this, but I find it amazingly easy to create stunning looking graphics using the drawing tools available in PowerPoint. So let me walk you through creating a GLOW button in PowerPoint:

1. Open PowerPoint.
2. Delete all the stuff you have on the slide (press CTRL+A, then DELETE)
3. On the Home tab, in the Drawing Gallery, click the oval tool, then click anywhere on the slide (just click, do not drag click). This should put a perfect circle on the slide.
   
   
4. Click the shape, then on the Drawing Tools, Format tab, select an Intense effect from the Shape Styles gallery. I chose Orange intense effect like this:

   

5. I then add some text into the shape and format it just the way I want it to lok using the tool available in PowerPoint:

   

6. I then add another circle to the slide using the same method as before. This time, I right click on it, and select Format Shape.
7. I then change the fill to be the same accent color, set the transparency for the new shape to be about 75% and then I remove the border from the image:

   

8. Next, I change the 3D-Format to make the new shape look like a gel button top:

   

9. Finally, I move one shape over the other, select both, right-click, then select Grouping, and Group.
10. From there, I right click on the button I created and select Save as Picture. I choose PNG format since it works best with gadgets. This is the result I get:

    (button.png)

11. I then make a copy of the original grouped object in PowerPoint. I un-group it, move the top of the gel button over, and set the text to be 100% contrast to it’s original setting and then lighten up the color of the shape to be a very bright – orange – in this case. I regroup it and save it out as well:

    (button_hover.png)

12. Finally, I make a copy the brightened group, un-group it, and change the 3D-Format to have a divot or pressed look. I then re-group it:

    (button_push.png)

13. In the end, I get some really great gel buttons from PowerPoint with minimal effort. I then use the following code and viola, DHTML makes them come to life and act like a real gel button:

<img id="myButton" src="button.png"
     onmouseover="this.src=’button_hover.png’;" 
     onmousedown="this.src=’button_push.png’;"
     onmouseup="this.src=’button_hover.png’;"
     onmouseout="this.src=’button.png’;" 
     onclick="myButton_click()" />

Sometimes I need to do some resizing and cropping work with my images. For such work I have found a GREAT application that does just about anything you might ever need as far as graphics editing (and it is FREE). It is Paint.NET. Check it out.

—————

Well that concludes this installment. Do not worry, I have lots more to share. Currently, one of my biggest peeves is the lack of a LISTBOX control in HTML.  There are the drop-down list boxes, but I have longed for a listbox that will show all the items in a scrollable box, and even have the option to check/uncheck or multi-select items. Well, in my latest gadget, I think I have tackled this problem and will share it with you in the next installment…

Well, you would think I fell off the face of the Earth…

However, I am actually quite busy. I am working on a joint project with someone else creating a really cool gadget. I cannot say much about it now, but will in coming weeks.   Currently, I have two other primary projects of my own – new gadgets – that I have been working on. However, with the little one starting school (he is now in Kindergarten), the last month has been just a little crazy. I hope to have the new gadgets posted some time over the next couple of months.

And, I am still compiling notes for a fifth installment in the creating Sidebar Gadgets series.

For now, back to heads down work…just wanted to chime in…

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.

For those who know

that I work for Microsoft. Last week was a huge global briefing in Seattle for the Sales, Services and Support groups at Microsoft called TechReady. there was a lot of great information and way more sessions than I could possibly attend – even though many more interested me than not.  I love to learn and since learning is what TechReady was about – I loved it!

However, I wanted to highlight the fact I got to meet with one of the Program Managers in the Windows SideShow group. I had a very long and friendly conversation with him and expressed my frustrations with creating a SideShow gadget – especially deploying it. Most of what we discussed borders on confidential information, but I can share that I left the conversation feeling very good about the future of this technology and if you are interested and/or frustrated, all I can say is to stay tuned.  

As for SideShow gadgets, I have a few ideas brewing – it is just a matter of finding the time…

This is the third installment in the series. See the link list on the left side of my side home page to view the other entries in this series.

As I have developed sidebar gadgets I have found that time and time again that they make themselves MOST useful when pulling data from the web that you access quite often. Most of the common things you can think of are already taken, such as Stock quotes, News feeds, etc. So finding something new is not as common as trying to build a better what-ya-ma-call-it. So with that lets start off with the tips for this installment:

Tip #1

Do not create another search gadget and post it on Windows Live Gallery.  First, these are the easiest gadgets to create and there have to be over one-hundred of these things out there. All you do is add a text box and a button to an HTML page, maybe even make them pretty and then you have 3 lines of code:

function go()
{
    System.Shell.execute
         ("http://search.live.com/results.aspx?q="+
          txtBox.value)
}

I have looked at the source code of several of the "search" gadgets on Windows Live Gallery and many of them route your request through a secondary web site before they send your request to the desired search engine. Likely they are collecting your search data and your IP address for some monetary purpose – search demographics or something.

Regardless a search gadget simply removes a single step out of the search process – you enter a search term and press enter and it opens the browser for you – they really only look nice on the SideBar and do just a little more than take up space. I am not trying to deter you from creating a search gadget if that is truly what your heart desires – and it may even be a great starter gadget for a newcomer.I just suggest not posting it on Windows Live Gallery because there are already enough of them up there and most are welcomed with lots of ire by the community at large.

Tip #2

Let users know when you have posted an update to your gadget. Now there are two ways to do this, the way I currently use is to have a web service on an external web site that holds the location – this is more complex so lets save that for another day. However, I have long been looking for a more simple option to update based on the version posted on the Windows Live Gallery Site. The following code will work with the later:

function checkForUpdate()
{
    try {
        var url = LIVE_ITEM_URL;
        var myAjax = new Ajax.Request(
                                        url,
                                       {
                                        method: ‘post’,
                                        onComplete: parseResponse
                                     });
     } catch (ex) { /* DO NOTHING */ }
}

function parseResponse(originalRequest)
{
    var txt = new String(originalRequest.responseText);
    var startTxt = 0;
    var endTxt = 0;
    startTxt = txt.indexOf("<span
id=\"ctl00_ContentPlaceHolder1_LiveItemDetailInfo1_ltVersion\">",
startTxt);
    startTxt = txt.indexOf(">",startTxt) + 1;
    endTxt = txt.indexOf("</span>",startTxt);
    var sVer = txt.substring(startTxt, endTxt);
    if(sVer != System.Gadget.version)
    {
        // update the user in some way
    }
}

So here is what this does:

• LIVE_ITEM_URL can either be a global variable or you simply replace it with your item URL. It will look something like this:

  http://gallery.live.com/liveItemDetail.aspx?li=0ed6a06a-6782-41a7-b68c-2753fad412a5
  

• However, there is a catch 22 here. You will not have this URL until you have posted your item to the gallery and you cannot post your item to the gallery with an update routine unless you know the URL. As such here is what I suggest:
  • Place the item without an update routine on the gallery.
  • Once it is live, add the update routine and then repost it.
  • In the meantime, take the item offline through the gallery options until the second post is live.
• You need the Prototype library as per my previous tips to get the AJAX function. What this essentially is doing is loading the Windows Live Gallery page into a parser.
• Once the page is loaded the parseResponse function is called. This function then takes apart the HTML that is returned, looking for a specific tag and it parses the version from the HTML and compares it to the gadgets version. If they are not the same, then the user will get an update prompt of some form – as you desire.

Of course, this code can be refined in many way and some try/catch work can be done here, but the general purpose of this example is to get you started. My suggestion is to also have the update routine called when the gadget is first loaded and also set a window timeout for every 8 to 24 hours to check for updates. Something like this:

function checkForUpdateLoop()
{
    // check for update
    checkForUpdate();
    // loop once every 8-hours              
    window.setTimeout("checkForUpdateLoop();",28800000);
}

This code essentially loops every 8 hours and calls the checkForUpdate function as defined previously and then sets the timer to wait another 8 hours.

Tip #3

This is simply an item from my playbook and you can follow or not – your choice. But I have found it easiest and best to keep the source code for each HTML file in your gadget in a separate file. For example: main.html has main.js, flyout.html has flyout.js, settings.html has settings.js, etc. In addition, there are several times you find yourself calling similar or the same functions from each page. In this case I create a file called core.js in which gadget specific routines that are not specific to any one page are kept. Finally, I have one last file called helper.js that I sometimes include and this contains functions that are generic across all gadgets and are useful from project to project.

It can make debugging a problem a lot more simple when you think about each page having a separate file.

Tip #4

And this leads into a few of my favorite debug tips. Debug tips in general are few and far between in the Gadget world and it can be really hard to debug a gadget if you are not sure where to start. So, here is what I do:

1. Turn on all Internet Explorer Debugging options – regardless of your default browser, you need to do this in IE:
   • On the Tools menu, click Internet Options
   • Click the Advanced Tab.
   • Under the Browsing options, clear the checks from both:
     • Disable script debugging (Internet Explorer)
     • Disable script debugging (Other)
   • This way you will get a script error each time there is a serious issue with your code. Plus the error contains a line number which refers to the line in the given HTML or JS file where the error occurred.
2. Use Visual Studio to edit your files. There is a free version of Visual Studio.NET Express Edition that you should download. You get context sensitive help – inline – you get real-time error checking of both the HTML and the JavaScript, and you also get a good interface for navigating your project. Finally, and this where it helps for debugging, you can turn on line numbers: Tools, Options, Text Editor, All Languages (or the specific language you use like C#), check the option for Line Numbers.
3. Keep your gadget in the Global Gadget location while you are debugging it: c:\Program Files\Windows SideBar\Gadgets. You should also create a shortcut to this folder on your desktop. Otherwise if your VS project is in My Documents you have to zip it, rename the extension, then double-click on it to register it and get it loaded in the SideBar to test it. If it is in the global location you simply need to load/unload it through the interface to reload and get the changes. This by itself makes debugging 1000% faster.
4. Use comments in your code. I know, I know… you wrote the code, you know what it is doing, right, right…

Tip #5

Use CSS (style sheets) as much as possible and try to standardize the styles you want early on and stick with them. You can specify page size, shapes size, object positions, z-order, graphics, font styles, borders and much more with style sheets. The other reason they are important is because all you have to do in your code is change the className of an HTML element and it will change its style on the fly. I will cover this in more detail in a future posting, but for now, if you are not familiar with style sheets and how they are useful, read this article.

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

So this concludes the third installment. I have received good feedback on my previous postings but I really do what to hear from you. If you like this series, please chime in and let me know what you are thinking. What should I do to improve it…