Welcome to the Getting Started with NewBASIC tutorial. This chapter contains some sample exercises that will help you get started with NewBASIC. When you are done, you will have created your own presentation program.
Before you can begin programming in the NewBASIC Builder, you need to learn how to get into and out of your new programming environment.
We will open New Deal and then open the NewBASIC Builder.
If you have a program open, it is wise to save your work and exit before closing the entire program. If you close your program while you have work open, you run the risk of losing some of your data.
We are going to explore the different areas of the NewBASIC Builder. After we review its tools, we will create a small presentation program, which will allow us to page through some screens in front of an audience.
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.
You will click on the buttons in the Toolbox and then click on the Form.
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.
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. |
In this section you will learn how to open existing modules as well as how to open a new one.
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.
To open the blank file to which you will be adding buttons and labels and text fields, click File, and then New Module.
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.
This allows you to move the components around on the form.
Since the toolbox components are arranged alphabetically, you will find this component near the top.
The cursor will change appearance and you will notice it looks like a bent arrow.
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.
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.
Now we have created a form, or window, in your program. Let's create the second form.
A new form should appear.
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.
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 button 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.
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.
Let's begin perfecting our windows and buttons.
Your button should now show <--Back on it.
You should see a list of options.
This means that when users click the Enter key on their keyboard, the computer behaves as if the Forward button is pressed.
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.
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.
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.
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.
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.
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.
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.
This diagram illustrates our program's sequence. The gray buttons indicate that those buttons appear disabled.
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.
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.
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 |
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) |
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) |
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) |
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. |
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 window and highlight and edit the following routines:
routine | code to enter | comments |
module_exit | sub module_exit( ) |
This hides the entire module. |
module_show | sub module_show( ) |
This shows what would appear when the module is started. |
module_hide | sub module_hide( ) |
This hides the entire module. |
module_init | sub module_init( ) |
This shows the small welcome window and hides the main window. |
Now that we have set up the code for various pieces of the design, let's see if it works.
Be sure that all the buttons progress through the proper sequence. Your slides should be named Slide 1 and Slide 2. This will make it easy for you to tell if the clicks take you to the correct places. Refer to the diagram in Setting up the sequence of the buttons to confirm your program runs as you wish.
Congratulate yourself! You have just coded your first NewBASIC program. Please experiment with the arguments and commands described in the rest of this book to create more programs.
For more information about the Builder's features, see the New Deal IDE.
Now that you've created, edited and tested the program, you should save your work before you exit. Click Save from the Main Builder window's File menu. Now you can exit the Builder. Click Exit from the File menu to get out of the NewBASIC Builder. Way to go, you have coded your first program!