In C++ is het programmeren van een grafische gebruikersinterface (GUI) belangrijk bij de ontwikkeling van moderne applicaties, waarbij gebruikers mooie grafische afbeeldingen hebben om mee te werken. Hoewel C++ vaak wordt gekoppeld aan systeemprogrammering en het schrijven van games, kan het een uitstekend alternatief zijn voor het schrijven van GUI's. In dit artikel bespreken we GUI-programmering in C++, enkele populaire GUI-bibliotheken voor C++, en hoe u een eenvoudige GUI-toepassing in C++ kunt maken.
Vereisten: Grondbeginselen van C++, C++ OOPs, enkele GUI-bibliotheek.
Wat is GUI (grafische gebruikersinterface)?
De grafische gebruikersinterface (GUI) is een visuele applicatie-interface die wordt geleverd met behulp van afbeeldingen zoals vensters, tekstvakken en knoppen waarmee gebruikers met de software kunnen communiceren. GUI biedt een interactief en eenvoudig te gebruiken platform in vergelijking met de Command Line Interface (CLI), aangezien gebruikers de muis of andere invoerapparaten zoals een touchscreen, enz. kunnen gebruiken zonder alleen op het toetsenbord te vertrouwen.
Belangrijkste concepten van GUI-programmering
Een grafische gebruikersinterface (GUI) omvat het ontwerpen van vensters, dialoogvensters, knoppen, enz., die allemaal interactieve componenten van de gebruikersinterface zijn. Vervolgens beheren we deze widgets met behulp van gebeurtenishandlers zoals onClick, onHover, enz.
De belangrijkste concepten van GUI-programmering zijn:
Widgets
Een grafische gebruikersinterface (GUI) bestaat uit widgets. Dit zijn bijvoorbeeld knoppen, tekstvakken, labels, etc. Eigenschappen en gedrag van elke widget kunnen worden aangepast in overeenstemming met de specifieke behoeften van een applicatie. Er zijn over het algemeen de volgende widgets in een GUI-bibliotheek:
- Raam: Een raamkozijn op het hoogste niveau dat andere widgets in zichzelf huisvest.
- Knop: Een klikbare knop waaraan een gebeurtenis is gekoppeld.
- Etiket: Eenvoudige alleen-lezen tekst
- Selectievakje : Box die de opties biedt om in of uit te schakelen.
- Radio knop: Box die de opties biedt om in of uit te schakelen, maar we kunnen slechts één keuzerondje in een groep kiezen.
- Vervolgkeuzelijst/keuzelijst met invoervak : Opent een vervolgkeuzemenu wanneer erop wordt geklikt. In het niet-geopende formulier kan slechts één item worden weergegeven.
- Tekstvak: Bewerkbaar tekstgebied.
- Keuzelijst: De doos met meerdere items en een schuifbalk om ze allemaal te doorlopen.
- Schuifregelaar: Een navigatiewidget die wordt gebruikt om door de applicatie te bewegen.
- Menu: Het menu bovenaan wordt weergegeven en biedt verschillende opties voor de applicatiegebruiker.
- Dialoog venster: Een vak dat bovenaan een venster wordt weergegeven. Soms om de melding weer te geven.
- Rooster: Gebruikt voor het lay-outbeheer van de gebruikersinterface.
Lay-outbeheer
De GUI-applicaties moeten worden geoptimaliseerd voor verschillende schermen van verschillende formaten, resoluties enz., waarbij wordt getracht een aantrekkelijke maar effectieve gebruikersinterface te behouden met de verschillende widgets die op het scherm zijn georganiseerd.
converteer een Java-object naar json
Afhandeling van evenementen
Bij GUI-programmering zijn gebeurtenissen zoals klikken op knoppen of toetsaanslagen van cruciaal belang. Deze gebeurtenissen worden door de app afgehandeld, zodat deze de gebruikersacties kan volgen. Er zijn verschillende gebeurtenissen gekoppeld aan verschillende widgets. Voor een klikbare knop zijn de bijbehorende gebeurtenissen bijvoorbeeld:
- Klik op Gebeurtenis
- Muisbewegingsgebeurtenis
- Focus In Gebeurtenis
- Focus Out-evenement
Populaire GUI-bibliotheken voor C++
C++ heeft veel platformonafhankelijke GUI-bibliotheken die kunnen worden gebruikt om een GUI-applicatie te ontwikkelen. Enkele van de populaire zijn:
- gtkmm
- Qt
- wxWidgets
- Beste ImuGui
Voorbeeld van C++ GUI-toepassing
We zullen de volgende tools gebruiken voor de onderstaande programma's:
- Qt-bibliotheek : De GUI-bibliotheek voor ons programma.
- Qt-ontwerper: Een interactieve GUI-sjabloonontwerper voor Qt.
- Qt-maker: IDE voor Qt GUI-toepassingen
Nu zullen we kijken naar echte cases voor GUI-programmering met C++ en Qt. We gaan een basis Hello World-applicatie ontwikkelen, een knop en wanneer op de knop wordt geklikt, verschijnt er een dialoogvenster met Hello World-tekst erop geschreven. We zullen het implementeren met behulp van deze stappen:
Stap 1: Een Qt-project maken
We zullen de Qt Creator openen en een nieuw project van het type Qt Widget Application maken. Voer de naam in, selecteer de locatie en je bent klaar om te gaan. De Qt-maker zal het project maken met alle vereiste bestanden.
Stap 2: Het venster ontwerpen
Wij zullen dan het bestand openen hoofdvenster.ui . Dit bestand bevat de gebruikersinterface van de applicatie. We voegen één tekstlabel toe met behulp van de ontwerper die zojuist is geopend.
Nu bevatten onze bestanden de volgende code:
hoofdvenster.h
C++
#ifndef MAINWINDOW_H> #define MAINWINDOW_H> > #include> > QT_BEGIN_NAMESPACE> namespace> Ui {>class> MainWindow; }> QT_END_NAMESPACE> > class> MainWindow :>public> QMainWindow> {> >Q_OBJECT> > public>:> >MainWindow(QWidget *parent = nullptr);> >~MainWindow();> > private>:> >Ui::MainWindow *ui;> };> #endif // MAINWINDOW_H> |
>
>
hoofd.cpp
C++
#include 'mainwindow.h'> > #include> > int> main(>int> argc,>char> *argv[])> {> >QApplication a(argc, argv);> >MainWindow w;> >w.show();> >return> a.exec();> }> |
>
>
hoofdvenster.cpp
C++
hoeveel steden zijn er in de vs
#include 'mainwindow.h'> #include './ui_mainwindow.h'> > MainWindow::MainWindow(QWidget *parent)> >: QMainWindow(parent)> >, ui(>new> Ui::MainWindow)> {> >ui->setupUi(>this>);> }> > MainWindow::~MainWindow()> {> >delete> ui;> }> |
>
>
hoofdvenster.ui
XML
xml version='1.0' encoding='UTF-8'?> |
>
>
Merk op dat mainWindow.ui in XML is geschreven. Het komt omdat Qt zijn UI-bestanden in XML schrijft.
Stap 4: Bouwen en uitvoeren
We kunnen het Qt-project in Qt Creator bouwen en uitvoeren met een enkele klik.
Uitvoer
Voordelen van GUI-applicaties
GUI-applicaties bieden verschillende voordelen, die bijdragen aan een betere gebruikerservaring en gestroomlijnde ontwikkeling:
- Gebruiksvriendelijke interface: Het gebruik van grafische gebruikersinterfaces (GUI's) biedt een eenvoudige en gemakkelijk te gebruiken benadering van softwaretoepassingen in vergelijking met andere benaderingen die meer tijd zouden vergen.
- Verbeterde interactiviteit: Het omvat interactieve functies zoals knoppen, vervolgkeuzemenu's, selectievakjes en schuifregelaars waarmee gebruikers controle kunnen uitoefenen over hun ervaringen.
- Compatibiliteit tussen platforms: De talen zoals Qt maken het mogelijk om een GUI-applicatie te maken voor Windows, macOS, Linux met C++.
- Snelle prototypering: De aanwezigheid van veel GUI-bouwers en ontwerptools in GUI-frameworks bevordert een snelle prototyping van interfaces, waardoor het hele ontwikkelingsproces sneller verloopt.