Using the IDE
Getting the most from your code writing partner

If you have not gone through Lessons 1 through 7 yet I would suggest doing that before working through this side lesson. Some of the statements and programming concepts in this side lesson may be new to you depending on where you are currently in the tutorial. Any statements or concepts new to you will eventually be covered in the tutorial lessons. If you have finished up to at least Lesson 7 in the tutorial there should be very little that has not been covered.

The QB64 IDE (Integrated Development Environment) is the programming interface that helps with all aspects of creating your code. The IDE can provide you with help on individual command statements, spell check your code's syntax, and even help to identify bugs within your code.

The IDE maintains the look and feel of the old-school QuickBasic language's IDE. Why? First for familiarity to the QuickBasic programmers coming to QB64 and "feeling at home". Secondly, it's a perfect no-nonsense and dead simple interface to navigate. QB64's IDE menu is reminiscent of menu systems used back in the DOS days of computing. The IDE can be completely mouse driven but more often than not most QB64 programmers, including myself, prefer to use the good old-fashioned keyboard shortcuts for navigation because it's more efficient to do so.

NOTE: This lesson assumes you are using an IDE from a Phoenix Edition of QB64. The illustrations throughout this lesson are copied from the QB64 Phoenix Edition version 3.12.0 IDE. If you are using an earlier version of QB64 Phoenix Edition or a different fork of QB64 then some of the menu items discussed or appearing in the illustrations may not be present in your version.

Figure 1: The QB64 Integrated Development Environment

Before we get started there are a few points of interest to mention as shown in Figure 1 above:

Navigating the IDE

By far the simplest way to navigate around the IDE is to use the mouse to click through menu entries. However, as you start to get proficient with writing code using the IDE you'll find the mouse is far less efficient than using the built-in keyboard shortcuts. Moving your hand away from the keyboard to grab the mouse and navigate to a menu item takes time, but most importantly breaks a programmer's rhythm. You'll understand what is meant by that after spending some time writing code. So let's spend a little time going over the keyboard controls for the IDE.

Accessing the IDE's menu is accomplished by simply pressing and releasing either ALT key one time. This action activates the menu by highlighting the File option in the menu bar. From there you can use the keyboard's arrow keys to navigate the entire menu system. The right and left arrow keys move to the next or previous menu option. Pressing the down arrow key drops down the menu box for any highlighted option. You can then select any option in the drop down box by using the keyboard's up and down arrow keys. The animation in Figure 2 below shows this in action.

Figure 2: Accessing the menu using the keyboard

When you drop down a menu box the IDE will display a quick description at the very bottom of the screen of what the currently highlighted menu option performs. You can see this descriptive area change as the menu entries are selected in the Figure 2 animation above.

You can also use the keyboard to go directly to a given menu. When you press and hold the ALT key the first letter of each menu entry highlights (F, E, V, S, R, D, T, and H). These highlighted letters are "hot keys" that can be pressed while you are holding down the ALT key. Holding down the ALT key and then pressing the F key will go directly to the File menu for instance. The animation in Figure 3 below shows hot keys in action.

Figure 3: Using menu hot keys

Within each drop down menu you'll notice even more highlighted hot keys you can choose from. For instance, the Run menu contains the highlighted letters S, O, C, F, G, and X as seen in Figure 4 below.

Figure 4: Hot keys in the Run menu

Simply press one of those highlighted hot keys to activate the menu option. The animation in Figure 5 below shows the hot key combination ALT-R-S in action to start running a program in the IDE.

Figure 5: Using a combination of hot keys to run a program

Some of the IDE's menu entries also include "quick keys" shortcuts to make keyboard navigation of the menu even faster. For example, notice in Figure 4 that the Start menu option includes F5 to the right of it. Pressing F5 on your keyboard will also start your program running without having to navigate the menu at all. To quickly save your program you could use the hot key combination ALT-F-S or the quick key combination CTRL-S as shown in the File menu.

Using hot key or quick key combinations may sound counterintuitive to someone that has been using Windows or macOS along with a mouse. It's perfectly acceptable to use the mouse to navigate the QB64 IDE if you prefer. However, once you start learning and using these key combinations the efficiency benefits become apparent.

Navigating the IDE Help Menu System

The QB64 IDE has a feature rich help system built directly into it accessed through the Help menu. Before we get into the features offered by the help system it's a good idea to update it. The interval between updating the help system is entirely up to you. I personally try to update at least once a month or when it's announced on the QB64 forum that statements have been updated in the Wiki.

Help Menu: Update All Pages...

Choose the Help menu and drop down the menu options. Arrow down until "Update All Pages..." is highlighted then press ENTER. The help system built into the IDE uses content from the QB64 online Wiki to stay up to date. When changes are made to the Wiki the information is not automatically downloaded to the IDE. In other words the IDE's help system is not dependent on having a connection to the Internet to function. This allows QB64 to be truly portable.

A message box appears explaining that the update process can take up to 10 minutes and will ask you to confirm the redownload of all help content from the Wiki. Simply select "< Yes >" to continue. At this point the QB64 IDE will attempt to establish a secure (https://) connection to the Wiki. If a secure connection can't be established you'll be asked if you would like to use a standard connection (http://) instead. Simply answer yes to the question and select your preference if you would like to save this action for later download attempts. The animation in Figure 6 below shows the update process.

Figure 6: Updating the IDE's built-in Help System

Now that you have the latest updates let's explore the IDE's help system starting with the Help menu entries.

Help Menu: Contents Page

This menu option brings up the QB64 help summary page explaining a little about the help system. Half of the IDE screen becomes dedicated to navigating the selected help topic as seen in Figure 7 below.

Figure 7: The help system contents page

This help system page is a starting point (the help system's "home") you can use to explore the help system topics using hyperlinks. There are two sections of hyperlinks to choose from:

Help Topics

and

Community Links

The help system window is definitely easier to use with a mouse than with a keyboard. When using a keyboard you need to use the arrow keys to navigate the flashing cursor around the screen. Think of the flashing cursor as your text pointer. If you want to enter a hyperlink simply move the flashing cursor onto the hyperlink and press ENTER.

The cyan  View on Wiki  button will always be present at the top of the help window. Clicking on this button will open your browser to the QB64 Wiki and display the current topic you have displayed in your help system window. The red X  x   button will also always be available and will close the help system window when clicked on (pressing the ESC key will do the same thing).

Scrolling the contents of the help system window up and down can be done with either the mouse wheel or using the keyboard's up and down arrow keys. Go ahead and scroll down a bit and click on the "Keyword Reference - Alphabetical" hyperlink. Scroll this new page of help text down until you find the "_ALLOWFULLSCREEN" hyperlink and click on it. Figure 8 below shows what your IDE is now displaying.

Figure 8: Navigating the help system

As you navigate around the help system a trail of bread crumbs will be maintained at the top of the help system window as seen in Figure 8 above. These allow for quick navigation back and forth between pages you visit by simply clicking the crumb you wish to revisit. The BACK SPACE key can also be used to navigate back to previous pages visited.

The help system window is basically a text based browser allowing you to view the online Wiki content directly within the IDE. However, because the system is text based, you will not see any graphics or tables displayed that may be contained within the online Wiki version of the topic you are viewing. If your answer can't be found in the help system's text don't forget to click on the  View on Wiki  button for even more help.

Help Menu: View

This menu option displays the help system window at your current location. When you first start the IDE the View menu option will simply bring up the help contents page since you have not navigated anywhere. As you navigate the help system the bread crumbs keep track of your current position. The View menu option will take you directly to your last bread crumb.

HELP Menu: Keyword Index

This menu option takes you directly to the alphabetical keyword reference found on the help contents page.

Help Menu: Keywords by Usage

This menu option takes you directly to the keywords by usage reference found on the help contents page. This page lists QB64 keywords by their usage category such as graphics and imaging, file input and output, fonts, keyboard input, and math statements, just to name a few. A very handy reference if you're working with, for instance, file input and output, and you just can't seem to remember that one statement you need to complete your algorithm. I use this reference quite a bit especially when trying a new way to code a routine. I scan over all the statements in the category to make sure I'm not forgetting one that may be useful in completing my routine. Heck, I've even found new very useful statements that I didn't know existed because I missed the announcement in the Wiki or on the forum.

Help Menu: Update Current Page

This menu option allows you to update the current statement page you are viewing in the help window instead of updating the entire help system. This is handy when an announcement on the forum informs programmers that an individual Wiki page has been updated.

Help Menu: View Current Page on Wiki

This menu option performs the same function as the  View on Wiki  button found at the top of the help system window.

Help Menu: About

This menu option displays a message box with the QB64 version number you are programming in.

Requesting Individual Statement Help

The most useful feature of the IDE help system is the on-demand help of code statements. First we'll need some code to get help on.

Type the following program into your IDE and then run it by selecting Start in the Run menu. Type in your name at the prompt and then press ENTER.

PRINT
PRINT
"What is your name?"
INPUT UserName$
PRINT "Hello"
PRINT UserName$

Figure 9: Functional, but not formatted well.

As you can see in Figure 9 above the code works but it's not formatted very well. Why does the INPUT statement print a question mark first? Is there a way that the "Hello" and UserName$ variable can be combined into one line?

Before we go to the forum and post our questions, which can take time to receive a response, let's see if the built-in help system can give us a few clues. Our program only uses two statements, PRINT and INPUT, so let's investigate these two statements to see if we can modify the program to our wishes. To ask for help on an individual statement use the keyboard arrow keys to move the flashing cursor onto the statement you wish to view and then press the F1 key.

Go ahead now and move the flashing cursor onto any one of the PRINT statements and press the F1 key.

Figure 10: Which variant of PRINT would you like?

Many QB64 statements have multiple uses depending on the way they are being implemented. As Figure 10 above illustrates the PRINT statement has four variants to choose from. If a statement has multiple uses the help system will provide this message box first allowing you to choose the method you are utilizing. Our program is not using anything that deals with files or the USING statement so the first variant is what we need. Go ahead and press the ENTER key now to choose our help topic.

Figure 11: PRINT statement help

The statement help page starts out with a description of the statement you chose. Next, the statement's syntax, or layout and use, is displayed followed by an explanation of the parameters that the syntax section stated could be utilized.

Syntax:

The Syntax: section describes how the statement can be utilized along with any mandatory and/or optional parameters than can be used with the statement.  Any parameters surrounded by brackets [ ] are considered optional. As you can see in Figure 11 above all of the parameters following the PRINT statement in the Syntax: section are optional, meaning PRINT can be used by itself if desired. We did exactly that in our first line of the program.

Parameters surrounded by braces { } mean that only one option may be chosen from the given set. A pipe character | is used to separate the available options. Think of the pipe character as the word "or". So this:

{;|,}

would read as "semicolon or comma".

NOTE: The pipe character seen in Figure 11 above is shown as two vertical lines, one on top of the other. Some fonts show the pipe character as a single vertical line (like the one used on this web page). The QB64 IDE allows the font to be changed. The default IDE font shows two vertical lines, while a custom font you choose may use a single vertical line.

Parameters:

The Parameters: section explains the use of the parameters outlined in the Syntax: section. Use your keyboard arrow keys to scroll the help contents up a bit to get a better view of the Parameters: section.

Figure 12: The Parameters: section

According to the second bullet point in the Parameters: section the use of a semicolon ( ; ) following a PRINT statement causes the cursor to stop. Could this be the answer to one of our issues? We want the contents of the UserName$ variable to be display directly after the preceding PRINT "Hello" line of code. Let's go ahead and try that.

Our code is still viewable at the top of the IDE so there is no need to close the help system window. Simply use your mouse to click in the code section. Use the keyboard arrow keys to move to end of the fourth line and modify the code by adding a semicolon.

Figure 13: A semicolon added to the end of code line 4

Let's run the code again and see what our change did. Again, there is no need to close the help system window, simply choose Start from the Run menu (or press F5, remember that quick key?) to run the program.

Figure 14: That worked! Well, almost.

That almost worked! The Hello and the name typed in are not spaced apart. Well that's an easy fix, we'll just add a space after the word Hello in line 4 and run the program again to see the result.

Figure 15: The space has been added to line 4

Figure 16: One issue solved, one to go!

Excellent, one of our issues has been solved. Now we need to figure out how to get the INPUT statement to stop adding that question mark. Use the keyboard arrow keys to move the flashing cursor under the INPUT statement in line 3 and press F1 to change the help system window.

Figure 17: Which variant of INPUT would you like?

Just like the PRINT statement there are multiple ways to use the INPUT statement. Since we are not using the INPUT statement with any sort of file functions the first option is what we need. Press ENTER to choose the first option.

Figure 18: INPUT statement help

NOTE: In Figure 18 above you'll notice this line:

!> Page uses unknown UTF-8 characters, please report it in the Wiki Forum.

I reported the error to the Wiki moderator so you may not see this line when viewing help for the INPUT statement. The Wiki moderator reported correcting the issue and the next version of the IDE will contain the correction. The QB64PE language, forum, and Wiki maintainers are an awesome group of people that respond to issues in a very short amount of time. Always report any issues you may find to them so everyone can benefit. The issue I reported above was corrected within an hour! Update: The issue has been corrected in version 3.13.0 of the IDE which is available now.

Ok, back to our second issue, removing that extra question mark that INPUT displays on the screen. In the Syntax: section one of the ways to use the INPUT statement is:

INPUT [;] "[Question or statement text]"{,|;} variable[, ...]

In the Parameters: section this is stated:

A semicolon immediately after the text statement will display a question mark with a space after it. Use a comma for input statements.

So it would appear we can do this to remove the question mark:

INPUT "", UserName$

Since text is surrounded by brackets making it optional,[Question or statement text], we should be able to supply a null string (a string containing nothing), "", so just a flashing cursor appears waiting for the user to type their name in. No question mark will appear because a comma was used after the quotation marks. Let's go ahead and make that change to line 3 of our code and run the program to see the result.

Figure 19: Line 3 has been modified

Figure 20: Success!

This can look even better though. Using what we learned from the PRINT statement and using semicolons we can add a semicolon to the end of line 2 so the INPUT statement's flashing cursor is at the end of the question. We'll also need to place a space in the null string on line 3 to ensure the flashing cursor is one space away from the question. Let's make those changes and see how the output looks.

Figure 21: Some final modifications

Figure 22: Perfect!

With a little bit of reading and trial and error our questions have been answered and the code is functioning as we envisioned. The help system built into the IDE is a very powerful tool at your disposal.

Click back into the help system window in your IDE and scroll down through the rest of the text that is available. Most statement help topics include Description:, Examples:, and See also: sections for even more help on the subject you are researching. The example code can even be copied from the help system window and pasted right into the code section of your IDE!

Statement "Spell Checking" by the IDE

The QB64 IDE constantly monitors code as you type it in. The IDE will warn the programmer of any typographical errors or incomplete statements. If you have not done so already close the help window by clicking on the red X  x  in the help system window. Next, start a new program by selecting the File menu and then select New in the drop down menu. The IDE will warn you that the current program is not yet saved. Select < No > to start with a clean slate in the IDE.

Type the following line of code into the IDE and then press the ENTER key:

FOR x% = 1 TO 10

You'll notice that the IDE has highlighted the line of code in red and an error has been generated in the Status window at the bottom of the IDE screen.

Figure 23: The IDE has detected an error

The FOR...NEXT statement is a two part statement requiring a beginning statement ( FOR ) and an ending statement ( NEXT ). The error reported as seen in Figure 23 above is a reminder to the programmer that the statement needs to be finished to be complete ( FOR without NEXT ). Some programmers find this annoying and others, such as myself, find this to be very useful. Over the years I've gotten into the habit of pressing the ENTER key a few times when typing in a two part statement and then typing in the ending statement to complete the statement and remove the IDE reminder.

Figure 24: The IDE reminder has been satisfied

Examples of other two part statements are DO...LOOP, WHILE...WEND, IF...END IF, and so on.

Press ENTER two more times and type in the following line of code on line 4:

NEXT x%

The IDE has now detected that the two part statement has been completed and the reminder no longer exists as seen in Figure 24 above. Getting into the habit of completing a two part statement right away is the method I use to remove the reminder. I can then go back inside the two part statement and continue with the rest of the code between the beginning and ending statements.

Use the keyboard UP ARROW key move the cursor to line 2 and type the following line of code in exactly as presented and then press ENTER:

prnt x

The IDE is now generating a new error that needs to be corrected.

Figure 25: A syntax error

Once again the red line of code appears indicating an error along with the Status window reporting the error "Syntax error on line 2" as seen in Figure 25 above. The IDE does not understand the what prnt is. What we meant to type was print so go ahead and correct line 2 to read:

print x

And then press the DOWN ARROW key once. Did you notice what happened? Besides the error no longer existing the word print was capitalized to PRINT and it moved to the right, or was indented, four spaces over. The IDE "spell checker" will capitalize statements when it recognizes them and indent code within two part statements. Two part statements create a code block that gets indented between the beginning and ending statements. This makes sections of the code visually easier to identify. The IDE will handle all of this for you while you concentrate on typing the code in. Most other language's IDEs perform this indenting automatically for the programmer as well. In fact, Python requires code indention to function properly.

Figure 26: Line 2 was automatically indented and PRINT capitalized

NOTE: Depending on how you have your IDE set up the IDE may have only capitalized the P in Print and indented more or less than four spaces. The default capitalization of statements was always ALL CAPS in the IDE until a few years ago when a change was made in the IDE to default to just the first letter getting capitalized. Select the Options menu and then select "Code Layout...".

Figure 27: The IDE Code Layout options

If you wish to have statements (Keywords) in ALL CAPS then place an X in the "Keywords in CAPITALS" check box. You'll also see you can control the amount of spaces that auto indenting will use with the default at 4. About 50% of the code found in this tutorial was written when ALL CAPS was still the default in the IDE. I continue to use this for both consistency within the tutorial and it's my personal preferred preference. Having statements in ALL CAPS makes them "pop out" in the code for easier identification in my opinion.  The default of 4 spaces when indenting is also used throughout this tutorial.

Variable "Spell Checking" by the IDE

It's time to execute the code we have in the IDE. Select the Run menu and then select Start (or ALT-F-S or F5).

Figure 28: Well that's not right?

Why didn't the code display the values of 1 through 10? Why did the output display 10 zeros? Time for some debugging.

According to the FOR...NEXT help page x% should contain the values of 1 through 10 as the FOR statement cycles from 1 to 10. So how come line 2 doesn't print the value in x%? Do you see the problem yet?

In line 2 we requested the value of x, not x%, to be printed to the screen. That simple typo of forgetting to add the % sign to the end of x altered our code in an unexpected way. x and x% are two entirely unique variables. x% is an integer because of the % sign added after it. The percent sign is a type identifier that tells a variable it is to hold integer values only. x on the other hand, having no type identifier, was given the default of a single type value, that is a value that can have decimal points as well. So in this case our x variable is the same as x! (the exclamation point identifies the variable as a single type) making x% and x! two unique variables in our program.

These simple typos can literally drive you crazy especially when your code gets very large. Your eye has a tendency to simply gloss over them especially if you have been coding for a while. Luckily, the IDE has a trick up its sleeve to help you snuff out these typos.

The OPTION _EXPLICIT IDE Directive

Including this line of code as the first line of code in your program:

OPTION _EXPLICIT

forces the programmer to declare all variables that will be used throughout the program by instructing the IDE to watch over variable use. Furthermore, variables created "out of the blue" or through typos, such as the variable x in the example above, are caught and reported by the IDE alerting the programmer to the typo before it becomes an issue. I want you to read the next line 3 times so it sinks in:

NEVER WRITE A QB64 PROGRAM THAT DOESN'T CONTAIN OPTION _EXPLICIT AS THE FIRST LINE OF CODE !!

BASIC (Beginner's All-purpose Symbolic Instruction Code) was created with the non-programmer in mind. One of its greatest strengths is that those needing to do a little programming could use BASIC to quickly write something useful through the use of English-like statements and not have to worry about variable maintenance. For example, this simple little program serves a useful purpose:

PRINT
PRINT
" ------------------------------------------"
PRINT "  Fahrenheit to Celsius Conversion Utility"
PRINT " ------------------------------------------"
PRINT
INPUT "  Enter the Fahrenheit value> ", f
PRINT
c = (f - 32) * 5 / 9
PRINT "  Celsius ="; c

The programmer didn't have to worry about the variables being declared, f and c were simply chosen and created "out of the blue". Furthermore the programmer didn't have to worry about the variable's types. Since f and c have no type identifiers they both default to being the single type, which happens to be a good fit for the values this program uses.

However, and this is a big however, when code starts getting large, hundreds, thousands, even 10s of thousands of lines long, this approach is going to bite you hard. BASIC's greatest strength is also its greatest weakness. You are going to make typos when typing in variables and they will be a MONSTER to debug. Trust me, I've been there!

Let's use OPTION _EXPLICIT to correct the code currently in the IDE. Use the keyboard arrow keys to move the cursor to the beginning of line 1, press ENTER to insert a blank line, and then add OPTION _EXPLICIT to line 1 as Figure 29 below shows.

Figure 29: OPTION _EXPLICIT doing its job

Once OPTION _EXPLICIT is typed in the IDE begins its work of identifying errors associated with variables. The first issue found is in line 2 pertaining to the x% variable. The status window contains the error message:

Variable 'x' (INTEGER) not defined on line 2

Because x% contains the type identifier of a % sign the error message identifies it as an (INTEGER). x% will need to be defined, or declared, to remove this error. The QB64 DIM statement is used to declare variables. Modify the code in your IDE as seen in Figure 30 below:

Figure 30: Declaring x%

Our original intent for the program was to have one variable, x%, but what is this? Another error being reported by the IDE:

Variable 'x' (SINGLE) not defined on line 4

Line 4 is our typo and it seems we forgot to add the % sign type identifier to the variable x. Notice that this time the variable x is identified as (SINGLE) in the error line. Remember, when a type identifier is not used with a variable the variable defaults to the single type. Go ahead and correct line 4 by adding a % sign after the variable x to remove the error and then run the program to see the result.

Figure 31: All errors corrected

Figure 32: The program now executes correctly

OPTION _EXPLICIT's behavior is not the IDE default because of legacy QuickBasic code and QB64 code written by others that do not use this IDE directive. Imagine having to debug every piece of legacy code you load into the IDE because of undeclared variables.

However, I have found this to be very useful. When I load someone else's code I add OPTION _EXPLICIT to the top of the code and then take the time to correct all the undeclared variable errors that are found. This forces me to declare (DIM) all the variables included in the code and helps to give me a better overall picture of what the code is doing. I've even found variable typo bugs in other code this way. This also gives me a complete listing at the top of the code of all variables used throughout the program. Here is that useful little program again written with the aid of OPTION _EXPLICIT:

OPTION _EXPLICIT

DIM f! ' the Fahrenheit value supplied by the user
DIM c! ' the calculated Fahrenheit to Celsius value

PRINT
PRINT
" ------------------------------------------"
PRINT "  Fahrenheit to Celsius Conversion Utility"
PRINT " ------------------------------------------"
PRINT
INPUT "  Enter the Fahrenheit value> ", f!
PRINT
c! = (f! - 32) * 5 / 9
PRINT "  Celsius ="; c!

As you can see every variable used in the program is declared at the top. Better yet you can add a REM ( ' ) statement following each declaration with a description of how the variable is used ... a variable documentation table! Imagine having a piece of code in front of you with over 5000 lines and knowing exactly what each and every variable does.

ALWAYS USE OPTION _EXPLICIT.

The IDE File Menu

Figure 33: The File menu with the secondary Export As... menu expanded

File Menu: New

This menu option will clear the IDE and remove the current program. If the current program has not been saved the IDE will give you the chance to save the program before clearing the IDE.

File Menu: Open...

This menu option opens an operating system file open dialog window allowing you to choose the source code file you wish to load.

File Menu: Save

This menu option saves the current program loaded into the IDE.

File Menu: Save As...

This menu option saves the current program loaded into the IDE with a different file name than what it already has. I often use this menu option to save a copy of the code I'm working on before making major changes that may not pan out the way I want. I can then reload the original code back in and try a new approach if needed.

File Menu: Export As...

This menu option will open a secondary menu (as seen in Figure 33 above) that allows the code to be saved in an alternate file format. The export options are:

File Menu: Clear Recent...

As you open and save code in the IDE a numbered recent files list will start growing under Export As... in the File menu. To clear this list you can select Clear Recent...

NOTE: When the recent list count gets above six Clear Recent... will change to Recent... Selecting Recent... will bring up a window containing a listing of your recent files and maintenance options to maintain your growing code list.

File Menu: Exit

This menu option closes the IDE. If your code has not been saved you will be given the option to save it before exiting.

The IDE Edit Menu

Figure 34: The IDE Edit menu

Edit Menu: Undo

The QB64 IDE maintains a history of actions taken and changes made. This menu option allows the programming to step backwards through the history and undo changes that were made.

Edit Menu: Redo

This menu option allows the programmer to step forward through the the history after stepping backwards through it using the Undo menu option above.

Edit Menu: Cut

This menu options cuts, or removes, any currently highlighted text in the code window and places it in the clipboard. This text can then be placed somewhere else in the code using the Paste option below. Note that this menu option will only be available when text is highlighted in the code window.

Edit Menu: Copy

This menu option copies any currently highlighted text in the code window and places it in the clipboard. This text can then be placed somewhere else in the code using the Paste option below. Note that this menu option will only be available when text is highlighted in the code window.

Edit Menu: Paste

This menu option will copy any text in the clipboard to the code window at the current flashing cursor position. Note that this menu option will only be available if there is currently text within the clipboard.

Edit Menu: Clear

This menu option will remove any currently highlighted text in the code window. This removed text will not be placed in the clipboard. Note that this menu option will only be available when text is highlighted in the code window.

Edit Menu: Select All

This menu option highlights all text within the code window in preparation for a Cut, Copy, Paste, or Clear menu option action.

Edit Menu: Toggle Comment

This menu option will add or remove a REM ( ' ) statement to the beginning of the current line the flashing cursor resides on. If multiple lines of text are highlighted all of them will get this action. If the line or lines of code currently do not have a REM ( ' ) at the beginning one will be added. If the line or lines of code currently do have a REM ( ' ) at the beginning it will be removed.

Edit Menu: Add Comment

This menu option will add a REM ( ' ) statement to the beginning of the current line the flashing cursor resides on. If multiple lines of text are highlighted all of them will get this action.

Edit Menu: Remove Comment

This menu option will remove a REM ( ' ) statement from the beginning of the current line the flashing cursor reside on. If multiple lines of text are highlighted all of them will get this action.

Edit Menu: Increase Indent

This menu option will increase the indention of code by the number of spaces specified in options. If multiple lines of code are highlighted all of them will get this action. Note that this action will only work if auto indention of code is disabled in options.

Edit Menu: Decrease Indent

This menu option will decrease the indentation of code by the number of spaces specified in options. If multiple lines of code are highlighted all of them will get this action. Note that this action will only work if auto indentation of code is disabled in options.

Edit Menu: New Sub...

This menu option will create a new subroutine at the end of the code in the code window. When this menu item is selected an input box will appear asking for the new subroutine's name.

Figure 35: Adding a new subroutine

Once the new subroutine's name has been entered and < OK > selected the subroutine will be created at the bottom of the code window and the cursor placed on the first line within the subroutine.

Figure 36: Ready to edit code within the new subroutine

Edit Menu: New Function...

This menu option performs the same action as New Sub... above but instead creates a function instead of a subroutine.

The IDE View Menu

Figure 37: The IDE View menu with the secondary Line Numbers menu expanded

View Menu: Subs...

This menu options opens a list box that contains a listing of the subroutines and functions within the source code loaded into the IDE. You can use the keyboard up and down arrow keys to scroll through the listing. Figure 38 below shows a small segment of code that contains four temperature conversion functions. Figure 39 below shows the list box displayed by selecting Subs... from the View menu.

Figure 38: A few temperature conversion functions

Figure 39: SUBs list displayed by selection Subs... from the View menu

The SUBs List Box Options

This menu option will become one of your most used IDE tools. The number of subroutines and functions contained within code can grow rather quickly especially for major programs you intend to work on. The SUBs list box will allow you to quickly and easily teleport to key locations within your source code. Figure 40 below shows the SUBs list for the Widescreen Asteroids game I wrote. The code contains 38 subroutines and functions contained in just under 3500 lines of code.

Figure 40: This first 20 of 38 subroutines and functions contained in Widescreen Asteroids

View Menu: Line Numbers

This menu option opens a secondary menu with options to control the manner in which line numbers are shown in the code windows of the IDE.

The animation in Figure 41 below displays all the various configurations you can place line numbers into.

Figure 41: The various Line Numbers configurations

The IDE Search Menu

Figure 42: The IDE Search menu

Search Menu: Find...

This menu option will search for the search term text you supply to an input box that appears.

Figure 43: Initiating a search for _rgb32

The Find... Input Box Options

Search Menu: Repeat Last Find

This menu option repeats the last search performed using Find.... This menu option is typically used by invoking the quick keys F3 and SHIFT-F3. The F3 key will search for the next search term forward through the code and the SHIFT-F3 key combination will search backwards for the next search term through the code. This will be one of your most used IDE tools available. Very handy for finding every instance of a variable used throughout the code for example.

Search Menu: Change...

This menu option searches for a search term provided within the code and then changes the code to a new value provided.

Figure 44: Changing text within code

The Change... Input Box Options

The options for searching are exactly the same as found in the Find... input box options above with one addition:

There are also two different methods to initiate the change.

This will be another one of the IDE tools you will use quite frequently. I use this feature all the time to rename variables within my code. I may decide that another name for a variable would be better than the one currently used. This menu option will change all the variable instances in the code at once.

Search Menu: Clear Search History...

The IDE will maintain a history of all searches performed. This search history is not cleared when the IDE is exited and restarted at a later time. Clear Search History will clear the IDE's History file. To access the search history click on the double arrow character ( ) found in the Find field located at the top of the status window toward the bottom right hand corner of the IDE (see Figure 45 below).

Figure 45: Accessing the search history list box

Search Menu: Quick Navigation

With this menu option enabled a quick navigation box will appear (see Figure 46 below) following any action that teleports you to another location within your code, such as using bookmarks, Go To Line..., Find..., and Repeat Last Find. Clicking on the quick navigation button will take you back to the previous position. The quick navigation button stays active as long as their are more previous positions stored. This means you can click on the quick navigation button multiple times to step back multiple positions.

Figure 46: The quick navigation button

Search Menu: Add/Remove Bookmark

This menu option creates jump points throughout your code by adding a small horizontal tick mark to the left of the code line where the bookmark was created (see Figure 47 below). You can then jump between these bookmarks using the Next Bookmark and Previous Bookmark search menu entries. If a bookmark already exists this menu entry will remove the bookmark from the line of code.

Figure 47: Adding bookmarks

Search Menu: Next Bookmark

This menu option will teleport you to the next bookmark in your code listing.

Search Menu: Previous Bookmark

This menu option will teleport you to the previous bookmark in your code listing.

Search Menu: Go To Line...

This menu option will take you directly to a code listing line number. When selected an input box will appear allowing you to type in the line number you wish to teleport to.

The IDE Run Menu

Figure 48: The IDE Run menu

Run Menu: Start

This menu option compiles the source code to an .EXE file and then executes the .EXE file, effectively running the program within your IDE. If there are any errors during compilation the error will be reported in the status window at the bottom of the IDE and program execution will not occur.

Run Menu: Run Only (No EXE)

This menu option will compiles and then runs the program without saving the .EXE file that was created.

Run Menu: Modify COMMAND$...

It's possible to pass information to a program through the use of the command line. For instance, the following command can be entered at the command line:

DIR

and a directory listing of all files and sub-directories will be listed to the screen. The DIR command allows you to change its behavior by providing command line "switches" such as this:

DIR /AD

which causes the DIR command to only list the sub-directories found. The DIR command scans the command line string that was used to start it and if anything following the actual name of the command is found that information is processed.

QB64 contains the COMMAND$ statement that holds any extra information from the command line that was entered. Type in the following code into your IDE and then start the code.

PRINT
PRINT
"COMMAND$ = "; COMMAND$

Figure 49: COMMAND$ contains no text (null)

As Figure 49 above shows COMMAND$ is currently null (contains nothing). The IDE will allow you to simulate text being entered on the command line following your program by using this Run menu option. Open the Run menu and select Modify COMMAND$... to open an input box. In the "Enter text for COMMAND$" field type in: Text After The EXE

Figure 50 below shows the Modify COMMAND$ input box.

Figure 50: Modifying COMMAND$ to simulate extra command line input

Select < OK > to make the change. Now, run the program again contained in your IDE.

Figure 51: COMMAND$ now contains text

The text "Text After The IDE" was simulated as being entered on the command line after your program's .EXE and was therefore picked up by COMMAND$.

Let's say you are writing a game and wish to have some people Alpha or Beta test it. These testers will most likely need a way to override certain aspects of the game to test it. Instead of spending time writing a tester menu you could simply supply them with a list of command line switches to use to override game functions. The text supplied is then used to set variables within the game accordingly.

SuperSteveWorld /godmode                  (the player can't get killed)
SuperSteveWorld /noclip                   (the player can run through walls)
SuperSteveWorld /level5                   (go directly to level 5)
SuperSteveWorld /godmode /noclip /level5  (all options contained within one command string)
Etc.. Etc..

The testers would need to know how to enter the command prompt and do this which your included documentation will cover of course. Your code would then look for these command line switches and process them.

IF INSTR(UCASE$(COMMAND$), "/GODMODE") THEN GodMode% = 1

The use of COMMAND$ also allows you to create utility software such as how the DIR command can accept command line switches at the command prompt.

Fun Fact: Many game developers leave these command line switches in, either accidentally or on purpose, for gamers to "discover" and over the years have become known as "cheat codes". Id, the developers of DOOM, took it a step further and allowed the cheat codes to be typed in while playing the game ... IDDQD or IDKFA anyone?

Run Menu: Output EXE to Source Folder

By default the IDE will compile your program's .EXE file to the QB64 installation folder. That folder may be "qb64pe" or "qb64" depending on the version and/or fork of QB64 you are using. By enabling this menu option the compiler will compile your program's .EXE file at the location where the source .BAS file resides. For instance, if you load a .BAS source file from:

...\qb64pe\Games\ssw\SuperSteveWorld.bas

the compiled .EXE would be created at:

...\qb64pe\Games\ssw\SuperSteveWorld.exe

instead of the installation folder:

...\qb64pe\SuperSteveWorld.exe

This menu option allows the .EXE to be created where asset files such as sounds and graphics are located along with the source code file.

Run Menu: Generate License For EXE

This menu option will generate a license text file appropriate for your program. The IDE takes into account the various QB64 libraries that were used to build the final .EXE file when creating the license text file. The license text file will be created in the same folder as your .EXE file.

Run Menu: Make EXE Only

This menu option will compile your code to an .EXE file but will not execute the file afterwards.

The IDE Debug Menu

The QB64 IDE has a full suite of debugging tools built directly into it to aid the programmer in tracking down and correcting code issues. Lesson 24 is a planned lesson coming soon that will be devoted entirely to debugging QB64 source code.

In the meantime you can view this excellent video created by Fellippe Heitor, a former developer of QB64, that goes into great detail on how to use the debugging tools built into the IDE. It's this video that I plan to use as a template for Lesson 24.

Download the QB64 Debug Video (200MB)

The IDE Options Menu

Figure 52: IDE Options menu

Options Menu: Display...

The menu option will display a window with a set of options you can set related to the overall size and font of the IDE screen.

Figure 53: The Display options window

The following options can be set here:

If you performed the "Configure the IDE" instructions in the "Install QB64" section of the tutorial these options should already be set up to mimic the code found in the tutorial. You'll need to experiment with these setting to get an IDE screen to your liking. Your monitor's size and resolution will play an important part in the values you enter into these options.

Options Menu: IDE Colors...

The menu option will display a window with a set of options you can set related to the color scheme of the IDE and code elements.

Figure 54: The IDE Colors options window

The following options can be set here:

Options Menu: Code Layout...

This menu option allows for the customization of code spacing and capitalization.

Figure 55: The Code Layout options window

The following code layout options are available:

Options Menu: Compiler Settings...

The QB64 source code that you write eventually gets converted to C++ source code and then finally compiled using a C++ compiler. These options let you take control of, or add functionality, to the process. These options are meant for users that are somewhat familiar with C++ or for developers tracking down a possible bug in the QB64 source code and testing new features. Note: Many thanks to DSMan195276, a long time QB64 developer, in helping to explain these features for this tutorial.

Figure 56: The Compiler Settings options window

The available compiler settings are:

Options Menu: Language...

This option displays a list box allowing you to select the code page for ASCII and Unicode mapping within the IDE.

Figure 57: The Language list box

This list allows you to choose which code page to use within the IDE for localized languages. You can read more about code pages, their history, and use here. The available code pages to choose from within the IDE are:

Options Menu: Backup/Undo...

The IDE maintains a backup buffer that can be utilized in case of sudden IDE issues, such as locking up unexpectedly and forcing a restart, to Windows 10/11 restarting without warning.

Figure 58: Backup/Undo buffer size

This menu option displays a input window that allows you to set the size of the undo buffer in megabytes (MB). This buffer is used for the Edit menu's Undo and Redo options and to restore the source code in situations where the IDE had to be shut down and the source code was not saved. If that happens upon restart the IDE will detect this and ask if you would like to restore the code from the backup buffer.

Options Menu: Syntax Highlighter

When enabled this menu option enables the highlighting and color coding of source code. When disabled all source code will be one color.

Options Menu:  Swap Mouse Buttons

When enabled the left and right mouse buttons will be swapped for left handed mouse users.

Options Menu: Cursor After Paste

When this option is enabled the text cursor will placed at the end of text that has been pasted into the code window.

Options Menu: Syntax Checker

When this option is enabled the IDE will perform syntax checking (in the status window). When disabled no errors will be reported to the programmer.

Options Menu: Ignore Warnings

When enabled minor warnings, such as a variable declared but not yet in use, will not be displayed in the status window of the IDE.

Options Menu: GUI Dialogs

When this option is enabled the IDE will use the file open/save GUI dialogs built into the operating system rather than those native to the IDE.

The IDE Tools Menu

The Tools menu contains some useful tools to aid the programmer in code development.

Figure 59: The IDE Tools menu

Tools Menu: ASCII Chart...

This menu option will display an interactive ASCII chart that you can navigate.

Figure 60: An interactive ASCII Chart

ASCII characters 1 through 255 are displayed in the chart. You can use the keyboard arrows or mouse pointer to select an ASCII character from the chart. Once you have your selected ASCII character the following options can be chosen from within this window:

Figure 61: Inserting an ASCII control character

Note: There is a typo in the dialog box above. The range of control characters should be from 1 to 31, not 1 to 32 as stated. The typo has been reported to the developers and has probably already been corrected by the time you read this.

Figure 62: Inserting a CHR$

Next, choose Insert CHR$ and the resulting CHR$(1) will be pasted into your code as seen in Figure 63 below.

Figure 63: The ASCII chart pasted CHR$(1) into the code window

Tools Menu: Insert Quick Keycode

This tool is used to insert keyboard key scan codes directly into your code. Many keys, such as the function and navigation keys, use scan codes that are difficult to remember. You can view a complete listing here. I use this handy tool all the time!

This tool is best used by using the quick key combination CTRL-K instead of taking the time to click through the menu. Once you press the quick key combination CTRL-K the IDE will go into a wait state and ask you to press the key of the scan code you desire. Start a new program in the IDE and type the following line of code in (but don't press ENTER afterwards):

UpArrow& =

Now, press the quick key combination CTRL-K to put the IDE into the wait state. The entire IDE will darken indicating that it is waiting for a key press.

Figure 64: The IDE is waiting for a key press

The IDE is now waiting for a key to be pressed as seen in Figure 64 above. Press the UP ARROW key on your keyboard to have the key's scan code inserted directly into the code window as seen in Figure 65 below.

Figure 65: The up arrow key scan code (18432) was inserted into the code window

Using long integers (&) to store keyboard key scan codes is a good habit to get into. Some scan codes will exceed the limit of the integer range, such as ALT-F1 which results in 100308, far exceeding the 32767 integer (%) or 65535 unsigned integer (~%) limits.

Tools Menu: Math Evaluator

This option brings up an input window where simple math functions can be entered to get a result.

Figure 66: The Math Evaluator input window

Enter the math expression you wish to resolve in the Enter expression: field. The math evaluator understands the order of operations when using parenthesis as seen in Figure 66 above. Here I've entered the classic formula to find the text center point on an 80 column text screen with the text length being 32. The result will appear in a second window.

Figure 67: The result of the previous formula

The options available in the result window include:

In my opinion the Math Evaluator tool has always felt clunky and unpolished. After discussing this with one of the developers there is a reason for this. The Math Evaluator, while somewhat useful as a simple calculator, was mainly added for developers to use. It has hidden meaning for them when dealing with QB64 source code changes and updates. While I don't think the Math Evaluator can replace the Windows calculator in programmer mode, it is nonetheless a handy little tool to use in a pinch as I have done from time to time. It's actually quite useful to get quick answers to simple little formulas like the one used in the example above.

Tools Menu: RGB Color Mixer...

The RGB color mixer is used to mix red, green, and blue values to get a 24bit RGB color result that can then be inserted directly into your code. It's a very simplified version of a color mixer that you would find in all image processing programs.

Figure 68: Pick a color, any color

The gray box to the left of R:, G:, and B:, as seen in Figure 68 above, is a preview of the color currently chosen. The R:, G:, and B: color sliders can be slid back and forth using the mouse. As you move the color sliders the values to the right of each slider will display the current value ranging from 0 to 255. You can also manually enter color values into the numeric fields by using the mouse to click on each one. Once you have the desired color selected the following options are available:

Code Editing Tips Using the IDE

Code creation using the IDE can be very fast and efficient with practice and using the tools available. It takes time to build the muscle memory that remembers the various hot-key and quick-key combinations but using them will pay off.

Start a new program in your IDE and type the following little program in:

DIM x!, y!, xvec!, yvec! '       x,y location and vectors of circle
RANDOMIZE TIMER '                seed random number generator
x! = 319 '                       center circle x location
y! = 239 '                       center circle y location
xvec! = RND * 5 - RND * 5 '      get a random x vector
yvec! = RND * 5 - RND * 5 '      get a random y vector
SCREEN _NEWIMAGE(640, 480, 32) ' enter graphics screen
DO '                             begin main loop
   CLS '                         clear screen
   _LIMIT 60 '                   60 frames per second
   CIRCLE (x!, y!), 20 '         draw the circle
   PAINT (x!, y!) '              paint the circle
    '
    ' Keep the circle on the screen by looking ahead. If circle is going to leave edge of
    ' screen reverse the appropriate vector otherwise simply add vectors to x,y locations.
    '
   IF x! + xvec! > 619 OR x! + xvec! < 19 THEN xvec! = -xvec! ELSE x! = x! + xvec!
   IF y! + yvec! > 459 OR y! + yvec! < 19 THEN yvec! = -yvec! ELSE y! = y! + yvec!
   LOCATE 15, 31 '               place the text cursor
   PRINT "A Bouncing Circle!" '  print some text
   _DISPLAY '                    update the screen with changes
LOOP UNTIL _KEYDOWN(27) '        leave when ESC key pressed

Figure 69: Not quite what I had envisioned

The circle is bouncing around the screen but something is off. The circle gets covered by the text and I would rather have the circle cover the text. This is a simple enough fix by moving the code in lines 19 and 20

   LOCATE 15, 31 '               place the text cursor
   PRINT "A Bouncing Circle!" '  print some text

and placing them before the circle is drawn in line 11. You could just simply retype these lines of code before the CIRCLE statement and then erase lines 19 and 20. However, to save time the IDE can make the move quickly and simply.

Position your text cursor at the beginning of line 19. Now, hold the SHIFT key down and then press the DOWN ARROW key twice. Lines 19 and 20 are now highlighted as seen in Figure 70 below.

Figure 70: Lines 19 and 20 are highlighted

Using the SHIFT key in concert with the ARROW KEYS (left, right, up, and down) allows you to make a text selection. Once you have the desired text selected you can use the Edit menu options to Cut and Paste these two lines of code to a new location. However, instead of using the mouse to navigate to the Edit menu and then selecting Cut use one of the the associated quick-key combinations or the hot-key combination. There are three ways to Cut these lines of code and place them in the clipboard:

The quick-key or hot-key combination you use is up to you. Whichever one you decide to use will eventually become second nature as muscle memory takes over. Back in the QuickBasic days I became accustomed to using hot-key combinations. So my natural go-to method for cutting selected text is ALT-E-T. I don't even think about it any longer, my fingers just instantly do this when I think "cut". I know, three keystrokes instead of two. Back in the DOS days most text editors and word processors supported ALT-E-T (as do a lot of Windows programs today, try it!) so it became natural to use one method that could be used in many places.

Go ahead and use one of the methods above to cut the text lines. Don't worry, they'll be placed into the clipboard and won't be lost.

Now, position the text cursor at the beginning of line 11 in the code. Use one of the Paste quick-key combinations or hot-key combination to paste the code in front of line 11. There are three ways to Paste the lines of code contained in the clipboard:

The lines of code are now inserted before the CIRCLE statement in the code.

Figure 71: That's better

Figure 72: Circle is now over text ... but what the heck is that hole?

This is how it normally goes when programming, correct one issue only to create another. The circle is now being drawn over the text but as the circle crosses the text there are curious black holes being produced. What could be causing this?

In lines 13 and 14 of the code a color was not supplied to the CIRCLE and PAINT statements. When no color is supplied the default of bright white is used ( _RGB32(255, 255, 255) ). The default text color is also bright white. The PAINT statement can't fill in the text holes because it has to stop at the text color causing the holes of missing color. This again is a simple fix that can be remedied by slightly changing the CIRCLE and PAINT statement color using a constant.

Position your cursor at the beginning of line 1 in the code and then press ENTER. This will create a blank line at the beginning of the code. Move the cursor back to the beginning of line 1, the blank line, and type the following line of code in:

CONST OFFWHITE~& = _RGB32(255, 255, 254) ' slightly off bright white

Next, change lines 14 and 15 to read:

   CIRCLE (x!, y!), 20, OFFWHITE~& ' draw the circle

   PAINT (x!, y!), OFFWHITE~&, OFFWHITE~& ' paint the circle

Figure 73: The color OFFWHITE~& added

Figure 74: All seems correct now

Now that a color has been supplied to the CIRCLE and PAINT statements everything works as it should. The color defined as OFFWHITE~&, _RGB32(255, 255, 254), is so slightly different than bright white, _RGB32(255, 255,255), that the human eye can't perceive it. This is handy trick to remember when painting a color over another object of the same color.

There's one more thing I decided I don't like about the code. I want to shorten the variable names xvec! and yvec! to xv! and yv!. Well, time to start going through the code and manually changing every instance, right? Of course not, let the IDE make the changes for you in an instant. Do the following:

Bam! You just changed all instances of xvec! in the source code to xv! Lets' do the same thing for yvec!:

Now every instance of yvec! in the source code has been changed to yv!. Easy peasy oh so breezy.

Figure 75: xvec! and yvec! changed to xv! and yv!

The point here is to learn as many of the IDE's shortcuts as you can to become very productive with your coding. Constantly fiddling around with your mouse is inefficient and breaks the flow. The best part of programming is getting those thoughts and ideas in your head in the form of source code as quickly and easily as possible so you can see the results.