Wxwidgets. Simple application using wxribbon and wxauinotebook.

Okay now I am going to make an application that looks like this:

Wxwidgets. Simple application using wxribbon and wxauinotebook.

Looks pretty right? And how to create application look like that?

For the answer the first open your editor (In this tutorial I using codeblocks) and create a project with name you like. Example I create with name Test then add new file with name “Frame.h”

#ifndef FRAME_H
#define FRAME_H

#include <wx/wx.h>
#include <wx/aui/aui.h>
#include <wx/ribbon/bar.h>
#include <wx/ribbon/buttonbar.h>
#include <wx/artprov.h>

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

    // Destructor
    virtual ~MainFrame();

private:
    wxAuiNotebook* auiNotebook;

    // ribbon
    wxRibbonBar* ribbonBar;
    wxRibbonPage* homeRibbonPage;
    wxRibbonPage* editRibbonPage;
    wxRibbonPanel* homeRibbonPanel;
    wxRibbonPanel* itemRibbonPanel;
    wxRibbonButtonBar* homeRibbonButtonBar;
    wxRibbonButtonBar* itemRibbonButtonBar;
};

#endif // FRAME

And this is for the source:

#include "Frame.h"

MainFrame::MainFrame(const wxString& title)
: wxFrame(NULL, wxID_ANY, title, wxDefaultPosition, wxSize(900, 700), wxDEFAULT_FRAME_STYLE | wxSUNKEN_BORDER)
{
    // Ribbon
    ribbonBar = new wxRibbonBar(this, -1, wxDefaultPosition, wxDefaultSize, wxRIBBON_BAR_FLOW_HORIZONTAL
                                | wxRIBBON_BAR_SHOW_PAGE_LABELS
                                | wxRIBBON_BAR_SHOW_PANEL_EXT_BUTTONS
                                | wxRIBBON_BAR_SHOW_TOGGLE_BUTTON
                                );

    homeRibbonPage = new wxRibbonPage(ribbonBar, wxID_ANY, wxT("Master Data"), wxNullBitmap);
    editRibbonPage = new wxRibbonPage(ribbonBar, wxID_ANY, wxT("Edit Page"), wxNullBitmap);

    homeRibbonPanel = new wxRibbonPanel(homeRibbonPage, wxID_ANY, wxT("Home"), wxNullBitmap,
                                  wxDefaultPosition, wxDefaultSize,
                                  wxRIBBON_PANEL_NO_AUTO_MINIMISE);
    itemRibbonPanel = new wxRibbonPanel(homeRibbonPage, wxID_ANY, wxT("Data Item"),
                                        wxNullBitmap, wxDefaultPosition, wxDefaultSize,
                                        wxRIBBON_PANEL_NO_AUTO_MINIMISE);

    homeRibbonButtonBar = new wxRibbonButtonBar(homeRibbonPanel);
    itemRibbonButtonBar = new wxRibbonButtonBar(itemRibbonPanel);

    homeRibbonButtonBar->AddButton(wxID_ANY, wxT("Home Menu"),
                                   wxArtProvider::GetBitmap(wxART_ADD_BOOKMARK, wxART_TOOLBAR, wxSize(16,15)));

    itemRibbonButtonBar->AddButton(wxID_ANY, wxT("Daftar Guru"),
                    wxArtProvider::GetBitmap(wxART_QUESTION, wxART_TOOLBAR, wxSize(16,15)));
    itemRibbonButtonBar->AddButton(wxID_ANY, wxT("Tambah Guru"),
                    wxArtProvider::GetBitmap(wxART_QUESTION, wxART_TOOLBAR, wxSize(16,15)));
    itemRibbonButtonBar->AddButton(wxID_ANY, wxT("Daftar Siswa"),
                    wxArtProvider::GetBitmap(wxART_QUESTION, wxART_TOOLBAR, wxSize(16,15)));
    itemRibbonButtonBar->AddButton(wxID_ANY, wxT("Tambah Siswa"),
                    wxArtProvider::GetBitmap(wxART_QUESTION, wxART_TOOLBAR, wxSize(16,15)));

    ribbonBar->AddPageHighlight(ribbonBar->GetPageCount() - 1);
    ribbonBar->Realize();

    // set style msw provider
    ribbonBar->DismissExpandedPanel();
    ribbonBar->SetArtProvider(new wxRibbonMSWArtProvider);

    // aui notebook
    wxSize client_size = GetClientSize();

    auiNotebook = new wxAuiNotebook(this, wxID_ANY,
                                    wxPoint(client_size.x, client_size.y),
                                    wxSize(430,200),
                                    wxAUI_NB_CLOSE_BUTTON | wxAUI_NB_SCROLL_BUTTONS);
    auiNotebook->Freeze();
    wxBitmap page_bmp = wxArtProvider::GetBitmap(wxART_NORMAL_FILE, wxART_OTHER, wxSize(16,16));

    auiNotebook->AddPage(new wxTextCtrl(auiNotebook, wxID_ANY, wxT("Some text"),
                                        wxDefaultPosition, wxDefaultSize, wxTE_MULTILINE|wxNO_BORDER),
                                        wxT("Home"), false, page_bmp);
    auiNotebook->AddPage(new wxTextCtrl(auiNotebook, wxID_ANY, wxT("Some text"),
                                        wxDefaultPosition, wxDefaultSize, wxTE_MULTILINE|wxNO_BORDER),
                                        wxT("Item 1"), false, page_bmp);

    auiNotebook->SetPageToolTip(0, "Menu utama sistem informasi akademik");
    auiNotebook->Thaw();

    // set layout
    wxSizer* sizer = new wxBoxSizer(wxVERTICAL);
    sizer->Add(ribbonBar, 0, wxEXPAND);
    sizer->Add(auiNotebook, 1, wxEXPAND);
    SetSizer(sizer);

	Centre();
}

MainFrame::~MainFrame() {}

Explanations:

  1. Line 7. That code is used to create the ribbon.

    The Ribbon Bar.
  2. Line 13-14 is used to create the ribbon page look like this:

    The Ribbon Page.
  3. Line 16-21 is to create the panel on the ribbon bar.

    The Ribbon Panel.

    Look at the name Home and Data Item, this code is to create that.

  4. Line 23-24 is to create the button bar place. Look at the icon home menu, daftar guru, and etc
  5. Line 26-36 is to add the button to button bar (line 23-24)
  6. Line 38 is used to add highlight to the ribbon page. Look at the difference in the picture below:

    Page highligt and not highligt.
  7. Line 39 is used to create the ribbon bar, so this function must be called. Info from the doc http://docs.wxwidgets.org/trunk/classwx_ribbon_bar.html.

    After all pages have been created, and all controls and panels placed on those pages, Realize() must be called.

    –Detailed Description
  8. 42-43 is to force style MSW. If we are not using that so if we run the program on Linux, you can look like this:

    Ribbon with GTK+ style.
  9. Line 48 is used to create auinotebook with style a close button available on the right tab bar and left and right scroll buttons are displayed (wxAUI_NB_CLOSE_BUTTON | wxAUI_NB_SCROLL_BUTTONS).
  10. Line 62 is used to show the tooltip if mouse hovered on tab bar Home
  11. Line 65-69 is used to add Ribbonbar and auinotebook in vertical layout

Then the last create class for call Frame.

#ifndef MAIN_H
#define MAIN_H

#include <wx/wx.h>

class MainApp : public wxApp
{
public:
	virtual bool OnInit();
};

#endif // MAIN_H

And this the source file:

#include "MainApp.h"
#include "Frame.h"

bool MainApp::OnInit()
{
    // call main frame
	MainFrame* mainFrame = new MainFrame("SIA");
	mainFrame->Show(true);
	return true;
}

wxIMPLEMENT_APP(MainApp);

Note: Before you building this source, don’t forget to add the libraries “-lwx_gtk2u_ribbon-3.0 and -lwx_gtk2u_aui-3.0” on codeblocks linker settings (for Linux user).

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s