Working with a Module
After you familiarize yourself with the windows and buttons, you will be ready to open a new module and begin to try out some real coding. NewBASIC's Builder lets you create your very own module or allows you to open an existing module and make some changes. This section will show you how to see both.
First, we need to understand the different pieces of the Builder and how they affect the design process.
Let's start by opening the NewBASIC Builder.
If you have since closed the Builder, open the World folder on the New Deal Desktop and double-click on its icon.
You will see the Toolbox, the Main Builder window and the Form.
-
The
Toolbox lets you create the buttons and screens for your design.
You will click on the buttons in the Toolbox and then click on the Form.
-
The
Main Builder window is where you will be altering the properties such as placement, appearance and defaults.
It is also the area where you open the
Code Editor to add the code to the design. This will tell the computer what to do when a user clicks on your buttons and screens.
Components of the Builder
The function of the Builder's tools are described in more detail in this table.
Builder Tool
|
What this does
|
Toolbox
(also known as the
Component Palette)
|
The Toolbox contains buttons which allow you to add new components to your application. For example, a button is a simple component that you will add to a form--it detects when the user clicks it, and alerts your program.
|
Form
|
The Form is the working area where you add the components with the Toolbox.You will add components such as buttons, text entries, and labels.
|
Main Window
|
The main window contains menus and buttons which let you debug, save, edit, pause, and track your work. You compile and run the program you are writing, from this window.
|
Properties Box
|
This window comes up when you click the main window's Window, Properties menu. It allows you to set different starting properties for your components. For example, if you want a button to always close the window when it is clicked, you can set that up here.
|
Editing Window
|
This window, often called the Code Editor, is where you actually type in the NewBASIC programming commands which tell your buttons and windows what to do when a user interacts with them.
|
Opening a
Module
In this section you will learn how to open existing modules as well as how to open a new one.
Opening an existing module
New Deal's NewBASIC comes with several sample programs. You can open these programs to learn how they were built and how some of the commands work.
From the Builder's main window menu, click File, then Open.
-
Choose the New Deal Documents subfolder. You will see some document filenames ending in BAS. Files ending with this suffix are NewBASIC files.
-
Click on sortdemo.bas. This is a sample module that came with your software.
-
If you want to experiment with this, click
Save As... from the same File menu.
-
Name your new file, MyDemo.BAS. Now you can change things around and know that there is still a working demo in your documents folder.
-
In the MyDemo file, click on various components on the forms and take a look at their properties and code. The information you see will make more sense to you as you follow along in the tutorial.
Opening a new module
To open the blank file to which you will be adding buttons and labels and text fields, click File, and then New Module.
Designing the Forms
We are ready to design our presentation module. This module will contain two forms. We will add a series of buttons and components to our Forms and then arrange them appropriately for our program.
-
If you accidentally add an extra button, select the button and delete it. If you add an invisible component, open the Code Editor and select the component by name. When it is highlighted, click the Delete Component button.
Turning off the automatic placement property
Before you begin, click on the form and then open the Window, Component Properties... window from the menu on the Main window.
-
Click the button called Children, and uncheck the
Use Geometry box.
-
Click Apply.
This allows you to move the components around on the form.
Adding the buttons to a Form
Click the button component in the Toolbox.
Since the toolbox components are arranged alphabetically, you will find this component near the top.
-
Move your cursor over the form.
The cursor will change appearance and you will notice it looks like a bent
arrow.
-
Click on the form to place a button with the text, button1.
The buttons continue to increase in number as you add more buttons. In this example, this button shown is the second button on the form.
-
Add another button to the bottom of the form. Don't worry about arranging them perfectly because we will do that later. You should have two buttons now.
Adding labels and resizing the form
Add a label component to the top of the form.
-
Put your cursor on the form itself so that you see a red line surrounding this form.
-
Point to the corner of the form and click down and hold while you reshape the form. Make the form fit snugly around the buttons and the label.
This is a small welcome window. It will give the user the opportunity to exit the program or to continue. Choose Save from the menu so that you won't lose your work when you begin the other form. If you haven't saved before, you must use the Save As... command. Name your module,
TalkDemo.BAS.
Adding the main window to the design
Now we have created a form, or window, in your program. Let's create the second form.
-
Don't worry too much at this point if things are not perfectly aligned or are different sizes. We will edit the properties of each component on the form later in this tutorial.
Click the Toolbox, click the Basic UI button, and select Window. Click form.
A new form should appear.
-
Use your new knowledge to add two buttons to the form. Arrange them along the bottom. These will be your forward and back buttons to help the user navigate through the slides.
-
Click on the form itself and enlarge it.
-
Click the Toolbox, click the Basic UI button and click Deluxe. Click the text button and drop it on the form. After you drop it on the form, put your cursor on it and drag the mouse so the text box
expands.
-
Now let's add a label to this presentation package. Click Deluxe, click Basic UI and then click on Label. Move your cursor above the text box and click.
-
Let's add a Home and End button as well. Click your button tool and create two more buttons in the center of the first two.
Now we have the main layout on the form. Let's take some time to move the components around so that they look the way you would like.
You should have something that looks a little like this form.
Moving the
components
To move the components around, click on them and drag your mouse so that components are in the desired spot.
Be careful that you see the cross as shown on the window illustration above when you are in the center of the component.
If you see an arrow with a line at the bottom, this means that the computer thinks that you are about to resize the component. For example, move your cursor if you don't want to resize the butt
on and it looks like this:
You will see soon that you can also open the Component Properties box and set the position of your component numerically.
These tips will help you manipulate objects on a form like a expert.
-
If you cannot move the components around, check to see if the Use Geometry box is checked. You will find this under the Children properties area of the form itself. Select the form itself, open the Properties window, click the Children button, and uncheck this box. Remember to click Apply. Otherwise the changes will not remain. This feature determines whether or not each component will arrange itself in the center of the form.
-
If you lose track of your components, open the Editor window and double-click on its name.
Setting the properties of the
components
Now that we have laid out the design, we need to name the buttons, and set some of the expected behavior of each piece. To do this, we need to open the Properties box.
There are three main sections of the Component Properties box: General, Children, and Specific. Each of these areas allows you to change some of the properties for a component--to view a different area of the box, you can click one of the buttons towards the top of the Properties dialog box.
Each area of the Properties box contains settings which allow you to define one or more of the selected component's properties. To make your changes take effect, you press the Apply button.
Editing the
buttons on the small form
Let's begin perfecting our windows and buttons.
To begin, click once on button1.
-
Choose Component Properties from the Window menu. The Component Properties box should appear.
-
Making sure you are in the General properties form, edit the Name, Proto, and Caption Text fields so that they read Letsgo, Letsgo, and Let's Go! Click Apply.
-
Click the Specific button and select default.
-
Click on button2.
-
Click General to access the general propertied and edit the same fields to read nah, nah, and Nah, I'll try again later.
-
Click Specific and select Close Dialog.
Editing the buttons on the main form
Select button 3.
-
Choose Component Properties from the Window menu. The Component Properties box should appear.
-
Edit the Name, Proto, and Caption Text fields so that they read Back and <--Back. Click Apply.
Your button should now show <--Back on it.
-
Edit the same properties fields for button4 so that it reads Forward--> and is named Forward.
-
Click on the Specific button in the Component Properties window.
You should see a list of options.
-
Click default. This will make the button appear with a black box around it.
This means that when users click the Enter key on their keyboard, the computer behaves as if the Forward button is pressed.
-
Click Apply.
-
Put your mouse over the form again, and click button5. Now the general properties for this button will appear in the Component Properties box. Change the Name, Proto, and Caption Text fields to Home and Home.
-
On the form, click button6. Change the Name, Proto, and Caption Text fields to Endbutton and End.
You are now done setting up the properties for the buttons on your screen. Next we will set up the properties for the remaining components.
Editing the Form Components
Click on the small
form and open the Component Properties menu. Change the Width to 250 and the Height to 100.
Now click on the larger form and open the Component Properties menu. Change its Width to 350 and its Height to 150.
Editing the Text Component
Click on the text box on the main form and open the Component Properties menu. Change its Width to 300.
There are other properties you can apply to this component. For example, you can set text filters on the component. This would prevent various special characters such as slashes and punctuation from being entered by the user. However, in this presentation program, we want the user to be able to enter anything.
Making the
design precise
Save all the work you have done so far. You save your work by clicking the File menu and then Save in the menu of the Main window. Name this file TALKDEMO.BAS. It is a good idea to save periodically in case you want to exit the application and resume your work later.
-
To be sure a form is centered, you can click on the form, open its properties and click children. Click the Use Geometry box. Then choose whether or not you want all the children of that form to be centered, horizontally, or vertically aligned. After that, you can clear the Use Geometry box and change only certain properties on each component. This way you can ensure the alignment is precise.
Now that you have familiarized yourself with some of the basic properties, let's go back in and set some specific values to all of the components. We are going to make the alignment and size of the pieces on the screen more consistent and attractive. It is good to get a rough idea of how the design will look by using your mouse to drag and resize components, and then to go back and make it more precise by changing the values in the properties fields.
By default, your buttons and labels are sized "As needed" meaning that NewBASIC automatically adjusts their size to fit the Caption text. To change these size dimensions, you need to select "As Specified" in the Width and Height fields for that object's component properties.
Change the values to the
following.
Button Properties
|
Component
|
Property Field
|
Value
|
Component
|
Property Field
|
Value
|
Button1
|
Name
|
letsgo
|
Button4
|
Name
|
Forward
|
Proto
|
letsgo
|
Proto
|
Forward
|
Caption Text
|
Let's Go!
|
Caption Text
|
Forward-->
|
Left
|
5
|
Left
|
236
|
Top
|
44
|
Top
|
136
|
Width
|
74
|
Width
|
54
|
Height
|
24
|
Height
|
24
|
Specific
|
default
|
Specific
|
default
|
Button2
|
Name
|
nah
|
Button5
|
Name
|
Home
|
Proto
|
nah
|
Proto
|
Home
|
Caption Text
|
Nah, I'll come back later
|
Caption Text
|
Home
|
Left
|
90
|
Left
|
100
|
Top
|
44
|
Top
|
136
|
Width
|
144
|
Width
|
54
|
Height
|
24
|
Height
|
24
|
Specific
|
closeDialog
|
Specific
|
nothing
|
Button3
|
Name
|
Back
|
Button6
|
Name
|
Endbutton
|
Proto
|
Back
|
Proto
|
Endbutton
|
Caption Text
|
<--Back
|
Caption Text
|
End
|
Left
|
28
|
Left
|
170
|
Top
|
136
|
Top
|
136
|
Width
|
54
|
Width
|
54
|
Height
|
24
|
Height
|
24
|
Specific
|
nothing
|
Specific
|
nothing
|
For each of the matching buttons on forms three and four, specify the same properties.
Other Components
|
Component
|
Property Field
|
Value
|
Component
|
Property Field
|
Value
|
Text1
|
Name
|
text
|
Form1
|
Name
|
form1
|
Proto
|
text1
|
Proto
|
form1
|
Caption Text
|
--
|
Caption Text
|
TurboTalk
|
Left
|
23
|
Left
|
200
|
Top
|
43
|
Top
|
100
|
Width
|
300
|
Width
|
250
|
Height
|
72
|
Height
|
100
|
Label1
|
Name
|
label
|
Form2
|
Name
|
TurboTalk
|
Proto
|
label1
|
Proto
|
TurboTalk
|
Caption Text
|
Welcome to TurboTalk!
|
Caption Text
|
TurboTalk
|
Left
|
5
|
Left
|
200
|
Top
|
18
|
Top
|
100
|
Width
|
150
|
Width
|
350
|
Height
|
16
|
Height
|
200
|
Label2
|
Name
|
label2
|
|
Proto
|
label2
|
Caption Text
|
Slide 1
|
Left
|
144
|
Top
|
18
|
Width
|
54
|
Height
|
12
|
Save your work again.
At this time we will use the Editor to make it look like the presentation contains three forms.
Adding the Code
The next step in our project is to add the code that will determine the behavior of each piece of our design. The first thing we need to do is open the code editor
by choosing Editor from the Window menu of the Main window.
You will see that the Code Editor window contains a list of all the components you just created. It also displays some built-in events and routines. You can learn more about events and routines later in this manual.
Adding
code to the buttons
You will notice that when you highlight a component from the list, a different set of events appears. This is because NewBASIC knows by the properties of the component what kinds of events can happen to the component in the form. For instance, when you highlight one of your buttons, the pressed event appears. You can highlight this event and tell the computer what to do when the user presses that button with the mouse or a key.
We will work mostly with the buttons in this tutorial since the program we are making is a presentation package. The presenter needs to walk the viewers through each slide sequentially.
Later we will look at some of the routines.
Setting up the sequence of the buttons
This diagram illustrates our program's sequence. The gray buttons indicate that those buttons appear disabled.
Form 1 buttons
We are going to setup the code behind the Let's Go button. From your table, you know that button belongs to the first form. In this slide, the first form is the very first thing the user sees when they open the package. There are only two buttons: the Let's Go and the Nah, try again later buttons. Let's Go is the default and you want it to bring the user to the next slide. Enter code for the pressed event for the Letsgo button.
Click letsgo in the Editor.
-
Under Events, click pressed.
-
Type the following:
-
form1.visible=0
-
form2.visible=1
This will hide the form you are on, and display the next slide. You must set up an event in case someone clicks on the other button, Nah. Add this code:
form1.visible=0
-
form2.visible=0
This will hide both forms.
Form 2 buttons
Now, we will move on the next form's buttons. This form and all the others have a combination of similar buttons: Forward, Back, Home and End. But as you will see, not every button will do exactly the same thing for every event.
The following table shows the code you should enter for each button. Try to enter it into the Editor and press Run. If you get an error check for spelling and syntax mistakes.
Use this table to enter the following code in your editor.
Keep in mind that since the only thing that needs to change if a user clicks the Forward--> button are: the label, which buttons appear, and whether or not your PC gives you an error message in the text box, you can use these variables to tell the computer what to do.
button
pressed event
|
code to enter
|
comments
|
Forward
|
sub Forward_pressed(self as button)
If label2.caption="Slide 2" then
text1.text="You are at the end of this show. Press Back or Home to continue."
Home.enabled=1
Endbutton.enabled=0
end if
If label2.caption="Slide 1" then
label2.caption="Slide 2"
text1.text=""
Home.enabled=0
Endbutton.enabled=1
End If
end sub
|
This makes the next slide appear.
However, we don't want the End button to appear when it is already on Slide 2.
Likewise, we don't want the user to see the Home button if they are already on Slide 1.
Also, we don't want the user to keep clicking Forward when he is on the last slide, so we provide a help message.
However, we want the message to appear only when the user clicks an extra time. We must clear the message other times.
There are two If -- then statements in here.
|
Back
|
sub Back_pressed(self as button)
If label2.caption="Slide 1" then
text1.text="You are already at the beginning. Press End or Forward to continue."
Home.enabled=0
Endbutton.enabled=1
end if
If label2.caption="Slide 2" then
Home.enabled=1
Endbutton.enabled=0
label2.caption="Slide 1"
text1.text=""
end if
end sub
|
This makes the previous slide appear.
However, we don't want the End button to appear when it is already on Slide 2.
Likewise, we don't want the user to see the Home button if they are already on Slide 1.
Also, we don't want the user to keep clicking Back when he is on the first slide, so we provide a help message.
However, we want the message to appear only when the user clicks an extra time. We must clear the message other times.
There are two If -- then statements in here.
|
Home
|
sub Home_pressed(self as button)
If label2.caption="Slide 2" then
label2.caption="Slide 1"
End if
Home.enabled=0
Endbutton.enabled=1
text1.text=""
end sub
|
This brings the user to Slide 1, the first slide of the presentation.
However, we don't want the End button to appear when it is already on Slide 2.
Likewise, we don't want the user to see the Home button if they are already on Slide 1.
There is only one If -- then statement in here.
|
Endbutton
|
sub endbutton_pressed(self as button)
If label2.caption="Slide 1" then
label2.caption="Slide 2"
End if
Home.enabled=1
Endbutton.enabled=0
text1.text=""
end sub
|
This brings the user to Slide 2, the last slide of this presentation.
However, we don't want the End button to appear when it is already on Slide 2.
Likewise, we don't want the user to see the Home button if they are already on Slide 1.
There is only one If -- then statement in here.
|
Routine
editing
Now we have learned a little bit about how to add code to a program by editing the button_pressed events. There are some routines that come with each program. Let's make sure we add code to these. Then we will test and run our program.
Return to the Edit wi
ndow and highlight and edit the following routines:
routine
|
code to enter
|
comments
|
module_exit
|
sub module_exit()
form1.visible=0
form2.visible=0
end sub
|
This hides the entire module.
|
module_show
|
sub module_show()
REM code for making this module appear
form1.visible=1
end sub
|
This shows what would appear when the module is started.
|
module_hide
|
sub module_hide()
REM code for making this module disappear
form1.visible=0
end sub
|
This hides the entire module.
|
module_init
|
sub module_init()
REM place initialization code here
form1.visible=1
form2.visible=0
end sub
|
This shows the small welcome window and hides the main window.
|