The goal of that document is to provide points to standartize RichFaces client side component development.
It includes:
- Template of javascript file for RichFaces component
- How to create instance of component
- How to call private methods from public method
- How to call api functions of component
- to be done...
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();
Comments