Getting Started with NewBASIC

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.


Starting and Exiting NewBASIC

Before you can begin programming in the NewBASIC Builder, you need to learn how to get into and out of your new programming environment.

Starting NewBASIC

We will open New Deal and then open the NewBASIC Builder.

Locate your New Deal icon.

New Deal Icon

NewBASIC Builder Icon

Closing and Exiting NewBASIC

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.

To leave your program, click the Exit Window button on the upper right corner of your application window.
  1. To exit New Deal, choose Exit from the Express menu.


Using the NewBASIC Builder Tools

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.

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. NewBASIC Builder Icon

If you have since closed the Builder, open the World folder on the New Deal Desktop and double-click on its icon.

The NewBASIC Builder

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.

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.
  1. Choose the New Deal Documents subfolder. You will see some document filenames ending in BAS. Files ending with this suffix are NewBASIC files.
  2. Click on sortdemo.bas. This is a sample module that came with your software.
  3. If you want to experiment with this, click Save As... from the same File menu.
  4. 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.
  5. 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.

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.
  1. Click the button called Children, and uncheck the Use Geometry box.
  2. 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.

  1. Move your cursor over the form.

The cursor will change appearance and you will notice it looks like a bent arrow.

  1. 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.

Adding a button

  1. 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.
  1. Put your cursor on the form itself so that you see a red line surrounding this form.
  2. 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.

Click the Toolbox, click the Basic UI button, and select Window. Click form.

A new form should appear.

  1. 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.
  2. Click on the form itself and enlarge it.
  3. 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.

    Deluxe Toolbar

  1. 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.
  2. 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.


Tutorial Form

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 button and it looks like this:

Button

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 an expert.

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.
  1. Choose Component Properties from the Window menu. The Component Properties box should appear.
  2. 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.
  3. Click the Specific button and select default.
  4. Click on button2.
  5. Click General to access the general properties and edit the same fields to read nah, nah, and Nah, I'll try again later.
  6. Click Specific and select Close Dialog.

Editing the buttons on the main form

Select button 3.
  1. Choose Component Properties from the Window menu. The Component Properties box should appear.
  2. 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. Component Properties Dialog

  1. Edit the same properties fields for button4 so that it reads Forward--> and is named Forward.
  2. Click on the Specific button in the Component Properties window.

You should see a list of options.

  1. 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.

  1. Click Apply.


Component Properties 2

  1. 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.
  2. 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.

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.

NewBASIC Editor

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.

Flow Chart

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.
  1. Under Events, click pressed.
  2. 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 window 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.


Compiling and Running the Program

Now that we have set up the code for various pieces of the design, let's see if it works.

Builder Toolbar

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.


Saving Your Work

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!