How to define a component

An XML tag node in the component definition XML, for example in Component.xml in BTTWeb2InternetBankSample, represents a type of component.

The name attribute defines the name of component, and class attribute identifies the constructor of a component instance. The scope attribute describes the namespace of component constructor, and the extend attribute represents its parent component. The scope attribute and the extend attribute are optional. If they are not defined, the default value are window and Object respectively.

More attention should be paid when defining extend. Make sure the parent component has been defined before the child component's definition. The extend attribute should have the same effect as Function.prototype.extend(arg) method.

Here's an example.
Define a component named ComponentBase and a component called “Page” which inherits from the ComponentBase component. The component definition XML file is as follows:
<Components xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://btt.cn.ibm.com/61/Web20" xsi:schemaLocation="http://btt.cn.ibm.com/61/Web20 ../BTTWeb20/schema/Component.xsd ">
	<component name="ComponentBase" class="BTTComponentBase"/>
	<component name="Page" class="BTTPage" scope="window" extend="ComponentBase"></component>
The constructor of ComponentBase component is defined as follows:
function BTTComponentBase(){}
BTTComponentBase.prototype = {
//base attribute and method
	id : undefined,
	getId: function(){
		return this.id;
	},
	setId: function(id){
		this.id = id;
	},
	getAttribute: function(name){
		return this[name];
	},
	setAttribute: function(name,value){
		this[name] = value;
	}
};
The constructor of Page component is defined like the following:
function BTTPage(){
//Initialization process, you can add other procedures also.
}
BTTPage.prototype = {
//the method of BTTPage
	basic:null,
	maxColLength:null,
	isBasic:function(){
		return this.basic;
	},
	setBasic:function(basic){
		this.basic=basic;
	},
	getMaxColLength:function(){
		return this.maxColLength;
	},
	setMaxColLength:function(maxcol){
		this.maxColLength=maxcol;
	}
};

The following picture shows the structure of component definition:

the structure of component definition