Writing Echo2 Components

Dietrich Kappe, Monday, September 4, 2006 @ 8:00 am

As a prelude to trying to write some Echo2 components using GWT, I thought it would be wise to review the material on how to write Echo2 components in the first place. Why would you want to write a component when Echo2 gives you a nice level of abstraction with plenty of prebuilt components? Well, sometimes you need a special component that isn't provided by the framework or a new behavior in an existing component.

A word of warning: component development is like traditional web application development, i.e. you have to work with many different languages and it is much more expensive than developing in the single language context of Echo2. If you are going to do it, design your component to be as reusable and configurable as is practical.

The best place to start learning about writing components is Brad Baker's excellent three part tutorial over at the Echo2 Wiki.

• Part 1 covers the basics of creating a simple static <HR> widget. You'll learn how to create a Java project for a custom Echo2 component and how to write HTML using the org.w3c.dom package.
• Part 2 delves into how to create a component that can react to input, using some of the EchoPointNG components (of which Brad is the author) as examples. Here we see what Javascript needs to be written and how it is communicated to the client engine on the browser.
• Part 3 gets into what Brad calls "the productivity problem," i.e. the fact that it takes at least 50% of development time to debug the Javascript of a component. He demonstrates static prototyping -- using XHTML and Javascript local files -- as a solution to this problem.

If I have any criticism of Brad's excellent tutorial, it is that I'd like to see him deal with the Echo2 client engine in a little more detail. (Still, in the Echo2 development universe, that may not be his job, but rather that of Echo2 creator Tod Liebeck.) Also, the code samples should probably be color coded, depending on whether they are Java or Javascript. Given the similarity in syntax, it is sometime difficult to tell what your are looking at, especially as you scroll back and forth to understand the integration between different layers.

A different tutorial can be found in this Echo2 forum post, though it seems to be a little out of date in terms of the framework's API. I always like to get as many perspectives as I can when adopting a new technology, so on the reading list it goes.

I'll see you next Monday with my first cut at a vanilla widget. I'm still undecided as to what sort of component to write. Something simple yet useful and not present in the current collection of Echo2 core and contributed components. If you have a suggestion, please let me know.

Technorati : ajax, components, echo2, echopointng

Related posts:

1. Echo2 Needs a Better Way for Third Party’s to Contribute
2. Which Echo2 Widget to Build?
3. Swing Components in Echo2
4. Widget Watch – Echo2 Widget Panel
5. Google Maps Component for Echo2

Comments (2)

Software Development

Comments: 2 so far

• Leave a comment
• Comment feed for this post
• TrackBack URL

1. 

   Hey,

   looking forward to the results of your marriage experiment for GWT and echo2.

   It seems that you assume that there is web development that says you need to go back to JavaScript/DHTML to be able to write a new ‘widget-like’ component (especially if it needs client-side event handling, right ?)

   I argue against it: see how you can write a component (a tree list) in Wt (http://witty.sourceforge.net/) without any JavaScript or HTML knowledge. And yes, the component has client-side interaction !

   Regards,
   koen

   Comment by Koen Deforche, Wednesday, September 6, 2006 @ 10:22 am

2. 

   Aah, and a suggestion for a simple widget:

   Why not the google-like list of options, which are separated by ‘|’ signs.

   Like you have in GMail:
   Add cc | Add bcc | Edit subject | Add Attachment

   Clicking on an option removes the option from the option
   list and shows a new form field. This needs to happen
   client-side (clicking on them should do whatever they need to do without server interaction).

   (It’s also an example of a Wt widget)

   Koen

   Comment by Koen Deforche, Wednesday, September 6, 2006 @ 10:27 am

Leave a comment