Difference between revisions of "Using wxGrid"

From Code::Blocks
(Comprehensive revision by the original author to show the grid from a button click rather than at all times.)
Line 2: Line 2:
 
=Tutorial 10. Using wxGrid=
 
=Tutorial 10. Using wxGrid=
  
 +
A grid can be a useful way to display data, especially matrices of numbers. If the matrices are large, the full grid will be too big for the screen, so we will want to display it in modest proportions but allow the user to resize it or scroll about in it with the mouse.
  
−
A grid can be a useful way to display data, especially matrices of numbers. If the matrices are large, the full grid will be too big for the screen, so we will want to display it in modest proportions but allow the user to resize it and scroll about in it with the mouse.
 
  
−
Creating such a grid with wxSmith is easy once you know how, but figuring out how from the general documentation can consume many hours. But here is the secret in brief.
+
Like so many things related to computing, creating such a grid with wxSmith is easy once you know how, but figuring out how can consume many hours. What follows is a work in progress. At present, it shows how to create a grid with scroll bars with wxSmith and how to display it from a running program with the click of a button. But so far, the grid is all blank; putting data into it and getting that data displayed properly is the next step.
  
−
Create a basic wxWidgets application as described in preceding tutorials. Then click the “wxSmith” item in the Code::Blocks main menu. Add a wxDialog. (Do not be tempted to add a wxScrollingDialog; that is something altogether different with a special purpose. See the Julian Smart and Kevin Hock book ''Cross-Platform GUI Programming with wxWidgets.'') Call it MatGridDialog. The name does not matter, but that was the name I used and is the name for this dialog as shown in the accompanying pictures. (“Mat” was short for “matrix”.)
+
 
 +
Create a new wxWidgets application. Call it GridFrame  and make it frame-based. We don't want the grid showing all the time, only when we call it up. So we need to add a Frame or Dialog as we did back in Tutorial 4. I have not been able to make all the scrolling work  properly with a Dialog, so we will use a Frame.
  
−
Now in the “Management” pane on the left side of the Code::Blocks window, click on the “Resources” tab. You should see something like the first two lines of the picture below. Click on the “wxDialog” line, and – in the editor pane of Code::Blocks – drop a box sizer (found on the Layout tab) onto wxDialog. Onto it drop a wxPanel (from the Standard tab) and onto it another box sizer, and finally drop into the sizer a wxGrid from the Advanced tab.
+
 +
Click on the wxSmith tab of the CodeBlocks main menu and click “Add wxFrame”. Call it Barnum. (Why Barnum? I first used names with “grid” and “frame” but wxSmith also uses “frame” a lot and “grid” has a specific meaning. The names became very confusing; something unique was needed. P.T. Barnum was a famous American showman; since we are trying to show a grid that shows data, “Barnum” seemed as good choice as any.) Drop a box sizer into the frame. Into the sizer put a panel and check the panel's Expand property. Onto the panel drop another box sizer. Into it put a wxGrid from the “Advanced” tab of wxSmith. The lower part of the Management pane should now look as shown on the right.
 +
 +
Click on the wxGrid and set its number of columns to 20 and number of rows to 30; uncheck the Default size box and set the width to 400 and height to 300. (These numbers are in pixels. It is very important to unckeck that Default size box.) Click on + inside a □ next to the word Style to drop down a list of Style features; check the box for wxFullRepaintOnResize. Finally, check the Expand box. At this point you should see encouraging signs on the right; a grid has appeared.  
  
−
Now click on the wxDialog and use its Properties panel to clear the “Default size” square and to set the width to 500 and the height to 400. These numbers are in pixels. Their exact value does not matter much because the user will soon resize the box with the mouse, but this choice gives a starting point which we will actually narrow in a moment.
 
  
−
[[File:WxGridImage2.png]]
+
Now that we have a grid in our frame, we need a way to show it from the running program. The simplest way is to have a button which, when clicked, will show the frame and with the grid. So in the editor area of Code::Blocks click on the MatGridframe.wxs tab. Drop onto it box sizer and into the box sizer a panel, and onto the panel a button. Change the button's label to “ShowGrid” and double click the button.  
 +
You are thrown into MatGridMain.cpp. Down at the bottom of the file you will find that an empty frame has been created for you to specify what to do when that button is clicked. The frame looks like this:
  
−
Click on the left half of the Properties panel and with the down arrow key move down until you see the word Style and to its left a + sign in a little box. Click on the + sign and run the cursor down to be sure that the window has a Close and a Maximize button. Be sure to click the last item: Full_Repaint_ on_Resize. Do not give the dialog scrollbars; the wxGrid provides its own scrollbars.
+
void MatGridFrame::OnButton1Click(wxCommandEvent& event)
−
+
{
−
+
}
−
The next item down, the MatGridPanel, seems to require no change in its properties. We can even use the default size.
 
  
−
[[File:WxGridImage1.png]]
+
And you fill it in to look like this:
  
−
So proceed to click on the wxGrid in the Resources tab of the Management pane.
+
void MatGridFrame::OnButton1Click(wxCommandEvent& event)
−
In the Grid's properties, clear the Default size box and set the width and height to 300. Probably these numbers must be smaller than the corresponding numbers in the wxDialog above it.
+
{
 +
  Barnum *pt = new Barnum(this);
 +
  pt->Show();
 +
}
  
−
[[File:WxGridImage.png]]
+
(The choice of pt as the name of created instance is arbitrary; the letters are just old Barnum's initials. Everything else has to be just as it is.)
−
 
−
Click the + to the left of “Style” and click the Full_Repaint_on_Resize box. Finally, click the Expand box. It would not be there had we not put in BoxSizer2. Do not click any scrollbars.  
 
  
−
In the editor area, you should see the grid and the scrollbars should work. Click the “Show preview” button on the far right of the screen under the big red X. You should see the grid and the scrollbars should work.
+
There is one more thing that must be done before the program will compile. wxSmith created a header file to go with Barnum but it did not “include” it in the main program. We must do so. Run the scrollbar up to the top of MatGridMain.cpp. The first non-comment lines you see are these:
  
−
It seems to be important to avoid the use of the default sizes for the wxDialog and the grid, to keep the specified size of the grid well below that of the wxDialog, and not to use scrollbars on anything – because the grid always provides its own.
+
#include "wx_pch.h"
 +
#include "MatGridMain.h"
 +
#include <wx/msgdlg.h>
  
−
To display the grid from inside the C++ program, do something like this:
+
Just below them add:
 +
#include "Barnum.h"
  
−
    MatGridDialog *mgdlg = new MatGridDialog(this);
+
Now click the Code::Blocks “Build and run” button. The code should compile, link and begin executing. But only a small frame with a button labeled “Show Grid” appears. Click the button, and the  grid should appear and the scrollbars should work. You should be able to drag the edges or corners of the grid to enlarge it.
−
    mgdlg->ShowModal();
 
  
−
How to display data in the grid or get data from it may someday be explained here, though that actually goes beyond wxSmith.
+
Of course, there is nothing in the grid. That comes next.

Revision as of 07:46, 15 January 2017

Tutorial 10. Using wxGrid

A grid can be a useful way to display data, especially matrices of numbers. If the matrices are large, the full grid will be too big for the screen, so we will want to display it in modest proportions but allow the user to resize it or scroll about in it with the mouse.


Like so many things related to computing, creating such a grid with wxSmith is easy once you know how, but figuring out how can consume many hours. What follows is a work in progress. At present, it shows how to create a grid with scroll bars with wxSmith and how to display it from a running program with the click of a button. But so far, the grid is all blank; putting data into it and getting that data displayed properly is the next step.


Create a new wxWidgets application. Call it GridFrame and make it frame-based. We don't want the grid showing all the time, only when we call it up. So we need to add a Frame or Dialog as we did back in Tutorial 4. I have not been able to make all the scrolling work properly with a Dialog, so we will use a Frame.


Click on the wxSmith tab of the CodeBlocks main menu and click “Add wxFrame”. Call it Barnum. (Why Barnum? I first used names with “grid” and “frame” but wxSmith also uses “frame” a lot and “grid” has a specific meaning. The names became very confusing; something unique was needed. P.T. Barnum was a famous American showman; since we are trying to show a grid that shows data, “Barnum” seemed as good choice as any.) Drop a box sizer into the frame. Into the sizer put a panel and check the panel's Expand property. Onto the panel drop another box sizer. Into it put a wxGrid from the “Advanced” tab of wxSmith. The lower part of the Management pane should now look as shown on the right.

Click on the wxGrid and set its number of columns to 20 and number of rows to 30; uncheck the Default size box and set the width to 400 and height to 300. (These numbers are in pixels. It is very important to unckeck that Default size box.) Click on + inside a □ next to the word Style to drop down a list of Style features; check the box for wxFullRepaintOnResize. Finally, check the Expand box. At this point you should see encouraging signs on the right; a grid has appeared.


Now that we have a grid in our frame, we need a way to show it from the running program. The simplest way is to have a button which, when clicked, will show the frame and with the grid. So in the editor area of Code::Blocks click on the MatGridframe.wxs tab. Drop onto it box sizer and into the box sizer a panel, and onto the panel a button. Change the button's label to “ShowGrid” and double click the button. You are thrown into MatGridMain.cpp. Down at the bottom of the file you will find that an empty frame has been created for you to specify what to do when that button is clicked. The frame looks like this:

void MatGridFrame::OnButton1Click(wxCommandEvent& event) { }

And you fill it in to look like this:

void MatGridFrame::OnButton1Click(wxCommandEvent& event) { 

  Barnum *pt = new Barnum(this);
  pt->Show();

}

(The choice of pt as the name of created instance is arbitrary; the letters are just old Barnum's initials. Everything else has to be just as it is.)

There is one more thing that must be done before the program will compile. wxSmith created a header file to go with Barnum but it did not “include” it in the main program. We must do so. Run the scrollbar up to the top of MatGridMain.cpp. The first non-comment lines you see are these:

#include "wx_pch.h" #include "MatGridMain.h" #include <wx/msgdlg.h>

Just below them add: #include "Barnum.h"

Now click the Code::Blocks “Build and run” button. The code should compile, link and begin executing. But only a small frame with a button labeled “Show Grid” appears. Click the button, and the grid should appear and the scrollbars should work. You should be able to drag the edges or corners of the grid to enlarge it.

Of course, there is nothing in the grid. That comes next.

Retrieved from "https://wiki.codeblocks.org/index.php?title=Using_wxGrid&oldid=9202"