Richfaces component development: client side code template

    The goal of that document is to provide points to standartize RichFaces client side component development.

     

    It includes:

     

     

    All RichFaces components should be inherited from RichFaces.BaseComponent class or class based on it.

     

    Template of javascript file for RichFaces component:
    //
    // Template of javascript file for richfaces component
    //
    // Define and call function to create and register Class for our component
    //
    // As arguments we should pass all javascript library objects that we need to use
    // in our component, and at last our parameters(if needed) to create class of out
    // component
    (function (jQuery, richfaces, params) {
    
         // Create (for example) ui container for our component class
         richfaces.ui = richfaces.ui || {};
    
         // Create constructor and register our component class from (for example) ui
         // tag library in richfaces object
         richfaces.ui.Component = function(componentId [,options]) {
              // call constructor of super class
              $super.constructor.call(this, componentId [,options]);
    
              // Attach our component object to a dom element if we want to call it's
              // API methods from inside of component
              // Call protected method from BaseComponent
              this.attachToDom(this, componentId);
    
              // Here is additional constructor code 
         };
    
         // Private functions definition
         var f = function () {};
    
         // Public functions definitions. It's fully the same as for private but public  
         // ones will be later returned from extend method.
         var f1 = function () {};
    
         // Making function protected. At first defining function as private
         var myPrivateMethod = function () {};
    
         // Extend component class and add protected methods from parent class to
         // our container. richfaces.BaseComponent should be used or class
         // inherited from BaseComponent class
         richfaces.BaseComponent.extend(richfaces.BaseComponent, richfaces.ui.Component);
     
         // define super class link for better usability
         var $super = richfaces.MyComponent.$super;
    
         // Add variable, properties and methods to our component class via extending
         // it's prototype and returning linsk to them
         jQuery.extend(richfaces.ui.Component.prototype, (function (params) {
    
              // Public properties and functions definition
              return {
                   name: "Component",  // Shared property definition
                   // define destroy method to clean up when ajax or page rerender happened
                   // to avoid memory leaks 
                   destroy: function () {$super.destroy.call(this)};
                   f1: f1,             // Link to function that was defined as private
                                       // to make it public
                   f2: function () {}, // Public function definition
    
                   // If we need ability to use "chain" commands, function should
                   // return object instance (this) 
                   // This allows to attach multiple function calls together with one
                   // line of code, for example:
                   f3: function () {
    
                        // some function code
    
                        return this;
                   }
              };
         })(params));
    })(jQuery, RichFaces, {p1:"param1", p2:"param2"});
    

     

    Benefits of the approach used in the template:

      • Better Portal support (Nick please clarify it more)
      • Possibility to define private methods and properties

     

     

    How to create instance of component:
    // Component instance creation
    // NOTE: componentId must be valid id string
    new RichFaces.ui.Component(componentId);
    
    // Example of component instance creation and use "chain" commands
    new RichFaces.ui.Component(componentId).f3().f3();
    

     

     

    How to call private method from public method:
    // f() - private method
    // f1() - public method
    function f1() {
         f.call(this [, arguments]); // call private method with "this" as a context
    }
    

     

     

    How to call api functions of component
    // Find component instance and call it's function
    document.getElementById(componentId).rich.component.f1();
    
    // Another way to find component instance using RichFaces.$
    // NOTE: componentId must be valid id string
    // NOTE: DOM element or jQuery object can be used instead of id string.
    RichFaces.$(componentId).f1();