4 Replies Latest reply on Jul 20, 2011 7:48 PM by bleathem

    Multiple inheritance with RichFaces javascript objects

    bleathem
    bleathem Jul 20, 2011 5:06 PM

      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
          nbelaevski
          nbelaevski Jul 20, 2011 6:11 PM (in response to bleathem)

          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.

            • Actions
          • 2. Re: Multiple inheritance with RichFaces javascript objects
            bleathem
            bleathem Jul 20, 2011 6:10 PM (in response to nbelaevski)

            Thanks Nick!  That'd work well too. 

             

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

              • Actions
            • 3. Re: Multiple inheritance with RichFaces javascript objects
              nbelaevski
              nbelaevski Jul 20, 2011 6:18 PM (in response to bleathem)

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

                • Actions
              • 4. Re: Multiple inheritance with RichFaces javascript objects
                bleathem
                bleathem Jul 20, 2011 7:48 PM (in response to nbelaevski)

                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 !

                  • Actions