Ajax Bestiary: A Javascript Field Guide
 
Ajax Bestiary: A Javascript Field Guide
 
 

Entries Tagged as 'Widget'

Taking The Web To The Desktop Part 3 Widgets

Posted by Don Albrecht

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?

Proto.IPS A Fast and Easy Prototype Based Type In Place Combo Box

Posted by Don Albrecht

Prototype In Place Select

Meet Proto.IPS a fast and easy prototype based combo box modeled after the gMail Chat Widget.

Features:

  • Automatically saved when user clicks outside the widget (on blur)
  • Ability to select predefined or enter new value

You can find it at Perfection Kills

Meet Nicedit, A full featured, lightweight Rich Text Area without Library Dependencies

Posted by Don Albrecht

 Nice Edit Screen Shot

We’ve seen several of these lightweight alternatives to the traditional full featured text editors lately.  NicEdit is a fitting addition to the collection.

 Features:

  • No Library dependencies (Great when you only need a text area)
  • Flexible interface sizing
  • Under 10KB compressed
  • Only 2 files (JS & Icons)
  • Supports: IE 5.5+ / FF 2+ / Opera 9+ / Safari 3+
  • Inline editing with remote tool panel
  • Ajax Support
  • Highly configurable button set

All in all, this is a nice widget that has several features not found in other Rich Text Editors.  A worthy addition to the Ajax ecosystem.
You can find NicEdit at http://nicedit.com/index.php

Amazing 3d JS Gallery Widget

Posted by Don Albrecht

Gallery Sequence
Here’s a pretty spectacular JS based image gallery with source.  The entire gallery is a 3d fish eye interface.  It’s incredibly easy to use, visually impressive and toolkit agnostic.  It’s performance isn’t as good as some flash based options & I personally find some of the translucency to be distracting rather than conducive to the design. All in all, this is a great gallery widget for those times you need something more impressive than traditional carousels & lighbox / thickbox implementation  Check it out here: http://www.dhteumeuleu.com/ via webappers 

Flot 0.2 Released

Posted by Don Albrecht

Ole Larson has released a new version of Flot:
Key Changes

  • Added support for putting a background behind the default legend.
    The default is the partly transparent background color. Added
    backgroundColor and backgroundOpacity to the legend options to control
    this.
  • The ticks options can now be a callback function that takes one
    parameter, an object with the attributes min and max. The function
    should return a ticks array.
  • Added labelFormatter option in legend, useful for turning the legend
    labels into links.
  • Fixed a couple of bugs.
  • The API should now be fully documented.
  • Patch from Guy Fraser to make parts of the code smaller.
  • API changes: Moved labelMargin option to grid from x/yaxis.

Most notably, the new packaging includes the modified excanvas script in the zip download to greatly simplify deploying with IE support.

Read about it here:

http://ole-laursen.blogspot.com/2007/12/flot-02-released.html 

Google Charts API

Posted by Don Albrecht

Yellow line chartOutsource your charting to Google!  Yesterday I discussed my initial experiences with the Flot charting library.   Today, I’m going to give you a brief introduction to the excellent new Google Charting API.How it works, simply embed an image tag in your source that references the google chart API location followed by a set of parameters specifying the actual chart.  Google then renders the chart as a PNG that can be displayed in the browser.Features:

 

Parameter Line chart Scatter plot Bar chart Venn diagram Pie chart 
Chart title Yes Yes Yes Yes Yes
Chart legend Yes Yes Yes Yes Yes
Colors Yes Yes Yes Yes Yes
Chart and background fill Yes Yes Yes Yes Yes
Multiple axis labels Yes Yes Yes    
Grid lines Yes Yes      
Shape markers Yes Yes      
Horizontal range markers Yes Yes      
Vertical range markers Yes Yes      
Line styles Yes        
Fill area Yes        
Pie chart labels         Yes

24 Hours with Flot

Posted by Don Albrecht

flot2.pngAlright, So Flot 0.1 has been out in the wild for just under 2 days now and it’s gotten some pretty decent traction with the Ajax blogs.  I’ve taken some time over the past 24 hours to work with the library and I have to say, It’s pretty awesome. Highlights:  

  • The presets really are excellent , simple charts are very little work.
  • The charts look great, the integrated support for shadows & alpha channels really makes them shine
  • The underlying architecture is excellent.  I’ve been able to get under the hood and add needed features without any major headaches. 
  • jQuery based

Shown: A chart created with a modified version of Flot with normal range highlighted. You can get flot at: http://code.google.com/p/flot/

ExtJS 2.0 Released

Posted by Don Albrecht

It’s official, ExtJS 2.0 has landed.  ExtJS is one of the best toolkits out there for achieving ajax applications that rival desktop applications in interface richness.  Some of the new features in 2.0.

  •  Grouping & Group Summary fields: Allows you to group related grid items and create summary rows.  Data sorts within each group set instead of across the grid.
  • Scrolling tabs: You can now optimize screen Real Estate by allowing tabs to scroll off the tab par (Ala firefox)
  • Anchor Layouts: Tack the dimensions of form elements to their parent container.
  • Column Tree: The best of both worlds, integrate the powerful extjs grid & tree widgets

I should also point out that ExtJS continues its tradition of excellent documentation with a new API documentation center and rich set of demo applications to work from.   Check out ExtJS 2.0 here:http://extjs.com/blog/2007/12/04/ext-20-final-released/

A New Version of Proto.Menu has landed

Posted by Don Albrecht

Proto.Menu .5
 Proto.Menu is an amazing prototype based context menu.  It’s packaged as a prototype extension and is quite honestly, one of the best ways to through a context menu into the mix on your next project.Features:  

  • iFrame Shim so IE6 plays nice
  • explicit z-Index control
  • Callbacks (“beforeShow”, “beforeHide”, “beforeSelect”)
  • Improved Callbacks for Menu Items
  • “className” option
  • Semantic Markup

You can find the new version here: http://thinkweb2.com/projects/prototype/2007/12/03/protomenu-gets-facelift/ P.S.Whether or not you use prototype in your development process, I encourage all of you to take a few minutes and read  Kangax’s excellent write up of the release.  It’s a valuable look into the decision process that went into making an excellent widget significantly better.  

Coda Slider 1.1.1 Has Landed

Posted by Don Albrecht

Coda 1.1.1

Niall Doherty just released a minor update to the powerful & sexy jQuery CodaSlider widget. The version 1.1.1 release increases the visual styling capabilities of the widget by adding more css support.

Not a major update, but the drop in nature and dramatically increased styling ability make this an obvious addition to any projects currently using the widget.

Get it at ndoherty.com: