4 Replies Latest reply: Jul 20, 2011 7:48 PM by Brian Leathem RSS

Multiple inheritance with RichFaces javascript objects

Brian Leathem Master

In the RichFaces components "input" project, I want to take the rf.ui.PopupList javascript object, and split some of the funtionality out for code re-use.  Specifically, I want to re-use the list part, and refactor out the popup part.  The problem is the ojbect currently extends the rf.ui.Popup object.

rf.ui.Popup.extend(rf.ui.PopupList); [1]

 

JQuery's extend method (on which the above extend is built) supports multiple inheritence.  So I thought I could create a new object called rf.ui.List, and have PopupList extend both these objects, as in:

rf.ui.Popup.extend(rf.ui.PopupList);
rf.ui.List.extend(rf.ui.PopupList);

 

My first attempts with this have proven so far to be unsuccessful.  Beofre I spend much more time trying to make it work, I'd appreciate hearing if others think this is possible, and if so, wheteher it's a good approach.  I'd particularly like to find somewhere in the exisitng codebase where this is already done.

 

Cheers,

Brian Leathem

 

[1] https://github.com/richfaces/components/blob/develop/input/ui/src/main/resources/META-INF/resources/org.richfaces/popupList.js#L22

  • 1. Re: Multiple inheritance with RichFaces javascript objects
    Nick Belaevski Master

    Brian,

     

    I'm using delegation instead of multiple inheritance - it's much simpler to maintain.

     

    Extend(parent, child) method you are referring to overrides prototype chain, so it is not safe to call it for different base classes. Better use hash that contains combined methods as prototype.

  • 2. Re: Multiple inheritance with RichFaces javascript objects
    Brian Leathem Master

    Thanks Nick!  That'd work well too. 

     

    Can you point me to a particular component that already makes use of delegation?

  • 3. Re: Multiple inheritance with RichFaces javascript objects
    Nick Belaevski Master

    probably not the best example, but anyway: JavaScript Tree class that delegates reponsibilities to TreeNodeSet.

  • 4. Re: Multiple inheritance with RichFaces javascript objects
    Brian Leathem Master

    That worked great - thanks Nick!

     

    For those interested, my popupList.js now looks like:

     

    (function ($, rf) {
    
        rf.ui = rf.ui || {};
    
        rf.ui.PopupList = function(id, listener, options) {
            this.namespace = this.namespace || "." + rf.Event.createNamespace(this.name, id);
            var mergedOptions = $.extend({}, defaultOptions, options);
            $super.constructor.call(this, id, mergedOptions);
    
            this.list = new rf.ui.List(id, listener, options);
        };
    
        rf.ui.Popup.extend(rf.ui.PopupList);
        var $super = rf.ui.PopupList.$super;
    
        var defaultOptions = {
            attachToBody: true,
            positionType: "DROPDOWN",
            positionOffset: [0,0]
        };
    
        $.extend(rf.ui.PopupList.prototype, ( function () {
    
            return {
                name : "popupList"
            }
    
        })());
    
    })(jQuery, window.RichFaces);
    

     

    And I have list.js that contains all the previous popuplist javascript (except the default options).  Thus, PopupList extends Popup to get the popup functionality, but PopupList is composed of a rf.ui.List object, which can in turn be used to build other components.

     

    More testing is required, but this looks good so far!

     

    DRY FTW !