Nana Tutorial: Creating A GUI Calculator

Requires: C++11, Nana 0.5
In this tutorial, we will make a GUI calculator with Nana C++ Library. The calculator that we build will look like:

Using nana::gui::place which is introduced into Nana in the version of 0.5, we can create a such GUI easily.

Let's start the code.

:::C++
#include <nana/gui/wvl.hpp>
#include <nana/gui/widgets/button.hpp>
#include <nana/gui/widgets/label.hpp>
#include <nana/gui/place.hpp>

using namepsace nana::gui;

struct stateinfo
{
    enum class state{init, operated, assigned};

    state   opstate;
    wchar_t operation;
    double oprand;
    double outcome;
    label & procedure;
    label & result;

    stateinfo(label& proc, label& resl)
        : opstate(state::init), operation('+'), oprand(0), outcome(0), procedure(proc), result(resl)
    {}
};

//We could omit the definitons at this point.

//handle the number keys
void numkey_pressed(stateinfo& state, const eventinfo& ei);

//handle the non-number keys
void opkey_pressed(stateinfo& state, const eventinfo& ei);

int main()
{
    form fm;
    fm.caption(STR("Calculator"));

    //use class place to layout the widgets
    place place(fm);
    place.div("vertical<procedure weight=10%><result weight=15%>"
        "<weight=2><<weight=2><opkeys grid [4, 5] gap=2>>");

    label procedure(fm), result(fm);

    //make the label right aligned.
    procedure.text_align(nana::align::right);
    result.text_align(nana::align::right);
    result.typeface(nana::paint::font(nullptr, 14, true));

    place.field("procedure")<<procedure;
    place.field("result")<<result;

    stateinfo state(procedure, result);
    std::vector<std::shared_ptr<button>> op_keys;

    nana::paint::font keyfont(nullptr, 10, true);
    wchar_t keys[] = L"C±%/789X456-123+0.=";

    for(auto key: keys)
    {
        auto p = std::shared_ptr<button>(new button(fm));
        p->caption(nana::string(1, *i));
        p->typeface(keyfont);
        op_keys.push_back(p);

        if('0' != key)
        {
            if('=' == key)
            {
                p->background(0x7ACC);
                p->foreground(0xFFFFFF);
            }
            place.field("opkeys")<<*p;
        }
        else
            place.field("opkeys")<<place.room(*p, 2, 1);

        //Make event answers for keys
        if(('0' <= key && key <= '9') || ('.' == key))
            p->make_event<events::click>(std::bind(numkey_pressed, std::ref(state), std::placeholders::_1));
        else
            p->make_event<events::click>(std::bind(opkey_pressed, std::ref(state), std::placeholders::_1));
    }

    place.collocate();
    fm.show();
    exec();
}

To get entire code of calculator, please refer to calculator.cpp

Please refer to the documentation for the details of class place