Saturday, April 10, 2010

HTML DIV tag in ExtJS vs java.awt.Container in Swing.

I have strong feelings that I can compare those pure JavaScript Ajax toolkits, for instance ExtJS, with Java Swing. To compare these stuff from different worlds, the starting point is java.awt.Container and DIV tag in HTML. According to my understanding, java.awt.Container is the root component for all Java Swing widgets. Meanwhile, theoretically, HTML div tag is the root component for all ExtJS widgets. This thoughts can be represented as below figure. 

 Of course, there is no a class called as "DIV" in ExtJS. The root class for all widgets is Ext.Component, which extends from Ext.util.Observable. Observable is the common interface for widgets to publish event.However, Ext.Component does wrap DIV as a canvas, on which we can paste html tag, CSS, figures and all other things we can do on a DOM object.

So, how can this thought be useful? Well, I think the first benefit pump out in my mind is that I will think it is technically feasible to seamlessly use ExtJS with other pure javaScript Ajax libraries like Dojo, in one HTML page. Of course, it might ask for great skill to handle DOM event and JavaScript coding. Also, I guess GWT toolkit creators has similar thoughts to make GWT toolkit? I wish this post will encourage Java Swing programmer to have no fear of learning ExtJS :)

BTW, I do not include Java AWT here because AWT has different architecture with Swing. AWT widgets have their peers from mother OS. So, they are so-called heavyweight components. Meanwhile, Swing widgets are lightweight because all components are "drew" purely by Java.

As we can see in ExtJS 4.0 beta release, Sencha changes its class model in ExtJS 4.0. Then introduced a new concept "mixin (mixed in)". Therefore, the Observable class becomes a mixin of Component class. So, now, we can see that ExtJS is more similar as Java Swing. Below is the diagrams linked from ExtJS blog to describe its new class system.

No comments:

Post a Comment