Annotatie: We bestuderen widgets: de visuele elementen waaruit de grafische gebruikersinterface bestaat, hun lay-out, groottebeleid, signaal-slotverbindingen, grafische interface-elementen en hun gebruik.

13.1 Widgets

Widgets zijn de visuele elementen waaruit de grafische gebruikersinterface bestaat.

Voorbeelden van widgets:

• Knop (klasse QPushButton);
• Label(klasse QLabel);
• Invoerveld (klasse QLineEdit);
• Numeriek tellerveld (klasse QSpinBox);
• Schuifbalk (klasse QScrollBar ).

Qt heeft ongeveer 50 kant-en-klare klassen grafische elementen beschikbaar voor gebruik. De bovenliggende klasse voor alle widgets is de klasse QWidget. Alle belangrijke eigenschappen van visuele elementen worden ervan geërfd, die we zorgvuldig zullen overwegen. Laten we beginnen met het verkennen van manieren om programma's te ontwikkelen met een grafische interface met een voorbeeld.

Laten we een leeg projectbestand maken. Laten we de projectwizard starten en het item selecteren in de sectie Projecten Ander project. Selecteer vervolgens het projecttype Leeg Qt-project. Laten we de inhoud aan het projectbestand toevoegen:

SJABLOON = app #Qt-modules die we zullen gebruiken QT += widgets #Voeg de widgets-module toe om met widgets te werken (noodzakelijk voor Qt5). TARGET = widget#Naam van het uitvoerbare bestand SOURCES += \ main.cpp

Laten we nu een eenvoudig programma maken met een venster waarin we de inscriptie weergeven. Laten we de grootte van het venster en de tekst van de titel instellen, en ook het lettertype voor de inscriptie instellen. Om dit te doen, maakt u een bestand main.cpp met de volgende inhoud:

#erbij betrekken #erbij betrekken int main (int lArgc, char * lArgv ) ( //Maak een QApplication-object dat het vensterprogramma initialiseert en configureert, //controleert de uitvoering ervan met behulp van de QApplication-gebeurtenislus lApplication (lArgc, lArgv); QLabel lLabel; //Maak een QLabel widget - label lLabel.setText ("Ik ben widget!"); // Stel de tekst in voor het label lLabel.setGeometry (200, 200, 300, 150); // Stel de afmetingen in - positie (x, y), breedte en hoogtetekst lLabel.setAlignment (Qt::AlignHCenter | Qt::AlignVCenter); //De klasse QFont wordt gebruikt om de lettertypeparameters in te stellen. //Selecteer de lettertypefamilie Arial Black en grootte 12. QFont lBlackFont ("Arial Black ", 12); setFont (lBlackFont); //Stel het lettertype in voor het label lLabel.show (); // Roep de methode show() aan om het label op het scherm weer te geven return lApplication.exec (); // Voer de programma om exec() //cycle gebeurtenisverwerking uit te voeren.

Zoals we kunnen zien, hebben de elementen waaruit interfaces in Qt bestaan ​​hun eigen positie en grootte - de zogenaamde "geometrie" - en nemen ze dus een overeenkomstig rechthoekig gebied op het scherm in beslag (zie figuur 13.1). Bovendien heeft elk van de elementen instellingen die het gedrag en uiterlijk ervan bepalen.

Rijst. 13.1.

Om een ​​structuur te creëren, worden widgets in een hiërarchie georganiseerd volgens het “deel-geheel”-principe. Elke widget kan andere widgets bevatten. Dit visuele element wordt de "ouder" (bovenliggende widget) van de elementen die het bevat. Merk op dat dergelijke relaties niet moeten worden verward met overerving in C++: relaties tussen klassen in een programma. Relaties tussen widgets zijn relaties tussen objecten. Dergelijke relaties hebben verschillende gevolgen:

• het bovenliggende element is verantwoordelijk voor het verwijderen van het onderliggende element: als de bovenliggende widget wordt verwijderd, worden automatisch alle onderliggende elementen verwijderd;
• de ouderwidget plaatst onderliggende widgets in zichzelf; delen van onderliggende widgets die verder reiken dan de ouder zullen onzichtbaar zijn;
• een deel van de status van de bovenliggende widget wordt overgedragen naar de onderliggende widgets - dit geldt voor sommige eigenschappen (zichtbaarheid, activiteit) en stijlen die op het visuele element worden toegepast.

Widgets die geen ouder hebben (widgets op het hoogste niveau) verschijnen als afzonderlijke vensters in het programma. Laten we eens kijken naar een voorbeeld. Laten we het nieuwe project ParentExample noemen. Het projectbestand bevat de gebruikelijke instellingen voor een GUI-project:

SJABLOON = app DOEL = ParentExample QT += widgets

Voor de widget die we als hoofdvenster gaan gebruiken, maken we een nieuwe klasse. Hiervoor in de categorie Bestanden en klassen Laten we de sectie C++ selecteren en vervolgens C++ Class selecteren (zie figuur 13.2).

De volgende stap is het maken van verschillende elementen op het venster. Om dit te doen, opent u het bestand parentwidget.cpp en wijzigt u de klassenconstructorcode. Om elementen weer te geven, maakt u ze eenvoudigweg in de klassenconstructor en stelt u ParentWidget in als bovenliggend element. De parentwidget.cpp-code ziet er als volgt uit:

#include " parentwidget.h " #include #erbij betrekken #erbij betrekken ParentWidget::ParentWidget (QWidget * parent) : QWidget (parent) ( //Maak een label dat de parent-widget aangeeft - dit is een exemplaar van de ParentWidget-klasse. QLabel * lLabel=new QLabel (this); //Position relatief ten opzichte van de linkerbovenhoek van de bovenliggende widget. lLabel ->setGeometry (50, 0, 100, 30); lLabel ->setText ("TextLabel"); QPushButton * lPushButton = nieuwe QPushButton (dit); lPushButton->setGeometry (50, 50, 100, 30); lPushButton->setText (" PushButton "); QLineEdit * lLineEdit = nieuwe QLineEdit ( this); lLineEdit ->setGeometry (50, 100, 100, 30); lLineEdit ("LineEdit "); voorbeeld) //Wijzig ten slotte de grootte van de bovenliggende widget setGeometry (x (), y (), 300, 150); // en stel de venstertiteltekst setWindowTitle in (" parent widgetExample ");

Omdat het bovenliggende element ParentWidget is, bevinden het label (QLabel), de knop (QPushButton) en het tekstveld (QLineEdit) zich daarin. De positie van onderliggende widgets wordt ingesteld ten opzichte van de linkerbovenhoek van de vader. U kunt dit eenvoudig verifiëren door de grootte en positie van ons programmavenster te wijzigen. Merk op hoe we de UI-elementen op de heap hebben gemaakt met behulp van de nieuwe operator. Dit zorgt ervoor dat elementen niet worden verwijderd nadat de ParentWidget-constructor is voltooid.

GUI-ontwikkeling

Het belangrijkste middel voor gebruikersinteractie met het programma is de grafische gebruikersinterface (GUI). De GUI van elk softwareproduct is een van de belangrijkste factoren voor de populariteit ervan.

Het creëren van een competente gebruikersinterface is een arbeidsintensief proces en vereist maximale aandacht voor detail. De interface die wordt gemaakt, moet de mogelijkheden van het programma maximaliseren, maar tegelijkertijd de gebruiker niet overbelasten met een overvloed aan menu's, knoppen, afbeeldingen en tekst.

In de praktijk brengt het programmeren van Windows-applicaties een uitgebreid gebruik van verschillende tools en wizards met zich mee. Rekening houdend met de standaarden van het geselecteerde besturingssysteem zal de software dus een vensterinterface hebben. Dit komt in de eerste plaats door het feit dat Windows de belangrijkste elementen zijn van de grafische interface in besturingssystemen (OS) van de Windows-familie. Het zijn rechthoekige gebieden met hun eigen instellingen, eigenschappen en typen.

Het grafische deel van het trainingsblok bevat vensters van vier typen:

Het hoofdvenster bevat alle navigatie-elementen binnen het programma, evenals aanvullende informatie die nodig is voor het gemak van het werken met de software;

Vensters voor informatiebasisbeheer omvatten alle besturingselementen van de informatiecomponent van de softwaretool. Ze bieden de toevoeging van tests, informatie, nieuwe gebruikers en beheerders, en maken de manipulatie van nieuw gecreëerde of bestaande gegevens mogelijk;

Windows voor het werken met softwaremogelijkheden - werk bieden met de belangrijkste functies van het trainingsblok, zoals slagen voor tests en het bestuderen van lezingen;

Vensters voor het weergeven van informatie en statistieken - dienen om verschillende soorten informatie weer te geven, evenals statistieken en grafieken.

Het hoofdprogrammavenster bevat de volgende bedieningselementen en informatie-uitvoer:

Venstertitel, die de naam van het programma en het doel van het venster bevat;

Systeemmenuknoppen die verantwoordelijk zijn voor het wijzigen, minimaliseren en sluiten van het programma;

Het venstertitelgebied, dat een puur decoratieve functie heeft en noodzakelijk is om te voldoen aan de algehele ontwerpoplossing;

Welkomstgedeelte;

Gebied voor weergave van de dag van de week, huidige datum en tijd;

Aangepaste werkbalk met knoppen voor toegang tot de belangrijkste functies van het programma;

Het administratieve paneel bevat een knop waarmee u toegang krijgt tot de administratieve bedieningselementen van de PS;

Statusbalk met informatie over alle bedrijfsmodi van het programma.

Het diagram van het hoofdvenster van de grafische interface (vensterweergave voor een beheerdersaccount) wordt weergegeven in Figuur 3.2

Figuur 3.2 -- Diagram van het hoofdvenster van de grafische interface: 1 -- venstertitel; 2 -- systeemmenuknoppen; 3 -- venstertitelgebied; 4 -- statusbalk; 5 - welkomsruimte; 6 - gebied voor weergave van de dag van de week, datum en tijd; 7 -- administratief paneel; 8 -- gebruikerspaneel; 9 -- knop voor toegang tot de leerfase; 10 - knop voor toegang tot de testfase; 11 -- knop voor het weergeven van statistieken en grafieken; 12 -- uitgang; 13 -- knop voor toegang tot het administratieve gedeelte van de applicatie

Gezien de focus van de software die wordt ontwikkeld, zijn er verschillende niet-standaard grafische oplossingen ontwikkeld om de aandacht en belangstelling voor de applicatie te vergroten. Bovendien kunt u hierdoor een soort individualiteit krijgen tussen de rest van de reeks programma's met vergelijkbare onderwerpen en focus.

Een van deze oplossingen kan kleurrijke interface-elementen worden genoemd die een uniek ontwerp creëren, die op dit gebied geen analogen hebben. We hebben het over geanimeerde inzetstukken op basis van Flash-animatie. Hiermee werd het ontwerp van de namen van alle belangrijke functionele vensters, navigatie-elementen en de interface van het registratie- en autorisatieformulier geïmplementeerd. De belangrijkste voordelen van deze ontwikkeling zijn: implementatie van een prettige en gebruiksvriendelijke interface; aanzienlijke vereenvoudiging van het gebruik van het programma, zowel op gebruikers- als op administratief niveau.

Een ander belangrijk voordeel van analoge programma's, zowel qua software als qua grafische implementatie, is de organisatie van het behalen van tests op verzoek. Om dit type test te doorstaan, moet de gebruiker SQL-query's samenstellen uit afzonderlijke, onafhankelijke elementen. Afhankelijk van het type verzoek dat moet worden gedaan op basis van de voorwaarden van de voorgestelde taak, wordt een specifieke polygoon voor montage gevormd. De polygoon bevat velden voor het vervangen van operatoren die er met de muis vanuit een afzonderlijk blok naartoe worden gesleept, en velden voor het invoeren van de namen van tabellen, velden en voorwaarden.

Gebruikersstatistieken worden geïmplementeerd in de vorm van grafieken, die worden opgebouwd afhankelijk van de door hem verkregen resultaten. Elke test heeft zijn eigen dynamiek. Diagrammen bevatten alle benodigde handtekeningen, worden geïmplementeerd met behulp van de TChart-component en hebben daarom veel bedieningselementen die standaard in de component zijn ingebouwd en als gevolg daarvan in de applicatie zijn geïmplementeerd.

Voor een gebruiksvriendelijkere visualisatie zijn de tabelkopstijlen vervangen door de stijlen die in de standaardontwikkelomgeving zijn geïmplementeerd.

Zo maakten de geïmplementeerde grafische oplossingen het mogelijk om het resultaat te bereiken dat werd beoogd door het idee van GUI-ontwerp. De gecreëerde interface maximaliseert de mogelijkheden van het programma, maar overbelast de gebruiker tegelijkertijd niet met een overvloed aan menu's, knoppen, afbeeldingen en tekst.

Bijgedragen door Saleem Gul en Tomas Pavek

Deze tutorial behandelt het maken van een eenvoudige grafische gebruikersinterface en het toevoegen van eenvoudige functionaliteit aan de serverzijde. In het bijzonder zullen we kijken naar de code die het gedrag van knoppen en velden op een Swing-formulier definieert.

We bekijken de lay-out en structuur van de GUI en voegen vervolgens enkele knoppen en tekstvelden toe. Tekstvelden zijn ontworpen om door de gebruiker ingevoerde informatie te ontvangen en het resultaat van het programma weer te geven. De knop start de werking van functies die in het clientgedeelte van het programma zijn ingebouwd. De applicatie die wordt gemaakt is een eenvoudige maar volledig functionele rekenmachine.

Voor een meer gedetailleerde handleiding over de ontwikkelingsfuncties van GUI Designer, inclusief videodemonstraties van verschillende ontwikkelingsfuncties, zie .

Geschatte duur: 20 minuten

Oefening 1: Een project maken

De eerste stap is het maken van een IDE-project voor de applicatie die u ontwikkelt. Laten we het project NumberAddition noemen.

1. Kies Bestand > Nieuw project. U kunt ook op het pictogram Nieuw project op de IDE-werkbalk klikken.
2. Selecteer in het gebied Categorieën het Java-knooppunt. Selecteer in het gebied "Projecten" de optie "Java-toepassing". Klik volgende".
3. Voer NumberAddition in het veld Projectnaam in en geef een pad op, zoals uw thuismap, als projectlocatie.
4. Schakel het selectievakje 'Gebruik een aparte map om bibliotheken op te slaan' in en geef de locatie van de bibliotheekmap op (optioneel). Zie Een bibliotheek delen met anderen in een document voor meer informatie Applicaties ontwikkelen met NetBeans IDE.
5. Verwijder het selectievakje 'Hoofdklasse maken' als dit is aangevinkt.
6. Klik op de knop "Gereed".

Oefening 2: De frontend maken

Om door te gaan met het maken van de interface, moet u een Java-container maken waarin de andere vereiste GUI-elementen worden geplaatst. Bij deze activiteit wordt een container gemaakt met behulp van een JFrame-element. De container wordt in een nieuw pakket geplaatst, dat verschijnt in het knooppunt "Bronpakketten".

Een JFrame-container maken

1. Klik in het venster Projecten met de rechtermuisknop op het NumberAddition-knooppunt en selecteer Nieuw > Overige.
2. Selecteer in het dialoogvenster Bestand maken de categorie Swing GUI Forms en het bestandstype JFrame Form. Klik volgende".
3. Voer NumberAdditionUI in als de klassenaam.
4. Selecteer het my.numberaddition-pakket.
5. Klik op de knop "Gereed".

De IDE maakt het NumberAdditionUI-formulier en de NumberAdditionUI-klasse in de NumberAddition-toepassing en opent het NumberAdditionUI-formulier in de GUI Builder. Het my.NumberAddition-pakket vervangt het standaardpakket.

Elementen toevoegen: een frontend maken

Vervolgens wordt via het "Palet" -venster de externe interface van de applicatie gevuld met het JPanel. Hierna worden drie JLabel-elementen (tekstlabels), drie JTextField-elementen (tekstvelden) en drie JButton-elementen (knoppen) toegevoegd. Als u nog niet eerder met de GUI-ontwerper hebt gewerkt, raadpleeg dan Een Swing GUI ontwerpen in de NetBeans IDE voor informatie over de plaatsing van componenten.

Na het slepen en plaatsen van de bovenstaande elementen zou het JFrame-element er uit moeten zien als de onderstaande afbeelding.

Als er geen Paletvenster in de rechterbovenhoek van de IDE staat, kiest u Venster > Palet.

1. Selecteer om te beginnen een paneel uit de categorie Swing Containers in het palet en sleep het naar het JFrame.
2. Het JPanel wordt gemarkeerd. Ga naar het venster Eigenschappen en klik op de knop met de ellipsen (...) naast het veld Rand om een ​​randstijl te selecteren.
3. In het dialoogvenster Rand selecteert u TitelBorder in de lijst en voert u Nummertoevoeging in het veld Titel in. Klik op "OK" om uw wijzigingen op te slaan en het dialoogvenster te sluiten.
4. Het scherm zou nu een leeg "JFrame"-element moeten weergeven met de titel "Nummertoevoeging", zoals weergegeven in de afbeelding. Voeg er volgens de afbeelding drie JLabels, drie JTextFields en drie JButtons aan toe.

Hernoemen van elementen

Met deze stap worden de elementen hernoemd die aan het JFrame-element zijn toegevoegd.

1. Dubbelklik op jLabel1 en wijzig ntrcn ("text" eigenschap) in Eerste getal.
2. Dubbelklik op jLabel2 en verander de tekst in Tweede nummer.
3. Dubbelklik op jLabel3 en verander de tekst in Resultaat.
4. Verwijder de standaardtekst uit jTextField1. De weergegeven tekst kan worden omgezet naar bewerkbare tekst. Om dit te doen, klikt u met de rechtermuisknop op het tekstveld en selecteert u "Tekst bewerken" in het pop-upmenu. Hiervoor moet u mogelijk jTextField1 naar de oorspronkelijke grootte herstellen. Herhaal deze stap voor de velden jTextField2 en jTextField3.
5. Wijzig de weergavetekst van jButton1 in Clear . (Als u de tekst van een knop wilt wijzigen, klikt u met de rechtermuisknop op de knop en selecteert u Tekst bewerken. U kunt ook op de knop klikken, pauzeren en opnieuw klikken.)
6. Wijzig de weergavetekst van jButton2 in Add .
7. Wijzig de weergavetekst van jButton3 in Exit .

Nu zou de voltooide GUI er uit moeten zien als de onderstaande afbeelding:

Oefening 3: Functionaliteit toevoegen

Deze oefening voegt de vereiste functionaliteit toe aan de knoppen Toevoegen, Wissen en Afsluiten. De velden jTextField1 en jTextField2 zullen worden gebruikt voor gebruikersinvoer, en jTextField3 zal worden gebruikt om het resultaat van het programma weer te geven. Het gemaakte programma is een eenvoudige rekenmachine. Dus laten we beginnen!

Functionaliteit toevoegen aan de knop Afsluiten

Om de knoppen functioneel te laten worden, moet aan elk ervan een gebeurtenishandler worden toegewezen, die verantwoordelijk is voor het reageren op gebeurtenissen. In ons geval moeten we de knopklikgebeurtenis identificeren - door met de muis te klikken of door het toetsenbord te gebruiken. Daarom wordt de interface "ActionListener" gebruikt om "ActionEvent"-gebeurtenissen af ​​te handelen.

1. Klik met de rechtermuisknop op de knop "Afsluiten". Selecteer in het pop-upmenu Gebeurtenissen > Actie > actionPerformed. Let op: het menu bevat nog veel meer evenementen waar het programma op kan reageren! Wanneer u de actionPerformed-gebeurtenis selecteert, voegt de IDE automatisch een ActionListener toe aan de knop Exit en wordt een handlermethode gemaakt om de actionPerformed-listenermethode af te handelen.
2. De IDE opent automatisch het venster "Broncode", waarin wordt weergegeven waar u de actie invoegt die u wilt dat de knop uitvoert wanneer u erop klikt (met uw muis of toetsenbord). Het venster "Broncode" moet de volgende regels bevatten: private void jButton3ActionPerformed(java.awt.event.ActionEvent evt) ( //TODO voeg hier uw afhandelingscode toe: )
3. Laten we nu de code toevoegen voor de actie die de knop "Afsluiten" moet uitvoeren. Vervang de TODO-regel door System.exit(0); . De voltooide code voor de knop "Afsluiten" zou er als volgt uit moeten zien: private void jButton3ActionPerformed(java.awt.event.ActionEvent evt) ( System.exit(0); )

Functionaliteit toevoegen aan de knop "Wissen".

1. Klik met de rechtermuisknop op de knop "Wissen" (jButton1). Selecteer in het menu dat verschijnt 'Gebeurtenissen > Actie > actieUitgevoerd'.
2. Als u op de knop "Wissen" klikt, wordt alle tekst uit alle "jTextField"-tekstvelden verwijderd. Om dit te doen, voegt u code toe die vergelijkbaar is met die hierboven. De voltooide broncode zou er als volgt uit moeten zien: private void jButton1ActionPerformed(java.awt.event.ActionEvent evt)( jTextField1.setText(""); jTextField2.setText(""); jTextField3.setText(""); )

Deze code verwijdert tekst uit alle drie de JTextFields, waardoor ze leeg blijven.

Functionaliteit toevoegen aan de knop "Toevoegen".

De knop "Toevoegen" zou drie dingen moeten doen.

1. Het neemt eerst de invoer van de gebruiker in de velden jTextField1 en jTextField2 en converteert deze van een "String" -type naar een "Float" -type.
2. Vervolgens wordt de optelling van de twee getallen uitgevoerd.
3. Ten slotte converteert het de som naar een String en plaatst deze in jTextField3 .

Laten we beginnen!

1. Klik op het tabblad Ontwerpen bovenaan de werkruimte om terug te keren naar het scherm Formulierontwerp.
2. Klik met de rechtermuisknop op de knop "Toevoegen" (jButton2). Selecteer in het pop-upmenu Gebeurtenissen > Actie > actionPerformed.
3. Voeg code toe voor de acties die de knop "Toevoegen" moet uitvoeren. De voltooide broncode zou er als volgt uit moeten zien: private void jButton2ActionPerformed(java.awt.event.ActionEvent evt)( // Eerst definiëren we float-variabelen. float num1, num2, result; // We moeten de tekst parseren naar een type float . num1 = Float.parseFloat(jTextField1.getText()); num2 = Float.parseFloat(jTextField2.getText()); // Nu kunnen we het resultaat = num1+num2; , we gaan // de waarde van het resultaat veranderen van een float naar een string.

Nu is het programma helemaal klaar en kunt u beginnen met het samenstellen en uitvoeren ervan.

Oefening 4: Het programma uitvoeren

Om het programma in de IDE uit te voeren, volgt u deze stappen:

1. Selecteer Uitvoeren > Hoofdproject uitvoeren (of druk op F6).

   Opmerking. Als u een venster opent waarin wordt aangegeven dat er voor Project NumberAddition geen hoofdklasse is opgegeven, selecteert u my.NumberAddition.NumberAdditionUI als hoofdklasse in hetzelfde venster en klikt u op OK.

Om het programma buiten de IDE uit te voeren, volgt u deze stappen:

Na een paar seconden wordt de applicatie gestart.

Opmerking. Als de toepassing niet wordt gestart door te dubbelklikken op een JAR-bestand, raadpleegt u JAR-bestandsassociaties op uw besturingssysteem voor meer informatie.

U kunt de toepassing ook vanaf de opdrachtregel uitvoeren.

Volg deze stappen om de toepassing vanaf de opdrachtregel uit te voeren:

1. Open een opdrachtprompt of terminalvenster.
2. Wijzig bij de opdrachtprompt de huidige map in de map NumberAddition/dist.
3. Voer bij de opdrachtprompt de volgende verklaring in: java -jar NumberAddition.jar

   Opmerking. Zorg ervoor dat my.NumberAddition.NumberAdditionUI is ingesteld als de hoofdklasse voordat u de toepassing uitvoert. Om dit te controleren klikt u met de rechtermuisknop op het NumberAddition-projectknooppunt in het deelvenster Projecten, kiest u Eigenschappen in het pop-upmenu en selecteert u de categorie Uitvoeren in het dialoogvenster Projecteigenschappen. In het veld Hoofdklasse moet my.numberaddition.NumberAdditionUI worden weergegeven.

Gebeurtenisverwerkingsengine

In deze tutorial werd gekeken naar het reageren op een eenvoudige klikgebeurtenis op een knop. Er zijn veel gebeurtenissen waarop een applicatie kan reageren. In de IDE kunt u als volgt de lijst met beschikbare gebeurtenissen bekijken die door GUI-elementen kunnen worden verwerkt:

1. Keer terug naar het NumberAdditionUI.java-bestand in de editor. Klik op het tabblad "Ontwerp" om de GUI-structuur in GUI Builder te bekijken.
2. Klik met de rechtermuisknop op een GUI-element en selecteer "Gebeurtenissen" in het menu dat verschijnt. Nu kunt u eenvoudig de inhoud van het menu verkennen zonder items te selecteren.
3. Als alternatief kunt u "Eigenschappen" selecteren in het menu "Venster". Klik in het venster Eigenschappen op het tabblad Gebeurtenissen. Op het tabblad "Gebeurtenissen" kunt u gebeurtenishandlers bekijken en wijzigen die zijn gekoppeld aan het momenteel actieve GUI-element.
4. De applicatie kan ook reageren op toetsaanslagen, enkele, dubbele of drievoudige klikken, bewegingen van de muisaanwijzer, het wijzigen van de grootte van vensters en bewegingen van de invoerfocus. Via het menu "Gebeurtenissen" kunt u automatisch gebeurtenishandlers voor al deze gebeurtenissen aanmaken. De meest voorkomende hiervan is de gebeurtenis 'Actie'. (Zie voor meer informatie hoe u met gebeurtenissen omgaat in de Sun Java Events Tutorial.)

Hoe worden evenementen verwerkt? Telkens wanneer u een gebeurtenis selecteert in het gebeurtenismenu, maakt de IDE automatisch een zogenaamde gebeurtenislistener aan en koppelt deze aan de ontwikkelaarscomponent. Volg deze stappen voor meer informatie over gebeurtenisverwerking:

1. Keer terug naar het NumberAdditionUI.java-bestand in de editor. Klik op het tabblad "Bron" om de GUI-broncode te bekijken.
2. Scroll naar beneden om de geïmplementeerde methoden jButton1ActionPerformed() , jButton2ActionPerformed() en jButton3ActionPerformed() te bekijken. Deze methoden worden gebeurtenishandlers genoemd.
3. Ga nu naar de methode initComponents(). Als deze methode ontbreekt, zoek dan de regel Gegenereerde code en klik op het +-teken naast die regel om de verborgen methode initComponents() weer te geven.
4. Let op het blauwe blok rond de methode initComponents(). Deze code is automatisch gegenereerd door de IDE en kan niet door de gebruiker worden gewijzigd.
5. Kijk nu naar de methode initComponents() zelf. Het bevat onder andere code die GUI-elementen initialiseert en op het formulier plaatst. Deze code wordt automatisch gegenereerd en bijgewerkt wanneer u elementen in de ontwerpmodus plaatst en wijzigt.
6. Zoek in de methode initComponents() het volgende fragment: jButton3.setText("Exit"); jButton3.addActionListener(nieuwe java.awt.event.ActionListener() ( public void actionPerformed(java.awt.event.ActionEvent evt) ( jButton3ActionPerformed(evt); ) ));

   Op dit punt wordt een gebeurtenislistenerobject "ActionListener" toegevoegd aan het GUI-element, in dit geval jButton3 . De interface "ActionListener" heeft een "actionPerformed" -methode op het "ActionEvent" -object, die wordt geïmplementeerd door eenvoudigweg de gebeurtenishandler jButton3ActionPerformed aan te roepen. Deze knop reageert nu op actiegebeurtenissen. Elke keer dat op de knop wordt geklikt, wordt een "ActionEvent" gegenereerd en doorgegeven aan de "actionPerformed" -methode van de gebeurtenislistenerinterface, die de code uitvoert die de ontwikkelaar voor die gebeurtenis heeft verstrekt in de gebeurtenishandler.

7. Leerkaart voor Java GUI-applicaties

GUI-standaard.

Een van de belangrijkste veranderingen in de computerindustrie is de komst van de grafische interface. Is het dus nodig om GUI-standaarden te adopteren die bepalen hoe Windows-applicaties eruit moeten zien? Macintosh, enz. Er zijn zelfs certificeringsprogramma's waarmee leveranciers hun applicaties op maat maken om de Windows-badge te verdienen. Dit wordt om verschillende redenen gedaan.

Een van de voordelen van Windows of Mac is hun standaard uiterlijk. Als je in een ervan hebt leren werken, bedenk dan dat je de rest onder de knie hebt. De meeste Windows-applicaties gebruiken dezelfde conventies, zodat u weet hoe u een bestand in elk van deze toepassingen kunt openen, opslaan, afdrukken, sluiten en kopiëren. De standaardinterface is zeer gebruiksvriendelijk. U moet proberen uw toepassingen vergelijkbaar te maken met andere Windows-toepassingen waarmee gebruikers al hebben leren werken. Er zijn zeven algemene principes voor GUI-ontwerp. Als u ze leert en volgt, komt uw app-ontwerp goed.

Zeven principes van GUI-ontwerp.

De zeven algemene principes van GUI-ontwerp zijn ontleend aan de Microsoft Windows Interface Guide. Ze vormen een blauwdruk van waaruit je je eigen standaarden kunt creëren. Dit ontwerp biedt ontwikkelaars en gebruikers twee belangrijke voordelen. Allereerst zien de apps er professioneel uit. Ten tweede zijn ze functioneel, consistent met andere applicaties en gemakkelijk te leren voor gebruikers.

Wil een aanvraag succesvol zijn, dan moet deze uiteraard goed geschreven en nuttig zijn; dit zijn de belangrijkste vereisten. De principes waar we het over hebben, geven de ontwikkelaar simpelweg stof tot nadenken.

1. Geef de gebruiker toestemming om de applicatie te besturen.

2. Volg het object/actie-paradigma.

3. Wees consistent.

4. Maak het gebruik van applicaties eenvoudig en duidelijk.

5. Streef naar harmonie.

6. Geef gebruikersfeedback.

7. Wees mild

Principe één: geef de gebruiker controle over de applicatie.

De gebruiker moet de applicatie besturen, dat wil zeggen toegang hebben tot elke applicatiemodule vanuit elke andere module. Voorheen werd voor dergelijke toegang een hiërarchisch menu gebruikt.

Laten we zeggen dat de gebruiker een nieuwe klant wil toevoegen. In het voorbeeld moet de gebruiker naar de ACCOUNTS RECCIEVAble-module gaan en van daaruit een nieuwe klant toevoegen. Hoe weet hij wat hij moet doen? Waarschijnlijk vanuit mijn ervaring met deze applicatie. En in de GUI-wereld selecteert de gebruiker eenvoudigweg de opdracht Nieuw in het menu en vervolgens Klant, zoals weergegeven in Fig. In dit moderne systeem kunt u een nieuwe klant, leverancier of voorraaditem toevoegen via het menu Bestand. Hiermee kunt u een klantrecord wijzigen terwijl u zich op het verkopersscherm bevindt en omgekeerd. De gebruiker hoeft niet langer door complexe en verwarrende hiërarchische menu's te navigeren.

Principe twee: volg het object/actie-paradigma.

Het object/actie-paradigma stelt dat een bepaalde bewerking op alle objecten in het systeem kan worden uitgevoerd. Het eenvoudigste en meest voor de hand liggende voorbeeld is het ondersteuningsscherm voor de klantendatabase (Fig.). Het scherm bevat een reeks knoppen en met elk van de onderste kunt u actie ondernemen op basis van informatie over de geselecteerde klant. U kunt het verwijderen, bewerken, afdrukken, enz. Acties die op een bepaalde client kunnen worden uitgevoerd, moeten op de juiste tijdstippen beschikbaar of niet beschikbaar zijn. Als een klantrecord zich bijvoorbeeld in de bewerkingsmodus bevindt, moeten de knoppen Verwijderen en Nieuw worden uitgeschakeld.

Principe drie: wees consistent.

Consistentie is een van de belangrijkste principes van GUI-ontwerp. GUI's – stellen gebruikers in staat meer applicaties te verkennen dan oudere programma's. En dit alles dankzij het consistentieprincipe. Wanneer een gebruiker een nieuwe applicatie tegenkomt, is hij al bekend met de basiscommando’s: bestanden openen, afdrukken en opslaan. Applicaties die op deze platforms worden ontwikkeld, zijn doorgaans consistent met elkaar.

Wees dus consistent bij het maken van nieuwe applicaties. Als u de opdracht Nieuw hebt gebruikt om een ​​nieuw item toe te voegen, gebruik deze dan overal. Dit woord mag niet worden vervangen door andere (bijvoorbeeld door het woord Add 9add). Dankzij uw consistentie weten gebruikers dat, waar ze ook de opdracht Nieuw tegenkomen, deze kan worden gebruikt om een ​​nieuw item toe te voegen.

Principe vier: maak het gebruik van de applicatie eenvoudig en duidelijk.

Een andere manier om dit idee onder woorden te brengen is: gebruik geen jargon. Er is een scherm met twee knoppen. Eén van hen zegt “Pak de database in”, en de andere zegt “Verwijder records gemarkeerd voor verwijdering”. De tweede invoer zal waarschijnlijk begrijpelijker zijn voor de gebruiker.

Bij het ontwikkelen van applicaties bestaat vaak de verleiding om programmeurstaal in de interface te gebruiken. Probeer dit indien mogelijk te vermijden.

Principe vijf: Streef naar harmonie

Zelfs in zwart-wit heeft dit scherm een ​​aanzienlijk esthetisch nadeel: een witte achtergrond met contrasterende objecten erop. In afb. Hetzelfde scherm ziet er qua kleur goed uitgebalanceerd uit.

Er zijn miljoenen kleurencombinaties die u naar Windows kunt overbrengen. Betekent dit dat ze allemaal moeten worden gebruikt? Natuurlijk niet. Je moet eenvoudige, rustige kleuren kiezen en de chaotische vermenging ervan vermijden, wat sommige programmeurs om de een of andere reden leuk vinden.

Principe zes. Geef feedback aan de gebruiker.

Stel u voor dat uw toepassing een proces heeft dat veel tijd in beslag neemt. Gedurende deze tijd kunt u een bericht op het scherm weergeven met de volgende inhoud: “Het programma wordt uitgevoerd, even geduld a.u.b..” Handige oplossing; maar hoe weet de gebruiker dat het niet bevroren is? Daarom is het zeer waarschijnlijk dat hij de applicatie een "drievingerige groet" zal geven (Ctrl+Alt+Del), hoewel alles goed zal komen met het programma.

Het is beter om de gebruiker te laten zien welk deel van het proces is voltooid. Dan zal hij het programma niet onnodig onderbreken, hij zal kunnen evalueren hoe ver het werk is gevorderd en andere dingen kunnen doen totdat het proces is voltooid. De productiviteit van de gebruiker zal dus met ongeveer 25 procent toenemen. Dit resultaat kan worden bereikt door de meter eenvoudig op het scherm weer te geven. Meestal worden berichten als “10 van de 100 verwerkte records” of “40% voltooid” weergegeven. Nog beter is om zowel het aantal verwerkte records als het percentage daarvan weer te geven."

Principe zeven: wees vergevingsgezind

Ieder van ons heeft wel eens een bericht verwijderd door per ongeluk op de verkeerde knop te drukken. Geef de gebruiker daarom de kans om van gedachten te veranderen of de zojuist ondernomen acties te annuleren. Als een proces lang duurt, veel gegevens wijzigt of vereist dat de gebruiker een back-up van gegevens maakt voordat hij een actie uitvoert, moet u een waarschuwing geven. Ik heb toepassingen gezien die tweemaal bevestiging vereisen en vervolgens om een ​​wachtwoord vragen. Hebben uw programma's dit beschermingsniveau nodig? Misschien. Het is de taak van de ontwikkelaar om de gebruiker te helpen als hij in welke fase van het werk dan ook een fout heeft gemaakt.

Het belang van GUI-standaardconventies.

Zoals u kunt zien, zijn de principes van GUI-ontwerp heel eenvoudig en moeten ze worden gebruikt bij het maken van schermen. Voordat u het scherm gaat ontwerpen, moet u echter bepalen hoe het eruit zal zien. Kies de formaten, lettertypen, kleuren, berichtstijlen, enz. Door deze problemen vooraf op te lossen, versnelt u uw werk aanzienlijk. Als het later om het lettertype of de stijl van berichten gaat, kijk je gewoon naar de standaard.

Regel 2: Verminder de gebruikerslast

Regel 3: Maak de interface compatibel

Richtlijnen

Netjes Startmenu-programma

Conclusie

Literatuur

Invoering

“De gouden ontwerpregel is: “Doe anderen nooit aan wat zij jou hebben aangedaan.” Onthoud wat je niet leuk vindt aan de software die je gebruikt. En doe niet hetzelfde in het programma waar je aan werkt. ”

Tracy Leonard

Waarom zou u de principes van gebruikersinterfaceontwerp volgen?

De software moet ontwikkeld worden rekening houdend met de eisen en wensen van de gebruiker; het systeem moet zich aanpassen aan de gebruiker. Daarom zijn ontwerpprincipes zo belangrijk.

Computergebruikers kunnen succesvolle ervaringen opdoen die vertrouwen in hun capaciteiten wekken en een hoog zelfbeeld opbouwen bij het werken met een computer. Hun handelingen met de computer kunnen worden gekarakteriseerd als 'succes brengt succes voort'. Elke positieve ervaring met het programma stelt de gebruiker in staat zijn vertrouwdheid met de software uit te breiden en zijn competentieniveau te verhogen. Een goed ontworpen interface, zoals een goede leraar en schoolboeken, zorgt voor een vruchtbare interactie tussen gebruiker en computer. Succesvolle interfaces kunnen iemand zelfs helpen om uit de gebruikelijke cirkel van programma's die hij gebruikt te stappen en nieuwe te ontdekken, en zijn begrip van hoe interfaces en computers werken te verdiepen.

Interface-ontwerpprincipes zijn concepten en weergaven op hoog niveau die kunnen worden gebruikt bij het ontwerpen van software. U moet bepalen welk principe het belangrijkst en acceptabel is voor uw systeem.

Bij het starten van het ontwerp is het noodzakelijk om het belangrijkste principe te benadrukken dat doorslaggevend zal zijn bij het zoeken naar compromissen. Het proberen om alle ontwerpprincipes te volgen kan ertoe leiden dat het in sommige situaties niet loont en een negatief effect heeft op het eindresultaat. Principes zijn een leidraad voor actie.

De drie principes van het ontwerp van de gebruikersinterface zijn als volgt geformuleerd:

1) gebruikerscontrole van de interface;

2) het verminderen van de geheugenbelasting van de gebruiker;

3) consistentie van de gebruikersinterface.

Waar u de ontwerpprincipes van de gebruikersinterface kunt vinden

Hansen presenteerde de eerste lijst met ontwerpprincipes. De principes zijn:

1) ken de gebruiker;

2) verminder het onthouden;

3) de bedrijfsvoering optimaliseren;

4) fouten elimineren.

Veel grote fabrikanten van besturingssystemen publiceren relevante handleidingen en instructies wanneer zij hun nieuwe producten op de markt brengen. Deze publicaties onthullen de principes van de benadering van interfaceontwerp. De handleidingen zijn geproduceerd door Apple Computer, Inc. (1992), IBM Corporation (1992), Microsoft Corporation (1995) en UNIX OSF/Motif (1993).

Lezers kunnen deze publicaties gebruiken als leermiddel. De interfaceterminologie kan per handleiding verschillen, maar de focus van het materiaal, de mate van complexiteit en de beschreven principes van de gebruikersinterface zijn voor alle boeken hetzelfde.

Het belang van het volgen van principes

"Interface-incompatibiliteit kan een groot bedrijf miljoenen dollars kosten aan verloren productiviteit en hogere ondersteuningskosten." - Jessie Briest.

Deze principes zijn van toepassing op alle software en hardware, in alle soorten en stijlen van interfaces. Ze zijn gedurende een vrij lange tijd ontwikkeld: er is onderzoek gedaan op het gebied van de software-interface, er is ontwikkeling uitgevoerd en gebruikers van veel computerplatforms, waaronder Macintosh en pc, zijn ondervraagd.

Deze principes hebben de tand des tijds en de komst van nieuwe computertechnologieën doorstaan. Jakob Nielsen merkte op: “De principes zullen fundamenteel blijven, zelfs als het programma een futuristisch 3D-ontwerp heeft met een DataGlove voor invoer, bewegingsherkenning en live videobeelden. Ze zullen relevant zijn omdat ze het basisidee van dialoog met de gebruikte machine tot uitdrukking brengen commando's.”

De interpretatie van deze principes zal afhangen van de hardware, het besturingssysteem, de componenten van de gebruikersinterface en de taken ervan. Vaak gaan zakelijke beslissingen voorbij aan het gebruik van principes door de ontwerpers. Gebruikers- en ontwerpermodellen zijn ook verschillend en beïnvloeden de manier waarop de principes zullen worden toegepast. In sommige belangrijke stadia van de projectontwikkeling kan de vraag rijzen: “Wat gebeurt er daarna?” Het antwoord zou moeten zijn: “Wat de gebruiker maar wil!”

De beslissing om de optimale principes voor het bouwen van een interface te kiezen, moet gezamenlijk door alle leden van het ontwerpteam worden ontwikkeld. Deze oplossingen moeten de koopbaarheid en ontwikkeling van softwareproducten helpen verbeteren.

Ontwerpregels voor gebruikersinterfaces

"Maak het eenvoudiger, maar niet primitiever."

Albert Einstein

Regel 1: Geef de controle aan de gebruiker

Ervaren ontwerpers laten gebruikers sommige problemen naar eigen goeddunken oplossen. Architecten moeten na voltooiing van een complex gebouwencomplex paden voor voetgangers ertussen aanleggen. Ze weten nog niet precies waar mensen de sites zullen oversteken. Daarom worden paden nooit gelijktijdig met de constructie van gebouwen aangelegd. Op de plekken tussen de huizen worden bordjes geplaatst met de inscriptie: ‘Loop alsjeblieft over het gras.’ Na enige tijd keren de bouwers terug en vullen nu pas, volgens de "wil" van de bevolking, de platgetreden paden met asfalt.

Principes die de gebruiker controle over het systeem geven:

1) gebruik de modi verstandig;

2) de gebruiker de mogelijkheid bieden om te kiezen: werken met een muis, of een toetsenbord, of een combinatie van beide;

3) laat de gebruiker de aandacht richten;

4) berichten tonen die hem zullen helpen bij zijn werk;

5) omstandigheden creëren voor onmiddellijke en omkeerbare acties, evenals feedback;

6) zorg voor passende paden en uitgangen;

7) het systeem aanpassen aan gebruikers met verschillende opleidingsniveaus;

8) maak de gebruikersinterface begrijpelijker;

9) geef de gebruiker de mogelijkheid om de interface naar wens aan te passen;

10) de gebruiker in staat stellen interface-objecten rechtstreeks te manipuleren;

Gebruik modi verstandig

Modi zijn niet altijd slecht. Het is noodzakelijk om iemand de mogelijkheid te geven de modi te kiezen die hij nodig heeft. De interface moet zo natuurlijk zijn dat de gebruiker zich er prettig bij voelt om ermee te werken. De gebruiker denkt er niet aan om over te schakelen naar de invoeg- of herschrijfmodus wanneer hij in een tekstverwerker werkt - dit is vrij rationeel en natuurlijk.

Laat iemand een muis en toetsenbord gebruiken

Mogelijkheid om met een toetsenbord te werken met behulp van een toetsenbord in plaats van een muis. Dit betekent dat het voor de gebruiker gemakkelijker zal zijn om te werken, hij kan het gewoon niet gebruiken of heeft het niet. Werkbalken zijn ontworpen om uw werk te versnellen wanneer u een muis gebruikt. Wanneer u met het toetsenbord werkt, zijn ze echter niet bereikbaar - voor dergelijke gevallen zijn er "vervolgkeuzemenu's".

Laat de gebruiker de aandacht verleggen

Dwing gebruikers niet om gestarte reeksen acties af te ronden. Geef ze de keuze: annuleer of sla de gegevens op en ga terug naar waar ze gebleven waren. Geef gebruikers de mogelijkheid om het werkproces in het programma te controleren.

Toon verklarende berichten en teksten

Gebruik gebruiksvriendelijke termen in de hele interface. Ze hoeven niets te weten over bits en bytes!

Kies in berichten en uitnodigingen de juiste toon. Het is net zo belangrijk om uzelf te verzekeren tegen problemen en fouten. Slechte terminologie en een onjuiste toon zullen ertoe leiden dat gebruikers zichzelf de schuld geven van eventuele fouten.

Zorg voor onmiddellijke en omkeerbare actie en feedback

Elk softwareproduct moet de functies UNDO en REDO bevatten. De gebruiker moet erop worden gewezen dat de actie niet ongedaan kan worden gemaakt en moet, indien mogelijk, een alternatieve actie toestaan. Houd iemand voortdurend op de hoogte van wat er op dat moment gebeurt.

Zorg voor duidelijke paden en uitgangen

Gebruikers moeten het leuk vinden om met de interface van elk softwareproduct te werken. Zelfs interfaces die in de industrie worden gebruikt, mogen de gebruiker niet intimideren; hij moet niet bang zijn om op knoppen te drukken of naar een ander scherm te gaan. De internetinvasie heeft aangetoond dat navigatie de belangrijkste interactieve techniek op internet is. Als de gebruiker begrijpt hoe hij toegang kan krijgen tot de gewenste pagina op het WWW, dan is er een kans van 80 procent dat hij de interface begrijpt. Mensen leren browsertechnieken heel snel.

Geschikt voor gebruikers met verschillende vaardigheidsniveaus

Offer ervaren gebruikers niet op ten behoeve van gewone gebruikers. Het is noodzakelijk om hen snelle toegang tot de programmafuncties te bieden. Verveel ze niet met meerdere stappen om een ​​actie uit te voeren als ze gewend zijn aan het gebruik van één macro-commando.

Maak de gebruikersinterface "transparant"

De gebruikersinterface is het ‘mythische’ deel van het softwareproduct. Bij een goed project voelen gebruikers de “aanwezigheid” niet eens. Als het slecht is ontworpen, zullen gebruikers zelfs veel moeite moeten doen om het softwareproduct effectief te gebruiken. Het doel van de interface is om mensen het gevoel te geven dat ze “in” de computer zitten en vrijelijk met objecten kunnen manipuleren en ermee kunnen werken. Dit wordt een “transparante” interface genoemd!