GUI in C++ PV264 Advanced Programming in C++ Nikola Beneš Jan Mrázek Vladimír Štill Faculty of Informatics, Masaryk University Spring 2017 PV264: GUI in C++ Spring 2017 1 / 23
Organisation Lectures this lecture: GUI in C++ next lecture (invited, Jiří Filipovič): optimisation, OpenMP 10th May: no lecture (Dies Academicus) last week: future of C++ (C++17, C++2?,... ) Projects project deadline: 7th May code review: during the last two weeks Seminars this week: as usual next week: no seminar, project consultation (if you want) last two weeks: project presentations schedule to be arranged during the next week PV264: GUI in C++ Spring 2017 2 / 23
GUI in C++ to create GUI app you can use Tk in Python Swing in Java WinForms in.net?? in C++ C++ nor STL has no native support for GUI we need to rely on third-party libraries/frameworks large variety there is no the right one for every project we provide brief overview of several libraries PV264: GUI in C++ Spring 2017 3 / 23
High-level GUI Application Architecture Common core concept of all GUI libs: events (mouse, keyboard, timers,...) int main() { initialize(); while ( true ) { msg = getmessage(); switch( msg ) { //... case QUIT: return 0; } } } different libraries offer different levels of abstraction usually you do not interact directly keep in mind the loop (no blocking tasks, no native parallelism) PV264: GUI in C++ Spring 2017 4 / 23
Getting Low Level: Windows GUI support is part of core OS API, handles everything (GUI, input, audio,...) Win32API (C) vs. WinRT (C++) OS supports basic building blocks: event dispatching window management basic elements (buttons, text inputs, combo boxes, list boxes,...) reusable custom elements building blocks are represented by an opaque handle API is window oriented everything is a window events are delivered to windows if not handled, delivered to a parent window there might be reasons to use Win32API directly not that complicated (but not simple either) very compact applications with no dependencies PV264: GUI in C++ Spring 2017 5 / 23
Getting High Level: Windows Win32API targets C and is very low level MFC (Microsoft Foundation Class Library) official Microsoft C++ wrapper for Win32API still developed, no new features, dead community licence restrictions WTL (Windows Template Library) WinRT open alternative to MFC since 2015 dead C++ substitution for Win32API originally focused on language extension C++/CX optional garbage collection, generics, asynchronous functions since 2016, C++WinRT pure, standard C++11 library for accessing WinRT open-source, header-only PV264: GUI in C++ Spring 2017 6 / 23
Getting Low Level: X Window Systems GUI support is not a part of OS special application X server allows for drawing window (area of screen) distributes events to applications no other standard building blocks client and server do not have to be on the same device no support for audio there is probably no reason to use X Window System directly PV264: GUI in C++ Spring 2017 7 / 23
Getting High Level: X Window Systems X Toolkit library for developing widgets (buttons, combo box,...) no implementation widgets libraries provide basic building blocks (buttons,... ) abstraction for event handling define look n feel of the application examples of such libraries: Motif (very old) GTK/GTK+ Qt XForms... PV264: GUI in C++ Spring 2017 8 / 23
Philosophical Sidenote: Framework vs. Library What is the difference between a library and a framework? no precise definition we stick with: framework is something which invokes pieces of your code library is something invoked by your code framework forces you to use its design philosophy library allows you to design your application in any way you want (Not that the naming matters) PV264: GUI in C++ Spring 2017 9 / 23
C++ GUI frameworks PV264: GUI in C++ Spring 2017 10 / 23
Qt Introduction multi-platform framework for developing GUI applications supports Windows, Linux/X11, macos, Android, ios,... native C++ binding for Python, Ruby, Perl, Haskell, Java,... not only GUI (networking, DB, parsing, threads,...) can be used in open-source project if redistributed under GPL/LGPL otherwise commercial licence necessary Widely used in practice: Bitcoin Core, Skype, VLC, Tesla cars,... PV264: GUI in C++ Spring 2017 11 / 23
Qt Concepts event loop is abstracted to the class QApplication with method exec everything is a widget widgets can be arbitrary nested widget without parent is a wrapped into a window many predefined widgets events are passed using signals and slots signal is emitter of events slot is a consumer of events signals are connect to slots using connect mechanism unlike callbacks, connect allows for runtime resolution of methods UI can be loaded from XML file QtCreator tool for creating XML files mimics the native look n feel of the platform PV264: GUI in C++ Spring 2017 12 / 23
Qt Summary Pros: Cons: multiplatform big community with a lot of support documentation uses modern C++ many pre-defined widgets large & heavy tendency to abuse language ( weird macros and keywords, metaobject compiler) replaces parts of STL (e.g. QString) PV264: GUI in C++ Spring 2017 13 / 23
wxwidgets Introduction multi-platform framework for developing GUI applications supports Windows, Linux/X11, macos native C++ binding for Python, Ruby, Perl, Haskell,... fully open-source custom licence allowing free usage even in commercial applications uses platform primitives preserves platform look n feel PV264: GUI in C++ Spring 2017 14 / 23
wxwidgets Concepts very similar to Qt event loop abstracted to the wxapp class everything is a widget: widgets needs to be allocated on heap every widget has to have a parent parents automatically free allocated memory events are dispatched using a static event table set of macros to define the table wxwidgets3 support dynamic binding (Bind function) GUI can be designed in wxwidgetsbuilder generates pieces of C++ code PV264: GUI in C++ Spring 2017 15 / 23
wxwidgets Summary Pros: Cons: compared to Qt, wxwidgets are quite lightweight true native look n feel licence allows for free usage quite old, tends to to stick with older C++ standard counter-intuitive memory handling (compared to modern C++) replaces parts of STL (e.g. wxstring) PV264: GUI in C++ Spring 2017 16 / 23
Ultimate++ not commonly known very active development supposed to be simpler alternative to wxwidgets PV264: GUI in C++ Spring 2017 17 / 23
C++ GUI libraries PV264: GUI in C++ Spring 2017 18 / 23
Nana Introduction modern, lightweight, simple GUI library leverages C++11/14 and STL (no own string, vector,...) http://nanapro.org supports Linux, Windows and macos (experimental) documentation sources: https://github.com/qpcr4vir/nana-docs/wiki http://qpcr4vir.github.io/nana-doxy/html/index.html still under development documentation is far away from being complete many examples available does not preserve native look n feel of platform PV264: GUI in C++ Spring 2017 19 / 23
Nana concepts Nana is thread safe (GUI can be manipulated from any thread) windows are called forms widgets represent both regular windows and modal forms created by instantiation of nana::form represented by classes (nana::button, nana::spinbox,...) created by instantiation and specifying a parent widgets are non-copyable and non-movable (no dangling references) full list of widgets: https://github.com/qpcr4vir/nana-docs/wiki/widgets events are handled by callbacks each Nana object has a method events() it is possible to specify concrete event and attach a callback using methods of events() object for a list of all events see https: //github.com/qpcr4vir/nana-docs/wiki/event-handling PV264: GUI in C++ Spring 2017 20 / 23
Simple Nana Example int main() { using namespace nana; // Create main window form fm; fm.caption( "Hello Nana!" ); // Create button with fixed position button btn( fm, rectangle ( 20, 20, 150, 30 ) ); btn.caption( "Click me" ); // Attach API::exit function to an event btn.events().click( API::exit ); // Start the GUI fm.show(); exec(); } PV264: GUI in C++ Spring 2017 21 / 23
Concept of Placers using a fixed layout (as in previous example) is not good usually solved by nesting widgets and using spacers or pre-defined layouts Nana offers alternative concept: placers textual representation of the layout with simple syntax specify fields, fill them with widgets full specification: https://github.com/qpcr4vir/nana-docs/ wiki/using-place-for-layouts example center a button (using three horizontal field, the middle one contains three vertical fields) place plc( fm ); plc.div( "<vertical <> <<><btn><>> <>>" ); plc[ "btn" ] << btn; plc.collocate(); PV264: GUI in C++ Spring 2017 22 / 23
Placer Example Login Form form fm; textbox usr( fm ), pswd( fm ); button login( fm, "Login" ), cancel( fm, "Cancel" ); usr.tip_string( "User: " ).multi_lines( false ); pswd.tip_string( "Password:" ).multi_lines(false).mask('*'); place plc( fm ); plc.div("<><weight=80% vertical" "<><weight=70% vertical" "<vertical gap=10 textboxes arrange=[25,25]>" "<weight=25 gap=10 buttons> ><>><>"); plc["textboxes"] << usr << pswd; plc["buttons"] << login << cancel; plc.collocate(); PV264: GUI in C++ Spring 2017 23 / 23