Senin, 22 Desember 2025

HTML Component (.htc) 1

 


main.html

<HTML xmlns:MS>

<?IMPORT namespace = MS implementation = "button.htc" >
<?IMPORT namespace = MS implementation = "input.htc" >

<PUBLIC:COMPONENT tagName=MYPAGE >
<public:defaults viewLinkContent />
<public:attach event=oncontentready onevent="init();" />
</public:component>

<script>
function init() {
}

function clicked() {
  MyInput.value = "Clicked";
}

</script>

<BODY style="background:cyan">

<h2>View Linked Element Behaviors</h2>

<MS:BUTTON id=MyButton click="clicked()" text="Click Me"/>
<br>
<MS:INPUT id=MyInput />

</BODY>
==================================
input.htc
<PUBLIC:COMPONENT tagName=INPUT >
<public:defaults viewLinkContent />
<public:property name="value" put="setValue" get="getValue"/>
<public:attach event=oncontentready onevent="init();" />
</public:component>

<script>
function init() {

}

function setValue(v) {
  TheInput.value = v;
}

function getValue() {
  return text;
}

</script>

<BODY style="width:100%; height:100%">

<input type=text id=TheInput>

</BODY>
================================================
button.htc
<PUBLIC:COMPONENT tagName=BUTTON >
<public:defaults viewLinkContent />
<public:property name="text" put="setText" get="getText"/>
<public:event id=MyClick name="click" />
<public:attach event=oncontentready onevent="init();" />
</public:component>

<script>
function init() {
  TheButton.attachEvent("onclick", doOnclick);
}

function doOnclick() {
  MyClick.fire();
}

function setText(v) {
  TheButton.innerHTML = v;
}

function getText() {
  return text;
}

</script>

<BODY style="width:100%; height:100%">

<button id=TheButton></button>

</BODY>


Tidak ada komentar: