This document is a simple tutorial that demonstrates how to add the components of an event-driven application one after the other. The tutorial describes how to develop a small sample application consisting of one dialog. The application you will create is a degressive depreciation calculator.

You can use this calculator, for example, to find out the value of your car by entering how much the car was worth when you bought it, how many years you have owned it, and the percentage by which the value of the car decreases each year.

You can save your application at any stage, allowing you to interrupt the tutorial and continue at a later time where you left.

To develop the sample application

1. Create a new dialog (represented by a window).

2. Assign the attributes to your dialog (decide the window's settings).

3. Create the dialog elements in the dialog (decide how the user can interact).

4. Assign the attributes to your dialog elements (decide attribute settings).

5. Create the application's local data area (define the variables that allow the event handler to use the end user's numeric input).

6. Attach event handler code to the dialog element (decide what happens at runtime when the user interacts).

7. Check, stow and run the application.

Apart from creating the local data area, this is the minimal number of steps required to create any event-driven application.

The above steps are described in detail in the following topics:

• Creating a Dialog

• Assigning Attributes to the Dialog

• Creating Dialog Elements Inside the Dialog

• Assigning Attributes to the Dialog Elements

• Creating the Application's Local Data Area

• Attaching Event Handler Code to the Dialog Element

• Checking, Stowing and Running the Application

---

Creating a Dialog

To create a new dialog

1. Invoke Natural.

2. From the Object menu, choose New > Dialog.

   The Natural window displays the menus and the toolbar for the dialog editor. It displays an editing window called Untitled1 - Dialog. You can resize this editing window.

   

   The editing window contains the new dialog window, titled (Untitled). You can also resize this new dialog window, or use the editing window's scroll bars.

Assigning Attributes to the Dialog

To assign attributes to the dialog

1. From the Dialog menu, choose Attributes.

   Or:
   Double-click inside the dialog window.

   The Dialog Attributes dialog box appears.

   

2. With the cursor in the String text box, type in the new dialog window's title: Degressive Depreciation.

3. From the Background color drop-down list box, select the desired color, for example Gray.

4. Choose the OK button.

   The Dialog Attributes dialog box closes.

   You have set the attribute STRING to the value Degressive Depreciation and the attribute BACKGROUND-COLOUR-NAME to the value of your desired color, for example GRAY.

Creating Dialog Elements Inside the Dialog

To create the dialog elements inside the dialog

1. From the Tools menu, choose Options.

   The Options dialog box appears.

2. Select the Dialog Editor page.

3. Make sure that the Display grid check box is selected and select the Lines option button.

   This decides the way your grid will be displayed.

4. Choose the OK button to confirm the change.

   The grid now helps you position and align the dialog elements.

   Note:
   When the grid is not visible, you may have to change the color for the grid (on the Dialog Editor page of the Options dialog box). This may be the case when a gray grid and a gray background have been defined.

5. From the Insert menu, choose Text Constant.

   Or:
   Choose the toolbar button representing a text constant control.

6. Move the cursor to the upper left corner of the dialog window.

   Ensure that the editor window's status bar displays an x and a y value of less than 50. Note that at this time, the text constant control's width and height has an undefined value.

7. Click to fix the text constant control's position.

   A grey rectangle representing the dialog element appears, surrounded by small black squares. At the same time, the status bar indicates that #TC-1 is selected.

8. Point to one of the small black squares.

   The cursor shape now indicates the direction in which you can resize the text constant control.

9. Resize #TC-1 to a width of about 200.

10. Make sure that the text constant control is selected.

11. From the Edit menu, choose Copy.

12. From the Edit menu, choose Paste.

    A new text constant control #TC-2 is created on top of #TC-1.

13. Move the new text constant control to a position below the first one by clicking and dragging via the mouse, or via the keyboard arrow keys with the SHIFT key held down.

14. Create another text constant control below the previous text control (in the same way).

15. From the Insert menu, choose Input Field.

    Or:
    Choose the toolbar button representing an input field control.

16. Position the input field control in the upper right corner of the dialog window, next to the first text constant control (in the same way as described above for the text constant control).

17. Create two more input field controls (by duplicating the first, as above). These input field controls should have a height of 36. Align them horizontally with respect to each other and vertically with respect to the three text constant controls (as shown below).

18. From the Insert menu, choose Push Button.

    Or:
    Choose the toolbar button representing an push button control.

19. Position the push button control below the three input field controls.

20. Create a text constant control below the push button control.

    Your dialog should now look like this:

    

Assigning Attributes to the Dialog Elements

To assign attributes to the dialog elements

1. Select the first text constant control #TC-1 and from the Control menu, choose Attributes.

   Or:
   Double-click the first text constant control #TC-1.

   The corresponding attributes dialog box appears.

2. In the String text box, type in the text string to be displayed: Initial Value.

3. Choose the OK button.

   The attributes dialog box closes.

4. Set the following text strings for the two text constant controls below: Number of Years for #TC-2 and Percentage Applicable for #TC-3.

5. From all three input field controls and from the fourth text constant control, remove any text strings (that is, the Untitled strings).

6. Set the following text string for the push button control: Calculate.

   Your dialog should now look like this:

   

Creating the Application's Local Data Area

The local data area in this application defines the application's linked variables. These linked variables receive the numeric values that the end user has entered in the input field controls. The variables and their values are used in the calculation of the push button control's click event handler code.

To prepare the creation of your local data area, your input field controls must use linked variables

1. Select the first input field control #IF-1 and from the Control menu, choose Attributes.

   Or:
   Double-click the first input field control #IF-1.

   The corresponding attributes dialog box appears.

2. Choose the browse button (that is: the button with the three dots) to the right of the String text box.

   The Source for #IF-1.STRING dialog box appears.

3. Select (and enable) the Linked variable option button.

4. In the Variable name text box, enter: #INITIAL-VALUE.

5. Choose the OK button to close the Source for #IF-1.STRING dialog box and then choose the OK button to close the attributes dialog box.

6. Set the following linked variable names for the remaining two input field controls: #YEAR-NUM for #IF-2 and #PERC-APPLIC for #IF-3.

To create the application's local data area

1. From the Dialog menu, choose Local Data Area.

   The Dialog Local Data Area dialog box appears.

2. Define your local data as follows:

   1 #INITIAL-VALUE (N6.2)
   1 #PERC-APPLIC (N2.1)
   1 #YEAR-NUM (N2)

3. Choose the OK button.

   Natural will now be able to process the input data.

Attaching Event Handler Code to the Dialog Element

To attach event handler code

1. Select the push button control labelled Calculate.

2. From the Control menu, select Event Handlers.

   A dialog box for the corresponding event handler definition section appears.

   The CLICK event is preselected: when the end user clicks on this push button control, the specified Natural code will be triggered.

3. In the event handler editing area, enter the following Natural code in free form:

   #RESULT:= #INITIAL-VALUE * ( ( ( 100 - #PERC-APPLIC )
   / 100 ) ** #YEAR-NUM )
   MOVE EDITED #RESULT (EM=Z(5)9.99) TO #TC-4.STRING

4. Choose the OK button to close the dialog box.

Checking, Stowing and Running the Application

To check the application for syntax errors

1. From the Object menu, choose Check.

   A dialog box comes up with a Natural error: a variable needs to be declared.

2. In the dialog box, choose the Edit button.

   The dialog's code is displayed, the cursor pointing to the error (#RESULT).

3. Choose the Cancel button.

4. From the Dialog menu, choose Local Data Area.

5. Add the following definition:

   1 #RESULT (N6.2)

6. Choose the OK button.

7. Check your application again.

   The information message box should now confirm that the check was successful.

To stow your application

1. From the Object menu, choose Stow.

   The Stow Dialog As dialog box appears.

2. Enter the name Degrdep.

3. From the Libraries drop-down list box, select the library where you want the dialog to be stowed.

4. Choose the OK button.

   The information message box now confirms that the dialog was stowed successfully.

To run your application

• From the Object menu, choose Run.