alogo

Free JavaScript Widget Browser

Adobe has released its best Web Development program since Dreamweaver and its free. Adobe Widget Browser is a library for JavaScript and HTML5 Cross-Platform GUI Widgets. The price of admission is free with registering on Adobe Exchange. The payoff is a way to not only scan prospective Web GUI widgets for use; but to try them out including making live changes as seen in the screenshot below:
Widget Library
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.

Now on Adobe’s  site the program is identified as the Adobe Dreamweaver Widget Browser  – but you really don’t need to own Dreamweaver to fully utilize  the Widget Browser. I have been using it effectively with every thing from NetBeans and Eclipse to Notepad++. The Widget Browser is integrated  with Dreamweaver by means of a GUI Wizard that mimics  the Adobe Widget Browser  interface. This is only  available in Dreamweaver CS5. By the way, this integration marks the first use of a JavaScript framework in Dreamweaver that is not tied to the Adobe Spry JavaScript class. Finally  a little progress and acknowledgement of major JavaScript Frameworks like jQuery, Prototype, etc by Adobe.

A key  aspect to  the Adobe Widget Browser is that it runs in Linux, Mac and PC both online and offline. Once you have downloaded a Widget from the Adobe Exchange it is available for offline development work at anytime – with or without a connection to the  Internet. As well you can make several customizations to your Widgets  and save each version locally. As noted before it is easy to export a widget for use by any HTML/CSS/JavaSCript savvy web development tool.

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:
Widget Library
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:
Widget Library
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:
Widget Library
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:
Widget Library
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:
Widget Library
Adobe provides a the basic hooks to adding your own widgets

The Widget Creation process is XML and JavaScript-based. It requires good knowledge of XML, JavaScript and DHTML coding; but the result is then a widget that a)is contained in one common library resource and b)highly customizable and c)exportable to any web development tool that can handle HTML/CSS/JS files. . Adobe has a sample of creating a widget project here – the process looks doable but tedious[hmmmm … the definition of XML?].

Summary

Adobe’s Widget Browser is a winner. It create a repository for AJAX and/or HTML5 widgets that be readily customized and then exported to specific web development projects. It also act as a learning/mentoring aid for designers who want to get a feel for what a specific widget can do for their projects. Developers will also benefit because they can get up to speed more quickly in a new JavaScript or Web coding framework. Finally the ability to create your own widgets and have the basic coding framework in a open and standardized library format[see the OpenAjax Metadata format spec here] is very attractive for web development shops large and small.

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.

Pin It on Pinterest