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

    Multiple inheritance with RichFaces javascript objects

    bleathem

      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

          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
            bleathem

            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
              nbelaevski

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

              • 4. Re: Multiple inheritance with RichFaces javascript objects
                bleathem

                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 !