(edit) **Disregard - Off Topic**
HTML
<HTML>
<HEAD>
</HEAD>
<BODY onload="GetXYfromRuby()">
<INPUT TYPE=text VALUE="" NAME="LenX">
<INPUT TYPE=text VALUE="" NAME="LenY" onchange="CalcArea()">
<!-- put this description DIV anywhere you want -->
<DIV ID="Description">This is the fabulous Rectangle component<p>You can set LenX and LenY<p>The calculated area, based on your input is <SPAN ID="Span_AreaXY"></SPAN></DIV>
<!-- at the bottom of your webDialog HTML -->
<SCRIPT Language="Javascript">
function ShowAreaXY(AreaXY) {
Span_AreaXY.innerText=AreaXY.toString();
}
function CalcArea() {
var AreaXY;
AreaXY=LenX.value*LenY.value;
ShowAreaXY(AreaXY);
}
GetXYfromRuby() {
window.location.href = 'skp;get_data@queryforXY';
// your ruby callback will do two commands;
// js_command = 'LenX.value=componentLenX;'
// js_command = 'LenY.value=componentLenY;'
// when LenY INPUT control gets value the onchange event fires
// calling CalcArea() which then calls ShowAreaXY
}
</SCRIPT>
</BODY>
</HTML>
Havenot tested this, so you'll need to wring out the bugs.
For example of the ruby callback, See:
http://sketchupapi.blogspot.com/2008/02/sharing-data-between-sketchup-ruby-and.html