The Calculator Example

The Calculator Example

To demonstrate how the Views System handles the interaction from the user we will go through the currency converter calculator example that is written in C# and Views. This program can be downloaded from here. It is recommended that you run this program before going any further.

As you probably have seen while executing the calculator program, the Currency calculator have different sequential GUi's. These Gui's are logically the same but they are displayed in different languages.

First we look at how the Xml specification of these Gui's look like then in the next page we discuss how Views handles interactions to these Gui's.

With the XML specification that has been provided as sample 1, the statement:

Views.Form f = Views.Form(specEn);

Will produce the window below the code. Please note the names that have been given to these controls since they will be used a lot in the next page.

Sample 1.

static string specEn =
@"<form Text='Currency calculator'>
<horizontal>
    <vertical>
       <Label text='Paid on hols'/>
           <Label text='Charged'/>
          <Label text='Exchange rate is'/>
       <Button Name=equals Text='='/>
    </vertical>
    <vertical>
         <Textbox name=eurobox/>
              <Textbox name=GBPbox/>
              <Textbox name=ratebox/>
         <Button Name=clear Text='Reset'/>
    </vertical>
</horizontal>
</form>";

Below we provide a Views code that is responsible for other Guis from the calculator Example. Please note from the example that the Font displayed on the Labels and TextBoxes has the size of 16 pixels. The Arrays of Strings contains the text that will be displayed on the controls if a particular language is choosen.

Sample 2.

static string specBig =
@"<form Text={0}>
   <horizontal>
      <vertical>
           <Label text={1} Font=16/>
              <Label text={2} Font=16/>
               <Label text={3} Font=16/>
           <Button Name=equals Text='=' Font=16bold halign=centre/>
    </vertical>
      <vertical>
           <Textbox name=eurobox Font=16/>
             <Textbox name=GBPbox Font=16/>
           <Textbox name=ratebox Font=16/>
      </vertical>
   </horizontal>
</form>";

   static string[] english = {"Currency Calculator",
   "Paid on hols",
   "Charged",
   "Exchange Rate is"};

   static string[] german = { "die W\u00E4hrungsumrechnung",
   "bezahlt im Urlaub",
   "berechnet",
   "der Kurs" };

   static string[] french = { "calculatrice de monnaie",
   "pay\u00E9 en vacances",
   "charg\u00E9",
   "cours" };

   static string[] italian = { "Cambio Valuta",
   "Spese di Vacanze",
   "Carta di Credito",
   "Rata di Cambio" };

From views and C# code given above the following statement will produce the GUI below

Views.Form f = Views.Form(specBig, french);

Note that the name of the controls haven't changed only a display have changed.

<<PREVIOUS | NEXT>>