UI Libraries

[Aaron Gray]

Are there any other Javascript UI libraries other than ExtJS 2.0 and Yahoo!
UI library that are as good as ExtJS but without the license restrictions
that ExtJS imposes on commercial usage ?

I am after tree controls that have drag and drop for example.

Many thanks in advance,

Aaron

 

[RobG]

Are there any other Javascript UI libraries other than ExtJS 2.0 and Yahoo!
UI library that are as good as ExtJS

There are libraries that might be considered "as good as" ExtJS, but
that may not indicate anything useful. ExtJS seems very large (ext-
all.js is over 500KB) and has some very ordinary code, for example it
includes:

isArray : function(v){
return v && typeof v.pop == 'function';
},

which seems a rather trivial test for an Array when:

isArray : function(v) {
return v && v.constructor === Array;
}

or similar would seem more appropriate, though not perfect[1]. That
example doesn't bode well for the quality of the rest of the code.

but without the license restrictions
that ExtJS imposes on commercial usage ?

I am after tree controls that have drag and drop for example.

Consider <URL: http://www.walterzorn.com/index.htm >. It may not be
ideal but it should get you started.

1. That obj.constructor === Array returns true doesn't guarantee that
obj is an array any more than obj.constructor !== Array means it
isn't, however it should be trustworthy as long as the obj's
constructor's prototype hasn't been messed with.

<URL:
http://groups.google.com.au/group/c...gst&q=constructor+array&#doc_d9b718c346500431

 

[yukabuk]

Try http://DHTMLGoodies.com

 

[Thomas 'PointedEars' Lahn]

Try http://DHTMLGoodies.com

No thanks, I try to avoid junk.


PointedEars

 

[dhtml]

1. That obj.constructor === Array returns true doesn't guarantee that
obj is an array any more than obj.constructor !== Array means it
isn't, however it should be trustworthy as long as the obj's
constructor's prototype hasn't been messed with.

The constructor's prototype can be changed, and doesn't cause the
reference to be changed.

var a = Array();
Array.prototype.a = 1;
a.constructor === Array;

The Array constructor created that object a. After that, the
constructor property was altered, and it is still a's constructor.

The problem with the checking the constructor is that there is a
different Array constructor for each window. document.frames[0].Array !
== Array;

If the object had a different constructor property:
a.constructor = 1;
a.constructor === Array; // false.
Array.prototype.isPrototypeOf(a); // true, but still doesn't account
for different frames' Arrays.

Garrett

 

[RobG]

The constructor's prototype can be changed, and doesn't cause the
reference to be changed.

var a = Array();
Array.prototype.a = 1;
a.constructor === Array;

My comment was in relation to the linked post by Lasse which shows
that the constructor property is inherited from Array.prototype, so:

function myArray(){}
myArray.prototype = Array.prototype;

var x=new myArray();
alert(x.constructor == Array); // -> true

but x will not have the special length property that an array should
have, so it isn't really an Array.

The Array constructor created that object a. After that, the
constructor property was altered, and it is still a's constructor.

a's internal [[prototype]] property will reference Array.prototype so
it inherits its constructor property from there. Since the code
doesn't change Array.prototype.constrcutor, a.constructor will be
Array.prototype.constructor.

The problem with the checking the constructor is that there is a
different Array constructor for each window. document.frames[0].Array !
== Array;

If the object had a different constructor property:
a.constructor = 1;
a.constructor === Array; // false.

That is different to messing with the prototype - the inherited
constructor property is masked by a.constructor.

Array.prototype.isPrototypeOf(a); // true, but still doesn't account
for different frames' Arrays.

Yes, that is another case that must be considered when writing an
isArray function.

 

[Aaron Gray]

Try http://DHTMLGoodies.com

Not really in the same league as ExtJS

Aaron

 

[dhtml]

My comment was in relation to the linked post by Lasse which shows
that the constructor property is inherited from Array.prototype, so:

  function myArray(){}
  myArray.prototype = Array.prototype;

  var x=new myArray();
  alert(x.constructor == Array);  // -> true

Oh I see.

That's never a good idea though. Subclassing Array is stupid.

Keeping an array as a property is a way around that.

function Collection(arrayLike) {
this._items = [].slice(arrayLike);
}

(toy code, but the idea is keeping an array as a property).

but x will not have the special length property that an array should
have, so it isn't really an Array.

x will get a - length - when you call for example, the push method.
x.push(1);

x.length; // 1.

But the problem then is that:

x.propertyIsEnumerable('length');

is true.

And that [[Put]] doesn't affect length, either, so

x[19] = 'a';
x.length; // Still what it was before, 1.

That is different to messing with the prototype  - the inherited
constructor property is masked by a.constructor.

Right, and by "messing with the constructor's prototype," I took it
you mean any modification to the constructor of an array, and I took
it to mean that an array was an object constructed by the Array
constructor, or literal [ ].

var a = Array();
Array.prototype.pull = function(o) { this.push(o, o); };
a.constructor === Array; // true.

I see now what you were getting at.

Garrett

 

[jdalton]

I think the topic of this thread has derailed a bit.
Here is Andrea Giammarchi's take on subclassing Array .
http://webreflection.blogspot.com/2008/05/habemus-array-unlocked-length-in-ie8.html

- JDD

 

[dhtml]

I think the topic of this thread has derailed a bit.
Here is Andrea Giammarchi's take on subclassing Array .http://webreflection.blogspot.com/2008/05/habemus-array-unlocked-leng...

If Andrea had read Lasse's post, he might have reconsidered.

As I already stated, Array has a specialized [[Put]] method. The way
it works is that when you add a property to an array, if the property
is a number N (and the array does not have that property N), and N is

= the array's length, then the array's length gets increased to N+1;

You can try the stack example and quickly find that it behaves
differently from an Array.

var s = new Stack;
s.length; // 0
s[0] = 1; // 0
s.length; // 0. Yes, it is still 0.

for(var p in s) console.log(p); // includes constructor, length,
toString concat and 0.

An array has the following characteristics that differentiate it from
an object.
1) Specialized put
2) magic length
3) literal initializer syntax

Andreas "stack" has none of those characteristics. It would be
entirely possible to rewrite that construct as:

function Stack(){
this.items = [].slice(arguments);
}

Then it's possible to have the array of items work just like an Array
with no surprises. Anyone who knows how an Array works will know what
exactly items is.

Having an object that "has" an array property and delegates
functionality to that array allows extra functionality to be added to
the delegating object type (Stack, in this case).

Stack.prototype.fold = function() {
// do something with this.items.
};

Having a collection as a property can be useful for creating things
like a ListIterator(arrayLike). Wher - arrayLike - can be nodeList,
array, et c, and the ListIterator instance keeps track of an internal
- position - property for next, et c. This type of approach can
usually address the problem area that subclassing array attempts to
solve.

Garrett