I feel like I'm about to reveal a deep secret that only a privileged few Web designers know. It's about a product called Ext JS
. In short, if you use Ext JS, your Web development experience will be much happier and far easier.
As many Web designers will attest, when it comes to writing
client-side applications that run in a browser, we've taken a few steps
certainly has a great deal of elements that can be used for some
together. If you want to create a complex GUI in JavaSript, you're up
against a formidable task. This is despite the fact that it was nearly
two decades ago that GUI and usability extraordinaire Alan Cooper gave
us the first version of Visual Basic, which lets you easily drag and
drop sophisticated elements onto a form and attach code to them,
ultimately building a GUI in a matter of minutes.
During tests, Ext JS let me create some pretty cool interfaces. Want
a complex desktop with draggable windows running right inside your
browser? Ext JS can do it. Want a GUI that's built like a typical
e-mail program, with sliding panels and trees? Ext JS can do that, too.
In fact, I was pretty shocked at some of the complex GUIs I could put
together with little effort.
With Ext JS you don't do any drag-and-drop designing, as you do in
Visual Basic and other such languages, but that's OK. The idea is that
detail what you want.
The GUI library in Ext JS is very rich, indeed. You can create
tabbed panels, data grids, forms with buttons and other elements
rendered to match a particular theme, and you can use various layout
mechanisms for organizing your controls, much like what you have with
languages such as Java.
But Ext JS goes beyond just the GUI. It includes several classes for
performing AJAX queries on the server (and even across to other servers
using known AJAX tricks), and the results can be parsed using various
encodings, such as XML.
You can hook up these data objects (called stores) to things like
grids to create complex data views akin to what we programmers are used
to seeing in desktop development tools such as Delphi and Visual
Studio. And because this is client-side, you can page through the grids
in the browser without reloading the page; only the grid itself updates
through the beauty of AJAX.
There are also loads of helper classes, such as enhancements to the
formatting function), as well as DOM-querying classes and functions for
traversing DOM trees using CSS selectors. (I found the latter to be
extremely useful for helping navigate all the DIVs and other elements
generated by Ext JS and recommend that you study the concept of CSS
selectors carefully if you're really interested in going far with Ext
Ext JS is fully backward compatible with the various 2.0 versions,
and adds a few goodies, such as a certain amount of REST support, and
some controls, such as a pretty cool list view, several ways of paging
through data and some amazing charting capabilities. The charts make
use of Flash, which is nice in that you don't need additional
server-side libraries for generating chart images.
But perhaps the biggest addition to Ext JS is the new Ext.Direct
specification. If you do a great deal of Web development, you know that
you need to do lots of coding on both the client and server end. Ext JS
has always helped with the client end, but on the server end you were
left to your own devices to create the data to be passed down to the
client through AJAX, writing code that effectively generated either
To mitigate this difficulty, Ext JS now includes server-side code
for many different languages and platforms--including PHP, Java,
ASP.NET including MVC and Perl--that will help save you time and effort
in building your server code. These libraries fit together carefully
with the client-side classes, making for easy generation and transfer
of data. (Note: If you visit the Ext JS.com site, the server-side
Ext.Direct packages are a separate download, further down on the main
Ext JS developers have also gone to great lengths to make sure that
the Web applications you write with the product will work in all major
browsers, including Firefox 1.5 and higher, IE 6 and higher (yes, even
IE 6 is supported), Safari 3 and higher and Opera 9 and higher.
Ext JS also includes support for Adobe AIR, and there's a version that's integrated into Google Web Toolkit.
The Downsides of Ext JS
One of the gripes I've heard about Ext JS is that your final Web
page ends up with a lot of DOM elements. This is true. Many of the
single Ext JS elements are constructed of numerous DIV and TABLE tags
piled inside of each other. But does that matter? Today's browsers seem
to handle it just fine, so perhaps it's not a real problem.
But, still, working with Ext JS can be difficult if you want to
create some really complex GUIs, especially, as I found in my own
tests-for example, when trying to create a dialog box that has numerous
controls and doesn't follow a set "field label - field" layout. (Think
of some of the dialog boxes in popular software applications, such as
Microsoft Word.) That's not to say it can't be done. But you're going
to have to work a little to get there.
And it's also easy to end up with some really messy code if you're
not careful, with layers of object declarations embedded inside of
object declarations. As with any other language, you have to work to
make sure your code ends up in a readable and maintainable form.
Ext JS' documentation also leaves a bit to be desired. There's an
awful lot of it, but it's really not complete. The examples often use
custom classes buried inside example code that isn't immediately
apparent, and many of the API entries have minimal explanation of what
the various configuration options do. A good technical writer who has
spent a lot of time developing in Ext JS could have a go at it and
clean it up.
That said, there are many examples, with lots of code, and if you're
willing to dig a little, you can probably find the answer to your
questions. There are also free forums you can use. (Don a thick skin in
the forums--some of the people can get a little snippy with beginners.)
If you're considering using Ext JS, you'll need to look very
carefully at the licensing model, which has created some controversy.
Earlier versions of the product were apparently available under the
LGPL license, basically allowing you to use Ext JS in commercial
products without payment to Ext LLC, the company that owns the product.
But that model has changed, much to the chagrin of some customers. Now
the product includes a dual licensing model: You can license the
product under the GPL (not the LGPL) or purchase a commercial license.
The problem: It seems that if you create software that uses a
GPL-licensed library, then your software must also adhere to the GPL.
Now, I'm not a legal expert, and I can't advise on software licenses.
But that's the way the confusing GPL seems to be worded. As such, it
appears that if you want to release a commercial product that uses the
Ext JS, you need to purchase a commercial license for Ext JS. (If you
want to create an open-source app under the GPL, then you're fine.)
Check with the main Ext JS.com Website for more information, but,
either way, you can download the entire product from www.Ext JS.com and
try it out for free.
Also, the terms of the commercial license really aren't that bad
compared with some I've seen out there, where you need to pay thousands
of dollars for a library if you want to distribute it with a Web-based
application. A commercial license for Ext JS can be purchased for $329
for a single developer to release his or her product on unlimited
domains. If you're running a small business and are looking to build a
commercial product, that's not over-the-top, in my opinion.
Jeff Cogswell can be reached at email@example.com.