12.wxWidgets – Creating a Custom Widget

OVERVIEW

We now look at how to create a custom widget. A custom widget is something which adds in a custom UI which can be re-used in applications. In the sample code below we create a custom widget called CustomColor which extends a wxPanel. It acts as a color preview widget comprising of 3 wxSlider controls for red, green and blue colors. Each of the sliders can move between 0 and 255. Depending on the current value of the sliders, the background panel is painted with the resulting color.

SAMPLE CODE

custom.h
#include <wx/wxprec.h>
#ifndef WX_PRECOMP
	#include <wx/wx.h>
#endif


class CustomColor: public wxPanel {

		public:
			CustomColor(wxWindow *parent, wxWindowID id, int r, int g, int b);
			void setRed(int r);
			void setGreen(int g);
			void setBlue(int b);
			int getRed();
			int getGreen();
			int getBlue();

		private:
		   void onScroll(wxCommandEvent& event);	
		   void showColor();	
		   wxSlider *mSliderRed, *mSliderGreen, *mSliderBlue;
	   	   int mRed, mGreen, mBlue;	   
};

#define SLIDER_ID_RED 2001
#define SLIDER_ID_GREEN 2002
#define SLIDER_ID_BLUE 2003

custom.cpp
#include "custom.h"

CustomColor::CustomColor(wxWindow *parent, wxWindowID id, int r, int g, int b):
		wxPanel(parent, id) {
	    	
			mRed = r; mGreen = g; mBlue = b;
			wxBoxSizer *hbox = new wxBoxSizer(wxHORIZONTAL);
			SetSizer(hbox);
			mSliderRed = new wxSlider(this ,SLIDER_ID_RED, mRed, 0, 255, wxDefaultPosition, wxDefaultSize, wxSL_VERTICAL);
			mSliderGreen = new wxSlider(this ,SLIDER_ID_GREEN, mGreen, 0, 255, wxDefaultPosition, wxDefaultSize, wxSL_VERTICAL);
			mSliderBlue = new wxSlider(this ,SLIDER_ID_BLUE, mBlue, 0, 255, wxDefaultPosition, wxDefaultSize, wxSL_VERTICAL);

			hbox->Add(mSliderRed, 1, wxEXPAND | wxALL, 5);
			hbox->Add(mSliderGreen, 1, wxEXPAND | wxALL, 5);
			hbox->Add(mSliderBlue, 1, wxEXPAND | wxALL, 5);

			mSliderRed->Bind(wxEVT_COMMAND_SLIDER_UPDATED, &CustomColor::onScroll, this);
			mSliderGreen->Bind(wxEVT_COMMAND_SLIDER_UPDATED, &CustomColor::onScroll, this);
			mSliderBlue->Bind(wxEVT_COMMAND_SLIDER_UPDATED, &CustomColor::onScroll, this);

			showColor();
 }

void CustomColor::onScroll(wxCommandEvent& event) {
   int id = event.GetId();
   if (id == SLIDER_ID_RED)
	   mRed = mSliderRed->GetValue();
   else if (id == SLIDER_ID_GREEN)
	   mGreen = mSliderGreen->GetValue();
   else if (id == SLIDER_ID_BLUE)
	   mBlue = mSliderBlue->GetValue();
   showColor();

}

void CustomColor::setRed(int r) { mRed = r;}
void CustomColor::setGreen(int g) { mGreen = g;}
void CustomColor::setBlue(int b) { mBlue = b;}
int CustomColor::getRed() { return mRed;}
int CustomColor::getGreen() { return mGreen;}
int CustomColor::getBlue() { return mBlue;}

void CustomColor::showColor() {
 SetBackgroundColour(wxColour(mRed, mGreen, mBlue));
}



custommain.h
#include <wx/wxprec.h>
#ifndef WX_PRECOMP
	#include <wx/wx.h>
#endif

class Main: public wxApp {

	public:
		virtual bool OnInit();
};

class CustomApp:public wxFrame {
	public:
		CustomApp(const wxString &title);
	
};

CustomApp::CustomApp(const wxString &title):
	wxFrame(NULL,-1, title, wxDefaultPosition, wxSize(400,200)) {
	
		Center();
	} 


custommain.cpp
#include "custommain.h"
#include "custom.h"

IMPLEMENT_APP(Main)

bool Main::OnInit() {
	CustomApp *app = new CustomApp(wxT("Custom Widget"));
	wxPanel *panel = new wxPanel(app, -1);
	wxBoxSizer *hbox = new wxBoxSizer(wxHORIZONTAL);
	panel->SetSizer(hbox);
	wxStaticText *label = new wxStaticText(panel, -1, wxT("Custom Widget Text"));
	CustomColor *color = new CustomColor(panel, -1, 100,10,200);
	hbox->Add(color, 1, wxEXPAND | wxALL, 5);
	hbox->Add(label, 2, wxEXPAND | wxALL, 5);

	app->Show(true);

}


The output is shown below

Be the first to comment

Leave a Reply

Your email address will not be published.


*