Re: can a class return both himself and an element?

Mon, 06 Oct 2008 04:09:50 -0700 


if you add a toElement method to your classes you can do something like:
        var myButton = new UI.Button({..});
        
        $('div').grab(myButton);

        $(myButton).inject(document.body);

I wrote a blog post about this feature here: 
http://blog.kassens.net/toelement-method

-jan
        

On Oct 6, 2008, at 12:29, Luca Pillonel wrote:



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.


--
my blog: http://blog.kassens.net

Reply via email to