# Friday, 07 May 2004

Xul Challege - Zeepe Calculator Sample

Here is a Zeepe implementation of a calculator for the Xul Coding Challenge:

As with the Counter  sample, implementation is mostly an excercise in DHTML design and coding - this sample is based on code available from http://simplythebest.net/info/dhtml_scripts.html with script additions to provide a keyboard based interface. The menu is provided by the use of the rebar and menubar elements from the zeepe namespace provided by the Zeepe host, their use is as with any other html elements. Note that these elements are not implemented as htcs, they are binary behaviours using the native windows implementation of rebars and commandbars - the calculator will look 'right' on each version of Windows.

<HTML>
<HEAD>
<TITLE>Challenge 2004 - Calculator</TITLE>
<zeepe:window>
 <window>
  <ui ctxmenu="false" />
  <widgets min="false" max="false" resize="false" />
  <position width="350" height="650" halign="middle" valign="middle" />
 </window>
</zeepe:window>
<style type="text/css">
body {
 overflow: hidden;
 border: none;
 padding: 0;
 margin: 0;
 filter:progid:DXImageTransform.Microsoft.Gradient(
GradientType=0, StartColorStr='#9FBAD0', EndColorStr='#eeeeee');
}
.num {
 width: 50px;
}
.op {
 width: 30px;
}
.output {
 text-align: right;
}
</style>
<script language="javascript" src="zeepe-calc.js"></script>
</HEAD>
<BODY onload="calcInit()" onkeydown="onKeyPressed()" onselectstart="return false">
<form name="Keypad" onsubmit="Operation('='); return false;">
<zeepe:rebar id="mainbar">
 <zeepe:menubar>
<menu id="Edit" text="&amp;Edit" >
  <menuitem id="EditCopy" text="&amp;Copy"
         shortcut="Ctrl+C" oncommand="EditCopy()" />
  <menuitem id="EditPaste" text="&amp;Paste"
   shortcut="Ctrl+V" oncommand="EditPaste()" />
     <separator />
  <menuitem id="EditExit" text="E&amp;xit" shortcut="Alt+F4" oncommand="zpmObject.close()" />
    </menu>
    <menu id="Help" text="&amp;Help" >
   <menuitem id="About" text="&amp;About..."  oncommand="About()" />
    </menu>
 </zeepe:menubar>
</zeepe:rebar>
<table id="layout" border="0" cellpadding="2" cellspacing="0" style="margin: 2px">
<tr>
 <td colspan="3" align="middle">
  <input class="output" onfocus="document.body.focus();"
name="ReadOut" type="Text" size="24" value="0" width="100%" >
 </td>
 <td><button onClick="Clear()" class="op">C</button></td>
 <td><button onClick="ClearEntry()" class="op">CE</button></td>
</tr>
<tr>
 <td><button onClick="NumPressed(7)" class="num">7</button></td>
 <td><button onClick="NumPressed(8)" class="num">8</button></td>
 <td><button onClick="NumPressed(9)" class="num">9</button></td>
 <td><button onClick="Neg()" class="op">+/-</button></td>
 <td><button onClick="Percent()" class="op">%</button></td>
</tr>
<tr>
 <td><button onClick="NumPressed(4)" class="num">4</button></td>
 <td><button onClick="NumPressed(5)" class="num">5</button></td>
 <td><button onClick="NumPressed(6)" class="num">6</button></td>
 <td><button onClick="Operation('+')" class="op">+</button></td>
 <td><button onClick="Operation('-')" class="op">-</button></td>
</tr>
<tr>
 <td><button onClick="NumPressed(1)" class="num">1</button></td>
 <td><button onClick="NumPressed(2)" class="num">2</button></td>
 <td><button onClick="NumPressed(3)" class="num">3</button></td>
 <td><button onClick="Operation('*')" class="op">*</button></td> 
 <td><button onClick="Operation('/')" class="op">/</button></td>
</tr>
<tr>
 <td><button onClick="NumPressed(0)" class="num">0</button></td>
 <td colspan="3"><button onClick="Decimal()" class="num">.</button></td>
 <td><button onClick="Operation('=')" class="op">=</button></td>
</tr>
</table>
</form>
</BODY>
</HTML>
#    Comments [0] |