Een grafische interface maken met behulp van Qt. Elke widgetklasse heeft een vrij brede selectie van zowel geërfde als aanvullende bronnen die er specifiek voor zijn. Hiermee kunt u belangrijke kenmerken van objecten regelen, zoals achtergrondkleur, locatie

Bij het ontwikkelen van applicatieprogramma's lijkt het handig om grafische gebruikersinterface... In feite is dit het creëren van een omgeving voor het berekenen van problemen van een bepaalde klasse zonder programmering door de gebruiker. Als regel is het zinvol om dergelijke interfaces voor taken met meerdere parameters te ontwikkelen als dergelijke taken herhaaldelijk moeten worden opgelost. In dit geval is het raadzaam om een ​​grafische interface te ontwikkelen die de gebruiker helpt bij het verkrijgen van de resultaten van het oplossen van het probleem (meestal in grafische vorm) met een bepaalde keuze aan parameters. Een dergelijke interface kan ook handig zijn bij het maken van onderwijsproblemen, omdat de student in dit geval zijn aandacht niet besteedt aan het programmeren of oplossen van het probleem, maar aan de selectie van de vereiste parameters, analyse en begrip van de verkregen resultaten.

Uit de bovenstaande korte introductie is het duidelijk dat de verplichte elementen van de grafische interface bij het oplossen van wetenschappelijke en / of educatieve taken moeten zijn:

1. Een of meerdere vensters voor het weergeven van grafische rekenresultaten.

2. Verschillende bewerkbare vensters, met behulp waarvan de waarden van de taakparameters worden ingesteld en/of gewijzigd.

3. Bedieningsknoppen waarmee u het berekeningsproces kunt starten en stoppen, de resultaten opnieuw kunt tekenen en de taak kunt afsluiten.

4. Verklarende labels (statische tekst).

Natuurlijk zijn er andere bedieningselementen mogelijk, zoals schuiflijsten, keuzerondjes om een ​​van de vele opties te kiezen, enzovoort, maar in deze zelfstudie behandelen we alleen de vier typen die in detail worden vermeld. Afbeelding 8 toont de eenvoudigste interface die is ontworpen om de beats te bestuderen die worden gegenereerd door de toevoeging van twee harmonische oscillaties met frequenties die dicht bij elkaar liggen. Zoals je op de afbeelding kunt zien, zijn alle bovenstaande elementen erin aanwezig.

Om zo'n interface te maken, kunt u de grafische uitvoerfuncties gebruiken, evenals een speciale functie die is ontworpen voor interactieve gebruikersinteractie met de tekening. Deze functie wordt uicontrol genoemd. Maar om het werk te vereenvoudigen en hetzelfde type interface-elementen in het MATLAB-systeem te maken, is er een speciaal programma waarmee u de vereiste elementen op het niveau van visueel programmeren kunt maken, bijna zonder code te schrijven.

Rijst. 8. Eenvoudige grafische gebruikersinterface voor het oplossen van het "Beating" -probleem

9.1. Het uiterlijk van de interface creëren

In deze sectie zullen we kijken naar het gebruik van MATLAB om het uiterlijk van een grafische interface (GUI -GraphicsUserInterface) te ontwerpen met behulp van grafische (visuele) programmeertools. Om de visuele editor op te roepen, typt u de guide-opdracht in het MATLAB-opdrachtvenster. Na een bepaalde tijd, bepaald door de snelheid van uw computer, verschijnen er twee nieuwe vensters, weergegeven in Fig. 9. Een daarvan is een bedieningspaneel (Configuratiescherm, in de afbeelding links) en een vorm- of tekengebied (Figuur, in de afbeelding rechts). Deze vensters kunnen elkaar overlappen, maar we hebben ze voor de duidelijkheid naast elkaar geplaatst. De bovenstaande afbeelding verschijnt op het scherm als er geen open afbeelding is voordat u de gids belt. Als de gidsfunctie wordt aangeroepen na het tekenen van een afbeelding, wordt deze geopend in plaats van een lege. We zullen vanaf het begin kijken naar het maken van een grafische interface.

Voordat u een grafische interface maakt, is het raadzaam om "een project te ontwerpen" van wat u als interface wilt hebben. We zullen een voorbeeld bekijken van het uitvoeren van drie verschillende signalen in drie subvensters, wat in termen van grafische afbeeldingen op hoog niveau zou worden bepaald door de subplot-operators (3,1, k), waarbij k het nummer van de grafiek is. Daarnaast,

Rijst. 9. Algemeen overzicht van de visuele grafische editor en het bewerkingsvenster
rechts van de eigenlijke subvensters met grafieken, willen we drie bewerkbare subvensters hebben
waarvoor u de numerieke waarden van drie kunt invoeren / bewerken
variabelen. Laat deze variabelen willekeurige waarden aannemen.
In deze presentatie zullen we onze bewerkbare selectievakjes niet uitrusten.
die, of de ingevoerde waarden aan enige voorwaarden voldoen, hoewel zo'n
kan. Laten we deze variabelen N, R, C noemen. In dit voorbeeld bedoelen we de berekening
stroom in het RC-circuit wanneer het signaal met het nummer N op de klemmen wordt toegepast, en R en C - weerstand
spanning en capaciteit in het circuit (voor een gedetailleerde beschrijving van het probleem, zie paragraaf 10 van de hoofd
tekst van de handleiding).
Onze interface zou het mogelijk moeten maken om het bord te wijzigen
waarden van N, R en C, in drie gelokaliseerd worden
boven het andere subvenstersignaal (spanning,
geleverd aan de terminals), afgeleid van het signaal
la en de spanning over de weerstand U r. In aanvulling op
vensters voor het weergeven van grafieken en bewerkbare vensters	R u n E x ik t
invoer moet op het interfacepaneel worden geplaatst
er zijn nog twee knoppen - RUN - start het programma op	Rijst. 10. Interfaceweergave
account en EXIT - opzeggen en verwijderen
grafisch venster.
De eerste stap is het ontwikkelen van het uiterlijk van de interface. laat door
onze voorlopige schets, de interface zou er als volgt uit moeten zien
als volgt (afb. 10). De elementen van deze interface zijn drie vensters

grafiekuitvoer (assen in termen van het bedieningspaneel), drie statische labels N, R, C (tekst), drie vensters voor gegevensinvoer / bewerking (bewerken) en twee knoppen (drukken).

Om subvensters te maken waarin de grafieken worden weergegeven, gebruikt u de knop rechts in de afbeelding (venster en assen). Door op dit element op het bedieningspaneel te klikken en de muis naar het tekenpaneel te bewegen, moet u het kruis, dat op de punt van de muis staat, daarin plaatsen

de plaats waar de linkerbovenhoek van het eerste subvenster zou moeten zijn. Door de linkermuisknop ingedrukt te houden, moet u de resulterende rechthoek uitrekken tot de gewenste grootte. Daarna wordt de procedure voor het construeren van de andere twee vensters op dezelfde manier herhaald.

Gebruik de knop Bewerken die rechts wordt weergegeven om bewerkbare invoervakken te maken. Het wordt op dezelfde manier gebruikt als bij het maken van subvensters met assen. Eerst verschijnt een muis, geladen met een kruis, met behulp waarvan de invoerrechthoek wordt geconstrueerd.

De labels op het afbeeldingspaneel worden gemaakt met behulp van de tekstknop, die op dezelfde manier loopt en uitlijnt als hierboven beschreven. Om ervoor te zorgen dat een soort tekst binnen het gebied van statische tekst verschijnt

inscriptie, moet u werken met de eigenschappeneditor, die wordt aangeroepen met de knop Eigenschappenbewerker of door met de linkermuisknop te dubbelklikken op het overeenkomstige object in het afbeeldingspaneel.

Een paneel met het label Push wordt gebruikt om knoppen te maken en te plaatsen. De methode voor het plaatsen van de knop en het kiezen van de grootte is volledig hetzelfde als de hierboven beschreven methode voor het bewerkingsvenster en het statische tekstvenster.

Op deze manier geconstrueerd, kunnen uitvoer- en bewerkingsvensters, statische tekstvensters en knoppen, evenals andere objecten, worden uitgelijnd en een specifieke afstand ertussen instellen met behulp van de uitlijningstools.

Om dit te doen, klikt u op de overeenkomstige knop op het bedieningspaneel en het uitlijningspaneel verschijnt. Om een ​​aantal objecten in te stellen waarmee acties worden uitgevoerd, moet u ze selecteren door op elk van hen te klikken terwijl u de Shift-toets ingedrukt houdt. Geselecteerde objecten zijn gemarkeerd

zwarte stippen rond de corresponderende objecten. Als u de grootte van een object (knoppen, vensters, enz.) moet wijzigen, moet u op dit object klikken met de linkermuisknop en de muis gebruiken om de vereiste grootte te wijzigen op dezelfde manier als de grootte van een Windows raam.

Wanneer u met grafische objecten in het tekenpaneel werkt, is het raadzaam om het tekenpaneel uit te breiden (met de overeenkomstige knop van het Windows-venster) naar volledig scherm en de grootte van alle objecten in het tekenpaneel te selecteren.

Aangezien alle objecten standaard in pixels worden weergegeven, kan dit ertoe leiden dat wanneer het formaat van het uitvoervenster wordt gewijzigd, knoppen en/of vensters tegen elkaar kunnen botsen. Om een ​​dergelijk ongewenst fenomeen te voorkomen, is het noodzakelijk om de eenheden van de grootte van alle objecten in dimensieloze variabelen in te stellen - fracties van de venstergrootte. Deze maat wordt genormaliseerd genoemd. Om dit te doen, moet u de eigenschappeneditor bellen door op de knop op het configuratiescherm te klikken met het bovenstaande

door de Property-editor. Nadat we alle objecten hebben geselecteerd die we hebben ingevoerd in het bovenste venster van de eigenschappeneditor (door de Ctrl-toets ingedrukt te houden en objecten te selecteren met de linkermuisknop), vinden we in het onderste venster van de eigenschappeneditor de eigenschap Eenheden en selecteren deze door klikken op de linkermuisknop. Daarna, in het middelste deel van de editor, in een speciaal venster aan de linkerkant, verschijnt de eigenschap Eenheden, en aan de rechterkant - het waardeselectievenster, waarin zich een vervolgkeuzelijst bevindt met de toegestane eigenschapswaarden. De eigenschap Eenheden moet zijn ingesteld op genormaliseerd. Op dezelfde manier moet u de waarde van de eigenschap FontUnits instellen - de maateenheid voor de grootte van de lettertypen. Dit zorgt ervoor dat het lettertype wordt aangepast wanneer het formaat van het venster wordt gewijzigd.

Om labels op knoppen en in het gebied van statische tekst te plaatsen, selecteert u het overeenkomstige object (door te dubbelklikken rechtstreeks in het tekengebied of in het bovenste venster van de eigenschappeneditor) en zoekt u de eigenschap String in het onderste venster van de eigenschappeneditor en typ na het selecteren de gewenste tekst tussen de aanhalingstekens (bijv. 'Start' op de bijbehorende knop). Om labels boven elk van de uitvoervensters in te stellen, selecteert u het overeenkomstige venster en roept u de eigenschappeneditor8 op, in het onderste venster waarvan u de eigenschap Titel moet vinden.

8 De eigenschappeneditor kan niet alleen worden opgeroepen met de knop op het bedieningspaneel, maar ook

en dubbelklikken op het bijbehorende object.

STRUCTUUR VAN HET DOCUMENT

4.1. Visuele programmeertechnologie

4.1.2. Hoofdvenster van Visual Studio

4.1.3. VS hoofdmenu en werkbalk

4.1.4. Vensters van Visual Studio-paneel

4.1.5... Instellingen VS-ontwikkelomgeving configureren

4.1.6. Testtaken

4.1.7. VS .NET-ontwikkelomgevingslab

4.1. Visuele programmeertechnologie
en basisconcepten

Vergeleken met eerdere generaties programmeertalen, is de taal programmeren op hoog niveau- Visual Basic .Net (VB) heeft een aantal fundamentele verschillen. Het is een krachtig, professioneel programmeersysteem waarmee u snel en efficiënt toepassingen voor MS Windows kunt maken . Aangezien het systeem « visueel», de programmeur kan het zichtbare deel van de MS Windows-toepassing maken , zonder bijna een enkele regel code te schrijven. Dit zichtbare deel is de basis van de gebruikersinterface « softwareproject - gebruiker », met behulp waarvan de gebruiker interageert met het softwareproject. De ontwikkeling van zowel de programmacode van klassen en methoden voor het oplossen van de taak, als de programma-interface van de applicatie wordt uitgevoerd volgens de principes objectgeoriënteerde benadering , geïmplementeerd in Visual Studio .Net (VS) . Applicaties (projecten) draaien onder MS Windows met behulp van Geïntegreerde ontwikkelomgeving (IDE).

Kenmerkend voor toepassingen die met de IDE zijn gemaakt, is dat er op elk moment veel objecten op het scherm aanwezig zijn: formulieren, vensters, knoppen, menu's, tekst- en dialoogvensters, schuifbalken, enz. De gebruiker heeft een zekere (afhankelijk van het algoritme van het op te lossen probleem) keuzevrijheid met betrekking tot het gebruik van deze objecten. Hij kan het Klik gebruik de muisknop, sleep het object, voer gegevens in het venster in, enz. In de meeste gevallen wordt niet uitgegaan van een vooraf gedefinieerde volgorde van acties. Typisch de ontwikkelaar software(Software), het creëren van een softwareproject, mag de acties van de applicatiegebruiker niet beperken. Hij moet software ontwikkelen die adequaat reageert op elke actie van de gebruiker, zelfs de verkeerde (in een goed programma mogen er geen onbedoelde acties zijn). Daarom zijn er voor elk object op het scherm een ​​aantal mogelijke gebeurtenissen. Sommige worden door de gebruiker gemaakt: klikken of dubbelklikken op een muisknop, een object slepen, een toetsenbordtoets indrukken, tekst in een venster invoeren, enz. andere gebeurtenissen treden op als gevolg van andere gebeurtenissen: er wordt bijvoorbeeld een raam geopend of gesloten, een besturing wordt actief (beschikbaar) of verliest activiteit. Bovendien manifesteert elke gebeurtenis zich in bepaalde acties (reacties, reacties, gedrag) van het softwareproject. Deze acties zijn onder te verdelen in twee groepen.

De eerste is een gevolg van de eigenschappen van het object. Deze eigenschappen worden door de softwareontwikkelaar ingesteld uit een bepaalde standaardlijst met eigenschappen die door het programmeersysteem en/of MS Windows zelf is ingesteld. . Een voorbeeld van dergelijke acties is het minimaliseren van het venster na het klikken op de knop Minimaliseren. In dergelijke gevallen kan de programmeur het gedrag van een object niet veranderen. In veel gevallen is er echter een zekere mogelijkheid om de reactie van een object op een gebeurtenis (tekst, lettertype, kleur, grootte, schermruimte, etc.) te variëren door bepaalde eigenschappen in te stellen.

De tweede groep acties (respons) op gebeurtenissen wordt volledig bepaald door de softwareontwikkelaar. Dit wordt mogelijk gemaakt door de mogelijkheid om voor elke mogelijke gebeurtenis een VB-procedure te specificeren. In het begin is elke dergelijke procedure leeg, zonder hoofdtekst van de procedure, en daarom gebeurt er niets wanneer een gebeurtenis plaatsvindt. In theorie is het mogelijk om voor elke gebeurtenis een procedure te maken, maar in de praktijk vult de programmeur de procedurecode alleen in met de programmacode voor die gebeurtenissen die van belang zijn.

VB biedt de gebruiker dus een op gebeurtenissen gebaseerde objectgeoriënteerde programmeeromgeving. Simpel gezegd, het proces van het ontwikkelen van een softwareproject in deze omgeving komt neer op het kiezen van een set objecten en hun eigenschappen, het instellen van gebeurtenissen en procedures voor hun verwerking, en het creëren van software om het probleem op te lossen, die samen zorgen voor het functioneren van de gemaakte applicatie.

De belangrijkste termen van visueel programmeren, zoals hierboven vermeld, zijn: een voorwerp, het formulier, eigendom, klasse, evenement, procedure, methode dr., die in elke ontwikkelomgeving voor visuele toepassingen dezelfde betekenis hebben.

Object- dit is een soort afzonderlijke entiteit die verschilt van andere entiteiten in speciale eigenschappen, gedrag, interactie met andere objecten van de applicatie. In de objectgeoriënteerde benadering is elke applicatie een verzameling onderling verbonden objecten die de noodzakelijke functionele vereisten voor de applicatie implementeren. Een object is altijd concreet en bestaat daadwerkelijk op het formulier (als besturingselementen) of in de toepassing (als klasseninstanties).

De basiseenheid in objectgeoriënteerd programmeren is een programma-object dat zowel de gegevens (eigenschappen) die het beschrijven als de middelen om deze gegevens te verwerken (methoden) combineert. Dat wil zeggen, softwareobjecten hebben eigenschappen, kunnen methoden gebruiken en reageren op gebeurtenissen.

De belangrijkste objecten van visueel programmeren zijn de vorm en de bedieningselementen.

Formulier (Formulier) ) Is een object dat een venster vertegenwoordigt waarop bedieningselementen zijn geplaatst, bijvoorbeeld een knop (Knop); Label (Label); Tekstveld (Tekstveld); Selectievakje (CheckBox); Lijst (Keuzelijst); Keuzelijst (ComboBox); Schakelaar (Radio knop)en etc .

De visuele programmeeromgeving stelt u in staat om objecten op het scherm te zien in de ontwerpfase van de applicatie, maakt het mogelijk om objecten aan te passen door hun locatie, grootte en andere eigenschappen te veranderen. Het formulier is containerobjecten, en is tegelijkertijd zelf ook een object. Bij het plaatsen van een object op het formulier worden de belangrijkste parameters van het object opgeslagen in de uitvoerbare programmacode. In dit geval zijn objecten ook programmablokken of fragmenten van programmacode (klassen, procedures, methoden, modules), waaruit het ontworpen project (applicatie) wordt "geassembleerd".

Objecteigenschap Is een waarde of kenmerk opgeslagen door een object. Tegelijkertijd bepaalt de verzameling eigenschappen van een object zijn toestand. Bijvoorbeeld, Tekst ( Tekst ) of Kleur ( TerugKleur ) vorm, manier Tekstuitlijning ( Uitlijning ) of Karakterkleur ( Voorgrond-kleur ) tekstvak zijn eigenschappen. In het programma wordt het object benaderd op objectnaam ... Objecteigenschappen kunnen in het venster worden ingesteld Eigendommen en verander de eigenschappen van objecten in de programmacode.

In de programmacode zijn er bepaalde regels (specifiek formaat) voor het instellen van een eigenschap - objectnaam en eigenschapsnaam volgens de regels van puntnotatie worden gescheiden door een punt .

Klas Is een verzameling objecten met gemeenschappelijke eigenschappen en gedrag. Bijvoorbeeld, Knop1( Knop1 ) Aan Formulier 1(Formulier 1 ) met al zijn specifieke eigenschappen en actie is een object van de klasse Knop . De klasse wordt gekenmerkt door fundamentele concepten van objectgeoriënteerd programmeren als:

· erfenis - het klasseobject heeft alle eigenschappen, methoden en gebeurtenissen van de klasse;

· inkapseling - het complexe werkingsmechanisme van het object verbergen;

· polymorfisme - objecten van verschillende klassen kunnen methoden met dezelfde naam gebruiken, die voor verschillende objecten anders werken.

Verzameling van objecten Is een verzameling objecten verenigd door een gemeenschappelijke naam, en niet noodzakelijk objecten van dezelfde klasse. Een voorbeeld van een collectie zijn de collecties die in VB zijn ingebouwd, waaronder:

· Formulieren(Formulieren) - veel geladen aanvraagformulieren;

· Bediening(Controls) - Set van alle controles op een formulier.

Naamruimte Is een hiërarchische klassenbibliotheek georganiseerd onder unieke namen zoals: Systeem.Windows of Systeem.Math . Om toegang te krijgen tot de klassen en objecten op basis daarvan die zijn opgenomen in de naamruimte, kan de operator aan het begin van de programmacode worden geplaatst Invoer . Elk project in VS bevat ook een rootnaamruimte. De naamruimte in de VS-documentatie wordt ook wel klassenbibliotheken .

Evenement Is een middel tot interactie van objecten met elkaar. De gebeurtenis kan door de gebruiker worden gecreëerd of optreden als gevolg van de invloed van andere softwareobjecten. Objecten kunnen gebeurtenissen genereren en acties uitvoeren als reactie op gespecificeerde gebeurtenissen. Voorbeelden van evenementen - vorm , Klik ( Klik ) muis over het object, DblClick ( Dubbelklik ) muis en anderen . Als reactie op gebeurtenissen wordt een gebeurtenisprocedure aangeroepen, die de eigenschappen van het object kan veranderen, noem het

In VB-taal , zoals in veel andere programmeertalen die zijn ontworpen voor het schrijven van applicaties voor MS Windows , gebruikt door
gebeurtenisgestuurd programmeermodel. Dit betekent in feite dat geen enkele applicatie op zichzelf kan functioneren zonder interactie met andere applicaties en met het besturingssysteem. Laten we bijvoorbeeld het eenvoudigste geval nemen waarin een opdracht wordt opgegeven door op een toets op het toetsenbord te drukken. Het heeft geen directe invloed op een van de applicaties en MS Windows fungeert in dit geval als tussenpersoon. Bij het detecteren van de gebeurtenis die is gekoppeld aan het indrukken van de toets, beslist het besturingssysteem waar de gebeurtenisafhandeling moet worden doorgegeven. Het toetsaanslagbericht wordt vervolgens naar de toepassing verzonden. De applicatie verwerkt het door de toetsenbordinvoer te analyseren en geeft een bericht weer, bijvoorbeeld in een actief tekstveld.

Apps gemaakt door met met behulp van VB , werken volgens hetzelfde principe. Tegelijkertijd verricht VB een soort intern werk. Als er bijvoorbeeld op een knop in de toepassing wordt geklikt, vindt er een gebeurtenis plaats - VB onderschept het bijbehorende MS Windows-bericht en roept de gebeurtenis op Klik object Knop .

Merk op dat in gebeurtenisgestuurde programma's, er is geen doorlopende programmacode die van begin tot eind loopt. Dit betekent dat de gebruiker na het starten van het programma geen duidelijk idee heeft van het specifieke pad van de uitvoering van het algoritme. Dat wil zeggen, u kunt op elk moment op een willekeurige knop in de applicatie klikken of bijvoorbeeld tekst in een veld invoeren, of u kunt desgewenst de verwerking stoppen. Daarom moet de toepassing wachten tot een van deze gebeurtenissen zich voordoet en pas daarna de opgegeven programmacode uitvoeren. Dus, er is altijd een gebeurtenis nodig om de programmacode uit te voeren - dit is een van de belangrijkste regels voor het maken van applicaties in de MS Windows-omgeving .

De reactie op gebeurtenissen is om te bellen gebeurtenis procedure , die eerder is gemaakt door een softwareontwikkelaar. De betekenis van een dergelijke procedure is het uitvoeren van geprogrammeerde acties: het wijzigen van de eigenschappen van een object, het aanroepen van methoden, het uitvoeren van berekeningen volgens een bepaald algoritme met de uitvoer van het resultaat naar bepaalde plaatsen in de applicatie, enz. de gebruiker drukt op een knop, vervolgens wordt een reeks acties uitgevoerd als reactie. wordt gedefinieerd in de gebeurtenisprocedure volgens het gespecificeerde algoritme.

Naast gebeurtenisprocedures kan de gebruiker algemene procedures maken (gebruikersprocedures).

Gebruikersprocedure: Is een complete programmacode die een apart algoritme implementeert voor het probleem dat wordt opgelost. Een dergelijke procedure wordt echter bij de naam van deze procedure genoemd en niet als gevolg van een gebeurtenis.

Methode Is een procedure die de mogelijke acties met een object implementeert. Als gevolg van deze acties verandert er iets in het object. VB biedt de gebruiker een groot aantal ingebouwde bibliotheekroutines die klaar zijn voor gebruik. Deze routines zijn een integraal onderdeel van de klassenbibliotheek, dat wil zeggen, het zijn klassenmethoden van het .NET Framework.

Procedurele programmeertools (procedures) vormen een integraal onderdeel van elke programmeertaal op hoog niveau, een van de belangrijkste onderdelen van het moderne programmeerparadigma. Maar pas met de komst van talen die objectgeoriënteerd programmeren ondersteunen, werden speciale soorten ingebouwde procedures geïntroduceerd, genaamd methoden . Methoden: "Werk"-achtige procedures, maar ze behoren tot specifieke objecten, net als eigenschappen. In de programmacode kunt u op dezelfde manier naar de methode verwijzen als naar de eigenschap – puntnotatie gebruiken.

In VB-omgeving kunt u maken: eigen procedures, gemaakt door de softwareontwikkelaar .

Houd er rekening mee dat elke programmacode van een project dat is geschreven door middel van VB uit een reeks procedures bestaat, dat wil zeggen dat alle programmacode zich als het ware in een reeks subroutineprocedures en functieprocedures bevindt, en de procedures zelf bevinden zich in een klas (module).

Subroutineroutines beginnen met een trefwoord Sub Einde sub, en functieprocedures beginnen met het sleutelwoord Functie en eindigen met trefwoorden Einde functie , waartussen de programmacode van deze procedure wordt geplaatst. De programmacode van elke procedure bestaat uit een of meer operators van de VB-programmeertaal.

Gebeurtenisafhandelingsmethode Is een complete programmacode die een apart algoritme implementeert. Voor elke gebeurtenis kunt u een reactie programmeren, dat wil zeggen de reactie van het object op een gebeurtenis die zich heeft voorgedaan, met als resultaat dat een bepaalde reeks acties wordt uitgevoerd - een methode om de gebeurtenis af te handelen.

De naam van een gebeurtenisprocedure bestaat uit drie delen (inclusief een onderstrepingsteken): Objectnaam_Gebeurtenisnaam.

Op deze manier creëer je elke keer dat je code schrijft die moet worden uitgevoerd als reactie op een gebeurtenis, een gebeurtenisprocedure die automatisch wordt aangeroepen wanneer de bijbehorende gebeurtenis plaatsvindt (er wordt bijvoorbeeld op een knop geklikt).

Operator Is een programmeertaalconstructie die een of meer . specificeert activiteiten , over geproduceerd operanden . De operanden kunnen constanten, variabelen, uitdrukkingen, functies, enz. zijn. Elke operator is geschreven in overeenstemming met de syntactische regels van de programmeertaal. Bijvoorbeeld, in de toewijzingsoperator het teken " = "Lees" om toe te wijzen "en betekent dat een waarde gelijk is aan de waarde van de uitdrukking rechts van de" = ". Bijvoorbeeld de lijn

Form4.1.Text = "Formulier met afbeelding" betekent dat in het geheugen genaamd Form4.1.Tekst waarde is geschreven - tekst "Formulier met afbeelding" en de lijn P = A + B + C gebruikt in een programma om de waarde van een uitdrukking te berekenen en toe te wijzen aan een variabele R .

Project Is een ontwikkelde applicatie (applicatieprogrammacode) - een set bestanden waarin informatie wordt opgeslagen over alle softwarecomponenten die in deze applicatie worden gebruikt. sinds VB , aan de ene kant is het objectgeoriënteerd visueel programmeersysteem, omdat het programmeeralgoritmen in deze taal toestaat, en aan de andere kant is dit systeem: software-ontwerpomgeving, Het resultaat van de programmeer- en ontwerpprocessen is een project dat programmeercode en een grafische interface combineert. Daarom, om een ​​softwareproject op schijf te branden of van schijf te laden, is het noodzakelijk om het project, dat alle componenten (bestanden) bevat, te branden of te laden. Gewoonlijk bestaat een VB-toepassing uit veel bestanden, waaronder een projectbestand met de extensie .vbproj . Een projectbestand bevat informatie met betrekking tot één softwaretaak - één applicatie.

Het project is tevens een verzameleenheid. De samenstelling van het project resulteert in een montage. Elk project bevat een of meer naamruimten. In de beginfase van het maken van een project voor: een bepaald projecttype automatisch gebouwd projectkader bestaande uit klassen die erfgenamen zijn van de klassen die in de bibliotheek zijn opgenomen FCL(Framework Class Library) - .NET Framework-klassebibliotheken. Dus als de ontwikkelaar aangeeft dat hij een project van het type " Windows Forms-toepassing", Dan wordt het object standaard opgenomen in het projectframework Formulier 1- de erfgenaam van de bibliotheekklas Formulier... De ontwikkelaar van het softwareproject zal het gemaakte formulier aanvullen met besturingselementen - objecten van de overeenkomstige klassen, waardoor de mogelijkheden van het standaardformulier worden uitgebreid.

Elk project bevat alle informatie die nodig is om een ​​assembly te bouwen. Het project bevat alle bestanden met klassen, automatisch gebouwd op het moment dat het project werd gemaakt, en bestanden met klassen, gemaakt door projectontwikkelaar. Het project omvat ook: installaties en middelen nodig voor werk. Het bestand met de assemblagebeschrijving (manifest) maakt ook deel uit van het project.

Afhankelijk van het geselecteerde type kan het project uitvoerbaar of onuitvoerbaar... Projecten in uitvoering zijn bijvoorbeeld projecten van het type Console applicatie of Windows Forms-toepassing... Bij het bouwen van het skelet van een lopend project, bevat het een klasse die een statische procedure bevat met de naam Hoofd ()... Als resultaat van het samenstellen van een dergelijk project, PE-file - uitvoerbaar draagbaar bestand met de extensie .exe... Zo een PE-bestand kan alleen worden uitgevoerd op computers waarop het is geïnstalleerd Kader .Net omdat het een beheerd codebestand is.

Niet-uitvoerbare projecten zijn bijvoorbeeld projecten als:
Klassenbibliotheek (DLL) die de extensie heeft. dll, en is dynamisch gekoppelde bibliotheek, die. deze projecten zijn bedoeld om te worden opgenomen (gekoppeld) aan andere projecten. Als resultaat van het samenstellen van een project zoals:
Klassenbibliotheek de assembly bevat een bestand met de extensie .dll... Dergelijke projecten (assemblages) kunnen niet direct op een computer worden uitgevoerd. Ze zijn gekoppeld aan de uitvoerbare assemblages, van waaruit de methoden van de klassen in het niet-uitvoerbare project worden aangeroepen ( DLL).

Stadia van implementatie van de eenvoudigste projecten- kan worden onderverdeeld in verschillende stappen:

· Creatie van een grafische interface van het project (gebruikersinterface), die moet zorgen voor de interactie van het project met de gebruiker tijdens het werk van het project;

· Waarden instellen van eigenschappen van objecten van de grafische interface;

· Creëren, bewerken en debuggen van de programmacode van het project;

· Opslaan van het project voor toekomstig gebruik;

· projectuitvoering.

Oplossing Is een applicatie in ontwikkeling waarvan de bestanden informatie bevatten over een of meer projecten, meestal gerelateerd aan een gemeenschappelijk thema. Het oplossingsbestand wordt gebruikt om verschillende onderling verbonden projecten te beheren en heeft de extensie .sln. Bovendien wordt elk project dat in VS is gemaakt in één shell geplaatst met de naam Beslissing.

Wanneer een nieuw project wordt gemaakt, kan het in een bestaand project worden geplaatst. Oplossing of er kan een nieuwe worden gemaakt Oplossing het project bevatten.

Let dus nogmaals op het volgende:

Klas Is het centrale concept van objectgeoriënteerd programmeren. VB-projectontwikkelaar gebruikt standaardklassen uit de bibliotheek FCL en creëert zijn eigen klassen. Bovendien vervult de klas twee verschillende rollen:

· Klas - ten eerste is het een module - een architecturale eenheid om een ​​project modulair op te bouwen. Omgaan met de complexiteit van een groot project is alleen mogelijk door het in modules te verdelen - relatief kleine eenheden die onafhankelijke ontwikkeling en daaropvolgende integratie in een groot systeem mogelijk maken.

· Klas - ten tweede is het een gegevenstype, dat wil zeggen een semantische eenheid die de eigenschappen en het gedrag beschrijft van een reeks objecten die klasseninstanties worden genoemd. Syntactisch vertegenwoordigt een klasse een beschrijving van gegevens genaamd klasse velden, Omschrijving klassenmethoden en beschrijving klasse evenementen ... Voor een klasse die als een gegevenstype wordt beschouwd, definiëren velden de status van objecten, methoden - het gedrag van objecten. Gebeurtenissen zijn enkele speciale toestanden waarin een object zich kan bevinden en die kunnen worden afgehandeld door gebeurtenishandlers buiten de klasse. Dus bijvoorbeeld een object van de klasse MENSELIJK kan een evenement hebben " Verjaardag"En elk van de handlers van dit evenement kan bij deze gelegenheid hun felicitaties aan het object brengen.

Meestal spelen klassen beide rollen. Maar in VB kun je klassen definiëren die alleen de rol van een module spelen. het modules waarvoor het onmogelijk is om objecten te creëren.

Een goede programmeerstijl vereist dat elke klasse wordt opgeslagen in een apart bestand met de naam van de klasse. Dit is een stijlvereiste waaraan in de praktijk wellicht niet wordt voldaan. In onze voorbeelden zullen we proberen deze stijl te behouden.

Door een klasse te definiëren, kan de projectontwikkelaar dynamisch klasseobjecten maken. Het is een veelgemaakte fout voor programmeurs die nieuw zijn in objectstijl om de concepten object en klasse te verwarren. Je moet het verschil vanaf het begin begrijpen. Een door de ontwikkelaar gegenereerde objectklasse vertegenwoordigt een statische beschrijving van een set objecten. Een object is een dynamisch concept, het wordt gecreëerd tijdens de uitvoering van een softwaresysteem, bestaat daadwerkelijk in het geheugen van de computer en verdwijnt meestal aan het einde van de projectuitvoering. Een projectontwikkelaar kan een softwaresysteem maken dat twee of drie klassen omvat, maar in de loop van de werking van een dergelijk systeem kunnen honderden objecten dynamisch verschijnen, die op een complexe manier met elkaar interageren.

VS hoofdvenster

Merk op dat het proces van het maken van een eenvoudige toepassing in de VS-omgeving in het volgende in detail zal worden beschreven Onderwerp 4.2, evenals in laboratoriumwerk aan Onderwerp 4.1."Visual Studio .NET geïntegreerde ontwikkelomgeving". Maak uzelf nu vertrouwd met de interface van de VS-omgeving.

Loop MS Visual Studio.

Het scherm zal weergeven: startpagina- MS VS ( rijst. 4.1.2-1).

Er zijn verschillende hoofdpanelen in dit venster: Standaard menu, raam Standaard werkbalk, raam Startpagina anitz een, raam Oplossingsverkenner, raam Gereedschapskist.

Rijst. 4.1.2-1. Startpagina -Microsoft Visual Studio

Opgemerkt moet worden dat wanneer u met VB in de VS IDE werkt, u zowel de knoppen op de standaardwerkbalk als de hoofdmenu-items bovenaan het scherm kunt gebruiken.

VS biedt de gebruiker een verscheidenheid aan werkbalken. Deze werkbalken bevatten knoppen waarvan de functie afhangt van de functionaliteit van de specifieke werkbalk.

Raam startpagina laat je recent gebruikte projecten openen, zoekt naar voorbeelden, bevat verschillende links naar sites die kunnen helpen bij het werken met VS . Naast het proces om met een project te werken, worden in plaats van de startpagina verschillende vensters weergegeven, bijvoorbeeld een venster Vorm constructor, raam Code-editor en etc.

In het raam Oplossingsverkenner de bestanden van de huidige oplossing (projecten) worden weergegeven. Dit venster wordt gebruikt om gedetailleerde informatie over objecten te krijgen. . Hiermee kunt u elementen, hun eigenschappen, methoden, gebeurtenissen in projecten en verwijzingen ernaar zoeken en verkennen.

Tools die zijn ontworpen om de ontwikkeling van applicaties te vergemakkelijken, bevatten ook een venster. Gereedschapskist, besturingselementen weergeven die worden gebruikt in VB-projecten .

Gebruik het dialoogvenster om een ​​nieuw project te maken
Een project maken(afb. 4.1.2-2). Om het te openen, moet u een van de volgende handelingen uitvoeren:

commando uitvoeren Een project maken uit het hoofdmenu-item - Bestand;

druk op de knop Een project maken, op de standaardwerkbalk.

Rijst. 4.1.2-2. Dialoogvenster Een project maken

In VB kunt u toepassingen maken volgens verschillende sjablonen. In deze zelfstudie gebruiken we alleen de sjabloon Windows Forms-toepassing.

Deze applicatie is ontworpen om traditionele Windows-applicaties te maken, waarvan de gebruikersinterface is ontworpen met behulp van MS Windows Forms. Bovendien kunt u voor de vorm van deze sjabloon bepaalde kenmerken instellen en er verschillende bedieningselementen op plaatsen.

Laten we eens kijken naar een voorbeeld van de basisstappen die nodig zijn om een ​​project te maken. Windows Forms-toepassing.

Voorbeeld 4.1.2-1. Maak een project met de naam Voorbeeld 4.1.2-1 en een grafische interface bestaande uit een formulier met één knop en één tekstveld. Wanneer u op de knop klikt, zou u "Hallo, MTUSI!" moeten zien.

Projectformulier Voorbeeld-4.1.2-1 eruit kan zien als in fig. 4.1.2-3.

Rijst. 4.1.2-3 Project GUI (formulier)Voorbeeld 4.1.2-1

Om het project uit te voeren: Voorbeeld 4.1.2-1 de volgende stappen zijn vereist:

1) Start VS.

2) Maak een nieuw project aan:

Bestand en voer dan het commando uit Maak een project;

Selecteer een projectsjabloon Windows Forms-toepassing .

Als gevolg hiervan wordt een venster geopend Form1.vb [Constructor] – Vorm constructor(zoals aangegeven door het bijbehorende tabblad) waarmee u de grafische interface van de applicatie kunt implementeren.

Selecteer een element van het hoofdmenu Bestand en voer dan het commando uit Sla alles op ;

dit opent een dialoogvenster Bewaar dit project;

Vul in het veld in Naam naam van het project Voorbeeld-4.1.2-1(standaard noemt VB WindowsApplication1) en voer vervolgens in Naam locatiemap waar het project zich zal bevinden, of gebruik de knop Overzicht om de gewenste directory te zoeken (Fig. 4.1.2-4);

Klik op de knop Opslaan ;

als resultaat ziet de ontwikkelomgeving eruit zoals in Fig. 4.1.2-5.

Rijst. 4.1.2-5. Ontwikkelomgeving

Vensters van Visual Studio-paneel

Paneelvenster startpagina(Fig. 4.1.1-1) stelt u in staat om de laatst gebruikte projecten te bekijken, bijvoorbeeld programma's te zoeken, zowel vanuit Help als op internet, en ook links te bekijken naar sites met nieuws over het VS-product , documentatie, tutorials.

Rijst. 4.1.4-1 PaneelvensterVorm constructor en zijn contextmenu

Startpagina wordt automatisch geopend wanneer VS start . Als het raam startpagina niet verscheen, kan het worden opgeroepen met behulp van de opdracht startpagina hoofdmenu-item Weergave

Paneelvenster Form1.vb[Constructor] (Vorm constructor)
Hoofd venster is een Het belangrijkste werkvenster , waarin het visuele ontwerp van de applicatie wordt uitgevoerd (Fig. 4.1.4-1). Dit venster kan op het scherm worden weergegeven door op het tabblad te klikken Form1.vb[aannemer] of door te dubbelklikken op de naam van het formulier in het venster Oplossingsverkenner.

In het raam Vorm constructor alle vormen van de applicatie zijn visueel gemaakt met behulp van de toolkit van de ontwikkelomgeving. U kunt een raster gebruiken om objecten nauwkeurig op een formulier in een venster te plaatsen.

De grootte van het formulier in het venster kan worden gewijzigd met behulp van de formulierselectiegrepen en de muis. Om het formaat van het formulier te wijzigen, plaatst u de muisaanwijzer op de markering en, wanneer het een tweepuntige pijl wordt, verplaatst u deze naar de gewenste grootte.

Werken in een raam Form1.vb[aannemer] u kunt het contextmenu gebruiken (Fig. 4.1.4-1).

Rijst. 4.1-2. PaneelvensterCode-editoren haar en contextmenu

Paneelvenster Form1.vb (code-editor) Is een krachtige teksteditor met veel mogelijkheden, de belangrijkste programmeertool voor het maken en debuggen van programmacode. Het kan ook worden geplaatst in Hoofd werkvenster(afb. 4.1-2) .

Paneelvenster Oplossingsverkenner en het contextmenu wordt getoond in Fig. 4.1.4-3.

Rijst. 4.1.4-3. PaneelvensterOplossingsverkenner en zijn contextmenu

Paneel Bedieningselementen gegroepeerd op secties
(Afb. 4.1.4-4). Om uitkeringsformulieren te maken, hebt u het hoofdgedeelte nodig Standaard controles ( rijst. 4.1.4-5).

Paneelvenster Eigendommen is bedoeld voor het weergeven en instellen van de eigenschappen van projectobjecten, inclusief het formulier en de daarin geplaatste objecten. Dit venster bevat bijvoorbeeld eigenschappen van het geselecteerde object zoals positie in de vorm, hoogte, breedte, kleur en andere (Fig. 4.1.4-6).

Een dialoogvenster openen Eigendommen Doe een van de volgende dingen:

In het hoofdmenu-item Weergave selecteer team Eigenschappenvenster;

Klik op de knop Eigenschappenvenster op de standaard
werkbalken;

Selecteer een team Eigendommen contextmenu van het geselecteerde object;

Druk op een klaviertoets .

Rijst. 4.1.4-4. Toolbox-venster 4.1.4-5. Paneel

bedieningselementen gegroepeerd per sectie (standaarditems)

Rijst. 4.1.4-6. PaneelvensterEigendommen

Aangezien het formulier en de bedieningselementen elk op zichzelf objecten zijn, verandert de set eigenschappen in dit venster afhankelijk van het geselecteerde object. De knoppen gebruiken In alfabetische volgorde en
Per categorie objecteigenschappen kunnen respectievelijk alfabetisch of per groep (categorie) worden bekeken.

Onder in het venster verschijnt knopinfo waarin het doel van de geselecteerde objecteigenschap wordt uitgelegd. Een uitgebreidere uitleg vindt u in het helpsysteem. U kunt ook dynamische hulp gebruiken door de gewenste sectie in het venster te selecteren Dynamische hulp.

Een dialoogvenster gebruiken Eigendommen, u kunt de standaardeigenschappen van objecten wijzigen. Sommige eigenschappen van een object, bijvoorbeeld grootte en positie, kunnen worden ingesteld door het object te verplaatsen en het formaat ervan te wijzigen met de muis in de formulierontwerper. De eigenschappen die zijn ingesteld in het venster Eigenschappen kunnen tijdens runtime worden gewijzigd door de juiste codes te schrijven in procedures die u met de code-editor maakt.

Een formulier bevat doorgaans veel objecten. Als u meerdere objecten tegelijk selecteert, kunt u in het eigenschappenvenster de gemeenschappelijke eigenschappen van deze objecten zien.

4.1.5. Instellen van de parameters van de geïntegreerde
ontwikkelomgevingen

De toolvensters, het helpsysteem, de compileropties van de VS-ontwikkelomgeving zijn eenvoudig en zeer flexibel te configureren.

De volgende stappen laten zien hoe u de instellingen van de VB-ontwikkelomgeving kunt wijzigen volgens de best practice-richtlijnen:

1) In het hoofdmenu-item Onderhoud commando uitvoeren Import en export van parameters... U kunt de wizard gebruiken die verschijnt om uw omgevingsinstellingen op te slaan voor gebruik op een andere computer, instellingen van een andere computer te laden of de instellingen opnieuw in te stellen — de optie die u nu wilt selecteren.

2) Selecteer Alle instellingen resetten en klik vervolgens op de knop Verder... VS zal vragen of het nodig is om de huidige instellingen in een bestand op te slaan alvorens te configureren. U moet altijd een back-up maken van uw huidige instellingen, zodat u ernaar kunt terugkeren als de nieuwe instellingen "onhandig" blijken te zijn.

3) Controleer of een optie is geselecteerd Ja, en let op de naam van het bestand en de mappen waarin VS deze instellingen gaat opslaan.

4) Als u naar deze instellingen moet terugkeren, dezelfde wizard en de optie Importeren geselecteerde omgevingsinstellingen.

5) Om een ​​lijst te zien van de standaard opties die gebruikt worden voor VS, klik op de knop Verder.

6) Klik op Opties voor VB-ontwikkeling en klik vervolgens op de knop Klaar.

7) De wizard schakelt tussen IDE-opties, inclusief menuopdrachten, werkbalken en instellingen voor sommige dialoogvensters, vensters Gereedschap en Code-editor.

8) U kunt dit configuratieproces elke keer herhalen als u uw huidige instellingen moet resetten (bijvoorbeeld als u een fout hebt gemaakt in de instellingen), of als u VS moet configureren om een ​​ander programmeerhulpmiddel te gebruiken.

9) Om de wizard te sluiten, klikt u op de knop Dichtbij.

Als de omgevingsparameters voor het werken met VB zijn geconfigureerd, kunt u taken uitvoeren. Als ze echter zijn gewijzigd, moeten de volgende stappen worden gevolgd om te controleren of de instellingen die zijn gekoppeld aan de projecten en de VB-compiler overeenkomen met die in de praktijk. Om de project- en compilerinstellingen te controleren, moet u het volgende doen:

1) Klik op commando Opties menu onderdeel Onderhoud en open een dialoog Opties.

2) Dialoogvenster Opties Is het venster dat veel van de VS-afstemopties bevat. Om alle parameters te zien die kunnen worden gewijzigd, klikt u op het selectievakje Toon alle opties bevindt zich in de linkerbenedenhoek van het dialoogvenster.

3) In het dialoogvenster Opties klik op categorieën Projecten en oplossingen en dan op de sectie Algemeen. Deze groep selectievakjes en opties configureert de instellingen voor VS-projecten en -oplossingen. Om ervoor te zorgen dat de software overeenkomt met de instellingen die in deze zelfstudie worden gebruikt, moet u configureren en

GUI-standaard.

Een van de belangrijkste veranderingen in de computerindustrie is de opkomst van de grafische interface. Dus er was behoefte aan GUI-standaarden die bepalen hoe Windows-applicaties eruit moeten zien? Macintosh, enz. Er zijn zelfs certificeringsprogramma's waarmee leveranciers hun applicaties aanpassen om de Windows-badge te krijgen. Dit wordt gedaan om verschillende redenen.

Een van de sterke punten van Windows of Mac is hun standaard uiterlijk. Als je hebt geleerd om in een ervan te werken, bedenk dan dat de rest van jou is. De meeste Windows-toepassingen gebruiken dezelfde conventies, dus u weet hoe u een bestand vanuit elk ervan kunt openen, opslaan, afdrukken, sluiten en kopiëren. De standaard interface is zeer gebruiksvriendelijk. U moet proberen uw toepassingen eruit te laten zien als andere Windows-toepassingen waarmee gebruikers al hebben leren werken. Er zijn zeven algemene principes voor GUI-ontwerp. Als je ze bestudeert en volgt, zal je applicatieontwerp in orde zijn.

Zeven principes van GUI-ontwerp.

De zeven algemene principes van GUI-ontwikkeling zijn ontleend aan de Micrisoft Windows Interface Guide. Ze bieden een raamwerk van waaruit u uw eigen normen kunt creëren. Deze regeling biedt ontwikkelaars en gebruikers twee belangrijke voordelen. Ten eerste zien de apps er professioneel uit. Ten tweede zijn ze functioneel, consistent met andere applicaties en gemakkelijk voor gebruikers om te leren.

Om een ​​aanvraag succesvol te laten zijn, moet deze natuurlijk goed geschreven en bruikbaar zijn - dat is de belangrijkste vereiste. De principes waar we het over hebben, geven de ontwikkelaar alleen maar stof tot nadenken.

1. Laat de gebruiker de applicatie besturen.

2. Volg het object / actie-paradigma.

3. Wees consequent.

4. Maak het werken met applicaties eenvoudig en duidelijk.

5. Streef naar harmonie.

6. Geef gebruikersfeedback.

7. Wees neerbuigend

Principe één: laat de gebruiker de applicatie besturen.

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

Stel dat een gebruiker een nieuwe klant wil toevoegen. In het voorbeeld moet de gebruiker naar de module ACCOUNTS RECCIEVable gaan en vervolgens een nieuwe klant toevoegen van. Hoe weet hij wat hij moet doen? Waarschijnlijk door mijn ervaring met deze app. En in de GUI-wereld selecteert de gebruiker gewoon Nieuw in het menu en vervolgens Klant, zoals weergegeven in Afbeelding 1-4. In dit moderne systeem kunt u een nieuwe klant, verkoper of voorraadinvoer toevoegen via het menu Bestand. Hiermee kunt u het klantrecord wijzigen terwijl u op het scherm van de verkoper bent, en vice versa. De gebruiker hoeft het complexe en verwarrende hiërarchische menu niet langer te begrijpen.

Principe twee: volg het object / actie-paradigma.

Het object / actie paradigma stelt dat een bewerking kan worden uitgevoerd op alle objecten in het systeem. Het eenvoudigste en meest voor de hand liggende voorbeeld is het klantenbestand-ondersteuningsscherm (fig). Het scherm bevat een reeks knoppen en aan de onderkant kunt u een actie uitvoeren op informatie over de geselecteerde klant. U kunt het verwijderen, bewerken, afdrukken, enz. Acties die op een specifieke klant kunnen worden uitgevoerd, moeten op de juiste momenten beschikbaar of niet beschikbaar zijn. Als een klantrecord zich bijvoorbeeld in de bewerkingsmodus bevindt, moeten de knoppen Verwijderen en Nieuw worden gedeactiveerd.

Principe drie: wees consistent.

Consistentie is een van de belangrijkste principes van GUI-ontwikkeling. GUI - Hiermee kunnen gebruikers meer toepassingen verkennen dan oudere programma's. En dit alles dankzij het principe van consistentie. Wanneer een gebruiker met een nieuwe applicatie wordt geconfronteerd, is hij al bekend met de basiscommando's: bestanden openen, printen en opslaan. Applicaties die op deze platforms worden ontwikkeld, zijn meestal consistent met elkaar.

Wees dus consistent bij het maken van nieuwe applicaties. Als je de opdracht Nieuw hebt gebruikt om een ​​nieuw item toe te voegen, gebruik het dan overal. Vervang dit woord niet door andere, bijvoorbeeld het woord Add 9Add). Met uw reeks weten gebruikers dat waar ze ook de opdracht Nieuw tegenkomen, ze kunnen worden gebruikt om een ​​nieuw record toe te voegen.

Principe vier: maak uw aanvraag eenvoudig en duidelijk.

Je kunt het zo zeggen: gebruik geen jargon. Er is een scherm met twee knoppen. Een van hen zegt 'Database inpakken' en de andere zegt 'Remove records gemarkeerd voor verwijdering'. De tweede invoer zal waarschijnlijk begrijpelijker zijn voor de gebruiker.

Bij het ontwikkelen van applicaties is het vaak verleidelijk om programmeertaal in de interface te gebruiken. Probeer dit zoveel mogelijk te vermijden.

Principe vijf: Streef naar harmonie

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

Er zijn miljoenen kleurencombinaties die naar Windows kunnen worden overgebracht. Betekent dit dat ze allemaal moeten worden gebruikt? Natuurlijk niet. Je moet eenvoudige, rustige kleuren kiezen en hun willekeurige vermenging vermijden, wat om de een of andere reden sommige programmeurs bevalt.

Zesde principe. Geef gebruikersfeedback.

Stelt u zich eens voor dat uw aanvraag een proces heeft dat veel tijd in beslag neemt. Gedurende deze tijd kunt u een bericht weergeven dat lijkt op het volgende op het scherm: "Het programma is actief, even geduld aub." Handige oplossing; maar hoe weet de gebruiker dat het niet bevroren is? Daarom is het zeer waarschijnlijk dat hij de applicatie een groet met drie vingers zal geven (Ctrl + Alt + Del), hoewel het programma in orde zal zijn.

Het is beter om de gebruiker te laten zien welk deel van het proces is uitgevoerd. Dan onderbreekt hij het programma niet tevergeefs, kan hij beoordelen hoe ver het werk gevorderd is en kan hij andere dingen doen tot het proces is afgerond. Zo zal de productiviteit van de gebruiker met ongeveer 25 procent toenemen. Dit resultaat kan worden bereikt door de meter eenvoudig op het scherm weer te geven. Meestal worden berichten zoals "10 van de 100 verwerkte records" of "40% voltooid" weergegeven. Beter nog, toon zowel het aantal verwerkte records als hun percentage "

Principe zeven: wees vergevingsgezind

Ieder van ons heeft wel eens een record verwijderd door per ongeluk op de verkeerde knop te drukken. Laat de gebruiker daarom de mogelijkheid om van gedachten te veranderen of de acties die hij zojuist heeft uitgevoerd te annuleren. Als het proces lang duurt, een grote hoeveelheid gegevens verandert of als de gebruiker een reservekopie van de gegevens moet maken voordat de actie wordt uitgevoerd, moet een overeenkomstige waarschuwing worden gegeven. Ik heb toepassingen gezien die twee keer moeten worden bevestigd, en vraag dan ook om een ​​wachtwoord. Hebben uw programma's dit beschermingsniveau nodig? Misschien. Het is de taak van de ontwikkelaar om de gebruiker te helpen als hij een fout heeft gemaakt in een willekeurig stadium van het werk.

Het belang van GUI-conventies.

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

Met dank aan Saleem Gul en Tomas Pavek

Deze zelfstudie begeleidt u bij het maken van een eenvoudige grafische gebruikersinterface en het toevoegen van enkele eenvoudige serverfunctionaliteit. In het bijzonder zullen we kijken naar de code die het gedrag van knoppen en velden in een Swing-formulier definieert.

We zullen de lay-out en structuur van de GUI bekijken en vervolgens enkele knoppen en tekstvakken toevoegen. Tekstvelden zijn ontworpen om informatie te ontvangen die door de gebruiker is ingevoerd en om het resultaat van het programma uit te voeren. De knop start het werk van functies die zijn ingebouwd in het clientgedeelte van het programma. De applicatie die u maakt, is een eenvoudige maar volledig functionele rekenmachine.

Voor een meer gedetailleerde gids over de ontwikkelingsfuncties van de GUI-ontwerper, inclusief videodemonstraties van de 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 aan het ontwikkelen bent. Laten we het project NumberAddition noemen.

1. Selecteer Bestand> Nieuw project. U kunt ook op het pictogram Nieuw project in de werkbalk van de IDE klikken.
2. Selecteer in het gebied Categorieën het Java-knooppunt. Selecteer Java-toepassing in het gebied Projecten. Druk op "Volgende".
3. Voer NumberAddition in het veld Projectnaam in en geef een pad op, bijvoorbeeld in uw thuismap, als de projectlocatie.
4. Schakel het selectievakje Een aparte map gebruiken voor het opslaan van bibliotheken in en geef de locatie van de bibliothekenmap op (optioneel). Voor meer informatie, zie Uw bibliotheek delen met anderen in uw document Applicaties ontwikkelen met NetBeans IDE.
5. Schakel het selectievakje "Maak hoofdklasse" uit als dit is aangevinkt.
6. Klik op de knop Voltooien.

Oefening 2: Maak een frontend

Om door te gaan met het maken van de interface, moet u een Java-container maken die de andere vereiste GUI-elementen bevat. In deze stap wordt de container gemaakt met behulp van het JFrame-element. De container wordt in een nieuw pakket geplaatst, dat zal verschijnen in het knooppunt Bronpakketten.

Een JFrame-container maken

1. Klik in het venster Projecten met de rechtermuisknop op het knooppunt NumberAddition en kies Nieuw> Overige.
2. Selecteer in het dialoogvenster Nieuw bestand de categorie Swing GUI Forms en het bestandstype JFrame Form. Druk op "Volgende".
3. Voer NumberAdditionUI in als de klassenaam.
4. Kies dan voor het my.numberaddition pakket.
5. Klik op de knop Voltooien.

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: de front-end bouwen

Vervolgens wordt met behulp van het "Palet"-venster de externe interface van de applicatie gevuld met het JPanel. Dit voegt drie JLabels (tekstlabels), drie JTextField-elementen (tekstvelden) en drie JButtons (knoppen) toe. Als u niet eerder met de GUI Designer hebt gewerkt voor informatie over de plaatsing van componenten, zie Een swing-GUI ontwikkelen in NetBeans IDE.

Na het slepen en neerzetten van de bovenstaande elementen, zou het JFrame eruit moeten zien als de onderstaande afbeelding.

Als er geen Palette-venster in de rechterbovenhoek van de IDE is, kiest u Venster> Palet.

1. Selecteer eerst een paneel uit de categorie Swing Containers in het palet en sleep het naar het JFrame.
2. Het JPanel is gemarkeerd. Ga naar het venster Eigenschappen en klik op de knop met het weglatingsteken (...) naast het vak Rand om een ​​randstijl te selecteren.
3. Selecteer in het dialoogvenster Rand de optie TitledBorder in de lijst en voer 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 moeten weergeven met de kop Nummertoevoeging, zoals weergegeven. Voeg er zoals weergegeven drie JLabels, drie JTextFields en drie JButtons aan toe.

Items hernoemen

Deze stap hernoemt de elementen die aan het JFrame-element zijn toegevoegd.

1. Dubbelklik op jLabel1 en verander ntrcn (eigenschap "tekst") in Eerste nummer.
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 geconverteerd naar bewerkbaar. Klik hiervoor met de rechtermuisknop op het tekstvak en kies Tekst bewerken in het pop-upmenu. Als u dit doet, moet u mogelijk jTextField1 herstellen naar de oorspronkelijke grootte. Herhaal deze stap voor jTextField2 en jTextField3.
5. Wijzig de weergavetekst van jButton1 in Wissen. (Als u de knoptekst 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 Toevoegen.
7. Verander de displaytekst van jButton3 in Exit.

De voltooide grafische interface zou er nu uit moeten zien als de onderstaande afbeelding:

Oefening 3: Functionaliteit toevoegen

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

Functionaliteit toevoegen aan de knop "Afsluiten"

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

1. Klik met de rechtermuisknop op de knop Afsluiten. Selecteer in het pop-upmenu Gebeurtenissen> Actie> actieUitgevoerd. Houd er rekening mee dat het menu nog vele andere evenementen bevat waarop het programma kan reageren! Wanneer de actionPerformed-gebeurtenis is geselecteerd, zal de IDE automatisch een ActionListener toevoegen aan de knop Exit en een handlermethode maken om de actionPerformed-methode van de luisteraar af te handelen.
2. De IDE opent automatisch het broncodevenster, waarin het invoegpunt voor de uit te voeren actie wordt weergegeven wanneer op de knop wordt gedrukt (met behulp van de muis of het toetsenbord). Het broncodevenster moet de volgende regels bevatten: private void jButton3ActionPerformed (java.awt.event.ActionEvent evt) (// TODO voeg hier uw verwerkingscode 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 "Evenementen> Actie> actieUitgevoerd".
2. Als u op de knop Wissen klikt, moet alle tekst uit alle jTextField-tekstvelden worden verwijderd. Om dit te doen, voegt u een code toe die lijkt op 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 en laat ze leeg.

Functionaliteit toevoegen aan de knop "Toevoegen"

De knop "Toevoegen" moet drie dingen doen.

1. Het accepteert eerst gebruikersinvoer in jTextField1 en jTextField2 en converteert het van String naar Float.
2. Dan voegt ze de twee nummers toe.
3. Ten slotte converteert het de som naar een String en plaatst het 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> actieUitgevoerd.
3. Voeg de 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, resultaat; // We moeten de tekst ontleden naar een type float num1 = Float.parseFloat (jTextField1.getText ()); num2 = Float.parseFloat (jTextField2.getText ()); // Nu kunnen we de optelling uitvoeren. result = num1 + num2; // We zullen nu de waarde doorgeven van resultaat naar jTextField3. // Tegelijkertijd gaan we // de waarde van resultaat wijzigen van een float naar een string.jTextField3.setText (String.valueOf (result));)

Nu is het programma helemaal klaar en kun je beginnen met het bouwen en uitvoeren ervan.

Oefening 4: Een programma uitvoeren

Volg deze stappen om uw programma in de IDE uit te voeren:

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

   Opmerking. Wanneer een venster wordt geopend dat aangeeft dat er geen hoofdklasse is ingesteld voor Project NumberAddition, selecteert u my.NumberAddition.NumberAdditionUI als de hoofdklasse in hetzelfde venster en klikt u op OK.

Volg deze stappen om het programma buiten de IDE uit te voeren:

Na een paar seconden wordt de applicatie gestart.

Opmerking. Als de toepassing niet start wanneer u dubbelklikt op een JAR-bestand, zie voor meer informatie over het instellen van JAR-bestandskoppelingen voor uw besturingssysteem:

U kunt de toepassing ook uitvoeren vanaf de opdrachtregel.

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

1. Open een opdrachtregel of terminalvenster.
2. Wijzig op de opdrachtregel de huidige directory in de directory NumberAddition / dist.
3. Voer bij de opdrachtprompt de volgende instructie in: java -jar NumberAddition.jar

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

Mechanisme voor gebeurtenisafhandeling

Deze zelfstudie heeft betrekking op het reageren op een eenvoudige gebeurtenis met een klik op een knop. Er zijn veel gebeurtenissen waarop een applicatie kan reageren. U kunt de lijst met beschikbare gebeurtenissen in de IDE die door GUI-elementen kunnen worden afgehandeld als volgt bekijken:

1. Ga terug naar het bestand NumberAdditionUI.java in de editor. Klik op het tabblad Ontwerpen om de structuur van de GUI in de GUI Builder te bekijken.
2. Klik met de rechtermuisknop op een willekeurig element van de GUI en selecteer "Evenementen" in het menu dat verschijnt. Nu kunt u eenvoudig de inhoud van het menu verkennen zonder items te selecteren.
3. U kunt ook Eigenschappen kiezen in het menu Venster. Klik in het venster Eigenschappen op het tabblad Gebeurtenissen. Op het tabblad Gebeurtenissen kunt u de gebeurtenishandlers bekijken en wijzigen die zijn gekoppeld aan het momenteel actieve GUI-element.
4. De applicatie kan ook reageren op toetsaanslagen, enkele, dubbele of driedubbele klikken, het verplaatsen van de muisaanwijzer, het vergroten of verkleinen van het venster en het verplaatsen van de invoerfocus. Met het menu Gebeurtenissen kunt u automatisch gebeurtenishandlers maken voor al deze gebeurtenissen. De meest voorkomende hiervan is het evenement "Actie". (Zie de Sun Java Events Tutorial voor praktische tips voor het afhandelen van gebeurtenissen voor meer informatie.)

Hoe verloopt de afhandeling van evenementen? Elke keer dat u een gebeurtenis selecteert in het gebeurtenismenu, maakt de IDE automatisch een zogenaamde gebeurtenislistener en koppelt deze aan een ontwikkelaarscomponent. Volg deze stappen voor een meer gedetailleerd begrip van het gebeurtenisafhandelingsproces.

1. Ga terug naar het bestand NumberAdditionUI.java in de editor. Klik op het tabblad Bron om de broncode voor de GUI te bekijken.
2. Scroll naar beneden en bekijk de geïmplementeerde methoden jButton1ActionPerformed (), jButton2ActionPerformed () en jButton3ActionPerformed (). Deze methoden worden gebeurtenishandlers genoemd.
3. Ga nu naar de methode initComponents (). Als deze methode ontbreekt, zoekt u de regel Generated Code en klikt u op het +-teken naast die regel om de methode hidden initComponents () weer te geven.
4. Let op het blauwe vak rond de methode initComponents (). Deze code is automatisch gegenereerd door de IDE en kan niet door de gebruiker worden gewijzigd.
5. Bekijk nu de methode initComponents () zelf. Het bevat onder andere code die de 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 (nieuw java.awt.event.ActionListener () (public void actionPerformed (java.awt.event.ActionEvent evt) (jButton3ActionPerformed (evt);)));

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

7. Leertraject Java GUI-toepassingen