Download and install VirtualBox.
Download Linux Mint 20 iso file.
Create and run Linux Mint 20 virtual machine file to be run by the VirtualBox program on top of the Microsoft Windows 10 operating system.
Open terminal and do the following.
$ sudo apt update
$ sudo apt upgrade
$ sudo apt install libwxbase3.0-0v5 libwxbase3.0-dev libwxgtk3.0-gtk3-0v5 libwxsmithlib0 libwxgtk3.0-gtk3-dev libwxsmithlib-dev libwxgtk-media3.0-gtk3-0v5 libwxsqlite3-3.0-0 libwxgtk-media3.0-gtk3-dev libwxsqlite3-3.0-dev libwxgtk-webview3.0-gtk3-0v5 libwxsvg3 libwxgtk-webview3.0-gtk3-dev libwxsvg-dev libwxsvg-tools
$ sudo apt install wx3.0-doc wxsqlite3-doc wx3.0-examples wx-common wx3.0-headers wxglade wx3.0-i18n wxhexeditor
Download and install CodeBlocks 20.03 from the Software Manager.
Toolbar > New icon > Project
Projects > Category > wxWidgets project > click button Go
Select wxWidgets 3.0.x
Project title: wxwidgets_prj_hello
Folder to create project in: Desktop path
Select the radio button: Preferred GUI Builder: wxSmith
Select the radio button: Application Type: Frame Based
At the bottom, we choose to “Create and use precompiled headers" which speeds up compilations after the first.
Click the button Finish
Toolbar > Build and run
Your program should be running successfully now.
To reveal the code of “*frame.wxs file”, double left click on the form editor of the field of dots.
Click on it in the “*Main.cpp file” tab above the main window tabs, and its code appears in the main window.
If we ran our program just as initially written by wxSmith, we won't be able to close the running program by just clicking that window close icon on the window title bar.
To fix that inconvenient problem, find the spot in the code with these lines of the “*Main.cpp file”.
Add the call to the Close() function so that the spot looks like this:
void wxwidgets_prj_helloFrame::OnClose(wxCloseEvent& event)
{
Close(); // type this line
}
Remember to “Save All Files” from time to time.
Toolbar > Build and run
If all goes well, you will see a window come up with a menu of two items: “File” and “Help”.
Try the “Help” menu item first.
Then you can use “File | Quit” or the exit icon on the title bar to exit the program.
Well, so far we have a program that runs and quits, but it does not yet display "Hello, World!". That's next.
Hello, World!
We now turn to the classic first program, namely getting the words “Hello, World!” onto the screen. The text could be added directly into the frame, as in GUI designers for a single operating system; but we need to learn to use sizers for cross-platform programming.
What are sizers?
Sizers have one big advantage over direct placement of components. When you write cross-platform applications, you cannot assume that fonts, buttons, and so on have the same size on different operating systems. This problem can even occur on the same platform when using different window themes. When you use sizers, you don't have to worry about those problems. All sizing and placement is done automatically. Moreover, sizers can even reposition and resize window components when the main window changes size.
Let's add a new wxPanel component to our form editor; it is the eighteen icon from the left on the standard tab.
Ooops! I said we would use sizers and then forgot all about them! We have to get rid of that wxPanel. Select the panel and then click on the red X button just below the four buttons at the right menu of the form editor window.
When you click this button, it deletes the current selection, so if the panel didn't disappear, make sure it's selected and click the button again. Now we should have returned to the state at the beginning.
To use sizers, first we have to add a sizer into the form editor window and then “add the wxPanel” into it. Sizers are available in the Layout tab on the palette.
Switch to it and select wxBoxSizer.
This sizer tries to position items in one line, either horizontal or vertical. Horizontal is the default, and we will use it.
After adding the sizer, two things have changed. The first is that our window now has a red border.
This means that there is a sizer attached to it. When you look into the resource browser, you will also see that the sizer has been added.
The second change is that the size of the window has shrunk to a small box.
That is as it should be because the sizer is responsible for resizing the window to be no bigger than necessary to be visible and accommodate its components, and so far there are no components.
Save the current GUI editor file.
Avoid manual resizing. The wxBoxSizer component will adjust space accordingly for you.
Now let's add our wxPanel. Make sure that you add it into the sizer (next step) and not into the form editor window.
Now when we have our panel, we can finally add the "Hello, World!" static text. Since we will also use sizers to manage items added into wxPanel.
We have to repeat the addition of wxBoxSizer into wxPanel.
Drag and drop wxBoxSizer into wxPanel.
Make sure the wxBoxSizer is inside the wxPanel.
After the sizer is in its place, switch back into the Standard tab on the palette and add a wxStaticText control.
With an eye to the future and for practice with adding components, let's add also a button next to the wxStaticText.
First, click on wxButton. If you still have the "point by mouse" insertion mode turned on, then when you put the mouse over the wxStaticText component on the right half of that component will be colored in light blue.
Let's add the button after the static text.
Now let's finally set our "Hello, World!" text. The wxStaticText control which we added before has the text "Label" on it. It is the default text set to all newly created wxStaticText classes. We will change it using the property browser. To do so, select the wxStaticText component in our window, then find the Label property in the property browser and change it to "Hello, World!\n".
At this point, you can click on the toolbar "Build and run" and the program should run and show the magic words in the static text control.
We could quit in triumph at this point, but the button we have put on the form is still a dud; clicking on it will do nothing. Let's give it a function.
Before going further, we need to deal with a question you may be asking.
Why did we, after putting a box sizer onto our frame, proceed to put a wxPanel into it and then put another box sizer onto the panel?
What is the point of the panel?
Why not just put our two buttons into the first box sizer and eliminate the panel and the second box sizer?
The answer is that the panel gives us control of the background.
We didn't use it, but it is often useful to be able to control it. In fact, these first three steps will be used in structuring every window used in these tutorials. To review, these three steps are:
- Put the first box sizer on the frame
- Put the panel into the first box sizer
- Put the second box sizer onto the panel. Do not resize the wxPanel. Use wxBoxSizer for automatic sizing
- Put other GUI components such as wxStaticText and wxButton
Responding to the Click of a Button
Since buttons usually cause something to happen when clicked, let's make our button close the window. The first thing we should do is to change the text shown on the button to tell the user what the button does. It is done just as in the case of the wxStaticText widget.
Select the button, find "Label" in the property browser and set it to "Close" or anything you like.
Rename the var name to BtnClose with the first letter uppercase.
Just double-click the button to write event handler code.
filename: wxwidgets_prj_helloMain.cpp
void wxwidgets_prj_helloFrame::OnBtnCloseClick(wxCommandEvent& event)
{
Close(); // type this line
}
Build and run our project. It should show our "Hello, World!" text and our "Close" button. Click the Close button, and it should close.
This is the end of this tutorial, I hope that you followed it easily and are beginning to feel comfortable with Code::Blocks and wxWidgets with wxSmith form editor builder.
No comments:
Post a Comment