Debugging FKiSS Tutorial

Lesson 1. The FKiSS Editor

This tutorial will show you how to use the FKiSS Editor tool to trace your FKiSS event code for logic problems and other errors. Ensure that UltraKiss is showing the main logo screen. Close any existing set.
Use File-New. This will create a new KiSS set at size (448,320) with a black border and one empty page.
Use File-Properties to change the new KiSS configuration (CNF) file properties. The attributes section of the Properties dialog will show a playfield size of (448,320). Press the small button beside this attribute and change the screen size to (300,400). Exit the configuration Properties dialog by pressing the OK button.
We are going to build a simple calculator. This application will use some of the new GUI components introduced through the UltraKiss specific FKiSS 5 extensions. We will use the FKiSS Editor to construct and debug our logic.

On the main UltraKiss screen use Edit-Add Component-Label. A green marquee box will show the new label object. Place the mouse in this box and right-click. Select Label Attributes.
In the Text area enter 'Calculator'. In the Align box choose 'center'. In the Font Name box choose Arial and enter 32 in the Font Size box. Click on the Fore Color button and choose a red color. Click OK and observe that the label now shows part of the text.

Place your mouse on the right size of the label box and drag it to expand the label size. Ensure that the label is big enough to show the complete text. Then, drag the label to the top and center of the screen.

Use Edit-Unselect All to remove the selection box from the label, or right-click anywhere on the background.
Next, use Edit-Add Component-Text Box to create the numeric display area for our calculator. Position the text box below the calculator title. Use your mouse to expand the width of the box and size it properly so that it looks like a calculator display.

Place your mouse over this box and right-click. Select Textbox Attributes.

In the Text area enter '0'. In the Align box choose 'right'. In the Font Name box choose Arial and enter 18 in the Font Size box. Select a line border and a Border Size of 1, and a white border color. Depending on the size of the textbox, you might want to set the Insets (Top, Left, Bottom, Right) by 3 pixels to add some margin area and center the text.

Use Edit-Unselect All to remove the selection box or right-click anywhere on the background.
Next, use Edit-Add Component-Button to create our first button for our calculator. Position the button below the calculator text box which is our display window.

Right-click on the button, select the Button Attributes, and enter the number 9 in the Text area. Select an Arial font and a Font Size of 20. Click OK, and then use your mouse to size the button appropriately.

Use Edit-Unselect All to remove the selection box or right-click anywhere on the background.
Now, hold the alt key down and left click on the number 9 button, or hold the alt key down and drag a selection box around the button to select it. This will select the button object and a blue marquee box will be drawn around it. Use Edit-Copy or Ctrl-C to copy this object to the clipboard.

We will now create nine more copies of this button for the digits 8 to 0. Use Edit-Paste or Ctrl-V to create a new copy of the button. The new button will be pasted exactly over top of the old button as a new KiSS object. Drag the new button to position it beside the old button.

Right-click on the new button, select the Button Attributes, and enter the number 8 in the Text area.

Repeat this eight more times to create buttons for the numbers 7 through 0.
Use File-Save As to save your work. Save the new KiSS set to the Tutorial/FKiSS directory or a directory of your choice. The configuration element name should be CNF1.cnf if you began this tutorial after first starting UltraKiss. You can overwrite any existing element of the same name.

Next Document: Event Tutorial Lesson 2
Prior Document: UltraKiss Tutorials