I was wondering if instead of using JavaScriptt forms that create input elements dynamically, what if some or all of the form fields were created on the server at the time of page load - you know, the good old way? That way, there will be less overhead of field creation on the client?

Now, I do realize that the input field is just one of the many elements that are needed to render a field inExtJS form, but what the heck; Result surprised me.

In a simple test like this:

var form = new Ext.form.Form({labelWidth: 125});
for(var i=0; i< 1000; i++){
form.add(
new Ext.form.TextField({
fieldLabel: i + ': First Name',
name: 'first' + i,
width:175,
allowBlank:false
//, applyTo: 'first' + i
})
);
}
form.render('autoform');

Internet Explorer 6 on Windows XP, beats Firefox 1.5 on XP hands down; I wonder why though. However performance of both browsers decrease if input fields are created in HTML and “applyTo” option is used for field rendering.

Any clue? I would imagine, some time is spent by browser rendering the static input fields. Perhaps moving elements in a heavily populated DOM is expensive?

For those who may have worked on large-scale ExtJS v1.1 apps, this application has:
* 1 Main data grid, 6 - 8 data stores;
*1 Maindialog comprising of 5 grids, each with a toolbar and a few buttons that change state depending on the state of data
* 1 Secondary dialog that is re-used to render child forms (5)

Application works great in Firefox, even with Firebug enabled, however IE6 on XP leaves much to be desired. One of the main requirement is for data grids to not scroll; only main dialog window should scroll. This is being achieved by calculating the needed height and updating height of grid (s) as needed. This brings Internet Explorer to its knees and very often freezes the UI for some time. Any advice on making IE6 co-operate?

MiracleCommerce shopping cart software provides the tool and the frame work that allow web developers and web designers to build fully functional e-commerce websites without reinventing the wheel. Some of our very successful customers include Family Vision Center (www.famvision.com) and New York City Message Bears (www.nycmb.com). MiracleCommerce allows non-profit organizations to collect donations online, without requiring any upfront investment in server or CMS software. MiracleCommerce travel and event management solutions allow event managers to create event website that allows customers to buy travel packages (National Black Arts Festival - http://nbaf.theotgroup.com/store/).

I am currently in the process of upgrading MiracleCommerce to Web 2.0 technology (Key components - ExtJS (www.extjs.com), DWR (www.getahead.org/dwr)). This is a significant technology upgrade that will allow users to manage web stores, much easier then before. Some of the much awaited features include significantly improved search and filtering of data. I don’t want to give away the secret yet however, if you are interested, please see the pre-release screenshots.

I started playing with JavaFX today. Its syntax is deceptively like ExtJS. Here is Hello World in Java Fx and Hello World in Ext JS (from www.extjs.com).

ExtJS (http://www.extjs.com)

dialog = new Ext.BasicDialog(”hello-dlg”, {
modal:true,
autoTabs:true,
width:500,
height:300,
shadow:true,
minWidth:300,
minHeight:300
});
dialog.addKeyListener(27, dialog.hide, dialog);
dialog.addButton(’Close’, dialog.hide, dialog);
dialog.addButton(’Submit’, dialog.hide, dialog).disable();

JavaFX (http://openjfx.dev.java.net)

import javafx.ui.*;class HelloWorldModel {
attribute saying: String;
}
var model = HelloWorldModel {
saying: “Hello World”
};
Frame {
title: bind “{model.saying} JavaFX”
width: 200
content: TextField {
value: bind model.saying
}
visible: true
};

I spent last 2 hours debugging a page that loads orders from an XML stream and displays them on screen in a DOJO Content Pane widget. Page works (worked) perfectly fine but was broken in Internet Explorer. For anyone who has had the pleasure of debugging:
“DEBUG: Error running scripts from content:Expected identifier, string or number“, here is something that might help -make sure your strings / string object propertiesare really strings in Internet Explorer. As an example of a broken piece of code, see this:

 var orderTab = dojo.widget.createWidget( "dojo:ContentPane",

 {

 class:'tabContainer',

 "closable": true,

 "label": "Order # " + intStoreOrderId,

 "href": "index.popup.php"

 }

 );

This can easily be fixed, simply by ensuring that class property isreferred as string “class”. Here is the version that works (both, Firefox and Internet Explorer).

 var orderTab = dojo.widget.createWidget( "dojo:ContentPane",

 {

 "class":'tabContainer',

 "closable": true,

 "label": "Order # " + intStoreOrderId,

 "href": "index.popup.php"

 }

 );

Between, above code works unaltered in Firefox. Not having good JavaScript debugger in Internet Explorer make it all the more difficult to debug these nasty bugs.

Jseamless (www.jseamless.org) is a user interface abstraction layer for java, quite similar to what AWT or swing but not bound to any specific framework. Jseamless allows developers to create web applications, entirely in java, without requiring HTML, CSS or Javascript knowledge. Further, application can be deployed onto multiple platforms such as OpenGL, Flash (Flex), HTML, Swing or J2ME (Mobile Devices). Idea isn’t new - Openlaszlo (www.openlaszlo.org), Echo2 (www.nextapp.com) have gone there before.

Matthew Hicks (www.matthicks.com) is the lead developer for jseamless and is extreamly responsive in the support forum. I started exploring jseamless recently for a project, with the idea that if all work is done on the java end, end product might be better and well knit, compared to now where:

• Data model is represented by POJO’s
• Data is extracted by DAO’s (JPA + Hibernate as Persistence Provider)
• Business / service layer binds everything together, does validation, applies business logic, processes business events
• DWR (www.getahead.org/dwr) exposes business data and service methods to web as javascript
• Ext JS library (www.extjs.com) is used to create the UI
• Ext JS components such as a Grid use objects of type Ext.data.Record which is a representation of POJO
• Ext JS uses a concept of store, which is a in-memory cache of records

It works great, however:

• UI with 1 main dialog box, 3 sub dialog boxes, 1 main form, 3 sub forms, 5 data grids (No data in any component, yet); It seems to peak cpu usage of my workstation to 100% for about 30 - 45secs at launch. It also takes up quite a bit of memory.
• Translating POJO’s to javascript objects (Ext.data.Record) and back to POJO to finally invoke service calls using DWR is necessary.

To be continued…

I am developing an Ext JS based web application which will manage Origination aspect of commercial loan. Initial prototyping was done using DOJO Framework v0.4, however this version of DOJO is far too slow to be used in Production and version 0.9 is not yet ready for prime time. Ext JS is promising and certainly far better in terms of speed of execution, consistent look and feel and rich collection of widgets. Anyway, the ideas is as follows:

- Main Page: This page will contain a collection of deals, which can be sorted and filtered using various criteria such as: My Deals or Deals that are in a certain status.

- Deal Management Dialog: This dialog is the crux of this application. It is used to create new deals, or to manage existing deals.

I am using JPA (Java Persistence API) to implement the server side code. Hibernate is used as persistence provider. Transaction are RESOURCE_LOCAL (managed by the application) - I have implemented transactions using callback to avoid sprinkling transaction related template code all over the business layer.

-Main View: Calls StatefulRemoteDealManager.findMyDeal() to get a collection of current user’s Deals. StatefulRemoteDealManager is aware of user’s session / context and returns deals created / managed by the current user.
-New Deal View: Calls StatefulRemoteDealManager.createDraftDeal() to create a deal in draft state.
DWR allows to expose fine or coarse grained server side methods to JavaScript using JSON. For example, when I need to create a Borrower, I call, RemoteBorrowerManager.save(Borrower b).
Borrower object can be constructed in javascript as:

var borrower = new Borrower({name: ‘ABC Borrower Inc.’});

It is kinda funny how many of us have been developing web applications for years, yet we never truly realized the power of JavaScript! Sure, we did create functions; some of us even created libraries of functions but that’s about it. Lot of things have changed in the web development space - AJAX is the name of the game and Google is leading the way by creating many successful web based applications that use JavaScript. So, long story short, while creating wireframe of an application, using ExtJS, I learnt a lot about JavaScript Programming.

For instance, I didn’t know that namespaces exist in JavaScript! See here. For that matter, public and private variables, returning public interfaces of your objects, is all fairly common in most other object oriented languages, yet so many of us are simply not aware of such capabilities of JavaScript. Over next few days, I will post my experience of working on ExtJS and integrating it with DWR (Dynamic Web Remoting).