{"id":3926,"date":"2021-12-22T06:12:26","date_gmt":"2021-12-22T06:12:26","guid":{"rendered":"http:\/\/truelogic.org\/wordpress\/?p=3926"},"modified":"2021-12-22T06:12:28","modified_gmt":"2021-12-22T06:12:28","slug":"5b-6-wxwidgets-building-a-complex-ui","status":"publish","type":"post","link":"https:\/\/truelogic.org\/wordpress\/2021\/12\/22\/5b-6-wxwidgets-building-a-complex-ui\/","title":{"rendered":"5b-6. wxWidgets – Building a Complex UI"},"content":{"rendered":"\n

OVERVIEW<\/strong><\/p>\n\n\n\n

In this section, we will create a complex UI using multiple sizers. We will create an invoice format which allows entry of multiple items in a single invoice. The base sizer uses a vertical wxBoxSizer inside which we place two horizontal wxBoxSizers and one wxFlexGridSizer to hold the items in a grid.<\/p>\n\n\n\n

Notice the user of spacers in the box sizers. This allows us to add a further degree of control in positioning the controls.<\/p>\n\n\n\n

SAMPLE CODE<\/strong><\/p>\n\n\n\n

complexui.h<\/pre>\n\n\n
\n#include <wx\/wxprec.h>\n#ifndef WX_PRECOMP\n    #include <wx\/wx.h>\n#endif\n\nclass ComplexUI: public wxFrame {\n\n    public:\n      ComplexUI(const wxString &title);\n \n};\n<\/pre><\/div>\n\n\n
complexui.cpp<\/pre>\n\n\n
\n#include "complexui.h"\n\n\nComplexUI::ComplexUI(const wxString &title):\n\n    wxFrame(NULL, -1, title, wxDefaultPosition, wxSize(500,200)) {\n    wxPanel *basePanel = new wxPanel(this, -1);\n    wxBoxSizer *baseSizer = new wxBoxSizer(wxVERTICAL);\n    basePanel->SetSizer(baseSizer);\n\n    \/\/ row1\n    wxPanel *panel1 = new wxPanel(basePanel,-1);\n    wxBoxSizer *sizer1 = new wxBoxSizer(wxHORIZONTAL);\n    panel1->SetSizer(sizer1);\n\n    wxStaticText *lblInvNo = new wxStaticText(panel1, -1, wxT("Invoice #"));\n    wxStaticText *lblInvDate = new wxStaticText(panel1, -1, wxT("Date"));\n    wxTextCtrl *txtInvNo = new wxTextCtrl(panel1, -1);\n    wxTextCtrl *txtInvDate = new wxTextCtrl(panel1, -1);\n\n    wxStaticText *spacer = new wxStaticText(panel1, -1, wxT(""));\n\n    sizer1->Add(lblInvNo, 1, wxEXPAND | wxALL, 3);\n    sizer1->Add(txtInvNo, 4, wxEXPAND | wxALL, 3);\n    sizer1->Add(spacer,8, wxEXPAND); \/\/ spacer\n    sizer1->Add(lblInvDate, 1, wxEXPAND | wxALL | wxALIGN_RIGHT, 3);\n    sizer1->Add(txtInvDate,4, wxEXPAND | wxALL | wxALIGN_RIGHT, 3);\n\n\n    \/\/row 2\n    wxPanel *panel2 = new wxPanel(basePanel,-1);\n    wxBoxSizer *sizer2 = new wxBoxSizer(wxHORIZONTAL); \n    panel2->SetSizer(sizer2);\n\n    wxStaticText *lblName = new wxStaticText(panel2, -1, wxT("Name"));\n    wxStaticText *lblAddress = new wxStaticText(panel2, -1, wxT("Address"));\n    wxTextCtrl *txtName = new wxTextCtrl(panel2, -1);\n    wxTextCtrl *txtAddress = new wxTextCtrl(panel2, -1);\n\n    wxStaticText *spacer2 = new wxStaticText(panel2, -1, wxT(""));\n\n    sizer2->Add(lblName, 1, wxEXPAND | wxALL | wxALIGN_RIGHT, 3);\n    sizer2->Add(txtName, 4, wxEXPAND | wxALL, 3);\n    sizer2->Add(spacer2,4, wxEXPAND); \/\/ spacer\n\n    sizer2->Add(lblAddress, 1, wxEXPAND | wxALL | wxALIGN_RIGHT, 3);\n    sizer2->Add(txtAddress, 6, wxEXPAND | wxALL, 3);\n\n\n\n    \/\/row 3\n    wxPanel *panel3 = new wxPanel(basePanel, -1);\n    wxFlexGridSizer *fgs = new wxFlexGridSizer(10,5,2,2);\n    panel3->SetSizer(fgs);\n\n    wxStaticText *colItemId = new wxStaticText(panel3, -1, wxT("Item #"));\n    wxStaticText *colName = new wxStaticText(panel3, -1, wxT("Item Name"));\n    wxStaticText *colRate = new wxStaticText(panel3, -1, wxT("Rate"));\n    wxStaticText *colQty = new wxStaticText(panel3, -1, wxT("Qty"));\n    wxStaticText *colAmount = new wxStaticText(panel3, -1, wxT("Price"));\n\n    fgs->Add(colItemId, 1, wxEXPAND | wxALL,2);\n    fgs->Add(colName, 4, wxEXPAND | wxALL, 2);\n    fgs->Add(colRate, 1, wxEXPAND | wxALL, 2);\n    fgs->Add(colQty, 1, wxEXPAND | wxALL, 2);\n    fgs->Add(colAmount, 1, wxEXPAND | wxALL, 2);\n\n    fgs->AddGrowableCol(1);\n   \n     for (int row = 1; row <10; row++) {\n    \tfor(int col = 1; col <=5; col++) {\n\t  \twxTextCtrl *txt = new wxTextCtrl(panel3, -1);\n\t\tif (col == 2)\n\t\t    fgs->Add(txt,4, wxEXPAND);\n\t\telse\n\t\t    fgs->Add(txt,1, wxEXPAND);\n\t}\n\tfgs->AddGrowableRow(row);\n    }\n\n    \n\n    \/\/ final ui\n    baseSizer->Add(panel1, 0, wxEXPAND);\n    baseSizer->Add(panel2, 0, wxEXPAND);\n    baseSizer->Add(panel3, 1, wxEXPAND);\n\n    Center();\n\n}\n\n<\/pre><\/div>\n\n\n
The sample output is given below<\/p>\n\n\n\n
\"\"<\/figure>\n","protected":false},"excerpt":{"rendered":"
OVERVIEW In this section, we will create a complex UI using multiple sizers. We will create an invoice format which allows entry of multiple items […]<\/a><\/p>\n<\/div>","protected":false},"author":1,"featured_media":3595,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[302,365],"tags":[],"class_list":["post-3926","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-cc","category-wxwidgets"],"_links":{"self":[{"href":"https:\/\/truelogic.org\/wordpress\/wp-json\/wp\/v2\/posts\/3926","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/truelogic.org\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/truelogic.org\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/truelogic.org\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/truelogic.org\/wordpress\/wp-json\/wp\/v2\/comments?post=3926"}],"version-history":[{"count":4,"href":"https:\/\/truelogic.org\/wordpress\/wp-json\/wp\/v2\/posts\/3926\/revisions"}],"predecessor-version":[{"id":3931,"href":"https:\/\/truelogic.org\/wordpress\/wp-json\/wp\/v2\/posts\/3926\/revisions\/3931"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/truelogic.org\/wordpress\/wp-json\/wp\/v2\/media\/3595"}],"wp:attachment":[{"href":"https:\/\/truelogic.org\/wordpress\/wp-json\/wp\/v2\/media?parent=3926"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/truelogic.org\/wordpress\/wp-json\/wp\/v2\/categories?post=3926"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/truelogic.org\/wordpress\/wp-json\/wp\/v2\/tags?post=3926"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}