Javascript

I spent the better part of yesterday trying to Ajax upload a File using a Web Service and Ext.Net (formerly Coolite). Let me first explain the situation I was working in.

I had a Page that renders to the browser. This page then loads appropriate UserControls from the server depending upon user actions. One of these User Controls allowed the User to upload files to the server, together with some data about the file being uploaded. A naive (and easy) approach would have been to handle the file upload in a normal ASP.NET Postback, or Ext.Net DirectMethod or DirectEvent.

In the first of this series of couple of blog posts (available here), I have discussed the problem of maintaining reference to ExtJs components on the client-side in javascript, and the motivation for creating a new solution to it, than what ExtJs/Ext.Net provide out-of-the box. Well, here's how I have settled down on resolving the issue.

This is one issue that almost all developers of ExtJs/Ext.NET applications face, maintaining client-side references for the Javascript components. The seriousness of the managing the issue effectively manifests manifold, when working on large applications in modular fashion with multiple developers involved, and components being instantized or being loaded from the server on demand.

While working on a Web application recently, I came across a Javascript gotcha that I shouldn't have faced in the first place.

As a matter of habit, I have made it a point to always declare variables inside a js function with the var keyword. I know many of us consider var optional for declaring a js variable. But how big a difference can this make to your code is best demonstrated by an example. Try clicking the "Click Me" button below, and analyze the output generated:

If you have been a regular reader of my blog entries, you would be knowing that I have been using ExtJs/Ext.net for a considerable time now. When I first encountered Coolite (through a Newsletter from Red-gate Software), I was pretty impressed, and it took me a while to understand all its nuts-and-bolts and its integration with ExtJs. And after I had some experience using these two frameworks, I believed I had in my arsenal the most comprehensive web frameworks for Ajax applications built.

DateField & TimeField from ExtJs/Ext.net arsenal are two really useful controls for entering date/time into forms. However, one of my clients complained that these fields can sometime take too much time in filling out, e.g. when the Date to be entered was months/years behind or ahead of the current date. Moreover, if you fill a partial value in these fields (e.g. 2 for timefield), the fields do not validate, and clear out the content.

Layer (Ext.Layer) is probably one of the lesser used element of the ExtJs framework. However, I recently discovered one great use of Layer, for showing dynamic helper controls for any element on the page.

Working with ExtJs for a long time now (and deliberately avoiding jQuery whenever I could), I finally dumped ExtJs in favor of jQuery with my upcoming Document module for Drupal (mainly for avoiding users from having to download ExtJs separately when Drupal comes bundled with jQuery). And I was really pleased on how easy, flexible and powerful the library was for tasks I thought were best handled with ExtJs.

Document is a complete Document Management System for the Drupal CMS. I am still working on some parts of the module and hopefully, its first release should be available soon.

The official page for the module on drupal.org is this:
http://drupal.org/project/document

As I am using more of Ext.Net/Coolite toolkits, I find myself delegating some of the UI creation from server-side markup to client-side javascript. This allows me to reuse the code better across different projects, plus enables me to introduce more dynamicity in the User Interface without needing to send unnecessary code generated from the server-side markup to the client.