Live customization of a jQuery Lightbox widget in Adobe Widget Browser
Now the magic ingredient behind Adobe Widget Browser is the Flash-based Adobe Air program that allows for Web + Desktop Online or Offline savvy operation. The Adobe Widget Browser demonstrates perfectly this cross platform plus online+offline capability in a superbly virtuous design. In effect, Adobe has shown in no uncertain terms how RIM and Google have been so right and Apple’s Steve Jobs so wrong in assessing the capabilities of Flash.
How Adobe Widget Browser Works
First, go to Adobe Labs and follow the instructions there. If you don’t have Adobe Air installed, you will need to download and install it first before installation of the Widget Browser. At most it will take 10-15 minutes to do both installs assuming a reasonably fast Web connection. When you run the Widget Browser online you will see a selection of widgets like this:
Over two dozen widgets are currently available at Adobe Exchange
Double-Click on any widget to see an overview of its purpose and design. Click on the Preview button[top right corner in the screenshot below] to see a demo of the widget in action right inside the Widget Browser. many of the widgets offer users a range of 3-5 different presets so you can view different customization options for the widget. If you like what you see, add the selected widget to yor own My Widgets local library as shown in the screen shot:
Add to MyWidgets button downloads the Widget into your MyWidgets library
As you can see from the above Google Map widget, there is a fairly broad range of Widgets available including TinyMCE, Prototype, Spry, jQuery etc. But even better is the ability to preview a demo of the widget in action. This makes it a lot easier to decide which widgets fit your specific needs.
Once a widget is downloaded and added to your MyWidgets library you can customize and configure the widget with the MyWidget local customization wizard. This looks a lot like the Adobe Exchange demo wizard; however the configuration options are now available for your own customization:
Changing the configuration is Live – as the property changes , the demo widget changes too
The winning aspect to MyWidgets customization is the Live WYSIWYG formatting of the Widgets as you change various properties associated with the widget. Even better the code associated with the widget is also changed. By clicking on the Code button right next to the Live View, one gets the following code view of the customized widget:
Changing the configuration also change the source code immediately
This is certainly a useful way to see how the widget code works. Even better the code can be saved for two purposes. First. as your own customized preset widget available for display and reuse. Second, the completed customized widget can be saved to any directory for direct testing or upload to your website as part of a new page or layout.This is really a boon to all – designers and developers. The code for a complex widget can now be more readily tapped for re-use.
The Benefits of Adobe Widgets Browser
The Adobe Widget Browser works for several reasons. It is a neat and growing catalog of some of the important widgets used in AJAX development. It provides for convenient online shopping with offline development and customization of a widget. Its LiveView not only speeds up customizing a widget [the client can see and react to how a widget works] but also eases learning on the developers side of all the details on how a speciific browser object works. As well developers can go to one place to create all the variations on a widgets and thus eliminate redundant work. Finally, Adobe has outlined the technique for creating your own widgets so you can add directly to the library for your own repository of GUI Goodies:
Adobe provides a the basic hooks to adding your own widgets
Given this positive review, one would expect to see not two dozen widgets at Adobe Exchange but hundreds. Something is amiss. Perhaps the process of creating an OAM file for adding a widget to the repository is too tedious/complicated. Perhaps, there are lots more widgets but they are being used locally only. So do expect a follow up review, investigating this aspect of what appears to be a slam dunk winner for Web Designers and Developers.
One of the major problems in contemporary Web and mobile development is the proliferation of an ever broadening set of scripting languages, media resources resources and software tools. HTML5 is held out as the common integration “futures”. Adobe’s free Widget browser could act as a much needed integration point.