- We design and build extraordinary applications for companies looking to make the next great idea a reality.
- learn more
GWT Rolodex now at Google Code
Chris Jones was kind enough to move his GWT Rolodex widget over to Google Code. Looks like you no longer have to resize your own images.
Grab your stack of images (you'll get the best results from images that are roughly the same medium size) and place them in the same package space as your RolodexCardBundle.
That's it. Just drop them in a directory. Check out the RolodexImageBundleBuilder.java for the code that does the magic at compile time.
One enhancement planned already is to do a real perspective transform to "get rid of the jaggies."
Technorati Tags: ajax, gwt, rolodex
Topics: Ajax Frameworks, Ajax Widgets, Google, GWT
SMash - Something Useful from the OpenAjax Alliance?

In the announcement that the OpenAjax Alliance had released OpenAjax Hub 1.0, and would start to work toward 1.1, there was one thing that caught my interest: the news that 1.1 would support secure mashups. Given that proxies and JSONP are both pretty open to abuse by unscrupulous service providers, this was certainly welcome news? So, what exactly does this secure mashup support look like?
The nascent SVN repository at Sourceforge wasn't much help -- mostly just a placeholder for future work. A little digging reveals that the OpenAjax technology will be based on a technique known as 'SMash', developed at IBM for performing secure mashups. I was able to locate a copy of a research paper on SMash (not sure if this is meant to be public, so grab a copy).
Topics: Ajax Widgets, Mashups, Security
GWT Widget: Rolodex
Chris Jones of YesMail has written a pretty slick rolodex widget (see the Google groups thread about it).

Right now the animation images are generated by hand, but with a little bit of Java 2D, this can happen at compile time. You can kind of see some of the issues here of Flash v.s. DHTML. Flash has all sorts of image transformation goodness, while DHTML is a little handicapped here. You could use something like Reflex instead of compile time image transformation, though I haven't tried out how well it performs when animating.
Anyhow, nice work Chris. It's nice to see folks pushing the boundaries of what one can do with DHTML widgets.
Technorati Tags: ajax, gwt, yesmail, widgets
Topics: Ajax Widgets, GWT, Widgets
A Spinner Widget
Update: I've added the controls to spin forward an backward, mouseover effects on the image and a simple onclick action.
I've been working on a spinner widget. "What is a spinner widget?" I heard you cry. If you've seen those flash widgets on Amazon that spin product images around in 3D, you know what I mean. I wanted to see if this could be done in pure DHTML. Well, it can, see image below and a demo here.

The widget uses projection geometry (a view point and calculating image size and position based on where lines pass through the z=0 plane) and a little bit of trigonometry for the circle. Also, zIndex is set based on an object's z coordinate. At this stage the implementation definitely performs differently based on machine horsepower and browser platform. It performs pretty well on IE7 and Safari 3, less well on Firefox.
The implementation is in GWT 1.5 (built from SVN), but could be done in pure JavaScript (obviously). Next steps include direct manipulation of the spinner (drag to spin the circle) and drag and drop, response to clicks on images, the ability to spin arbitrary DOM elements, etc. Also, I want to squeeze some better performance by using an image strip (clipped with CSS). Stay tuned.
Technorati Tags: ajax, gwt, widget, 3D
Topics: Ajax Widgets, GWT
MyGWT Widget Library
I just came across the MyGWT widget library, a collection of good looking additions to the basic GWT widgets. From the site:
MyGWT is an open source Java library for the Google Web Toolkit. The library helps developers easily create compelling desktop like AJAX web applications. No messing around with HTML, CSS, or images, all MyGWT widgets look great out the box.
They look reasonable, and for those of us that want to avoid messing with CSS and icons, this is definitely an option. Just plug them in and your tree widgets can look like the ones below.

Beyond pretty widgets, the library includes an AsyncTree (i.e. it will show a spinning wheel and dynamically load the subtree just exposed via user action) and a small number of DHTML effects, such as DnD, fade, etc. The site goes on to say that MyGWT was heavily influenced by Ext JS, the slick Ajax JavaScript framework.
BTW, the link on the home page to the demo application is incorrect. You can find it here. In general, the www.mygwt.net host doesn't work. Just trim off the "www" and you should be good to go.
Technorati Tags: ajax, gwt, widgets
Topics: Ajax Widgets, GWT
Cross-platform widgets: fact or fiction?
For such a simple idea, widgets (or "gadgets" or "modules" or - ugh - "badges") are ridiculously complicated. Take three basic web technologies (XHTML, CSS and JavaScript), wrap them in a fourth (XML), and you should have a really simple, powerful way of deploying a platform-independent UI for your remote data. Yet between Yahoo Widgets, OS X Dashboard, Google Gadgets, Vista Sidebar, Netvibes Widgets and the umpteen other flavors out there, broad deployment is time- and cost-prohibitive. Pretty much every major implementation is incompatible with the others. Often, a single vender offers multiple overlapping versions of its platform, such as Google Desktop vs. iGoogle and Windows Live vs. Vista Sidebar. I'm all for healthy competition and the innovation it produces, but couldn't each big player at least release a unified API for all of its properties?
Amid all of this chaos, what's a would-be widget author to do? Probably the same things as widget users: weigh the options and pick a side. True, the WC3 is beavering away on a standards spec, but we all know how long that's going to take. By the time anything gets signed off on, the fad will either have died out or, perhaps worse, have become a long-term part of the web ecosystem. Imagine hundreds of thousands of legacy widgets written in proprietary formats, a huge number of which will never get refactored to meet the standards. And that's assuming the various widget platform vendors even agree to sign on. It's easy to imagine Google jumping on board, but much harder to hope the folks in Redmond will follow suit. Who knows about the other players?
True, tools have sprung up to translate certain types of widgets into certain other types. But these are stopgap solutions with often unpredictable results. Even when the widgets work, they often don't look pretty in their new homes. And nobody yet has come close to a write-once, run-anywhere SDK for widgets. Translation is the best option the marketplace has produced.
That said, I'm keeping an eye on UWA, the new Netvibes "Universal Widget API." This is another translation methodology, but instead of a third-party application that performs a one-way port of an existing widget, it's an actual spec for authoring widgets once and then compiling them to the various platforms. Thus far it mainly supports Netvibes itself, iGoogle and Dashboard. But Vista support is on the roadmap, and Yahoo support has been discussed. Best of all, they're planning to open-source it. If this API ends up being halfway as useful as it promises, perhaps it will offer a good middle path while the official standard takes shape.
[Lest I end on a completely hopeful note, here's a somewhat related digression: I'm also often depressed by the way the aforementioned standard web technologies get used in widgets. To a certain extent, pretty much all of the widget platforms force you to develop kludgy code. iGoogle and other Web-based platforms scale their widgets based on the size of the browser window. Some developers spend the time to come up with intelligent liquid layouts, but the limitations of fixed-height iframe wrappers make design compromises inevitable. A lot of the third-party widget-assembly shops just slap together some fixed-width design based on the worst-case scenario and built the entire interface out of a sliced-up PSD file. Forget font-scaling and other basic accessibility considerations. It's like the 640x480 viewport all over again, but in miniature. The more things change...]
Topics: Accessibility, Ajax Widgets, Open Source, Web 2.0, Widgets
My Mash Note to Microsoft, Newest Member of the OpenAjax Alliance
It is easy to be cynical about Microsoft's recent entry into the OpenAjax Alliance. After all, the alliance is mostly a marketing vehicle for it's members. The "technology" portion of the OpenAjax Alliance revolves mostly around things like playing namespace cop -- more problems of the Javascript language and browser platform than real framework issues -- and is making very modest progress. Beyond the bitching of the odd developer about Prototype not playing nice with other frameworks, the real problem with Ajax frameworks is that they each reinvent the wheel, not that they don't work well together. This sort of ad-hoc interoperability -- making sure that different libraries and frameworks don't clobber one another -- reminds one of the legislative process: when the parties are divided, a weak compromise is often the best for which you can hope. (See John Reisig's take on why the OpenAjax Hub is in fact not a very good technical solution.)
Not that these efforts are useless; they are better than nothing. But both Ajax and the browser platform are still moving targets. Investing heavily in a standard that may evaporate once the next version of the browser comes out or if Ajax development moves away from direct browser programming to more abstracted models (Echo2, GWT, etc.), seems like something you would want to do quite slowly.
So, is Microsoft's entry a sign that it really wants to play nice, or is this part of its diabolical plan to "embrace, extend and extinguish?" I think the answer is more the former than the latter, and that has me feeling all warm and fuzzy towards my blue badge buddies in Redmond. I think Microsoft, by getting rid of its annoying compatibility layer, is trying to embrace open source Ajax libraries. Why? Because they realize that writing fancy eye-candy DHTML/Ajax wizardry is hard and expensive. Much better to treat this little browser ecosystem the way they treat custom WinForm controls -- a marketplace too fragmented for MS to efficiently play, but whose vitality and diversity needs to be encouraged in order to add value to the base platform, .NET in both cases.
I think this apparent willingness to foster third-party Ajax libraries is the real news, not their entry into a very corporate ("Member of the OpenAjax Alliance"), very marketing oriented, marginally technically useful organization.
Topics: Ajax Components, Ajax Frameworks, Ajax Widgets, Editorial
Using GWT to Write Opera Widgets
I've been experimenting with GWT, seeing how it can be hacked into unusual applications -- bookmarklets, Greasemonkey, widgets -- without breaking. The answer is that there are a number of things about the GWT runtime that break in these scenarios (Each bit of code loads in a different HTML file, so each has its own sandbox, therefore, no cross site action). I'm still looking at ways to make it work, but in the meantime, GWT can be used without any problems to develop Opera widgets.
These widgets, once installed, sit on your desktop, have access to some permanent storage, and can access pretty much any site, so those cross domain Ajax doohickies you wanted to develop? Now there is a way of doing it that doesn't involve proxying through a web server.
I took a crack at developing a little "Hello World!" app, called AnswerWidget. It allows you to enter a search term and then cycles through all of the Yahoo! Answers entries that match that term (up to 50). It refreshes and starts recycling after that.
Now besides discovering that most of the Yahoo! Answers content isn't very good, I also found that writing a widget with GWT couldn't be simpler. Develop your app as you normally would (you may need to drop in a test object that generates content instead of trying to do a cross site JSON request). Once you've compiled into Javascript, just copy your app's html file to index.html and create a config.xml in the base dir that looks something like this:
<?xml version="1.0" encoding="utf-8"?> <widget> <widgetname>AnswerWidget</widgetname> <description> GWT widget for getting Yahoo! answers. </description> <width>495</width> <height>440</height> <author> <name>Dietrich Kappe</name> <link>labs.pathf.com</link> <organization>Pathfinder Associates, LLC</organization> </author> <id> <host>labs.pathf.com</host> <name>AnswerWidget</name> <revised>2007-01</revised> </id> </widget>
Zip it up in a zip file (what else?) so that the index.html and config.xml files are in the base dir, then upload it to your favorite server. If you're using apache, you can create a .htaccess file in the dir where the zip file sits and add the following line:
AddType application/x-opera-widgets .zip
When you download this zip file with Opera, you will be prompted to install it. There is more on deploying Opera widgets here. I wasn't able to get the wdgt extension to work for me, BTW.
If you have Opera installed and feel in a trusting mood, you can install the widget here. Keep in mind that if I was a malicious person, I could mount all sorts of trojan horse attacks inside your firewall. That's one of the downsides to the GWT-based Opera Widget: without the Java source code, you will have a hard time inspecting and validating that the widget isn't malicious.
I do hope the guys at Google work on making the GWT runtime a little bit more flexible. I have some ideas on how to hack it to make it work cross site, but that won't be maintainable in the long run.
Topics: Ajax Widgets, Google, GWT
Adding a Timer Component to Echo2
One of the things I really like about ZK is that it has a timer component that you can add or remove from a page in order to enable "async" Ajax events in the application. It's a useful abstraction that hides much of the messiness of async update.
<window title="Timer demo" border="normal"> <label id="now"/><timer id="timer" delay="1000" repeats="true" onTimer="now.setValue(new Date().toString())"/> <separator bar="true"/> <button label="Stops timer" onClick="timer.stop()"/> <button label="Starts timer" onClick="timer.start()"/> </window>
Echo2 also has a facility for performing async updates, but it's much more of a roll your own type of facility. I've been wrestling with how to add a timer component to Echo2.
The basic idea is to override the ApplicationInstance as detailed here to allow adding in periodic update tasks. Next, every time a component is registered or unregistered with the ApplicationInstance -- i.e. added or removed from the component heirarchy -- it is added or removed from the periodic update tasks. Fortunately, there are two Echo2 Component lifecycle methods which look like they will work: init() and dispose(). These get called when components get added or removed from a registered heirarchy.
It would be nice if, beyond these two methods, we had something like Swing's HeirarchyEvent and HeirarchyEventListener that allowed us to pass other kinds of events to a heirarchy. Well, the juices are starting to flow again for me on Echo2. I guess it's time to get back to part 2 of the tutorial series.
Topics: Ajax Components, Ajax Widgets, Echo2
JQuery Widgets and the Widget Challenge
JQuery is rapidly becoming my favorite Javascript library. With it's ability to pack a complex operations into a single line, it sometimes feels a little bit more like Perl than Javascript.
JQuery allows for plugins, so you can build widgets and extensions on top of it that will work with one another. As of right now, there are already quite a few widgets and extensions built on top of JQuery:
- ThickBox - modal dialog widget built on top of JQuery.
- jCarousel - plugin for horizontal or vertical scrolling of items.

- Interface - large collection of plugin effects for jQuery, including draggable, dropabble, etc. A must visit site. Also includes a list of plugins developed by other developers (some of which you will also find in this post).
- Date Picker - standard date picker.
- JQuery Portlets - based on the above Interface plugins, a draggable portlet interface. Very slick.

- Dylan Verheul's autocomplete, editable, autohelp and google maps plugins.
- PanView - drag an image around in a little view port.
- YShout - a shoutbox (allows users to chat on your site or page).
I haven't seen a rich text editor yet, or the FishEye widget. The main jQuery site has an extensive list of plugins, including the above and more.
Feeling the pressure from Dojo, the JQuery guys have issued a challenge to the developer community to come up with new widgets based on JQuery:
Dojo released a new widget today: a spreadsheet widget. and it ocurred to me that while we don't quite have anything like that yet, there are scattered widgets throughout the jQuerysphere. I figured it'd be nice for us to put together a jQuery widget package that, to the extent possible, mirrors the Dojo widget set.
The challenge is this: where there is no existing widget, create it. The holy grail, at this point, would be a replication of their spreadsheet widget or their rich text editor widget.
I'd like to put together the widget pack at some point in the next month, and I'll be featuring the widget pack in next month's Magazine. Theere's nothing requiring an exact mirror of the Dojo widgets, so feel free to submit widgets that are not present in Dojo.
A little friendly competition is a good thing. I look forward to more JQuery based widgets being developed and Dojo following suit. While you're at it, check out the powered by JQuery button challenge. Winners get Ajax books. Cool beans. You can never have too many Ajax books.
Topics: Ajax Frameworks, Ajax Widgets, Announcement
New ZK Google Maps Component
Integrating a third party mega widget like Google Maps into a server-side framework like ZK or Echo2 is not so straightforward. At best these widgets sit there on the page sending and reacting to events independent-of and invisible-to the Ajax app in which they are embedded. At worst they consume and generate conflicting events and confuse the heck out of themselves and the server-side framework's client engine.
The ZK team has taken up this challenge and has just released a ZK component that allows you to embed Google Maps in your application. With this component you can now both issue and respond to events from the server-side. For example, the following zul code allows you to use a ZK slider component to zoom a map:
<zk>
<gmaps id="map" width="500px" height="300px"/>
<slider maxpos="17" curpos="${map.zoom}" onScroll="map.setZoom(self.curpos)"/>
</zk>
Right now a limited set of events are supported, but more is on the horizon:
We have demonstrated how to use this new ZK gmaps component, the Google Maps component. The Google Maps API is a versatile API set. The ZK team will integrate more functions and events into the gmaps component so ZK application developers can control it easily.
We are going to discuss the "behind the scene" in another smalltalks about how this Google Maps API is integrated as a ZK gmaps component; especially how to route the Google Maps javascript event back to server as an ZK event. Sit tight.
Consider the possibilities: maps that zoom and pan in response to server-side events, such as election results coming in; maps that update realestate listings as a user types a query; listings that are updated based on where a users pans the map. I can hardly wait.
Topics: Ajax Frameworks, Ajax Widgets, Google, ZK
GWanTed - GWT Without Programming
Writing GWT apps and widgets is not the most difficult thing in the world for developers. But what about mere mortals who want to plug a GWT powered widget into a web page and go? Well, there is hope for these poor souls in the form of GWanTed. Right now it consists of this sparse sourceforge project and the following GWT developer forum post:
GWT is great for developing new rich interface components and with it you can develop your custom widgets easily.
On the other side, in pages already made, I think that GWT integration isn't so trivial. A small step is needed. Currently, you can't use GWT widgets directly in your pages, because you need to KNOW GWT (to build an integration module). So, in a way, we're working for people that don't need to learn java for create web pages, and like with HTML objects (inputs, by example), it's easy to think about "portal widgets". Web designers don't need to know intense javascript for cross-browser compatibility, and there is where we can help... We hope!
![]()
With GWanTed, we have different focuses. We've tried to create a base not only for creating web 2.0 apps with a bunch of out-of-box features that we think that will make easer the construction, as well as minimizing GWT's learning curve.
They promise to have more docs and explanations up shortly. In the meantime, the project page does contain some screenshots.
Topics: Ajax Frameworks, Ajax Widgets, GWT
OpenLayers - Google Maps for the Rest of Us
Google Maps was and is a good idea. In large part it is what caused people to say "Whoa! Cool." and first take notice of Ajax on a broad scale. The OpenLayers project aims to give that power to the rest of us. Built using OO Javascript, Prototype and the Rico library, it provides a similar UI and API to Google Maps. It's purpose, however, is not to be a google clone. To quote from the project page:
As a framework, OpenLayers is intended to separate map tools from map data so that all the tools can operate on all the data sources. This separation breaks the proprietary silos that earlier GIS revolutions have taught civilization to avoid. The mapping revolution on the public Web should benefit from the experience of history.
In essence, if you have a campus map or a detailed map of some other area, you can roll your own Google Maps like interface.
Topics: Ajax Widgets, Google
Widget Watch - BeanView - Forms and Validation for Echo2
Echo2 has been described as Swing for Ajax, and its component model does have a passing similarity with the Java desktop GUI. So it's not surprising to see a component come out for both Echo2 and Swing at the same time: BeanView 1.1, which was released yesterday. What is BeanView?
BeanView is a Java library - a system for seamlessly rendering a JavaBean to a form and back.
In technical terms, it relies on the information obtained from reflection of the JavaBean to generate forms and update the beans from these forms - so, if you create a JavaBean with a method get/setFirstName(String in), BeanView will automatically generate the form with a textfield to enter a "First Name". Supported features include:
- Per visual widget error reporting
- Support for validation (both a variety of built-in validation types and an easy customization system)
- Support for a wide range of built-in data types
- Support for complex data models, such a mapping a collection to multiple selection list box
- Automatic configuration based on JavaBean meta-data (for example, if a JavaBean declares a get/setFoo(int input) method, will by default generate a text field with integer validation.
Invalid form data is indicated by a big red exclamation mark and a popup tooltip. Below you can see the Swing and Echo2 versions side-by-side.
The latest release of Echo2 also allows you to explicitly set the render id's used to identify components, i.e. the DOM id attribute. This means you can test your BeanView forms with an automated test tool like Selenium.
Topics: Ajax Widgets, Echo2
Which Echo2 Widget to Build?
In order to build an Echo2 component in the traditional way before converting it into GWT, I first need to pick a widget to build. I'd like to build one that hasn't been done yet. I have one in mind: and edit-in-place label. The basic idea is that you can click on a bit of static text and have it turn into an input field with submit and cancel buttons. You can see the idea and an example of how to do it with prototype.js described here. Nothing too earth shattering, but useful nonetheless.
To see if this has already been done in Echo2, we have to look at five sources of components:
- Echo2 - the base set of components. Lots of interesting items that you can see at work in this demo app.
- Echo2Extras - and extra set of components distributed by NextApp -- AccordionPane, BorderPane, ColorSelect, CalendarSelect, etc.
- Echo2Chart - charting widgets based on JFreeChart.
- EchopointNG - the definitive collection of third party Echo2 components, including a tree widget. The docs on this are a little iffy, so you have to piece it together from the NG demo app and the Javadoc. Trees, expanding boxes, RichTextArea. Good stuff, but no edit-in-place.
- Echo2 Contrib - the mysterious set of components that lives as a set of zip files in the Echo2 developers forum. Home of drag-and-drop, etc. Hard to say if it's in there, but I can't find it. BTW, someone should take ownership of this. I'd be happy to, if noone else has.
No edit-in-place to be found.
So the edit-in-place component looks like a good candidate. Unfortunately, the power of Echo2 gets in the way here. There is a way of building an edit-in-place component just by composing existing Echo2 components. It didn't take me more than 10 minutes to put the following demo together (click on the name, edit, save or cancel). There is one drawback, however: clicking on the label initiaties a roundtrip to the server. Ideally we only want a roundtrip if there is a listener registered on the click. So a more efficient version of the edit-in-place widget is still a good idea.
OK, next week we take a shot at a first version of this component.
Topics: Ajax Frameworks, Ajax Widgets, Echo2, GWT
About Pathfinder
Recent
- Walk-Through Test Coverage
- Where minimalism fails: The problem with Apple’s less-is-more approach
- jQuery goodness with ASP .NET
- Design Thinking
- Bullseye Diagram
- Roles Testing For Security
- Blackbird takes the pain out of JavaScript logging
- Making GWT JSON not Quite so Painful
- IDEA - preconference workshop 06 Oct 08
- HTML5, Ajax history management, and The Ajax Experience 2008 Boston
Archives
- October 2008
- September 2008
- August 2008
- July 2008
- June 2008
- May 2008
- April 2008
- March 2008
- February 2008
- January 2008
- December 2007
- November 2007
- October 2007
- September 2007
- August 2007
- July 2007
- June 2007
- May 2007
- April 2007
- March 2007
- February 2007
- January 2007
- December 2006
- November 2006
- October 2006
- September 2006
- August 2006
- July 2006
- June 2006
- May 2006
- April 2006
- March 2006









