Instantiate extended browser objects

[gabon]

Due a big project I would like to create different javascript classes
and assign them to divs. But how? :)
I know the usage of prototype but given that this could be possible:

function newDiv(){...}
newDiv.prototype=new div();

and of course it isn't. How to instantiate that class?

var newDiv_instance=document.createElement("div");
newDiv_instance.prototype=new newDiv();

Any suggestions/resource about the extension of Div's?

Thanks, chr

[Martin Honnen]

gabon wrote:

> Due a big project I would like to create different javascript classes
> and assign them to divs.

JavaScript classes? You would better explain then what you understand a
"JavaScript class" to be.
And assigning classes to divs?

> I know the usage of prototype but given that this could be possible:
>
> function newDiv(){...}
> newDiv.prototype=new div();
>
> and of course it isn't. How to instantiate that class?
>
> var newDiv_instance=document.createElement("div");
> newDiv_instance.prototype=new newDiv();

Perhaps you want
function newDiv () { ... }
newDiv.prototype = document.createElement('div');
that would (with script inside of HTML documents and W3C DOM support)
make the prototype object of the constructor function newDiv a newly
created HTMLDivElement host object. So that way any object created with
var customDiv = new newDiv()
then has that prototype object in its prototype chain.
But that would not help in any way to insert that custom div object into
a HTML document, you need a host object there.

Perhaps you want it the other way round e.g.
if (typeof HTMLDivElement != 'undefined' && typeof
HTMLDivElement.prototype != 'undefined') {
HTMLDivElement.prototype = new newDiv();
}
but only Mozilla and recent Opera (8) expose HTMLDivElement and only
Mozilla its prototype and I don't think replacing the prototype of such
a host object is a good idea.

XBL might be something that you could look at for Mozilla only solutions
to bind behavior to elements or build custom widgets:
<http://developer.mozilla.org/en/docs/XBL>

--

Martin Honnen
http://JavaScript.FAQTs.com/

[Julian Turner]

gabon wrote:

Hi.

I think you need to be clearer as to why you need to do this. Do you
want to create methods for the DIVS?

My knowledge on this is limited, but I am aware of the following:-

> newDiv_instance.prototype=new newDiv();

1. As a general starting point, in Javascript you cannot access the
prototype on instances. The prototype is used with constructors used
to create instances.

Thus:-

function C(){}
C.prototype={};
var I=new C();
alert(I.prototype); // undefined

2. In Internet Explorer you cannot access the constructors of HTML
elements, so you cannot extend them.

However you can add properties to the div instances, e.g.

newDiv_instance.myProperty=new Object();
newDiv_instance.myProperty2=function(){alert(this.document;)};

However these will be specific to that instance only, and the "this"
keyword will point to the "window" object.

3. In Mozilla (and perhaps others) you can access the constructors
of HTML objects. Try some research on this.

E.g.
HTMLElement.prototype.myCommonMethod=function(){alert(this.nodeType);};

But note that this will be accessible to all instances of HTMLElement,
and is of course not cross browser.

Julian

[gabon]

As JavaScript class I intend a class created in JavaScript:

function newDiv(){
...
}
newDiv.prototype.myMethod=function(){
...
}

I would like to create different classes to assign to different divs
depending on what they should do.
In a OOP approach I think that should be the best way instead of assign
to all the divs all the methods or to instantiate classes that handle
externally the div

function newDiv(myDiv){
}
newDiv.prototype.moveDiv=function(){
this.myDiv.style.left="100px";
}

And of course the solution should be VERY cross-platform :(

What do you recon?

Thanks a lot for any suggestion, chr

[Martin Honnen]

gabon wrote:

> function newDiv(myDiv){
> }
> newDiv.prototype.moveDiv=function(){
> this.myDiv.style.left="100px";
> }

That is possible, if you have
function newDiv (myDiv) {
this.myDiv = myDiv;
}
of course.
Then you have a wrapper object for host div element objects and your
wrapper object can make use of prototype based inheritance across browsers.

[Julian Turner]

gabon wrote:

> function newDiv(myDiv){
> }
> newDiv.prototype.moveDiv=function(){
> this.myDiv.style.left="100px";
>
> And of course the solution should be VERY cross-platform :(
>
> What do you recon?

Hi. What you have suggested there is different to what you were
proposing in your original post.

As you are probably aware, you need to distinguish between:

1. Native Javascript objects.

2. External DOM objects exposed to Javascript through binding in the
browser.

In your original post you were talking about extending the external div
object in the HTML DOM. As noted that is difficult to do
cross-browser.

The alternative you are now suggesting above is to create a native
Javascript object wrapper, which is how I do it.

i.e.

function DIVWrapper(div)
{
this.divObject=div;
}

DIVWrapper.prototype.getTagName=function(){
return this.divObject.tagName;
};

var divElement=document.createElement("div");
var divWrapper=new DIVWrapper(divElement);

It is is obviously a cumbersome approach, but it certainly works for
me,

Hopefully others may have more elegant answers.

Julian

[aundro]

"Julian Turner" <jul...@baconbutty.com> writes:
> [...]

> The alternative you are now suggesting above is to create a native
> Javascript object wrapper, which is how I do it.
>
> i.e.
>
> function DIVWrapper(div)
> {
> this.divObject=div;
> }
>
> DIVWrapper.prototype.getTagName=function(){
> return this.divObject.tagName;
> };
>
> var divElement=document.createElement("div");
> var divWrapper=new DIVWrapper(divElement);
>
> It is is obviously a cumbersome approach, but it certainly works for
> me,
>

Hi,

I had to do something similar, and thought of this wrapper
approach.
The problem with that is that the wrapper is not an
HTML object, and thus cannot be inserted into the document structure.

My approach was the following (simplified):

========================================================
function createNewDiv () {

var nd = document.createElement ("div");
nd.doThis = NewDiv__doThis;
nd.doThat = NewDiv__doThat;

return nd;
}

NewDiv__doThis = function () {...}
NewDiv__doThat = function () {...}
========================================================

Main points here:
1/ The element remains a div (you can therefore style it, manipulate
it as if it were any HTML element (styling, DOM stuff, ..)).
2/ This is not prototype-based inheritance (well, it's no inheritance
at all ;), so it can quickly become tedious if you got a hierarchy
of types below the NewDiv thingy.

> Hopefully others may have more elegant answers.

Well, since we don't seem to have any access to the HTML types in IE,
that's the only thing I found that worked :)

> Julian

Arnaud

[gabon]

for JavaScript class I need a class created in Javascript:

function newDiv(){
}
newDiv.prototype.myMethod=function(){
}

what a would like to do is to create different classes and to assign
them to divs depending of what they should do.

I think that in an optimal OOP paradigm that would be the best
solution, avoiding to assign to all the Divs all the methods and
avoiding to create instances of classes with the aim to handle objects
external to the class.

And definitely I need a VERY cross-browser solution :(

what would you suggest than?

Thanks a lot for your suggestions, chr

[Julian Turner]

aundro wrote:

> My approach was the following (simplified):
>
> ========================================================
> function createNewDiv () {
>
> var nd = document.createElement ("div");
> nd.doThis = NewDiv__doThis;
> nd.doThat = NewDiv__doThat;
>
> return nd;
> }
>
> NewDiv__doThis = function () {...}
> NewDiv__doThat = function () {...}
> ========================================================
>
> Main points here:
> 1/ The element remains a div (you can therefore style it, manipulate
> it as if it were any HTML element (styling, DOM stuff, ..)).
> 2/ This is not prototype-based inheritance (well, it's no inheritance
> at all ;), so it can quickly become tedious if you got a hierarchy
> of types below the NewDiv thingy.
>
>
> > Hopefully others may have more elegant answers.
>
> Well, since we don't seem to have any access to the HTML types in IE,
> that's the only thing I found that worked :)
>

> Arnaud

Hi. Would agree with that. I use a mixture of both your approach and
the wrapper approach depending on the need.

Julian.

[Julian Turner]

aundro wrote:

> My approach was the following (simplified):
>
> ========================================================
> function createNewDiv () {
>
> var nd = document.createElement ("div");
> nd.doThis = NewDiv__doThis;
> nd.doThat = NewDiv__doThat;
>
> return nd;
> }
>
> NewDiv__doThis = function () {...}
> NewDiv__doThat = function () {...}
> ========================================================
>
> Main points here:
> 1/ The element remains a div (you can therefore style it, manipulate
> it as if it were any HTML element (styling, DOM stuff, ..)).
> 2/ This is not prototype-based inheritance (well, it's no inheritance
> at all ;), so it can quickly become tedious if you got a hierarchy
> of types below the NewDiv thingy.
>
>
> > Hopefully others may have more elegant answers.
>
> Well, since we don't seem to have any access to the HTML types in IE,
> that's the only thing I found that worked :)
>

Hi. Yes, I agree, that is definitely another approach. I have used
both types myself depending on the requirement.

Have you seen http://www.bindows.net

That takes these issues to extreme lengths.

Julian

[Julian Turner]

Sorry, Google Groups is erroring at the moment. It is telling me that
my message was not sent, so I am fooled into duplicating.

Julian

[Thomas 'PointedEars' Lahn]

gabon wrote:

> As JavaScript class I intend a class created in JavaScript:
>
> function newDiv(){
> ...
> }
> newDiv.prototype.myMethod=function(){
> ...
> }

That's a prototype object as JavaScript < 2 is a _prototype-based_
object-oriented language. There are no classes in JavaScript < 2,
and JS2 still waits for implementation in HTML user agents.

<http://crockford.com/javascript/javascript.html>

> I would like to create different classes to assign to different divs
> depending on what they should do.
> In a OOP approach I think that should be the best way instead of assign
> to all the divs all the methods or to instantiate classes that handle
> externally the div
>
> function newDiv(myDiv){
> }
> newDiv.prototype.moveDiv=function(){
> this.myDiv.style.left="100px";

What do you suppose this.myDiv will refer to in this context?

> }

You are confusing user-defined and host objects. HTMLDivElement objects
are host objects, implementations of DOM Level 2 HTML. Your object is a
user-defined one. You cannot simply inject user-defined objects into the
AOM/DOM, that would require recompilation. However, you can extend the
prototype of a host object if the AOM/DOM provides means of doing so.

HTMLDivElement.prototype.moveDiv = function()
{
this.style.left = "100px";

}

> And of course the solution should be VERY cross-platform :(

Cannot be done. For example IE which is still considered to be the widest
distributed HTML user agent today, does not support prototyping of HTML
element objects.

> What do you recon?

You should reconsider your approach.

PointedEars

[VK]

gabon wrote:
> for JavaScript class I need a class created in Javascript:
>
> function newDiv(){
> }
> newDiv.prototype.myMethod=function(){
> }
>
> what a would like to do is to create different classes and to assign
> them to divs depending of what they should do.
>
> I think that in an optimal OOP paradigm that would be the best
> solution, avoiding to assign to all the Divs all the methods and
> avoiding to create instances of classes with the aim to handle objects
> external to the class.

That is really difficult to read your intentions so I'm sorry in
advance if I'm mistaken.

First, we are voting out the idea to *assign a classe to an object*
("create different classes and to assign them to divs" as you say) -
you cannot do that on any of existing / ever existed programming
languages ;-)

Then it *seems to me* that you are talking about *class inheritance*.
That is indeed one of base features of OOP and it is welcome in your
case like:

/* Base constructor */
function baseDIV() {
this.property = ...
this.method = ...
}

/* Derivate One */
function jumpingDIV() { // extends baseDIV
baseDIV.call(this); // super() > baseDIV
this.extraProperty = ...
this.extraMethod = ...
}

/* Derivate Two */
function jumpingSingingDIV() { // extends jumpingDIV
jumpingDIV.call(this); // super() > jumpingDIV > baseDIV
this.extraMoreProperty = ...
this.extraMoreMethod = ...
}

et ad infinitum...

Any close to what you want?

[aundro]

"Julian Turner" <jul...@baconbutty.com> writes:

> Have you seen http://www.bindows.net

I didn't know, thanks!

>
> That takes these issues to extreme lengths.

Probably, yes, as they re-implemented the whole World, prefixing each
element with a 'Bi' :)
Still, I'm having a hard time reading their code, as it is pretty
compact (http://www.bindows.net/bindows/html/js/application.js) and,
hmmm, trying to inspect the objects using Venkman just crashed my FF
hard :D ... a lil too heavy for it, I suppose.

Do you have any idea how they define the BiComponent? (I guess that's
the base widget for the Bi platform)

> Julian

Thank you very much for the link!

Best regards,
Arnaud

[gabon]

Thanks a lot guys for all your opinions. I'm sorry it I wasn't clear
but a part not having a perfect idea about the topic, I'm not
mothertongue.

As come up, it is not possible to have a cross-browser proper extension
of host objects, and althoght I found interesting the post from VK it
probably in this case doesn't help so much.

I found quite practical Arnaud's approach beside the lattest I
suggested (wrapper object that is the one I saw most used on effect
libraries).

So in any case I presume I will have to use one of these.

Thanks, thanks a lot, chr

[Thomas 'PointedEars' Lahn]

VK wrote:

> Then it *seems to me* that you are talking about *class inheritance*.

He was talking about extending host ("browser") objects which has nothing
to do with class-based inheritance. Sometimes it really helps to look into
the Subject header.

> That is indeed one of base features of OOP and it is welcome in your
> case like:
>
> /* Base constructor */
> function baseDIV() {
> this.property = ...
> this.method = ...
> }
>
> /* Derivate One */
> function jumpingDIV() { // extends baseDIV
> baseDIV.call(this); // super() > baseDIV
> this.extraProperty = ...
> this.extraMethod = ...
> }
>
> /* Derivate Two */
> function jumpingSingingDIV() { // extends jumpingDIV
> jumpingDIV.call(this); // super() > jumpingDIV > baseDIV
> this.extraMoreProperty = ...
> this.extraMoreMethod = ...
> }
>
> et ad infinitum...

For proper emulation of class-based inheritance in the prototype-based
language JS/ECMAScript, it is required at least that one object is the
prototype of another, i.e. one object is contained in the other's
prototype chain:

jumpingSingingDIV.prototype = new jumpingDIV();

(there are better ways and we have discussed those in great length as well)

> Any close to what you want?

No.

PointedEars

[Julian Turner]

aundro wrote:

[snip]

> Do you have any idea how they define the BiComponent? (I guess that's
> the base widget for the Bi platform)

Hi.

No idea. I have not really looked at it in any detail. If you are
interested, the blogs of the authors are:-

http://erik.eae.net
http://me.eae.net/

[snip]

> Thank you very much for the link!

My pleasure.

Julian