DomAPI Home
DomAPI

domapi.Component

See also: Elm

This object works as an interface layer between components and the base Elm

Every GUI component in DomAPI inherits all the properties of this class, as well as the elm class.

You never have to explicitly create an instance of the Component class, this is all taken care of by the author of the GUI control.
For instance, the component class has a boolean property called doRollover as you can see below. If you were to then create a Button instance on your page, it will have a doRollover property as well, since it inherits it from this Component class.

A note about the "is" properties.
Every component instance has an isComponent boolean, that can be used when traversing the tree. Additionally, they have another "is" property based on their type. For instance, a Button instance has an isButton boolean.

You can also use the DA_TYPE property which will always be the component type in all caps, ie: BUTTON.

Each component is also automatically given a CSS className based on its name. The format for the className is DA_ and then the name in all caps. For instance, DA_BUTTON.

Component Constructor

var component1 = domapi.Component({
  enabled        : true,
  doBGFill       : true,
  doBorder       : true,
  formName       : null,
  tabIndex       : null,
  doDepress      : true,
  doRollover     : true,
  elementName    : null,
  doRolloverFill : true 
});
Also inherits the constructor arguments of Elm.

Constructor Details
Parameter Type Default Description
enabled boolean true  Boolean value that determines whether or not the component is enabled. Value is typically readonly, you should use the setEnabled() method to set the actual value.

Actual implementaion depends on the component author. 
doBGFill boolean true  Whether or not the component fills in it's background color or leaves it transparent. 
doBorder boolean true  Whether or not a border is drawn. Can be over ruled by skins. 
formName String null  Shortcut for 'attachToForm' behaviour. You can provide formName and elementName directly in the constructor to have the component behave as a form element. 
tabIndex integer null  If present, allows the component to participate in the browsers tabbing system. That is, it allows the component to recieve and lose focus when the user presses the tab key. Some components set this property automatically, so that they display focus correctly. 
doDepress boolean true  Affects the way some components react to mouse clicks. Usually used to enable a button-like effect. 
doRollover boolean true  Some components do animations or change colors as you mouseover them. This property turns that on or off. 
elementName String null  Shortcut for 'attachToForm' behaviour. You can provide formName and elementName directly in the constructor to have the component behave as a form element. 
doRolloverFill boolean true  Some components that have mouseover effects also fill in the backgrounds. This can turn that off. 

Events unique to domapi.Component

Also has the same events as Elm.

Methods unique to domapi.Component

Also has the same methods as Elm.

Properties unique to domapi.Component

Also has the same properties as Elm.
Events
onchange ()

Fires whenever the component's value changes.

Example:
  comp1.onchange = function(){
  alert("new value = " + this.value);
};
back to top
ondraw ()

This event fires immediately after the component has executed it's internal draw() method. That method is responsible for displaying the component in the current theme.
You can use the ondraw event to add in your own custom drawing code.

Example:
  // make the button's border blue
button1.ondraw = function(){
  this.style.borderColor = "blue";
}
See also:  draw
back to top
onlayout ()

This event fires immediately after the component has executed it's internal layout() method.
You can use the onlayout event to add in your own custom drawing code.

See also:  layout
back to top
Methods
attachToForm ( form, name )

Causes the control to become an element of a given form. This allows the value of the control to participate in a GET or POST operation.

Example:
  // value of combobox1 will be posted in the form as "productID"
combobox1.attachToForm(document.form1, "productID");
Parameters:
Parameter Type Required Default Description
form Form Y   A reference to the form to attach the component to. 
name String Y   The name to use when posting the form. This equates to the name attribute used by standard HTML form elements. 
back to top
beginUpdate ()

For components which require a number of method calls to populate, using beginUpdate() and endUpdate() can help improve performance by keeping the component from painting itself repeatedly.

Example:
  elm1.beginUpdate();
elm1.addDate( ... );
elm1.addDate( ... );
elm1.addDate( ... );
elm1.endUpdate();
back to top
draw ()

The draw() method forces the component to update itself using the current Theme. Typically you do not have to call draw() yourself.

Causes Component.ondraw() to fire.

See also:  layout
back to top
endUpdate ()

For components which require a number of method calls to populate, using beginUpdate() and endUpdate() can help improve performance by keeping the component from painting itself repeatedly.

Example:
  elm1.beginUpdate();
elm1.addDate( ... );
elm1.addDate( ... );
elm1.addDate( ... );
elm1.endUpdate();
back to top
getValue ( separator ) type : variant

Use getValue() to retrieve the component's value property. Some components allow for multiple selections and such, so this method may return a delimited value. When that occurs, the value returned is cast as a String.

Parameters:
Parameter Type Required Default Description
separator String   \n  For components that can have more than one value, these are returned delimited by this parameter. Default is a line break. 
back to top
layout ()

The layout() method forces the component to update itself in relation to its size and layout any child elements it may have. Typically you do not have to call layout() yourself.

Causes Component.onlayout() to fire.

See also:  draw
back to top
loadFromJSON ( input ) type : String

For components that support streaming to and from JSON strings.

Parameters:
Parameter Type Required Default Description
input Object Y   The JSON object to load the component data from. 
back to top
saveToJSON ()

For components that support streaming to and from JSON strings.

back to top
setEnabled ( enabled )

Most components implement the setEnabled() method to toggle its enabled property. Setting enabled directly does not notify the component that the value has changed. Call setEnabled() instead.

Example:
  button1.setEnabled(false); // disable button1
Parameters:
Parameter Type Required Default Description
enabled boolean   true    
See also:  enabled
back to top
setValue ( value )

 

Parameters:
Parameter Type Required Default Description
value variant Y   Use this method to change the component's value property. Never set value directly. 
back to top
Properties
DA_TYPE type : String

Component type.
Every component you create will have a unique component type string. This can be handy when traversing the DOM tree or when using the domapi.findTarget() or domapi.findParent() methods.

Example:
  // move up the tree till DA_TYPE "LISTBOX" is found
domapi.findTarget(Event, "LISTBOX");
back to top
isComponent type : boolean

Boolean value that tells whether or not the Elm is a Component.

back to top
DHTML by www.domapi.com