In this tutorial we shall construct a simple calculator. You will know how to write DM applications. You will know how to use the Display Machine and how to create user interface to your programs with it.
The basic functionality of the calculator is described by the following class text:
class CALC inherit DISPLAYABLE creation make feature indicator: INTEGER memory: INTEGER operation: CHARACTER make is do display (1) end digit (d: INTEGER) is do indicator := indicator * 10 + d end clear is do indicator := 0 end operate (op: CHARACTER) is do operation := op memory := indicator indicator := 0 end equals is do inspect operation when '+' then indicator := memory + indicator when '-' then indicator := memory - indicator when '*' then indicator := memory * indicator when '/' then indicator := memory // indicator else end -- when end end -- class CALC
We have a display ('indicator'), a register ('memory'), and a facility to enter digits and perform basic operations. Now lets examine our "main program", the routine make. It contains the call of a routine display (1). This routine is inherited from DISPLAYABLE.
You can see the resulting calculator program below. There is again nothing special. It looks like any calculator under Windows, with some buttons and a display.
Before we explain the way this works internally we will show how the "Calculator widget" was constructed. We use the DM Interface Builder for this purpose.
Here we have to note that the Eiffel system we want to use in order to develop a DM application must be available compiled - as an .exe file. The DM application relies on this executable and Display Machine Interface Builder needs the databases generated by the compiler.
After startup it displays all current projects - including the Calculator program.
Then we must select our "base" project - in our case it is called CALC. There is one constraint: At least one class in the selected project must inherit from DISPLAYABLE (A class provided with DM). If this is not true, the interface builder will refuse to open the project.
After opening CALC (by double-clicking on the folder) and entering the NEW command (the blank sheet on the toolbar) the New Form Wizard is activated. We decide to create a blank form.
Now a blank form appears on the screen. In background we can see the project window showing all forms defined for this project. On the left we have a list of all features of the class CALC - and also the classes CALC inherits from. The features are sorted alphabetically - preceded by Current - which is displayed with the attributes.
We move the "Attributes" digit and indicator to the new form using drag-and-drop. They will automatically expand into an edit field (for indicator) and a button (for digit) and the corresponding labels will be attached to them. This screenshot was produced with two drag-and-drops.
Double-clicking on one of the new widgets - in our example the button "Digit" - opens the property window of the widget. This window is explained in detail elsewhere. We will demonstrate here only two properties: the Title, which can be changed by typing over a new text, and the action.
The action describes the semantic action behind the button. In our case this is a call to the routine 'digit' (the routine we dragged-and-dropped as a starting point for our widget). We expand the symbol and see:
Now we replace the formal parameter d with the digit 2. It is also necessary to provide the proper label and to resize the button.
It is also possible to change the font and style of the label. The result can be seen on the right.
Now it becomes clear how we provide functionality with interface widgets: starting from an attribute we "draw" the corresponding widget on the screen. This widget knows about the attribute - and we can enhance this knowledge. So the digit routine was just "digit" and a button - now its digit (2) and the "2". We did the same for all numbers between 0 and 9 (this can also be done by copying the 2 button and changing the properties).
Drag-and-drop from operate resulted in the 4 basic arithmetic buttons - and equals was "translated" into "=".
We can test the result immediately - just press the
button in the speed bar.
Later we will show you how to enhance the calculator significantly - without much effort.