This tutorial is based off of a tutorial written by Bigbass (Joe) at the BaCon forums.
In this tutorial we are going to learn how to Make our first GUI app using BaCon and HUG. We are also going to learn how to convert and compile our new app. By the end of this tutorial you will have a small app that will show "Hello World!" and have a working quit button.
In this tutorial we are going to learn how to Make our first GUI app using BaCon and HUG. We are also going to learn how to convert and compile our new app. By the end of this tutorial you will have a small app that will show "Hello World!" and have a working quit button.
Technically speaking we should make a terminal app first so you can learn BaCon but let's have a little fun first by making a small GUI app. In future tutorials we will learn more about BaCon code vs HUG code. You can learn to make apps in BaCon but you can not make apps using HUG without programming in BaCon also.
I also need to explain a few things before we get to programming. That would be GUI placement. GUI programming in BaCon uses HUG for all its widgets and is based on GTK. (BaCon is able to use and import GTK widgets for more power but that is best left for another day.) HUG is quite powerful and can do a lot of things along with making GUI programming easy. So lets get started........
The main working window is what you see when you start an app. Think of the outside dimensions of the app and the close, minimize and full screen buttons along with the title bar.
Widgets are buttons, labels, boxes and all the things that you see on the main working window. Widgets are attached to the working window using commands and coordinates. The coordinates start from left to right and then from top to bottom.
So I would like you to open the BaCon GUI IDE and press the + icon in the top tool bar to start a new project.
Next we are going to make a comment so that we will know what this app is for. Please put the following as your first line of code:
'Hello World in BaCon/HUG
The Single quotation mark at the beginning of this line tells BaCon to ignore it when converting and compiling your code. You can read more about comments in the tips and tricks area.
Next we are going to use the INCLUDE command. In this case, it will tell BaCon to include HUG when it converts and compiles our program. It will look like this:
INCLUDE "/usr/share/BaCon/hug.bac"
The bit in double quotation marks tells BaCon the "Path" to find HUG. The next line of code will use the "INIT" command. This is telling BaCon where the program begins. It will look like this:
INIT
I also need to explain a few things before we get to programming. That would be GUI placement. GUI programming in BaCon uses HUG for all its widgets and is based on GTK. (BaCon is able to use and import GTK widgets for more power but that is best left for another day.) HUG is quite powerful and can do a lot of things along with making GUI programming easy. So lets get started........
The main working window is what you see when you start an app. Think of the outside dimensions of the app and the close, minimize and full screen buttons along with the title bar.
Widgets are buttons, labels, boxes and all the things that you see on the main working window. Widgets are attached to the working window using commands and coordinates. The coordinates start from left to right and then from top to bottom.
So I would like you to open the BaCon GUI IDE and press the + icon in the top tool bar to start a new project.
Next we are going to make a comment so that we will know what this app is for. Please put the following as your first line of code:
'Hello World in BaCon/HUG
The Single quotation mark at the beginning of this line tells BaCon to ignore it when converting and compiling your code. You can read more about comments in the tips and tricks area.
Next we are going to use the INCLUDE command. In this case, it will tell BaCon to include HUG when it converts and compiles our program. It will look like this:
INCLUDE "/usr/share/BaCon/hug.bac"
The bit in double quotation marks tells BaCon the "Path" to find HUG. The next line of code will use the "INIT" command. This is telling BaCon where the program begins. It will look like this:
INIT
Now.....Lets make our main working window first. On the next line, I would like you to put the following line of code:
Mainwin = WINDOW( "Hello World", 250, 100 )
So you might ask, what is this bit of code doing. The "Mainwin" part can be what ever you want to call the main window followed by the "=" sign. The "WINDOW" part is telling BaCon to use a HUG widget to make a window for your app. The part between the parentheses are called arguments, this tells the widget how you want it to act.
Mainwin = WINDOW( "Hello World", 250, 100 )
So you might ask, what is this bit of code doing. The "Mainwin" part can be what ever you want to call the main window followed by the "=" sign. The "WINDOW" part is telling BaCon to use a HUG widget to make a window for your app. The part between the parentheses are called arguments, this tells the widget how you want it to act.
The hello world will put "Hello World" in the title bar and the 250, 100 will make the widow widget 250 pixels across and 100 pixels tall.
Now we are going to make a label to show "Hello World". The next line of code should look like this:
My_label = MARK( "Hello World!", 150, 30 )
The My_label is whatever you want to name your label but always use a different name for all your widgets. Mark is the name of the label widget. The arguments are telling the widget to print hello world and that you want the label to be 150 pixels across and 30 pixels high. Make sure your printed space is always big enough for your text or it will get cut off.
The next bit of code will put the label on the main window using the ATTACH command. It will look like this:
ATTACH( Mainwin, My_label, 50, 20 )
My_label = MARK( "Hello World!", 150, 30 )
The My_label is whatever you want to name your label but always use a different name for all your widgets. Mark is the name of the label widget. The arguments are telling the widget to print hello world and that you want the label to be 150 pixels across and 30 pixels high. Make sure your printed space is always big enough for your text or it will get cut off.
The next bit of code will put the label on the main window using the ATTACH command. It will look like this:
ATTACH( Mainwin, My_label, 50, 20 )
This is telling the app that you want to attach the label to the main window at the coordinates of 50 pixels across and 20 pixels down from the tital bar. This picture shows the label placement and the quit button you are about to make.
Lets make a button to close this app when you are done looking at it. The next line of code should look like this:
My_btn = BUTTON( "Quit", 80, 25)
The widget name is BUTTON and I think you understand by now what the rest of it does. Now lets attach the button to the main window with this code:
ATTACH( Mainwin, My_btn, 80, 60 )
Now, lets make the button do something with the CALLBACK command. If we don't give the button something to do then it will just sit on the window doing nothing. The next bit of code should look like this on the next line:
CALLBACK( My_btn, QUIT)
This tells the app that you want the button to quit or to close the window when the button is clicked on by using the QUIT argument.
Almost done! We have one more line of code and our first app is in the can. On the next line I would like you to put:
DISPLAY
This command tells the app to.........you guessed it, to display the window when the app is run.
Now we can click on FILE > SAVE and save your new code as "hello-world.bac". The .bac tells BaCon that it is a project file. I would suggest you save it to a projects folder somewhere on your hard drive. I save my projects in /home/john/projects and then make a folder for Hello World.
My_btn = BUTTON( "Quit", 80, 25)
The widget name is BUTTON and I think you understand by now what the rest of it does. Now lets attach the button to the main window with this code:
ATTACH( Mainwin, My_btn, 80, 60 )
Now, lets make the button do something with the CALLBACK command. If we don't give the button something to do then it will just sit on the window doing nothing. The next bit of code should look like this on the next line:
CALLBACK( My_btn, QUIT)
This tells the app that you want the button to quit or to close the window when the button is clicked on by using the QUIT argument.
Almost done! We have one more line of code and our first app is in the can. On the next line I would like you to put:
DISPLAY
This command tells the app to.........you guessed it, to display the window when the app is run.
Now we can click on FILE > SAVE and save your new code as "hello-world.bac". The .bac tells BaCon that it is a project file. I would suggest you save it to a projects folder somewhere on your hard drive. I save my projects in /home/john/projects and then make a folder for Hello World.
Convert and compile!
What do we do with the code now? At the top of the IDE in the tool bar is an icon that looks like this. Please click on it with your mouse.
This will pull up the conversion window. This window can do a lot of things but lets not worry about this now. Go ahead and click on the "Convert" button at the bottom of the window. This is going to convert your BASIC code to C and then compile the C code.
When it is done, you can tell it to run your new app or you can navigate to your projects folder in your file manager and double click on the app icon and select run from the pop-up window.
When it is done, you can tell it to run your new app or you can navigate to your projects folder in your file manager and double click on the app icon and select run from the pop-up window.
Have Fun!
I hope you had fun learning to program in BASIC using the BaCon language and the BaCon IDE. Here is the whole hello-world.bac file for you to look at and play with.
This tutorial showed you:
1. How to make your first program, using the BASIC language.
2. How to use HUG widgets.
3. How to attach widgets to the main window.
4. How to use a CALLBACK.
5. How to save and convert/compile using the BaCon IDE.
This tutorial showed you:
1. How to make your first program, using the BASIC language.
2. How to use HUG widgets.
3. How to attach widgets to the main window.
4. How to use a CALLBACK.
5. How to save and convert/compile using the BaCon IDE.
Extra Points!
You can change the collar of text and do other things like making bold text in BaCon. Go to the Tips & Tricks area and look for the "Fun With Text" article to see how.