Thanks : )
I used here a basic example, but actually my code is more complex. We
want to make elements (buttons, windows, toolbars, etc...), and we do
this in a mootools-like way :
var myButton = new UI.Button({label : 'My button'});
But we want them to act like native elements ( new Element('div') ) to
have the ability to do for example :
this.button = new UI.Button({label : 'My
button'}).addClass('customClass').inject(document.body).
Our classes always do in the initialize method : this.element = new
Element('div'). What I really need is a way to implement methods of
the native Element Class in our UI.Button class. Now we reimplement
one by one element's methods we need :
UI.Button = new Class({
initialize : function(){
this.setOptions();
this.element = new Element('div', {html : this.options.label})
},
inject : function(target, position){
this.element.inject(target, position);
return this;
},
setStyle: function(style, value) {
this.element.setStyle(style, value);
return this;
},
setStyles: function(styles) {
this.element.setStyles(styles);
return this;
},
addClass: function(className) {
this.element.addClass(className);
return this;
}
(.......)
});
Is there a better way to do this? Thanks,
Luca Pillonel
On Sep 13, 8:36 pm, Aaron <[EMAIL PROTECTED]> wrote:
> You don't want to have a return statement in your initialize method.
> Initialize is called when classes are invoked, but the invocation by
> default returns the instance of the class. By having your Button class
> return the element, you have no access to setContent.
>
> Using your example above, if I did:
>
> var myButton = new Button();
>
> myButton is the dom element, not the instance of the class.
> Consequently any methods in this class are useless. Instead, do
> something like this:
>
> var Button = new Class({
> initialize : function(){
> this.button = new Element('div');
> this.setContent('my button');
> },
> toElement: function(){
> return this.button;
> },
> setContent : function(content){
> this.button.set('html', content);
> }
>
> });
>
> var myButton = new Button();
> $(myButton).inject(...);
> myButton.setContent(...);
>
> etc.
>
> The use of the options class would also benefit here, as you could set
> options (like what the default text should be).
>
> Finally, the actual usage of this example is questionable, as the code
> here basically re-implements the basic Element constructor. If this is
> pasted here only as an example of what you're trying to do, then
> that's cool, but if you actually want to use this class as illustrated
> here, consider:
>
> new Button().setContent('foo');
> new Element('div').set('html', 'foo');
>
> You're not really saving yourself any effort.
>
> -Aaron
>
> On Sep 12, 5:27 pm, keif <[EMAIL PROTECTED]> wrote:
>
> > Now that I'm on topic (tee hee, my bad)
>
> > new Button().inject(document.body); wouldn't throw an error - it's a valid
> > element.
>
> > var Button = new Class({
> > initialize : function(){
> > this.button = new Element('div', {html : 'my button'});
> > return this.button;
> > },
> > setContent : function(content){
> > this.button.set('html', content);
> > }});
>
> > var newButton = new Button().inject(document.body).set('html', 'hello');
> > console.log(newButton); // this is in the page!
>
> > var myButton = new Button();
> > var domElement = $(myButton).set('html', 'goodbye');
> > console.log(domElement); // this is ready to be inserted wherever
>
> > If you wanted to include the content to be set when you call the button,
> > you'd need to set up variables to be passed into the button instance, if
> > that's a route you want to go.
>
> > So, uh, sorry for the mispost earlier. :-)
>
> > loki der quaeler wrote:
>
> > > you'll want your class to implement a method called toElement which
> > > returns the Element instance which you'd like inserted in the DOM
> > > (this.button in your class example below).
>
> > > once it implements this method you can refer to an instance wrapped
> > > by the $ function to have access to the instance's Element. in other
> > > words:
> > > var myButton = new Button();
> > > var domElement = $(myButton);
>
> > > odd: you can really have the javascript
> > > (new Button()).inject(document.body);
> > > executed with the Button class described below, and receive no
> > > javascript error?
>
> > > On Sep 12, 2008, at 4.27 PM, Luca Pillonel wrote:
>
> > >> I have a class creating elements. I.E.
>
> > >> var Button = new Class({
> > >> initialize : function(){
> > >> this.button = new Element('div', {html : 'my button'});
> > >> return this.button;
> > >> },
> > >> setContent : function(content){
> > >> this.button.set('html', content);
> > >> }
> > >> });
>
> > >> So i can create an element in my DOM like this :
> > >> var myButton = new Button().inject(document.body);
>
> > >> But how can I make
> > >> myButton.setContent('some new content');
> > >> ?
>
> > >> Thank you
>
> > --
> > View this message in
> > context:http://n2.nabble.com/can-a-class-return-both-himself-and-an-element--...
> > Sent from the MooTools Users mailing list archive at Nabble.com.
