Developing Sidebar Gadgets – Part V

Posted on by David E. Craig

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.

    image
  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:

    image

  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:

    image

  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:

    image

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

    image

  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:

    image (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:

    image (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:

    image (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. smile_nerd

—————

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. smile_angry 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… smile_shades

Leave a Reply