Code::Blocks - User contributions [en]

WxSmith tutorial: Drawing on the Screen and Saving Drawings

2015-08-03T13:18:27Z

Ensnarer: /* An Expandable Graph */

[[Category:wxSmith Documentation]]
=wxSmith Tutorial 8: Drawing on the Screen and Saving Drawings=

The main remaining tasks for these tutorials are to show how to
* draw, label, show, and save a graph, and
* how to redirect standard output, as from printf(), to a wxTextCtrl.

We will cover the first of these in this tutorial and the second in the next. Both of these subjects are more a question of using wxWidgets than of using wxSmith itself. However, it is not especially easy to extract the necessary information from other sources, so a unified presentation here may be helpful.

In this tutorial, we will draw the figure shown below on the screen and save it as both a .jpg and a .png file, which can be inserted into word processors such as Writer or MS Word.

[[Image:RedSquare.png]]

(The picture started out as just the red square, but that title suggested the Russian theme, so the name of the square in Cyrillic letters has been added.)

In wxWidgets, one always draws a graph on some kind of Device Context. From the point of view of a programmer using wxWidgets, a Device Context is a black box which spares us from having to know the details of how to send a graph to a printer, or to the screen, or to a bitmap and on to a .jpg file. Exactly the same code creates the graph for use on all three output devices. Let me illustrate with schematic code for our example.

<pre>
void Repin(wxDC dc){
… code to draw our picture on any device context …
}

// When Panel1 gets a “paint” message, draw our picture on it.

wxPaintDC dc( Panel1 );
Repin(dc);

/* To save our drawing to a file, we first create a bitmap, then
a memory DC, then hand the bitmap to the memory DC to use as
paper to draw on, then have Repin draw on it, then free the
bitmap from the DC, then make it write itself as a .jpg file.
Here are these steps in real code.
*/
// Create a bitmap 300 pixels wide and 200 pixels high.
// Call it "paper" because we will write on it.
wxBitmap *paper = new wxBitmap( 300,200);

// Create a memory Device Context
wxMemoryDC memDC;

// Tell memDC to write on “paper”.
memDC.SelectObject( *paper );

// Call Repin to draw our picture on memDC
Repin(memDC);

// Tell memDC to write on a fake bitmap;
// this frees up "paper" so that it can write itself to a file.
memDC.SelectObject( wxNullBitmap );

// Put the contents of "paper” into a png and into a jpeg file.
paper->SaveFile( _T("RedSquare.png"), wxBITMAP_TYPE_PNG,
(wxPalette*)NULL );
paper->SaveFile( _T("RedSquare.jpg"), wxBITMAP_TYPE_JPEG, (wxPalette*)NULL );
// Free the memory claimed for "paper".
delete paper;

</pre>

One and the same Repin() draws the picture both for output on the screen and for saving in a file. Here are the details of the code for Repin(). In reading them, bear in mind that the coordinates of points begin at (0, 0) in the ''upper'' left corner of the drawing rectangle and then go to the right for the first (or x) coordinate and ''down'' for the second (or y) coordinate. The comments, plus the result (seen above) should make clear what is happening.

<pre>
void Repin(wxDC &dc){
// with apology to Russian painter Ilya Repin (1846-1930)

// Clear the Device Context to all white
dc.SetBrush(*wxWHITE_BRUSH);
dc.Clear();

// Draw blue border around a white rectangle
//Create a blue pen 5 pixels wide to draw the border.
wxColor Blue(0,0,255);
wxPen myBluePen(Blue,5,wxSOLID);
// Tell dc to use it
dc.SetPen(myBluePen);
// and fill the inside with the current brush,which is white.
dc.DrawRectangle(0,0,300,200);

// Set the Brush and Pen to red
dc.SetBrush( *wxRED_BRUSH );
dc.SetPen(*wxRED_PEN );
// Draw rectangle 40 pixels wide and 40 high
// with upper left corner at 10 , 10.
dc.DrawRectangle( 10, 10, 40, 40 );

// Create a green pen 3 pixels wide drawing a solid line
wxPen myGreenPen(*wxGREEN,3,wxSOLID);
// Tell dc to start using this pen to draw.
dc.SetPen( myGreenPen );
// Draw a horizontal line
dc.DrawLine( 55, 40, 290, 40);

// Set the text foreground to black
dc.SetTextForeground( *wxBLACK);

// Put some Cyrillic text on the drawing
dc.DrawText(wxT("Красная площадь"), 50, 60);

// Create a 16 point, serif font, that is not bold,
// not italic, and not underlined.
wxFont BigFont(16,wxFONTFAMILY_ROMAN,wxNORMAL,wxNORMAL,false);
// Tell dc to use this font
dc.SetFont(BigFont);
// Write the title of our picture.
dc.DrawText(wxT("Red Square"), 60, 10);
}

</pre>

wxSmith doesn't help with this coding beyond providing an editor to do it with; it has to be done by hand in C++ using wxWidgets. I will add only that other options for the style of a wxPen, besides wxSOLID, are wxDOT, wxLONG_DASH, wxSHORT_DASH, wxDOT_DASH, and wxTRANSPARENT.

==Drawing on the Screen==

With Repin ready to paint, let's start a new project, call it Tutorial_8 and remember to add in the Close(). On the main form, put a box sizer; in the sizer put a panel; on the panel put another box sizer; and into it put two buttons, one labeled “Show” and the other labeled “Save”. For showing the graph on the screen, we will need a panel in a frame, so on the Code::Blocks main menu click the wxSmith item and pick “Add wxFrame”. When the window comes up asking for the Class Name and suggesting “NewFrame”, let's instead call it “PictureFrame” just for fun. Accept the other defaults suggested, and finish adding the frame. You will then be greeted by another field of dots, but they represent the new PictureFrame, not the main frame.

Before going further, we must fix up what happens to this frame when the user tries to close it. Double click on the field of dots. The C++ code associated with the frame appears. At the bottom of the file you should see these lines:

<pre>
void PictureFrame::OnClose(wxCloseEvent& event)
{
}
</pre>

This is where control comes when the user tries to close the PictureFrame window. As you can plainly see, nothing will happen; and the window will hang around until the main window is closed. If, however, we put into the body between the braces the Close() command as before, closing this window will close the whole application. Instead, we must put Destroy(), which will wipe out the present window, but not kill the whole program. So we should have:

<pre>
void PictureFrame::OnClose(wxCloseEvent& event)
{
Destroy();
}
</pre>

This is a good time to copy Repin() from the above box and place it just below the OnClose block of code.

Now come back to the field of dots (click on PictureFrame.wxs in the bar above the C++ code) and put on it a boxsizer and in the sizer put a panel. This panel is where we will draw our picture for viewing on the screen. In the properties browser, check its Expand box, uncheck Default size, and fill in Width as 310 and Height as 210. (Repin draws a 300 X 200 rectangle, so this gives him a little extra space around edges.)

We now need to add a bit of code for the Paint event for this panel. So click on the panel, click on the {} above the Properties browser, find EVT_PAINT (it should be at the top of the list), click on it, then click on the down arrow at the right edge of the line, and pick Add new handler. Accept the suggested name and click OK.

You find yourself right back in PictureFrame.cpp just below where you put Repin() and presented with the following frame for writing the code to handle this event:

<pre>
void PictureFrame::OnPanel1Paint(wxPaintEvent& event)
{
}
</pre>

We need only add two lines in the middle of the frame, as shown here:

<pre>
void PictureFrame::OnPanel1Paint(wxPaintEvent& event)
{
wxPaintDC dc( Panel1 );
Repin(dc);
}
</pre>

The first of those two lines says that dc is going to draw on Panel1 whenever the operating system paints the panel. It will do so when its frame is first displayed, or moved, or resized, or uncovered after being covered. The second line calls Repin to paint for us.

Now we just have to make the Show button on the main window display the panel in PictureFrame. So click on Tutorial_8Frame.wks in the line above the code editor to get back to the main window; go nearly to the top and add under the first group of #include statements

#include "PictureFrame.h"

so that with the neighboring statements it looks like this:

<pre>
. . .
#include <wx/msgdlg.h>
#include "PictureFrame.h"

//(*InternalHeaders(Tutorial_8Frame)

</pre>

This “include” has to be added because otherwise the main program would not know about the panel it is supposed to open in PictureFrame.cpp.

We already have the “Show” button; we just have to add a handler for its OnClick event. Double click on the button. The frame for adding the event handler for the button opens up and we fill it in as follows:

<pre>
void Tutorial_8Frame::OnButton1Click(wxCommandEvent& event)
{
PictureFrame* frm = new PictureFrame(this);
frm->Show();
}

</pre>
At last, we have a program we can build and run. Click the Code::Blocks build-and-run icon, and you should soon see the Repin's work on the screen.

==Save the Picture as PNG and JPEG Files==

We will save the drawing to a PNG and to a JPEG file in response to a click on the “Save” button. Double click on the button and the frame opens up for the code to respond to the click. Add into the frame the code shown above. The end result is as follows:

<pre>
void Tutorial_8Frame::OnButton2Click(wxCommandEvent& event)
{
/* To save our drawing to a file, we first create a bitmap, then
a memory DC, then hand the bitmap to the memory DC to use as
paper to draw on, then have Repin draw on it, then free the
bitmap from the DC and make it write itself as a .jpg file.
*/
// Create a bitmap 300 pixels wide and 200 pixels high.
// Call it "paper" because we will write on it.
wxBitmap *paper = new wxBitmap( 300,200);

// Create a memory Device Context
wxMemoryDC memDC;

// Tell memDC to write on “paper”.
memDC.SelectObject( *paper );

// Call Repin to draw our picture on memDC
Repin(memDC);

// Tell memDC to write on a fake bitmap;
// this frees up "paper" so that it can write itself to a file.
memDC.SelectObject( wxNullBitmap );

// Put the contents of "paper” into a png and into a jpeg file.
paper->SaveFile( _T("RedSquare.png"), wxBITMAP_TYPE_PNG,
(wxPalette*)NULL );
paper->SaveFile( _T("RedSquare.jpg"), wxBITMAP_TYPE_JPEG,
(wxPalette*)NULL );

delete paper;
}
</pre>

Click the build-and-run icon, click the Save button, start your word processor, and insert either the JPEG or the PNG file.

''(for the above to compile successfully, you need to add a function prototype so that Repin() is visible to Tutorial_8Main.cpp. add the line void Repin(wxDC &dc); to the end of PictureFrame.h, before the end header guard. [[User:Ensnarer|Ensnarer]] 03.08.2015)''

==An Expandable Graph==

When we clicked the Show button, we could drag the size of the window, but the size of the drawing was not affected. Let's add another button, call it Stretch, and draw a figure which does change size and proportions as the user adjusts the size of the box in which it is displayed. The figure will be a red rectangle with a green border of fixed width.

As before, on the Code::Blocks main menu, pick wxSmith | Add wxFrame; accept the suggested name for the frame, namely NewFrame. Fill in the OnClose code frame with Destroy(), as before. On the frame, put a box sizer; in the sizer put a panel and in the properties browser make the panel 200 wide and 200 high. Be sure to click the Expand property. Change the property browser to the event browser by clicking on the {} icon, find the Paint event, click on the drop-down arrow on the right of the line, and choose “Add new handler”. In the code frame which appears add code to get the following:

<pre>
void NewFrame::OnPanel1Paint(wxPaintEvent& event)
{
wxPaintDC dc( Panel1 );

dc.SetPen( wxPen( *wxGREEN, 5 ) ); // Greem pen 5 pixels wide
dc.SetBrush(*wxRED_BRUSH);

// Get window dimensions
wxSize sz = GetClientSize();

// Our rectangle dimensions
wxCoord w = sz.x/2 , h = sz.y/2;

// Center the rectangle on the window, but never
// draw at a negative position.
int x = wxMax(0, (sz.x - w)/2);
int y = wxMax(0, (sz.y - h)/2);

wxRect rectToDraw(x, y, w, h);
dc.DrawRectangle(rectToDraw);
}

</pre>

This code has introduced several new wxWidgets constructs: wxSize, wxCoord, wxRect, and the wxMax function. What they mean is clear enough from the name and the way they are used here. The C++ function GetClientSize() is, of course, the key to making the size of the drawing depend on the size of the window it is drawing into.

Now back in the code for the main window, add in the #include "NewFrame.h" line at the the top. Then make wxSmith give you the code frame for the new button labeled “Stretch”. In that code frame add lines to make the whole look like this:

<pre>
void Tutorial_8Frame::OnButton3Click(wxCommandEvent& event)
{
NewFrame* ffrm = new NewFrame(this);
ffrm->Show();
}
</pre>

Click the Code::Blocks build-and-run icon. Click the “Stretch” button. You should get the picture of the red rectangle with a green border. Now try changing the the size of the window. H'mmm – the rectangle does not change. How disappointing! What have we forgotten?

Look back at the properties of the panel on which we drawing. We have Expand checked, so that is not the trouble. Well down the list, there is a cryptic item called Style with a + sign in a box to the left of it. Click on that + sign. A long list of properties appears. The last one is wxFULL_REPAINT_ON_RESIZE. That sounds promising. Check its box, rebuild and run. Click the Stretch button. You should see the image as before. Use the mouse to change the size of the window, and, lo, the image adjusts to the size of the window.

----

<center>'''[[WxSmith tutorial: Creating items with custom paint and mouse handling|Previous]] | [[WxSmith tutorials|Index]] | [[WxSmith tutorial: Keyboard Input and Displaying Results|Next]]'''</center>

WxSmith tutorial: Drawing on the Screen and Saving Drawings

2015-08-03T12:56:23Z

Ensnarer: /* Save the Picture as PNG and JPEG Files */

[[Category:wxSmith Documentation]]
=wxSmith Tutorial 8: Drawing on the Screen and Saving Drawings=

The main remaining tasks for these tutorials are to show how to
* draw, label, show, and save a graph, and
* how to redirect standard output, as from printf(), to a wxTextCtrl.

We will cover the first of these in this tutorial and the second in the next. Both of these subjects are more a question of using wxWidgets than of using wxSmith itself. However, it is not especially easy to extract the necessary information from other sources, so a unified presentation here may be helpful.

In this tutorial, we will draw the figure shown below on the screen and save it as both a .jpg and a .png file, which can be inserted into word processors such as Writer or MS Word.

[[Image:RedSquare.png]]

(The picture started out as just the red square, but that title suggested the Russian theme, so the name of the square in Cyrillic letters has been added.)

In wxWidgets, one always draws a graph on some kind of Device Context. From the point of view of a programmer using wxWidgets, a Device Context is a black box which spares us from having to know the details of how to send a graph to a printer, or to the screen, or to a bitmap and on to a .jpg file. Exactly the same code creates the graph for use on all three output devices. Let me illustrate with schematic code for our example.

<pre>
void Repin(wxDC dc){
… code to draw our picture on any device context …
}

// When Panel1 gets a “paint” message, draw our picture on it.

wxPaintDC dc( Panel1 );
Repin(dc);

/* To save our drawing to a file, we first create a bitmap, then
a memory DC, then hand the bitmap to the memory DC to use as
paper to draw on, then have Repin draw on it, then free the
bitmap from the DC, then make it write itself as a .jpg file.
Here are these steps in real code.
*/
// Create a bitmap 300 pixels wide and 200 pixels high.
// Call it "paper" because we will write on it.
wxBitmap *paper = new wxBitmap( 300,200);

// Create a memory Device Context
wxMemoryDC memDC;

// Tell memDC to write on “paper”.
memDC.SelectObject( *paper );

// Call Repin to draw our picture on memDC
Repin(memDC);

// Tell memDC to write on a fake bitmap;
// this frees up "paper" so that it can write itself to a file.
memDC.SelectObject( wxNullBitmap );

// Put the contents of "paper” into a png and into a jpeg file.
paper->SaveFile( _T("RedSquare.png"), wxBITMAP_TYPE_PNG,
(wxPalette*)NULL );
paper->SaveFile( _T("RedSquare.jpg"), wxBITMAP_TYPE_JPEG, (wxPalette*)NULL );
// Free the memory claimed for "paper".
delete paper;

</pre>

One and the same Repin() draws the picture both for output on the screen and for saving in a file. Here are the details of the code for Repin(). In reading them, bear in mind that the coordinates of points begin at (0, 0) in the ''upper'' left corner of the drawing rectangle and then go to the right for the first (or x) coordinate and ''down'' for the second (or y) coordinate. The comments, plus the result (seen above) should make clear what is happening.

<pre>
void Repin(wxDC &dc){
// with apology to Russian painter Ilya Repin (1846-1930)

// Clear the Device Context to all white
dc.SetBrush(*wxWHITE_BRUSH);
dc.Clear();

// Draw blue border around a white rectangle
//Create a blue pen 5 pixels wide to draw the border.
wxColor Blue(0,0,255);
wxPen myBluePen(Blue,5,wxSOLID);
// Tell dc to use it
dc.SetPen(myBluePen);
// and fill the inside with the current brush,which is white.
dc.DrawRectangle(0,0,300,200);

// Set the Brush and Pen to red
dc.SetBrush( *wxRED_BRUSH );
dc.SetPen(*wxRED_PEN );
// Draw rectangle 40 pixels wide and 40 high
// with upper left corner at 10 , 10.
dc.DrawRectangle( 10, 10, 40, 40 );

// Create a green pen 3 pixels wide drawing a solid line
wxPen myGreenPen(*wxGREEN,3,wxSOLID);
// Tell dc to start using this pen to draw.
dc.SetPen( myGreenPen );
// Draw a horizontal line
dc.DrawLine( 55, 40, 290, 40);

// Set the text foreground to black
dc.SetTextForeground( *wxBLACK);

// Put some Cyrillic text on the drawing
dc.DrawText(wxT("Красная площадь"), 50, 60);

// Create a 16 point, serif font, that is not bold,
// not italic, and not underlined.
wxFont BigFont(16,wxFONTFAMILY_ROMAN,wxNORMAL,wxNORMAL,false);
// Tell dc to use this font
dc.SetFont(BigFont);
// Write the title of our picture.
dc.DrawText(wxT("Red Square"), 60, 10);
}

</pre>

wxSmith doesn't help with this coding beyond providing an editor to do it with; it has to be done by hand in C++ using wxWidgets. I will add only that other options for the style of a wxPen, besides wxSOLID, are wxDOT, wxLONG_DASH, wxSHORT_DASH, wxDOT_DASH, and wxTRANSPARENT.

==Drawing on the Screen==

With Repin ready to paint, let's start a new project, call it Tutorial_8 and remember to add in the Close(). On the main form, put a box sizer; in the sizer put a panel; on the panel put another box sizer; and into it put two buttons, one labeled “Show” and the other labeled “Save”. For showing the graph on the screen, we will need a panel in a frame, so on the Code::Blocks main menu click the wxSmith item and pick “Add wxFrame”. When the window comes up asking for the Class Name and suggesting “NewFrame”, let's instead call it “PictureFrame” just for fun. Accept the other defaults suggested, and finish adding the frame. You will then be greeted by another field of dots, but they represent the new PictureFrame, not the main frame.

Before going further, we must fix up what happens to this frame when the user tries to close it. Double click on the field of dots. The C++ code associated with the frame appears. At the bottom of the file you should see these lines:

<pre>
void PictureFrame::OnClose(wxCloseEvent& event)
{
}
</pre>

This is where control comes when the user tries to close the PictureFrame window. As you can plainly see, nothing will happen; and the window will hang around until the main window is closed. If, however, we put into the body between the braces the Close() command as before, closing this window will close the whole application. Instead, we must put Destroy(), which will wipe out the present window, but not kill the whole program. So we should have:

<pre>
void PictureFrame::OnClose(wxCloseEvent& event)
{
Destroy();
}
</pre>

This is a good time to copy Repin() from the above box and place it just below the OnClose block of code.

Now come back to the field of dots (click on PictureFrame.wxs in the bar above the C++ code) and put on it a boxsizer and in the sizer put a panel. This panel is where we will draw our picture for viewing on the screen. In the properties browser, check its Expand box, uncheck Default size, and fill in Width as 310 and Height as 210. (Repin draws a 300 X 200 rectangle, so this gives him a little extra space around edges.)

We now need to add a bit of code for the Paint event for this panel. So click on the panel, click on the {} above the Properties browser, find EVT_PAINT (it should be at the top of the list), click on it, then click on the down arrow at the right edge of the line, and pick Add new handler. Accept the suggested name and click OK.

You find yourself right back in PictureFrame.cpp just below where you put Repin() and presented with the following frame for writing the code to handle this event:

<pre>
void PictureFrame::OnPanel1Paint(wxPaintEvent& event)
{
}
</pre>

We need only add two lines in the middle of the frame, as shown here:

<pre>
void PictureFrame::OnPanel1Paint(wxPaintEvent& event)
{
wxPaintDC dc( Panel1 );
Repin(dc);
}
</pre>

The first of those two lines says that dc is going to draw on Panel1 whenever the operating system paints the panel. It will do so when its frame is first displayed, or moved, or resized, or uncovered after being covered. The second line calls Repin to paint for us.

Now we just have to make the Show button on the main window display the panel in PictureFrame. So click on Tutorial_8Frame.wks in the line above the code editor to get back to the main window; go nearly to the top and add under the first group of #include statements

#include "PictureFrame.h"

so that with the neighboring statements it looks like this:

<pre>
. . .
#include <wx/msgdlg.h>
#include "PictureFrame.h"

//(*InternalHeaders(Tutorial_8Frame)

</pre>

This “include” has to be added because otherwise the main program would not know about the panel it is supposed to open in PictureFrame.cpp.

We already have the “Show” button; we just have to add a handler for its OnClick event. Double click on the button. The frame for adding the event handler for the button opens up and we fill it in as follows:

<pre>
void Tutorial_8Frame::OnButton1Click(wxCommandEvent& event)
{
PictureFrame* frm = new PictureFrame(this);
frm->Show();
}

</pre>
At last, we have a program we can build and run. Click the Code::Blocks build-and-run icon, and you should soon see the Repin's work on the screen.

==Save the Picture as PNG and JPEG Files==

We will save the drawing to a PNG and to a JPEG file in response to a click on the “Save” button. Double click on the button and the frame opens up for the code to respond to the click. Add into the frame the code shown above. The end result is as follows:

<pre>
void Tutorial_8Frame::OnButton2Click(wxCommandEvent& event)
{
/* To save our drawing to a file, we first create a bitmap, then
a memory DC, then hand the bitmap to the memory DC to use as
paper to draw on, then have Repin draw on it, then free the
bitmap from the DC and make it write itself as a .jpg file.
*/
// Create a bitmap 300 pixels wide and 200 pixels high.
// Call it "paper" because we will write on it.
wxBitmap *paper = new wxBitmap( 300,200);

// Create a memory Device Context
wxMemoryDC memDC;

// Tell memDC to write on “paper”.
memDC.SelectObject( *paper );

// Call Repin to draw our picture on memDC
Repin(memDC);

// Tell memDC to write on a fake bitmap;
// this frees up "paper" so that it can write itself to a file.
memDC.SelectObject( wxNullBitmap );

// Put the contents of "paper” into a png and into a jpeg file.
paper->SaveFile( _T("RedSquare.png"), wxBITMAP_TYPE_PNG,
(wxPalette*)NULL );
paper->SaveFile( _T("RedSquare.jpg"), wxBITMAP_TYPE_JPEG,
(wxPalette*)NULL );

delete paper;
}
</pre>

Click the build-and-run icon, click the Save button, start your word processor, and insert either the JPEG or the PNG file.

''(for the above to compile successfully, you need to add a function prototype so that Repin() is visible to Tutorial_8Main.cpp. add the line void Repin(wxDC &dc); to the end of PictureFrame.h, before the end header guard. [[User:Ensnarer|Ensnarer]] 03.08.2015)''

==An Expandable Graph==

When we clicked the Show button, we could drag the size of the window, but the size of the drawing was not affected. Let's add another button, call it Stretch, and draw a figure which does change size and proportions as the user adjusts the size of the box in which it is displayed. The figure will be a red rectangle with a green border of fixed width.

As before, on the Code::Blocks main menu, pick wxSmith | Add wxFrame; accept the suggested name for the frame, namely NewFrame. Fill in the OnClose code frame with Destroy(), as before. On the frame, put a box sizer; in the sizer put a panel and in the properties browser make the panel 200 wide and 200 high. Be sure to click the Expand property. Change the property browser to the event browser by clicking on the {} icon, find the OnPaint event, click on the drop-down arrow on the right of the line, and choose “Add new handler”. In the code frame which appears add code to get the following:

<pre>
void NewFrame::OnPanel1Paint(wxPaintEvent& event)
{
wxPaintDC dc( Panel1 );

dc.SetPen( wxPen( *wxGREEN, 5 ) ); // Greem pen 5 pixels wide
dc.SetBrush(*wxRED_BRUSH);

// Get window dimensions
wxSize sz = GetClientSize();

// Our rectangle dimensions
wxCoord w = sz.x/2 , h = sz.y/2;

// Center the rectangle on the window, but never
// draw at a negative position.
int x = wxMax(0, (sz.x - w)/2);
int y = wxMax(0, (sz.y - h)/2);

wxRect rectToDraw(x, y, w, h);
dc.DrawRectangle(rectToDraw);
}

</pre>

This code has introduced several new wxWidgets constructs: wxSize, wxCoord, wxRect, and the wxMax function. What they mean is clear enough from the name and the way they are used here. The C++ function GetClientSize() is, of course, the key to making the size of the drawing depend on the size of the window it is drawing into.

Now back in the code for the main window, add in the #include "NewFrame.h" line at the the top. Then make wxSmith give you the code frame for the new button labeled “Stretch”. In that code frame add lines to make the whole look like this:

<pre>
void Tutorial_8Frame::OnButton3Click(wxCommandEvent& event)
{
NewFrame* ffrm = new NewFrame(this);
ffrm->Show();
}
</pre>

Click the Code::Blocks build-and-run icon. Click the “Stretch” button. You should get the picture of the red rectangle with a green border. Now try changing the the size of the window. H'mmm – the rectangle does not change. How disappointing! What have we forgotten?

Look back at the properties of the panel on which we drawing. We have Expand checked, so that is not the trouble. Well down the list, there is a cryptic item called Style with a + sign in a box to the left of it. Click on that + sign. A long list of properties appears. The last one is wxFULL_REPAINT_ON_RESIZE. That sounds promising. Check its box, rebuild and run. Click the Stretch button. You should see the image as before. Use the mouse to change the size of the window, and, lo, the image adjusts to the size of the window.

----

<center>'''[[WxSmith tutorial: Creating items with custom paint and mouse handling|Previous]] | [[WxSmith tutorials|Index]] | [[WxSmith tutorial: Keyboard Input and Displaying Results|Next]]'''</center>

WxSmith tutorial: Accessing items in resource

2015-08-03T12:09:26Z

Ensnarer: /* Using the Value from wxSlider to Change Font Size */

[[Category:wxSmith Documentation]]
= Accessing Components in a Form =

Welcome to the next tutorial. This time I'll show you how to access items in a resource. I'll show you some basics - for example how to read data from text boxes, change labels, and some more advanced things like changing colours and fonts while the application is running. As usual we will start with an empty application. You shouldn't have any problems with it - all instructions are in the first tutorial.

== Setting Up the Form ==

In this tutorial we will work on items so let's add some:

[[Image:wxs_tut06_001.png]]

In this form, there is a wxBoxSizer, and in it a wxPanel, and on the panel, a wxFlexGridSizer with 2 columns, both growable. (In the Growable property of the sizer, put “0, 1” without the quote marks. )The following array shows which wxWidgets are where in the window.
<pre>
wxStaticText wxButton
wxTextCtrl wxButton
wxGuage wxButton
wxStaticText wxSlider
wxStaticText wxButton
</pre>

All widgets and the wxPanel behind them have their Expand property checked.

Here is what we want to make the buttons do:
*The button in the first row will change the text in the static text left of it.
*The button in the second row will read whatever text the user has written into the TextCtrl left of it and display that text in a message box.
*The button in the third row will advance the gauge to the left of it by one tenth of the distance across the gauge, thus simulating a typical progress bar.
*Moving the slider in the fourth row will change the size of the font in the static text just left of it.
* A click on the button in the bottom row will allow the user to change the color of the text in the StaticText control just left of it.

== Accessing Components through their Member Functions ==

If you add an item to the form in the editor, in most cases wxSmith will add a new member variable into the form's C++ class. All those members are listed in the header file, in our present case, the file ''Tutorial_6Main.h''. They are between wxSmith's special comments: ''//(*Declarations...'' and ''//*)''. The list should look like this:

<pre>
...
class Tutorial_6Frame: public wxFrame
{
...

//(*Declarations(Tutorial_6Frame)
wxSlider* Slider1;
wxButton* Button4;
wxStaticText* StaticText2;
wxButton* Button1;
wxGauge* Gauge1;
wxStaticText* StaticText1;
wxStaticText* StaticText3;
wxButton* Button2;
wxButton* Button3;
wxStatusBar* StatusBar1;
wxTextCtrl* TextCtrl1;
//*)
...
};
...
</pre>
Each component which has such a member variable will also have the following properties:
* '''Var name''' - name of the used variable
* '''Is member''' - switch whether this item should be accessible through a class member variable

So if you want to change the name used to access the item, '''Var name''' is the right property to change.

wxSmith forces a few restrictions on variable names. The most obvious is that each variable name must be a valid C++ identifier, so you cannot use special characters or even spaces. Another limitation is that variable names must be unique.

If the name is invalid, wxSmith will automatically replace it with a name that matches the criteria.

== Changing the Label in wxStaticText ==

Let's do a basic exercise. When we click the “Change label” button, we want the program to change the label of the first wxStaticText control to “Label changed”. To make it do so, double click on the button to generate an event handler and change the code to the following:

<pre>
void Tutorial_6Frame::OnButton1Click(wxCommandEvent& event)
{
StaticText1->SetLabel(_("Label changed"));
Layout();
}
</pre>

In the first line of the function body, we used the '''SetLabel()''' function to change the text of the label. Because the length of the text changes, we must recalculate positions, which is done by calling the '''Layout()''' function.

Static items (those which can't be changed by the user) usually have two functions: GetLabel and SetLabel which read and write content presented by this item.

You may wonder why we used some weird notation for the string:
_("Label changed")
instead of a simple
"Label changed"

There are two advantages of this device:
* By adding _(...) around our string we prepare our application for the translation process. wxWidgets can help in developing multi-language applications. When a translation is being made, wxWidgets will automatically search for the translation of the phrase "Label changed" in a database of equivalent strings in the source and target languages.

* wxWidgets may be provided in two versions: with Unicode support and without it (ANSI build). In the case of a Unicode version, we would have to use Unicode strings: '''L"Label changed"''' and in case of the ANSI version we would have to use standard string notation: '''"Label changed"'''. Using the '''_(...)''' macro insures that no matter what wxWidgets version is used, it will always produce the proper code.

There's an alternative version of the string macro which works similarly to _(...) which is written in the form _T(...) or wxT(...). It works like the _() one but the string is never translated.

== Reading the Value from wxTextCtrl ==

Now let's read something that's written by the user. We will use the wxTextCtrl (with variable TextCtrl1) for this and show the text using a standard message box. Let's double click the '''Read text''' button and change the code to the following:

<pre>
void Tutorial_6Frame::OnButton2Click(wxCommandEvent& event)
{
wxString Text = TextCtrl1->GetValue();
wxMessageBox(_("User entered text:\n") + Text);
}
</pre>

In the first line, we read the value from the TextCtrl and store it in a variable called Text and of the type wxString. wxString is the wxWidgets implementation of a string class and this library uses it as a base for string representation.

In the second line, we call the '''wxMessageBox''' function which shows a standard message box just as if it were a modal dialog.

Usually items which provide content entered by the user have two member functions: GetValue and SetValue. You can use them to read and write the content of such items.

== Changing the value of wxGauge ==

Now let's combine reading and writing of a component's value in one function. We will use wxGauge for this. We will use it's two member functions: GetValue and SetValue. I've written earlier that those functions usually exist in items where the user can enter some value. Well, that rule is not without exceptions as we will now see as we write the handler for the third button. Double click the button and fill in the handler as follows:

void Tutorial_6Frame::OnButton3Click(wxCommandEvent& event)
{
int NewValue = Gauge1->GetValue()+10;
if ( NewValue > 100 ) NewValue = 0;
Gauge1->SetValue(NewValue);
}

In the first line, we generate a new progress value by reading the current one and adding 10 to it. In the second line, we prevent the value from getting out of range. (By default, wxGauge has a range set to 0...100. These values can be changed in the Properties browser.) In the third line, we write the new value into the gauge.

== Using the Value from wxSlider to Change Font Size ==

Now let's do something more advanced. In our resource there is a wxSlider and text saying that it changes font size. We will change the font of this label. But we will have to update the font size in two steps:

* As long as the user drags the slider we should change the font size only
* When the user finishes dragging we should layout the window because the size of the text changes

wxSlider provides two events that can be used precisely for this purpose. The first is '''EVT_COMMAND_SCROLL_THUMB_TRACK''' which is fired while dragging the slider. The second is '''EVT_COMMAND_SCROLL_THUMB_RELEASE''' which is fired when the user finishes dragging.

Because we are using events which are not default for the slider, double clicking on the slider will not work -- as it did with buttons -- to create a frame for the handler. We have to add the two handlers through the Properties browser. You can switch between editing standard properties and editing events by clicking on buttons at the top of browser:

[[Image:wxs_tut06_002.png]].

When you have switched to events, search for the required events and choose '''Add new handler''' from the drop-down list.

Here's the code for the '''EVT_COMMAND_SCROLL_THUMB_TRACK''' handler:

void Tutorial_6Frame::OnSlider1CmdScrollThumbTrack(wxScrollEvent& event)
{
wxFont Font = StaticText2->GetFont();
Font.SetPointSize( Slider1->GetValue() );
StaticText2->SetFont(Font);
}

Here we get the font used by the StaticText control by using the '''GetFont()''' function, change the font's size by using '''SetPointSize()''' and write the font back by using the '''SetFont()''' function. '''GetFont()''' and '''SetFont()''' are available for most components.

Now let's code '''EVT_COMMAND_SCROLL_THUMB_RELEASE''':

void Tutorial_6Frame::OnSlider1CmdScrollThumbRelease(wxScrollEvent& event)
{
Layout();
GetSizer()->SetSizeHints(this);
}

In the first line, we adapt the positions of items to the new font size just as in the case of changing the label in wxStaticText. In the second line, we recalculate the minimal size of the window making sure that all items will have enough space.

(''Use Panel1.GetSizer()->SetSizeHints(this);for the second line in the above statement, where Panel1 is the name of the base panel in your frame.The original code, rather than resize to the new required size, just resizes to the original, default size.[[User:Ensnarer|Ensnarer]] 03.08.2015'')

== Changing a Component's Color ==

The last thing we will do in this tutorial is to change the color of some item. As in the case of fonts we will change the label on the left side of the '''Change''' button. Since we will use the standard event of this button, we can add an event handler by double-clicking on it. And here's the code:

void Tutorial_6Frame::OnButton4Click(wxCommandEvent& event)
{
wxColour OldColour = StaticText3->GetForegroundColour();
wxColour NewColour = wxGetColourFromUser(this,OldColour);

if ( NewColour.IsOk() )
{
StaticText3->SetForegroundColour(NewColour);
Refresh();
}
}

(wxWidets originated in Edinburgh and therefore uses some quaint spellings going back to Anglo-Norman times.) At the beginning we read the current color into the variable '''OldColour'''. In the next line, we call the '''wxGetColourFromUser''' function which opens a dialog where the user can choose a colour.

At the end, we set the new colour by using the '''SetForegroundColour''' function. Refresh is needed to change colour after setting it.

If, however, you try to compile this code, you will get an error message telling you that wxGetColourFromUser() is an unknown function. Since we put it in manually, we must also put in manually its header. So open the Tutorial_6Main.h file and add #include <wx/colordlg.h>.

The NewColour.IsOk() call is used because if the user cancels the colour selection it will return false.
But on the Ubuntu Linux 11.10 installation of wxWidgets, the wxColour class did not have an IsOk() funtion, so in fact you must remove this call. According to wxWidgets documentation, the wxColour class '''does''' indeed have the IsOk() member function, but it was not found.

== More information ==

We've reached the end of this tutorial. I showed only a few operations on typical components; there is much more you can do. For more details you can check wxWidgets' documentation available [http://www.wxwidgets.org/manuals/stable/wx_contents.html here].

----

<center>'''[[WxSmith tutorial: Using wxPanel resources|Previous]] | [[WxSmith tutorials|Index]] | [[WxSmith tutorial: Creating items with custom paint and mouse handling|Next]]'''</center>

WxSmith tutorial: Hello world

2015-08-03T12:05:56Z

Ensnarer:

[[Category:wxSmith Documentation]]
= Tutorial 1. "Hello, World!" =

In this first tutorial, we will use wxSmith to put the words "Hello, World!" on the screen. Ever since the appearance of ''The C Programming Language'' in 1978, writing such a program has been the traditional first step in learning nearly every computer language.

Before we start, you must either compile wxWidgets or download precompiled binaries and header files. These steps are described on the wiki pages mentioned here:
* Windows users should see the wiki page:[[Compiling wxWidgets 2.8.6 to develop Code::Blocks (MSW)]] or [[Installing Code::Blocks from source on Windows]] or [[WxWindowsQuickRef]]. There are two ways to install the wxWidgets libraries, You can download the wxWidgets source and compile it yourself, or you can download the wxPack from [http://wxpack.sourceforge.net/] and install it. The wxPack contains a pre-compiled wxWidgets library, so you can save a lot of time by that route.

*Ubuntu Linux users can install wxWidgets from the Ubuntu repositories. Be sure to install also '''build-essential''' to get the C++ compiler.

We will assume that you have wxWidgets ready and working with Code::Blocks. You should probably create a directory with a name something like CBProjects for saving your work on these tutorials. Each tutorial will be a separate "project" and will occupy a file in this directory.

After downloading and installing Code::Blocks, double-click its icon on the desktop to start it. Here is the Code::Blocks opening window:

[[Image:1a.png]]

Click "Create a New Project" and then find and double-click the wxWidgets Project icon, pointed to by the cursor in the screenshot below.

[[Image:wxs_tut01_002.png]]

The next screen is a "Welcome" screen. Unless you just enjoy being welcomed by the program, you will check the box which eliminates it on future startups.

The next screen looks like this:

[[Image:wxs_tut01_003.png]]

Select wxWidgets 2.8x and click the "Next >" button at the bottom of the screen.

That brings you to the window where you specify the Project title and folder where you want to save the project. Other fields are then filled automatically. I chose “Plain” as the Project title and the other fields then adjusted to look like this:

[[Image:1c.png]]

Then click the “Next >” button at the bottom.
The next screen, shown below, allows you to mark your work with your identity. Fill in what you wish.

[[Image:1d.png]]

That brings up the window for choosing the GUI builder you want to use, wxSmith or FormBuilder. We choose, of course, wxSmith.

[[Image:1e.png]]

Click the "Next" button at the bottom.

The next screen specifies what C++ compiler we want to use and whether we want a debug build (with extra code for debugging) or a smaller release build for use by others. We will go for the GNU CPP compiler and both build options, to be put in separate subfolders.

[[Image:1f.png]]

The final screen of this sort asks whether we want to use the standard, default, configuration or to use Advanced options. We will take the default. But, at the bottom, we choose to “Create and use precompiled headers" which speeds up compilations after the first.

[[Image:1g.png]]

In wxWidgets 3.0.2 the screen looks like this. [[User:WardXmodem|WardXmodem]] 21:38, 20 May 2015 (CEST)

[[Image:1g_3.0.2.png]]

On the form where we chose the directory for saving the project, we chose a real directory, but that choice may lead to problems when you want to compile your project on other computers. Another choice is to use the '''Global Variable system'''. To open the dialog below or modify or change this global variable, you should click on the Code::Blocks main menu item '''Settings | Global variables'''. That brings up the Global Variables Editor.

When you use it, the location of the wxWidgets library is read from the variable you supply. This means that the location of the wxWidgets directory is not hard-coded inside your project, but is stored inside the global configuration of Code::Blocks. When your project is opened on a different computer, it will use that comoputer's configuration. The easiest option to use this global variable is to leave ''$(#wx)'' which means to use the global variable named ''wx''. This name is reserved for wxWidgets and should be chosen in most cases.

When you use the global variable for the first time, it will ask for the wxWidgets directory. The only thing you need to do here is to enter a valid location in ''base'' field. This is required only for the first time since Code::Blocks will automatically use this setting for other projects you create.

==Overview of the Interactive Development Environment (IDE)==

At the end of this preliminary sequence of forms we come to the Code::Blocks main IDE window. It should look something like this:

[[Image:1h.png]]

In the middle of the right side of the window, under the word “Plainframe.wxs”, is a panel
with two square icons on the left; the one on the left brings up the menu bar editor while the one on the right brings up the status bar editor. We will return to the menu bar editor in the next tutorial. Below this panel and looking like a field of dots is the Editor window, where we will see both the GUI forms which we build and the C++ code we write. In the lower left corner of the whole window is the Properties/Events window, which will allow us to set properties of the component we are working on or to pick events, such as “OnClick” , to which we need to respond. To show properties, click on the left icon; to show events, click on the right icon marked {} to suggest C++ code.

Above the Properties/Events window is the Management window with three tabs, Projects, Symbols, and Resources. If all three tabs are not visible, drag the right border of the window to the right to reveal all three. (A “resource” in wxSmith parlance usually means a “form” or "window".) Above the Management window is a panel with several small but useful icons ([[Image:build-etc-icons.png]]) to
*Build the program, or
*Run it, or
*Build and run it, or
*Rebuild it, or
*Abort it.<br />
When you run the cursor over them, the tool tips will tell you which is which.

Now look back to the Editor window. First of all, note that the window can be configured to use different colors,fonts and font sizes. Click "Settings ..." on the Code::Blocks main menu, and then "Editor". The screens are more or less self-explanatory.

Now back to the Editor window. Across the top you see three black square called drag handles. They have been set to cover a space larger than can be seen, but scrolling down reveals the whole field.

As an experienced programmer, you know there has got to be some code somewhere but you don't see it. To reveal it, double left click in the field of dots. Presto, there is the C++ code, and the *PlainMain.cpp tab has appeared above it. Clicking back on the Plainframe.wxs should return you to the view of the form, still the field of dots. (Again, it is important to have CB 10.04 or later.) In fact, we still have not seen all of the code. In particular, you will search in vain for the all-important OnInit() routine that starts the program. You can find it, however, by clicking Search | Find in Files and searching for OnInit with the scope of the search set to be “Project files”. The search finds it, sure enough, in PlainApp.cpp and opens this module in the Editor window.

==== ''The following discussion on having to add close() is no longer true, at least at Code::Blocks 13.12, wxWidgets 3.0.2. '' ====

We don't need OnInit right now, but we do need to make a change in PlainMain.cpp. Click on it in the bar above the editor, and its code appears in the editor.

Sometimes a program has a lot to do when the user clicks the close icon in the program's title bar, so wxSmith generates a frame for writing the code for those actions but it provides no code. Consequently, if we ran our program just as initially written by wxSmith, we won't be able to close it by just clicking that icon. To fix that inconvenient problem, find the spot in the code with these lines:

<pre>
void PlainFrame::OnClose(wxCloseEvent& event)
{
}
</pre>

Add the call to the Close() function so that the spot looks like this:
<pre>
void PlainFrame::OnClose(wxCloseEvent& event)
{
Close();
}
</pre>
(''I found it had to be Destroy() not Close() [[User:WardXmodem|WardXmodem]] 04:43, 24 September 2013 (CEST)'')

(''use event.Skip(TRUE); instead of Close(); or Destroy(). (Some) later tutorials correctly reference this. [[User:Ensnarer|Ensnarer]] 03.08.2015'')

Remember to make this change immediately whenever you start a new project.

==== ''End of old "have to add close()" section. With newer releases the following is done for you: ====

<pre>
void PlainFrame::OnQuit(wxCommandEvent& event)
{
Close();
}
</pre>

[[User:WardXmodem|WardXmodem]] 22:43, 20 May 2015 (CEST)
==== End of updated close() information. ====

You can now build and run this super-simple program. To do so, you can do any one of three equivalent things:<br />
* in the top menu bar, click Build | Build and run.
* find and click the icon that looks like a right-pointing triangle in front of a cogwheel. Hovering the mouse pointer over it will show the tool tip “Build and run”.
* tap the F9 key.

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.

''If you are using Ubuntu and get no main menu bar when you run this program, you have fallen victim to [https://bugs.launchpad.net/ubuntu/+source/wxwidgets2.8/+bug/662077 Ubuntu bug 662077]. Beginning with release 10.10, Ubuntu releases have had a bug causing programs built with wxSmith to fail to show their main menu bar. If this bug affects you, you may want to uninstall appmenu-gtk. You do that by clicking Applications | Software Sources, then using the search window to find appmenu-gtk. Clicking on it will allow you to choose to remove it.''

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 sytem; but we need to learn to use sizers for cross-platform programming. What are sizers?

If you have been working with Java or Qt, you may remember something called Layout managers. The implementation in wxWidgets differs a little but does almost the same thing.

When adding components into windows you must somehow specify their position and size. wxWidgets tries to automate this process, and it uses sizers to do so. They automatically position and size window components, and they can also set the size of the window so that everything fits inside.

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.

With that background, let's get started. When you look at the wxSmith editor, you'll notice that the area of the window is surrounded by eight black boxes or drag handles.

[[Image:wxs_tut01_009.png]]

These drag handles surround the currently selected item. In our case it's a whole window. Adding new components to the window is simply done by clicking on one of the buttons in the palette at the bottom of the editor and then clicking somewhere on the resource. As you can see here,

[[Image:wxs_tut01_010.png]]

when you keep your mouse cursor over a component in the palette, it will show its name. That feature may help you find components until you become familiar with their icons.

Let's add a new wxPanel component to our window; it is the fourth icon from the left on the standard tab. You will see that when you click the wxPanel item and then move the cursor over the editor, some part of the editor will change color. That's intentional and is used to show where on the window the new item will be added.

After the wxPanel is in place, you will notice that the background color of the window has changed to light gray. Now our window will look much more like other windows. Note that currently the selection changed to the added panel but since its size is equal to the frame's, it's hard to find out what's really selected. To make sure that wxPanel is selected, click somewhere on the light gray area of our window (Note to Linux users: wxFrame and wxPanel usually have the same background so it may look like nothing has changed; you may ensure that there's a wxPanel by looking into the resource browser).

If you want to see the selection exactly or select items that overlap, you can use the resource browser. To show it, click on the resources tab located in the same place where the project browser is:

[[Image:wxs_tut01_011.png]]

The resource tab consists of two parts. The first is the resource tree which shows the structure of your resources and the second one is the property browser which is common in GUI designers. Inside the resource tree you can find the currently selected item. In our case it is the wxPanel class we added before. The selected item also shows the name of this item: Panel1. This name is basically the variable which can be used to access this component in your code.

We added a new component by selecting the place for it. This is wxSmith's default behavior. However, there is another mode of adding items. In this mode, the new item is added right after you click on the palette's button. The position of the new item is relative to the current selection - just like a cursor in text editors. Basically we can add new items into three different positions relative to the selection:
* Before the selected widget
* After the selected widget
* Into the selected widget.
This insertion mode can be changed by clicking one of the four "placement" buttons on the right side of the editor:

[[Image:wxs_tut01_012.png]]

The uppermost is the mode we used - "point by mouse". The next one means "add into", followed by "add before", and the last one means "add after". The current mode is shown by a red check mark on the button.

Sometimes a few selection modes are disabled because they are not valid for the currently selected item. For example, you cannot add any component into the wxButton component since wxWidgets declares it as one that cannot have child components. Similarly, when the main component (the window) is selected, you won't be able to add anything after it or before it.

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 we have been describing. It looks like this:

[[Image:wxs_tut01_014.png]]

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 main frame and then add the wxPanel into it.
Sizers are available in the Layout tab on the palette. Switch to it and select wxBoxSizer:

[[Image:wxs_tut01_013.png]]

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. (You may need to click on the editor area to refresh the selection on the resource browser.) 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.

Now let's add our wxPanel. Make sure that you add it into the sizer, not into the main frame. After you do so, you will see something like this:

[[Image:wxs_tut01_015.png]]

Here we can see our panel surrounded by drag boxes. There's also some dark gray border around it (it won't be visible on Linux). Each component added into the sizer can be surrounded by such a border. It's useful when you want to have spacing between components. But in our case we should get rid of it to get a better looking window. To do so, we will have to change a property inside the property browser. Search for border size and change it from 5 to 0:

[[Image:wxs_tut01_016.png]]

Now when we have our panel adjusted, we can finally add the "Hello world" text. Since we will also use sizers to manage items added into wxPanel, we have to repeat the addition of wxBoxSizer into wxPanel. After the sizer is in its place, switch back into the '''Standard''' tab on the palette and add a wxStaticText control:

[[Image:wxs_tut01_017.png]]

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 half of that component will be colored in light blue. When the left half of the text is highlighted, the new item will be added before the existing component; and when the right half is highlighted, the new component will be added after the existing one. Let's add the button after the text. Now we should have this content:

[[Image:wxs_tut01_018.png]]

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 similarly to changing the border size in the wxPanel class. 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!":

[[Image:Wxs_tut01_019.png]]

If you want two or more lines of text on the wxStaticText control. click on the "..." button at the right end of the “Label” line or put "\n" inside the text, as in C formats.

At this point, you can click the "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 main window, 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 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 a box sizer on the window
* Put a panel into the first box of the sizer
* Put a sizer of some sort onto the panel.

== 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).

The second thing is to assign an event handler to this button. Basically, event handlers are functions which are called when some "event" occurs. In our case instead of "event" we could say more descriptively " a click on the button" because that is what we want to process. Like other GUI designers, wxSmith can automatically generate the framework code for such handlers. To bring up that ability, switch the property browser to the event browser by clicking on the second icon at the top of the property browser. The icon looks like {} to suggest C++ code.

[[Image:1Event_Icon.png]]

After you click on this icon, you will see all events supported by the currently selected component. The wxButton class supports only one event, the EVT_BUTTON event, so only this one is shown. When you click on this event and drop down the combo box, you will see the available options and handlers for this event:

[[Image:Wxs_tut01_021.png]]

If you select '''-- None --''' no handler function will be automatically assigned to this event. (But it may always be set manually.) Selecting '''-- Add new handler --''' will generate a frame for the code of the new handler function. Below are shown other event handlers known to wxSmith which can be assigned to this event. We can see here OnQuit and OnAbout. Those handlers were created by wizard. We could use the OnQuit handler, but to see what happens, let's write our own handler. Select the '''Add new handler''' option. You will be asked for a name for the handler. This name is simply the name of the function which will be called as a reaction to this event. wxSmith will suggest the name OnButton1Click, and we may as well use it.

When you enter a new handler name, wxSmith will generate the framing code of a new handler function by that name, open the program file with the proper source code and put the cursor inside the handler function. (You may need to scroll up or down to show the line with cursor.) This function is a member of the class we have been building, so it can access all of functions in that class, including the one called '''Close()''', which was created by the wizard. So when we want to close our window we just call the '''Close()''' function. The result looks like this:

[[Image:Wxs_tut01_022.png]]

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 end of this first tutorial, I hope that you followed it easily and are beginning to feel comfortable with Code::Blocks and wxSmith.

The tutorial was originally written by BYO, the creator of wxSmith. It was revised in March 2012 by Grouch to take account of changes in Code::Blocks, add a few clarifications, and change the accent in the English from youthful Polish to elderly American.

----

<center>'''[[WxSmith tutorials|Index]] | [[Wxsmith tutorial: Working with items|Next]]'''</center>

WxSmith tutorial: Accessing items in resource

2015-08-03T12:01:30Z

Ensnarer:

[[Category:wxSmith Documentation]]
= Accessing Components in a Form =

Welcome to the next tutorial. This time I'll show you how to access items in a resource. I'll show you some basics - for example how to read data from text boxes, change labels, and some more advanced things like changing colours and fonts while the application is running. As usual we will start with an empty application. You shouldn't have any problems with it - all instructions are in the first tutorial.

== Setting Up the Form ==

In this tutorial we will work on items so let's add some:

[[Image:wxs_tut06_001.png]]

In this form, there is a wxBoxSizer, and in it a wxPanel, and on the panel, a wxFlexGridSizer with 2 columns, both growable. (In the Growable property of the sizer, put “0, 1” without the quote marks. )The following array shows which wxWidgets are where in the window.
<pre>
wxStaticText wxButton
wxTextCtrl wxButton
wxGuage wxButton
wxStaticText wxSlider
wxStaticText wxButton
</pre>

All widgets and the wxPanel behind them have their Expand property checked.

Here is what we want to make the buttons do:
*The button in the first row will change the text in the static text left of it.
*The button in the second row will read whatever text the user has written into the TextCtrl left of it and display that text in a message box.
*The button in the third row will advance the gauge to the left of it by one tenth of the distance across the gauge, thus simulating a typical progress bar.
*Moving the slider in the fourth row will change the size of the font in the static text just left of it.
* A click on the button in the bottom row will allow the user to change the color of the text in the StaticText control just left of it.

== Accessing Components through their Member Functions ==

If you add an item to the form in the editor, in most cases wxSmith will add a new member variable into the form's C++ class. All those members are listed in the header file, in our present case, the file ''Tutorial_6Main.h''. They are between wxSmith's special comments: ''//(*Declarations...'' and ''//*)''. The list should look like this:

<pre>
...
class Tutorial_6Frame: public wxFrame
{
...

//(*Declarations(Tutorial_6Frame)
wxSlider* Slider1;
wxButton* Button4;
wxStaticText* StaticText2;
wxButton* Button1;
wxGauge* Gauge1;
wxStaticText* StaticText1;
wxStaticText* StaticText3;
wxButton* Button2;
wxButton* Button3;
wxStatusBar* StatusBar1;
wxTextCtrl* TextCtrl1;
//*)
...
};
...
</pre>
Each component which has such a member variable will also have the following properties:
* '''Var name''' - name of the used variable
* '''Is member''' - switch whether this item should be accessible through a class member variable

So if you want to change the name used to access the item, '''Var name''' is the right property to change.

wxSmith forces a few restrictions on variable names. The most obvious is that each variable name must be a valid C++ identifier, so you cannot use special characters or even spaces. Another limitation is that variable names must be unique.

If the name is invalid, wxSmith will automatically replace it with a name that matches the criteria.

== Changing the Label in wxStaticText ==

Let's do a basic exercise. When we click the “Change label” button, we want the program to change the label of the first wxStaticText control to “Label changed”. To make it do so, double click on the button to generate an event handler and change the code to the following:

<pre>
void Tutorial_6Frame::OnButton1Click(wxCommandEvent& event)
{
StaticText1->SetLabel(_("Label changed"));
Layout();
}
</pre>

In the first line of the function body, we used the '''SetLabel()''' function to change the text of the label. Because the length of the text changes, we must recalculate positions, which is done by calling the '''Layout()''' function.

Static items (those which can't be changed by the user) usually have two functions: GetLabel and SetLabel which read and write content presented by this item.

You may wonder why we used some weird notation for the string:
_("Label changed")
instead of a simple
"Label changed"

There are two advantages of this device:
* By adding _(...) around our string we prepare our application for the translation process. wxWidgets can help in developing multi-language applications. When a translation is being made, wxWidgets will automatically search for the translation of the phrase "Label changed" in a database of equivalent strings in the source and target languages.

* wxWidgets may be provided in two versions: with Unicode support and without it (ANSI build). In the case of a Unicode version, we would have to use Unicode strings: '''L"Label changed"''' and in case of the ANSI version we would have to use standard string notation: '''"Label changed"'''. Using the '''_(...)''' macro insures that no matter what wxWidgets version is used, it will always produce the proper code.

There's an alternative version of the string macro which works similarly to _(...) which is written in the form _T(...) or wxT(...). It works like the _() one but the string is never translated.

== Reading the Value from wxTextCtrl ==

Now let's read something that's written by the user. We will use the wxTextCtrl (with variable TextCtrl1) for this and show the text using a standard message box. Let's double click the '''Read text''' button and change the code to the following:

<pre>
void Tutorial_6Frame::OnButton2Click(wxCommandEvent& event)
{
wxString Text = TextCtrl1->GetValue();
wxMessageBox(_("User entered text:\n") + Text);
}
</pre>

In the first line, we read the value from the TextCtrl and store it in a variable called Text and of the type wxString. wxString is the wxWidgets implementation of a string class and this library uses it as a base for string representation.

In the second line, we call the '''wxMessageBox''' function which shows a standard message box just as if it were a modal dialog.

Usually items which provide content entered by the user have two member functions: GetValue and SetValue. You can use them to read and write the content of such items.

== Changing the value of wxGauge ==

Now let's combine reading and writing of a component's value in one function. We will use wxGauge for this. We will use it's two member functions: GetValue and SetValue. I've written earlier that those functions usually exist in items where the user can enter some value. Well, that rule is not without exceptions as we will now see as we write the handler for the third button. Double click the button and fill in the handler as follows:

void Tutorial_6Frame::OnButton3Click(wxCommandEvent& event)
{
int NewValue = Gauge1->GetValue()+10;
if ( NewValue > 100 ) NewValue = 0;
Gauge1->SetValue(NewValue);
}

In the first line, we generate a new progress value by reading the current one and adding 10 to it. In the second line, we prevent the value from getting out of range. (By default, wxGauge has a range set to 0...100. These values can be changed in the Properties browser.) In the third line, we write the new value into the gauge.

== Using the Value from wxSlider to Change Font Size ==

Now let's do something more advanced. In our resource there is a wxSlider and text saying that it changes font size. We will change the font of this label. But we will have to update the font size in two steps:

* As long as the user drags the slider we should change the font size only
* When the user finishes dragging we should layout the window because the size of the text changes

wxSlider provides two events that can be used precisely for this purpose. The first is '''EVT_COMMAND_SCROLL_THUMB_TRACK''' which is fired while dragging the slider. The second is '''EVT_COMMAND_SCROLL_THUMB_RELEASE''' which is fired when the user finishes dragging.

Because we are using events which are not default for the slider, double clicking on the slider will not work -- as it did with buttons -- to create a frame for the handler. We have to add the two handlers through the Properties browser. You can switch between editing standard properties and editing events by clicking on buttons at the top of browser:

[[Image:wxs_tut06_002.png]].

When you have switched to events, search for the required events and choose '''Add new handler''' from the drop-down list.

Here's the code for the '''EVT_COMMAND_SCROLL_THUMB_TRACK''' handler:

void Tutorial_6Frame::OnSlider1CmdScrollThumbTrack(wxScrollEvent& event)
{
wxFont Font = StaticText2->GetFont();
Font.SetPointSize( Slider1->GetValue() );
StaticText2->SetFont(Font);
}

Here we get the font used by the StaticText control by using the '''GetFont()''' function, change the font's size by using '''SetPointSize()''' and write the font back by using the '''SetFont()''' function. '''GetFont()''' and '''SetFont()''' are available for most components.

Now let's code '''EVT_COMMAND_SCROLL_THUMB_RELEASE''':

void Tutorial_6Frame::OnSlider1CmdScrollThumbRelease(wxScrollEvent& event)
{
Layout();
GetSizer()->SetSizeHints(this);
}

In the first line, we adapt the positions of items to the new font size just as in the case of changing the label in wxStaticText. In the second line, we recalculate the minimal size of the window making sure that all items will have enough space.

'''Ensnarer's edit (03.08.2015):'''
Use Panel1.GetSizer()->SetSizeHints(this);
for the second line in the above statement, where Panel1 is the name of the base panel in your frame.
The original code, rather than resize to the new required size, just resizes to the original, default size.
'''End Ensnarer's edit.'''

== Changing a Component's Color ==

The last thing we will do in this tutorial is to change the color of some item. As in the case of fonts we will change the label on the left side of the '''Change''' button. Since we will use the standard event of this button, we can add an event handler by double-clicking on it. And here's the code:

void Tutorial_6Frame::OnButton4Click(wxCommandEvent& event)
{
wxColour OldColour = StaticText3->GetForegroundColour();
wxColour NewColour = wxGetColourFromUser(this,OldColour);

if ( NewColour.IsOk() )
{
StaticText3->SetForegroundColour(NewColour);
Refresh();
}
}

(wxWidets originated in Edinburgh and therefore uses some quaint spellings going back to Anglo-Norman times.) At the beginning we read the current color into the variable '''OldColour'''. In the next line, we call the '''wxGetColourFromUser''' function which opens a dialog where the user can choose a colour.

At the end, we set the new colour by using the '''SetForegroundColour''' function. Refresh is needed to change colour after setting it.

If, however, you try to compile this code, you will get an error message telling you that wxGetColourFromUser() is an unknown function. Since we put it in manually, we must also put in manually its header. So open the Tutorial_6Main.h file and add #include <wx/colordlg.h>.

The NewColour.IsOk() call is used because if the user cancels the colour selection it will return false.
But on the Ubuntu Linux 11.10 installation of wxWidgets, the wxColour class did not have an IsOk() funtion, so in fact you must remove this call. According to wxWidgets documentation, the wxColour class '''does''' indeed have the IsOk() member function, but it was not found.

== More information ==

We've reached the end of this tutorial. I showed only a few operations on typical components; there is much more you can do. For more details you can check wxWidgets' documentation available [http://www.wxwidgets.org/manuals/stable/wx_contents.html here].

----

<center>'''[[WxSmith tutorial: Using wxPanel resources|Previous]] | [[WxSmith tutorials|Index]] | [[WxSmith tutorial: Creating items with custom paint and mouse handling|Next]]'''</center>