An Introduction to Nana C++ Library

Brief

Nana is a cross-platform C++ library for creating graphical user interfaces, currrently it supports Windows, Linux(X11) and Mac OS(experimental) platforms. Nana is a free and open source software, licensed under Boost Software License, it encourages both commercial and non-commercial use.

Design Philosophy

Nana is a modern C++11 library, it means that users have freedom for various modern C++ features, lambda, smart pointers and the standard library.

The primary task is to make things simple and intuitive, Nana brings very simple and reasonable concepts to keep it easy. By the modern C++ style, you can get rid of the name constraints and the syntax constraints which are two things making your code stiff. Now you can make your code more straightforward and readable.

The secondary, Nana is a library, not a framework. A side benefit of this practice can be a less impact on program structure design.

Get Started

1, Download

Click the following button to get the latest Nana release package.

Download Nana C++ Library

2, Installation

An Installation Document describs how to install Nana using different tools under different OS platforms.

3, Hello, world!

//Include nana/gui.hpp header file to enable Nana C++ Library
//for the program.
#include <nana/gui.hpp>

//Include a label widget, we will use it in this example.
#include <nana/gui/widgets/label.hpp>

int main()
{
    //All names of Nana is in the namespace nana;
    using namespace nana;

    //Define a form object, class form will create a window
    //when a form instance is created.
    //The new window default visibility is false.
    form fm;

    //Define a label on the fm(form) with a specified area,
    //and set the caption.
    label lb{ fm, rectangle{ 10, 10, 100, 100 } };
    lb.caption("Hello, world!");

    //Expose the form.
    fm.show();

    //Pass the control of the application to Nana's event
    //service. It blocks the execution for dispatching user
    //input until the form is closed.
    exec();
}

intro-hello-world

The screenshot shows that “Hello, world!” is displayed at the left-upper corner in the form. We can find that the code line 20 position the label at an absolute point(10, 10). Now, let’s start another example that illustrates the layout management of Nana to position the label at the center of form no matter what the size of form changes.

#include <nana/gui.hpp>
#include <nana/gui/widgets/label.hpp>

int main()
{
    using namespace nana;

    form fm;

    //It's unnecessary to specify a rectangle if useing
    //layout management.
    label lb{ fm};
    lb.caption("Hello, world!");

    //Set a background color, just for observation.
    lb.bgcolor(colors::azure);

    //Define a layout object for the form.
    place layout(fm);
    //The div-text
    layout.div("vert<><<><here weight=80><>><>");
    layout["here"] << lb;
    layout.collocate();

    fm.show();

    exec();
}

intro-hello-world-place

The key of layout management using class place is the div-text. The following picture illustrate the definition of div-text. The div-text divides a large area(form) into small areas(the small area is called field).

intro-hello-world-place-divThe vert specifies the 3 red fields lay out vertically. The second red field has 3 child fields which lay out horizontally. The named here field has a fixed width that is 80-pixel. The 2 green fields make the named here field in the middle of the form.

4, Another Hello, world!

#include <nana/gui.hpp>

int main()
{
    using namespace nana;

    form fm;

    drawing{ fm }.draw([](paint::graphics& graph)
    {
        std::string hw = "Hello, world!";
        auto hw_size = graph.text_extent_size(hw);

        graph.string(
            point{ static_cast<int>(graph.width() - hw_size.width) / 2,
                    static_cast<int>(graph.height() - hw_size.height) / 2}
            , hw);
    });

    fm.show();

    exec();
}

 

24 Comments

    • Haha, I don’t know that ‘nana’ implies ‘grandmother’ in Canada. It’s nickname of my wife. I’m not good at naming, nana is just simple and easy to remember, so I chose the name.

  1. Hello.

    Could I embebbed a OpenGL or DirectX window with this library? How can I achieve it?

    Thanks

    • There are 2 ways to embedbbed a OGL/DX window.
      1. Create a OGL/DX window as a child window of a form.
      2. Render with OGL/DX directly on a form. Please refer to the example for details.

  2. Is there any ui designe toolfor the nana.
    When I change the interface of the software, I just need to change the ui files, not to change the code and re-compile. It is meaningful!

  3. I’am thinking about how it works.Without windows api ,how you create the window?And,how you draw these words on it?

  4. This:

    “A Installation Documentation describs how to install Nana through different tools under different OS platforms.”

    should be

    “An Installation Document describes how to install Nana using different tools under different OS platforms.”

  5. Hi and thank you for this GUI library.
    I’m trying to compil nana example codes you provide, but i get many errors
    (the example “hello world” who use namespace nana::gui doesn’t want to compil with error: “nana::gui is not a namespace”).
    I’m on archlinux OS.
    Could you please provide some compilation examples who should compil please ?

    • Hi, it seems the example codes are too old. Could you please show me your code or the URL to the example codes?

      • Hi, (and happy new year), yes sure:
        #include
        #include
        #include

        int main()
        {
        using namespace nana::gui;

        form fm;
        fm.caption(L”Hello, World!”);

        button btn(fm, nana::rectangle(20, 20, 150, 30));
        btn.caption(L”Quit”);
        btn.make_event(API::exit);

        fm.show();
        exec();
        }
        but it seems that all your examples are to old maybe ? or i don’t know, which one do you provide (example) who is working at compil time please ?

  6. inclusions are for:
    /usr/include/nana/gui.hpp
    /usr/include/nana/gui/wvl.hpp
    /usr/include/nana/gui/widgets/button.hpp
    (sorry, at send time, these part of codes has been deleted there)

  7. Thank you for making nana available. The introduction on the nana website says nana does not rely on #defines. I personally feel the straight-forwardness using it. nana 1.7 works in Windows 10 x64 + VS2017 + MSVC — as 64-bit build.

    In the “Getting Started” documentation, some examples did not compile yet many built and run successfully. Interested readers may perhaps carry on to the next examples. In my experience these examples awaiting correction bears no significant drawback to the overall learning curve.

Leave a Reply