Developing Sidebar Gadgets – Part V

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…