Defining 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.

When you define extend, make sure the parent component has been defined before the child component's definition. The extend attribute should have the same effect as BTTUtil.prototype.extend(arg) method.

Following is 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 as follows:
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 diagram shows the structure of component definition:

the structure of component definition