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

A Installation Documentation describs how to install Nana through 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();
}

 

14 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?

Leave a Reply