Apple is in the hardware business:

People who think of the argument as being Apple vs. Microsoft think of the two companies as being in the OS business. But Apple is not in the OS business, and hasn’t been in that business since Jobs returned and quickly killed the OEM Macintosh market. Think of an iPod touch. Would anybody argue that when you buy an iPod you are buying a copy of OS X with a dongle that happens to play music attached to it? Seriously? is anybody complaining that they can’t transfer their copy of OS X from an iPod touch to whatever lame music player Microsoft is peddling this week?

[Via: raganwald]

Yeah, so what if I’m a fan boy too.

After playing about with a variety of methods (and nifty tools), I settled on using the good old zip command’s exclude directive (-x) to skip the hidden directories.

The -x directive lets your specify files to skip while creating an archive. It can also take a file as an argument, in which you might store a lot of directory patterns.

Here’s how you do it:

zip -vr scal_0.2.zip * -x@exclude.lst

This will create an archive of all files in the current directory (with a recursive romp through sub directories) and skip any file that matches the patterns defined in the file exclude.lst. My exclude.lst looks like this:

*.svn*
*.DS_Store*
exclude.lst

I include exclude.lst because it is in the same directory as my files and I do not want it included in the archive. If you make a script out of this command, you can put the script filename in your exclude.lst file.

Enjoy!

  adding: index.html    (in=8314) (out=2136) (deflated 74%)
  adding: javascripts/  (in=0) (out=0) (stored 0%)
  adding: javascripts/effects.js        (in=38685) (out=8904) (deflated 77%)
  adding: javascripts/prototype.js..    (in=124137) (out=28414) (deflated 77%)
  adding: javascripts/scal.js   (in=13987) (out=3486) (deflated 75%)
  adding: javascripts/scalplanner.js    (in=5440) (out=1416) (deflated 74%)
  adding: javascripts/unittest.js       (in=20202) (out=5049) (deflated 75%)
  adding: planner_test.html     (in=4472) (out=1486) (deflated 67%)
  adding: scal_unittest.html    (in=4023) (out=1264) (deflated 69%)
  adding: scaltester.html       (in=2710) (out=950) (deflated 65%)
  adding: scaltester_new.html   (in=8312) (out=2130) (deflated 74%)
  adding: slick_test.html       (in=1836) (out=808) (deflated 56%)
  adding: styles/       (in=0) (out=0) (stored 0%)
  adding: styles/images/        (in=0) (out=0) (stored 0%)
  adding: styles/images/blackback.jpg   (in=699) (out=369) (deflated 47%)
  adding: styles/images/blueback.jpg    (in=721) (out=541) (deflated 25%)
  adding: styles/images/blueline.jpg    (in=1089) (out=975) (deflated 10%)
  adding: styles/images/bullet_red.gif  (in=282) (out=208) (deflated 26%)
  adding: styles/images/close.gif       (in=167) (out=167) (stored 0%)
  adding: styles/images/next.gif        (in=875) (out=301) (deflated 66%)
  adding: styles/images/prev.gif        (in=879) (out=305) (deflated 65%)
  adding: styles/scal.css       (in=11114) (out=2600) (deflated 77%)
  adding: styles/scaltables.css (in=4052) (out=880) (deflated 78%)
  adding: styles/stylemain.css  (in=914) (out=340) (deflated 63%)
  adding: styles/test.css       (in=1291) (out=474) (deflated 63%)
total bytes=254201, compressed=63203 -> 75% savings

Since I’ve already developed a calendar control using the Prototype js and scriptaculous frameworks, I have the basic materials I need to build the widget.

Before you begin, you might want to take a look at the Dashboard Widget Tutorial on Apple’s Developer site. I found it helpful, though ultimately I wanted to dig into the code. You probably do to, so let’s take a look at the structure of a Widget.

The Widget Structure

Any widgets you’ve installed on your system are stored in ~/Library/Widgets. If you look at that directory in the Finder, you will see something like this:

The Widget application file is an archive, just like most Mac applications. This means you can open it up and see what’s going on under the hood. You can also hack it if you want (customize menus, images, even code in some places). This is one of the hallmarks of the MacOS and OSX. Well, maybe that’s a bit strong. Let’s just say the feature has been around for awhile and it’s kinda cool.

To reveal the contents of the widget, right click on the icon and choose “Show Package Contents”. This will open the archive as a folder and show you all the goodies inside.

[TIP] If you are a TextMate user, you can just drag the icon of the widget onto TextMate. This will launch a new project using the Widget’s folder and give you easy editing access to all of files inside the Widget.

The basic structure of a Widget is pretty simple. You have index.html, info.plist, a couple of png image files, and a stylesheet. The images are used by Dashboard to show placement when you add the Widget and as an icon in the list of Widgets. The plist file holds the base information about the control (name, size, etc). The index.html file is of course where the action takes place.

The screenshot above shows a lot of files in addition to the basic four. Don’t be scared. These files are just the support files for prototype and scriptaculous and my calendar control (scal).

Scal Widget

Download Scal Widget (ZIP)

Once you’ve downloaded and expanded the ZIP archive, you can double-click the Scal.wdgt file to install the control in Dashboard. However, as I said above, you could also right click on the icon and choose “Show Package Contents” to open the widget as a folder. Lastly, I set up Scal to use the “dashblack” theme, so if nothing else you can see how not-close my CSS is to Apple’s.