Listing 1

type gb_1 from groupbox within w_groupbox
int y=92;int width=800;int height=400;
int textsize=-10;string facename="Arial";
long backcolor=67108864;long textcolor=33554432
string text="Groupbox Label";
borderstyle borderstyle = stylelowered!int x=754;
end type


Listing 2

<-- groupbox.htc file - interface definition-->
<PUBLIC:COMPONENT NAME="gbx" tagName="GROUPBOX"
<PROPERTY NAME="label" value=""/>
<ATTACH EVENT="oncontentready"
HANDLER="constructor" />
</PUBLIC:COMPONENT>
<-- implementation script-->
<SCRIPT>
var fontSize;
function constructor() {
fontSize = element.style.fontSize;
if (fontSize=="") fontSize=10;
addGroupBox();addLabel();
}
function addGroupBox() {
// adds empty rectangular object with no visual
var g = document.createElement("DIV");
g.style.left=0;
// if label is not empty, move top down a notch
g.style.top= (label==""?0:fontSize);
// prevent inner controls/label clash
g.style.paddingTop=(fontSize/2)+"px";
g.style.width= element.style.pixelWidth;
g.style.height=(element.style.pixelHeight -
(label==""?0:fontSize))+"px";
g.style.border = "2px groove";
style.border="";//hide parent's control border
//Places element within the original control
element.applyElement(g, "inside");
}
function addLabel(){//Places label in the top,
// left indented position in the bounding control
if (label!="") element.innerHTML+='<SPAN '+
'style="position:absolute;top:0px;left:'+
fontSize+'px">'+label+"</SPAN>"; }
</SCRIPT>
<-- eof groupbox.htc -->


Listing 3

<PUBLIC:COMPONENT NAME="cbx" tagName="CHECKBOX">
<PROPERTY NAME="label" />
<PROPERTY NAME="checked" GET="getChecked"
PUT="putChecked" />
<PROPERTY NAME="labelonleft" DEFAULT="true"/>
<PROPERTY NAME="value" GET="getValue"
PUT="putValue" />
<PROPERTY NAME="originalValue" GET="original" />
<PROPERTY NAME="onValue" DEFAULT="true"/>
<PROPERTY NAME="offValue" DEFAULT="false" />
<PROPERTY NAME="disabled" DEFAULT="no"/>
<METHOT NAME="Show" ID="Show"/>
<METHOT NAME="Hide" ID="Hide"/>
<EVENT NAME="onItemChanging"
ID="onItemChanging"/>
<EVENT NAME="onItemChanged"
ID="onItemChanged" />
<ATTACH EVENT="oncontentready"
HANDLER="constructor" />
<SCRIPT >
var origValue;
var oValue;
function constructor() {
origValue=getValue();
if(labelonleft == "true") {
addLabel(); addCheckBox();}
else { addCheckBox(); addLabel();}}
function putChecked( newValue ){
if (newValue) value = onValue;
else value = offValue;
}
function getChecked(){ return ( oValue == onValue); }
function getValue(){ return oValue ; }
function getOValue() { return origValue; }
function putValue( newValue ) {
if (window.event == null) {oValue = newValue;
origValue = newValue; return; /* initial*/}
var oEvent = createEventObject();
oEvent.setAttribute("newValue", newValue);
onItemChanging.fire(oEvent);
if ( oEvent.returnValue != 1) {:
oValue = newValue;
eval('cb_'+uniqueID).checked=
( oValue == onValue );
onItemChanged.fire(oEvent);
} }
function addLabel(){element.innerHTML+='<LABEL '+
'for="cb_'+uniqueID+'">'+label+"</LABEL>";}
function addCheckBox() {
var s;
s = '<INPUT name="cb_'+uniqueID+'" id="cb_'+
uniqueID+'" type="checkbox" ';
if (disabled == "yes") s +=' disabled="true" ';
if( oValue == onValue ) s +=' checked="true" ';
s+='onclick="'+uniqueID+'.checked='+
cb_'+uniqueID+'.checked;" ' ;
element.innerHTML += s + "/>";
}
function Show(){style.visibility='visible';}
function Hide(){style.visibility='hidden';}
</SCRIPT>