If you come from an OOP background you’re likely used to defining class variables like this:

class MyClass {
   var internalValue1;
   var internalValue2;
   function constructor() {  … }
}

The values which are to be stored in your object are simple, straightforward, likely to be typed, and the compiler will detect typos in the variable names. JavaScript, as a loosely types language which treats its objects more like collections than discrete objects, can’t really offer us those protections. Conversely, that also means that we have a great deal of flexibility.

In essence, we can dynamically subclass our objects, which you have to admit is a neat trick.

So, for jQuery.UI widgets, the variables stored within our widget are not defined until we assign them. The act of assignment defines the variable name, which can then be called upon at will.

Assignment is simply:

this._setData(‘variablename’, variablevalue);

Retrieval of this value is similarly straightforward:

this._getData(‘variablename’);

This does mean that the old problem of misnamed variables is alive and well. It also means that you need to be prepared to handle an undefined response to the _getData call.

If you haven’t realized it yet, widgets are here to stay and definitely represent what is currently the most ubiquitous way in which the web has been brought to the desktop. Google Desktop’s Gadgets, Windows Sidebar, OSX’s Dashboard, Opera and the venerable Yahoo Widgets (previously konfabulator) all bring tiny, self contained web pages into the users desktop space. For most people, this is the first thing that comes to mind when you mention taking the web to the desktop.

Widgets, however, are a very small piece of the puzzle. While they overcome some of the limitations of the web by placing your site front and center inside the users normal computing environment and provide some level of escape from the omnipresent security sandbox, widgets just don’t provide much that transcends the traditional web environment.

Widgets do have a role to play in the emerging web ecosystem. They are a lightweight means of integration between sites and they do provide useful tools for the user. Unfortunately, while they do provide a level of convenience, they can also provide a pretty severe level of annoyance to users. Luckily, they are very easy for users to uninstall and users vote with their mice removing any widgets they deem too annoying.

So where do widgets fit in the hybrid web ecosystem? I’m not really sure. They are definitely a motivating force behind the creation of several robust api’s for enabling the integration of disparate platforms and sites. They can also do a great job of providing alternative light weight interfaces for traditional web sites by putting underused tools closer to the daily user experience.

In my mind, I can’t really rule them out for many of my projects. They’re kind of like the gravy at a holiday meal. Even if the turkey is as moist as a swamp in June, you still make it because someone may want it and it isn’t that much more work once you’ve gone to the trouble of cooking the bird.

I’m curious, how are you using Widgets in your projects?

Coda Slider is a slick, sliding panel widget plugin for jQuery.  It smoothly scrolls between a series of dynamically created tabs and provides a slick, circular navigation.

• Some Features:
• Clean and Valid XHTML Strict
• Circular Navigation
• Dynamically Created Tab Set
• Multiple Sliders Can Exist On One Page
• Cross Browser
• Navigation is queued to prevent sudden jumps.

Some Drawbacks,

• Text not selectable in Firefox 2 PC
• Not Possible to Hyperlink to Selected Tabs / Anchor Support

Get It Online Here:

http://www.ndoherty.com/demos/coda-slider/

Read the Blog Post:

http://www.ndoherty.com/blog/2007/09/15/introducing-coda-slider/

Here’s a handy take on the lightbox image gallery that preserves the browsers back button.

The Back button closes the gallery.

Get it here:

http://www.cloversigns.co.uk/backbox/backbox.html

Here’s a handy plugin to attach elements to view port so they don’t scroll with the page.  Scripts for both pinning and unpinning are available. 

To pin:

$(‘fxtarget’).pin();

To unpin:

$(‘fxtarget).unpin();

You can get it online from clientside here:

http://clientside.cnet.com/code-snippets/visual-effects/new-elementpin/

Frequency Decoder has released a handy client side pagination script that could be great for your next project handling larger data sets.

Some Features 

• Unobtrusive and nameSpace friendly
• Supports the pagination of multiple tables on the same page
• No JavaScript knowledge required, all parameters are passed within the table’s className
• Two pagination lists created for each table, the first positioned above the table and the other positioned below
• If required, the pagination lists can be positioned within a wrapper element of your choice
• A JavaScript callback function can be declared, called immediately after a new page is shown by the script
• It’s keyboard accessible

Check it out online here:

http://www.frequency-decoder.com/2007/10/19/client-side-table-pagination-script

Dojo Grid has landed in the DojoX trunk for Dojo’s 1.0 release scheduled for the 31st of this month.

I’m eagerly anticipating Dojo 1.0.  It’s been a long time coming, but this is shaping up to be an excellent and capable release.

Read More on the SitePen Release

It’s been around all over and it’s not exactly a spring chicken, but it should probably be here to. The excellent Dev thought Fancy Menu is a visually powerful & fun menu system built in mootools.

One Note I’d like to add, however, is how well written & useful the writeup on the menu is.

Check it out at: http://devthought.com/cssjavascript-true-power-fancy-menu/

Here’s a simple and adaptable Notification widget for Prototype / Scripataculous development.

Features:

• Customizable Look & Feel
• Exists independent of Page Layout
• Easy rails integration with helpers.
• Can be used on any event.
• Ruby helper available.

Get it Here:
http://transparent-message.xilinus.com/ 

jQuery UI was released last month and provides an official UI library for jQuery development. Included in the release:

• Mouse Interaction
  • Draggables
  • Droppables
  • Sortables
  • Selectables
  • Resizables
• User Interface Extensions
  • Accordion
  • Calendar
  • Dialog
  • Slider
  • Table
  • Tabs
• Effects
  • Shadow
  • Magnifier

Although many modules aren’t ready for primetime use yet. I would advise trying to integrate the official packages in your next jQuery project.  Over the next few days we will be exploring each of these elements in more depth.