A Taste of Redmond

[Anne]

This week's tip will concentrate on using a couple of the Redmond components. We shall be exploring the age-old programming problem of converting temperature in Celsius to Fahrenheit and back again. The Redmond components should be included automatically when you use them. If you ever get problems, then you can explicitly include them as follows:-

<include href="../components/redmond" />

To begin with, we're going to require a clean sheet to work with - in this case, it's going to be a window. Next we shall need a place to enter the temperature we wish to convert - a windowtext element. We must also have a system for deciding which way the conversion is going (a combobox - like a pulldown) and something to make it all happen - a button. Oh, and let's not forget that we need somewhere to put the result.

The combobox needs a dataset as its list of items. Here we're using an XML structure similar to the HTML one for select boxes. We then pass that XPath to the combobox via the itemfield attribute.

To find out what it contains, we get its text contents, by accessing first the top property, then the field:

whichWay.top.field.getText().

This returns a string that we can perform logic on.

The rest of the app is basic LZX and scripting. The input text is converted to a number with ECMAScript's global parseFloat() function.

Finally, we used IDs to speed up development of this app.

<canvas>
<dataset name="conversionOptions">
<select>
<option>Celsius to Fahrenheit</option>
<option>Fahrenheit to Celsius</option>
</select>
</dataset>

<window title="Converter" width="400" height="125">
<simplelayout axis="x" spacing="10" />
<text y="30">Convert</text>
<windowtext y="25" width="60" id="input" />

<combobox id="whichWay" y="24" width="142" shownitems="2"
itemfield="conversionOptions:/select/option.text()">
</combobox>

<button y="22" onclick="this.calculate()">
Convert!
<method name="calculate">
var userChoice = whichWay.top.field.getText();
if ( userChoice == 'Celsius to Fahrenheit' ) {
this.cToF( parseFloat( input.getText() ) );
} else if ( userChoice == 'Fahrenheit to Celsius' ) {
this.fToC( parseFloat( input.getText() ) );
} else {
return false;
}
</method>

<method name="cToF" args="f">
display.setText( (f * 1.8) + 32 );
</method>

<method name="fToC" args="f">
display.setText( ( 5 * (f - 32) ) / 9 );
</method>
</button>

<text y="27" width="45" id="display" fontstyle="bold">
</text>
</window>
</canvas>


Enjoy!

Antun