I'm tackling this one on my own, hopefully not to be bothered by those annoying Worbles! When you have mastered the fundamentals of entering variables, and processing them to achieve a result, the next thing you will want to do is create a Gooey to make your application look more pleasing to a user.
Let's begin with Step 1:
'Your First Gooey, Stage 1, by Welopez
NOMAINWIN
WindowWidth=300
WindowHeight=100
UpperLeftX=INT((DisplayWidth-WindowWidth)/2)
UpperLeftY=INT((DisplayHeight-WindowHeight)/2)
BUTTON #1.btn, "CLOSE", [quit], LL, 120, 10, 60, 30
OPEN "My First GUI" FOR WINDOW AS #1
PRINT #1, "trapclose [quit]"
WAIT
[quit]
CLOSE #1
END
You can copy that code into your program editor and run it. Hmmm, pretty boring, isn't it? But we did it! We created a gooey to make your program look just like any other application written for windows. Lets examine the code line by line, so we'll know what it does.
I always start with a REM so I'll know six months from now what the purpose of this program is. Next, I cancel that MAINWIN, then describe the width and height of the window I will create.
The next two lines are a neat way to center my window in the monitor. We get the display width and height from the user's PC, subtract the window width and height, then divide by 2, which gives us the X and Y coordinates on the user's monitor to place our window.
We might not know yet what the final look of our window will be, but you can bet we'll probably need a button to close the window. A button is one of many controls we can place in our window. See the help file topic for Controls to obtain the exact syntax and parameters for any control you plan to use. For this control, it will be BUTTON #1.btn, and the caption will be CLOSE. When pressed, the button will branch to [quit]. This button will be placed with reference to the lower left corner of the window, LL, although we could use upper left, upper right, or lower right. The button will be 120 pixels to the right of the border of the window, and 10 pixels up. It will have a width of 60 pixels and height of 30 pixels. If this turns out not to be enough for the caption, you can increase or decrease these values to suit your needs. Controls must be added to your window before you open it!
For now, it looks as if we are done with the design phase of our program, so we can OPEN the window. "My First GUI" will be displayed in the title bar, and the device ID will be #1. You can name yours #myWin, #myGUI, or #217, the choice is yours. Device ID's are used by the program to identify this window.
There are basically four type windows you can open with JB. They are WINDOW FOR WINDOW, FOR TEXT, FOR GRAPHICS, or FOR DIALOG. See the helpfile topic Window Types for the uses and limitations of each, which will help you decide which type window you want to create.
As soon as we OPEN a window, add the "trapclose [label]" to your Gooey. If you do not have a CLOSE button, the user can close the window by clicking on the X in the upper right corner of the window, but only if you have a block of code to close it!
The block to close this window is named [quit]. The WAIT statement prevents the block from executing until we point the program to the [quit] branch. Without the WAIT, our program will close faster than you can blink your eye when you run it.
In the [quit] block, we must CLOSE #1, or any open devices and files, or a runtime error will occur when trying to exit the program. When the window has been close, we can safely END the program.
You have successfully created, run, and closed your first Gooey. That wasn't hard, was it? Now we need to snazz it up a little so we can do something to impress our friends and neighbors. When you understand what we have done so far, you are ready to move on.
Step 2
'Your First Gooey, Stage 2, by Welopez
NOMAINWIN
WindowWidth=300
WindowHeight=275
UpperLeftX=INT((DisplayWidth-WindowWidth)/2)
UpperLeftY=INT((DisplayHeight-WindowHeight)/2)
BUTTON #1.btn1, "CLOSE", [quit], LL, 120, 0, 60, 30
BUTTON #1.btn2, "ADD", [add], UL, 10, 145, 45, 30
BUTTON #1.btn3, "SUB", [sub], UL, 65, 145, 45, 30
BUTTON #1.btn4, "MUL", [mul], UL, 120, 145, 45, 30
BUTTON #1.btn5, "DIV", [div], UL, 175, 145, 45, 30
BUTTON #1.btn6, "NEW", [new], UL, 230, 145, 45, 30
TEXTBOX #1.txt1, 10, 30, 100, 30
TEXTBOX #1.txt2, 10, 90, 100, 30
STATICTEXT #1.stx1, "First Value, or Result", 120, 40, 150, 20
STATICTEXT #1.stx2, "Second Value", 120, 100, 150, 20
OPEN "My First GUI" FOR WINDOW AS #1
PRINT #1, "trapclose [quit]"
[new]
[begin]
WAIT
[add]
GOTO [begin]
WAIT
[sub]
GOTO [begin]
WAIT
[quit]
CLOSE #1
END
WAIT
[mul]
GOTO [begin]
WAIT
[div]
GOTO [begin]
Now is probably a good time to tell you about the plan. I know what the finished program will look like, and what it is supposed to do because I have a plan! Even for simple programs, you will at least need an idea of what you intend to do. For more complex programs, you will save a lot of time by developing a plan first. What is a plan? Go here for some ideas, but don't forget to come back! http://justbasic.conforums.com/index.cgi?board=tutorial&action=display&num=1113168039
The code above is the same window, after our next stage of construction. I've added two text boxes, two static text boxes, five more buttons, and branch labels for each button. Because we now have several buttons, it was necessary to add extensions to identify each control for the program. With a little practice, you'll come up with your own preferences for naming windows, control extensions, and branch labels which make them meaningful to you.
Copy the new code into your IDE and run it. Ahh, that looks much better, almost like we're ready to rock, doesn't it?
There are three more steps to creating our finished program, but space limitations in the forum make it necessary for me to upload the completed tutorial as a zip file to the JB Archives. You'll have to click on the link at the top of this screen for the third and final step. It's a small text file, even though it includes the valuable tidbits of prose above, so it won't take you long to download.
Stage 3
A word about branch labels, those little signposts in your code set off with the square brackets, [quit], [begin], [add], etc. You cannot use words from the JB Reserved Words List to identify branch labels. See the helpfile topic for Reserved Words. Some words mean specific things to the Worbles who do the work in our computer, and JB will not allow you to confuse those simpletons! With all the useful words in your vocabulary, you should have no trouble. Branch labels can be [thisIsWhereTheDarnedProgramBegins] or [fin] to end the program.
Code following a branch label will ALWAYS be executed, unless you interrupt program flow with a WAIT statement. In the code above, we want the code following [begin] and [new] to execute every time the program runs, so we have not used a WAIT statement. In the remainder of the program, we don't want the code in the block following the branch label to execute until we tell it to, so we use the WAIT statement. With branch labels and WAIT statements, the coder is in 100% control of program flow, sort of like Ramses II ruling the Egyptian Empire. "Hey, Royal Architect, look at that barren piece of desert over there. Don't you think that looks like a good place to build a pyramid?"
Programs in Just Basic and Liberty Basic follow much the same rules as any other program for Windows, in that they are event driven. Clicking on a button or other control causes program execution to branch to another place in the program code (called the click event), and a specific block of code to be executed for the event. Simply put, that's a $10 description of "Now do this!"
The final touches will be added to our Gooey when we enter the code to be performed for each click event.
'Your First Gooey, Stage 3, by Welopez
NOMAINWIN
WindowWidth=300
WindowHeight=275
UpperLeftX=INT((DisplayWidth-WindowWidth)/2)
UpperLeftY=INT((DisplayHeight-WindowHeight)/2)
BUTTON #1.btn1, "CLOSE", [quit], LL, 120, 0, 60, 30
BUTTON #1.btn2, "ADD", [add], UL, 10, 145, 45, 30
BUTTON #1.btn2, "SUB", [sub], UL, 65, 145, 45, 30
BUTTON #1.btn2, "MUL", [mul], UL, 120, 145, 45, 30
BUTTON #1.btn2, "DIV", [div], UL, 175, 145, 45, 30
BUTTON #1.btn2, "NEW", [new], UL, 230, 145, 45, 30
TEXTBOX #1.txt1, 10, 30, 100, 30
TEXTBOX #1.txt2, 10, 90, 100, 30
STATICTEXT #1.stx1, "First Value, or Result", 120, 40, 150, 20
STATICTEXT #1.stx2, "Second Value", 120, 100, 150, 20
OPEN "My First GUI" FOR WINDOW AS #1
PRINT #1, "trapclose [quit]"
PRINT #1, "font times_new_roman 12 bold"
[new]
result=0
[begin]
IF result<> 0 THEN
PRINT #1.txt1, result
PRINT #1.txt2, ""
PRINT #1.txt2, "!setfocus"
ELSE
PRINT #1.txt1, ""
PRINT #1.txt1, "!setfocus"
END IF
WAIT
[add]
PRINT #1.txt1, "!contents? var1"
PRINT #1.txt2, "!contents? var2"
result=var1+var2
PRINT #1.txt1, result
GOTO [begin]
WAIT
[sub]
PRINT #1.txt1, "!contents? var1"
PRINT #1.txt2, "!contents? var2"
result=var1-var2
PRINT #1.txt1, result
GOTO [begin]
WAIT
[quit]
CLOSE #1
END
WAIT
[mul]
PRINT #1.txt1, "!contents? var1"
PRINT #1.txt2, "!contents? var2"
result=var1*var2
PRINT #1.txt1, result
GOTO [begin]
WAIT
[div]
PRINT #1.txt1, "!contents? var1"
PRINT #1.txt2, "!contents? var2"
result=var1/var2
PRINT #1.txt1, result
GOTO [begin]
Old time coders like me like to place SUBs, GOSUBs, and FUNCTIONs at the end of their program. Looking at [mul] and [div], at first glance you might think that's what they are because they follow the [quit] CLOSE and END portion of this program. Not so!
With event driven programming, blocks of code, including the END, can be placed anywhere in the code. Unlike reading a mystery novel, this is the one place where you can put the END at the beginning, or very close to it.
I changed a little code right after opening this window. The default font looked a little fragile and weak to my poor eyes, so I changed the font for the entire window.
PRINT #1, "font times_new_roman 12 bold"
You could choose a separate font for each text box or static text by specifying the control name and extension for multiple font statements.
As soon as the Gooey has opened, the next block of code [new] sets result=0, in the event the user is beginning a new calculation. If result <> 0 in the [begin] block of code, an IF/THEN/ELSE sets up our Gooey for us. If the user is performing multiple steps of addition, subtraction, etc, result is printed to #1.txt1 and #1.txt2 is used for the next value entered in the program.
The action to be performed depends upon which button the user clicks, and might take the user to [add], [sub], [mul], or [div]. Upon completion of the operation in each block, code branches back to [begin] for the next operation. Only when the user clicks NEW, does the code branch to [new], result is set to 0, and then the Gooey is set up again within the [begin] block. The ONLY purpose for [new] is to clear the slate, so to speak, so the user can begin a new sequence of operations.
Each block for add, sub, etc, gets the user input from #1.txt1 and #1.txt2, using the "!contents? var1" or "!contents? var2" statement. The "!contents? ..." statement ALWAYS follows a WAIT statement. Unless you let the user enter something into the program, there will be no contents for your program to act upon.
Before you created a Gooey, you probably thought the only way to get input from a user was through the use of the INPUT command. Just Basic provides many more controls allowing the user to interact with the program. See the helpfile topic (again!) Controls, for all the powerful tools included with the Just Basic took kit.
When you begin writing your SuperDoItAll Program, it's practical and useful to test your program by developing it in the MAINWIN as a text based program to start with. When all the logic and flow is behaving as you expect it to, then you can begin building your Gooey.
Free Form-J makes creating a Gooey easy! Tweaking your Gooey by moving controls just a bit with new values for the control, is also easy, now that you've had a brief introduction. Adding or removing controls is no more difficult than typing a line of code, providing you know what to type.
Did I already mention, See the Help File! You'll be surprised how easy it is to write spectacular and professional looking applications with Just Basic!