GUI arendus

Peamine vahend kasutaja suhtlemiseks programmiga on graafiline kasutajaliides (GUI). Iga tarkvaratoote GUI on selle populaarsuse üks võtmetegureid.

Kirjaoskaja loomine kasutajaliides- protsess on töömahukas ja nõuab maksimaalset tähelepanu detailidele. Loodud liides peaks maksimeerima programmi võimalusi, kuid samal ajal mitte koormama kasutajat menüüde, nuppude, piltide ja teksti rohkusega.

Praktikas hõlmab Windowsi rakenduste programmeerimine erinevate laialdast kasutamist tööriistad ja meistrid. Seega, võttes arvesse valitud operatsioonisüsteemi standardeid, on tarkvaral aknaliides. Selle põhjuseks on ennekõike asjaolu, et Windows on Windowsi perekonna operatsioonisüsteemide (OS) graafilise liidese peamised elemendid. Need on ristkülikukujulised alad, millel on oma seaded, omadused ja tüübid.

Treeningploki graafiline osa sisaldab nelja tüüpi aknaid:

Peaaken sisaldab kõiki programmi navigeerimiselemente, samuti lisateavet, mis on vajalik tarkvaraga töötamise mugavuseks;

Kontrolli aknaid teabebaas-- sisaldab kõiki teabekomponentide juhtelemente tarkvara tööriist. Need võimaldavad lisada teste, teavet, uusi kasutajaid ja administraatoreid ning võimaldavad manipuleerida äsja loodud või olemasolevate andmetega;

Windowsiga töötamiseks tarkvara võimalused-- pakkuda tööd koolitusploki põhifunktsioonidega, nagu testide sooritamine ja loengute õppimine;

Teabe ja statistika kuvaaknad – kasutatakse teabe kuvamiseks erinevat tüüpi, samuti statistikat ja graafikuid.

Programmi põhiaken sisaldab järgmisi juhtelemente ja teabeväljundit:

Akna pealkiri, mis sisaldab programmi nime ja akna eesmärki;

Nupud süsteemi menüü, mis vastutavad programmi suuruse muutmise, minimeerimise ja sulgemise eest;

Akna pealkirja ala, millel on puhtalt dekoratiivne funktsioon ja mis on vajalik üldise disainilahenduse järgimiseks;

tervitusala;

Nädalapäeva kuvamisala, tänane kuupäev ja aeg;

Kohandatud tööriistariba, mis sisaldab nuppe programmi põhifunktsioonidele juurdepääsuks;

Halduspaneel sisaldab nuppu juurdepääsuks PS-i haldusjuhtelementidele;

Olekuriba, mis kuvab teavet programmi kõigi töörežiimide kohta.

Graafilise liidese peaakna skeem (aknavaade administraatori jaoks konto) on toodud joonisel 3.2

Joonis 3.2 -- Graafilise liidese peaakna skeem: 1 -- akna pealkiri; 2 -- süsteemimenüü nupud; 3 -- akna pealkirja ala; 4 -- olekuriba; 5 -- tervitusala; 6 -- ala nädalapäeva, kuupäeva ja kellaaja kuvamiseks; 7 -- halduspaneel; 8 -- kohandatud paneel; 9 -- nupp õppimisetapi sisenemiseks; 10 -- nupp testimisetapi avamiseks; 11 -- nupp statistika ja graafikute kuvamiseks; 12 -- väljapääs; 13 -- nupp, et pääseda juurde rakenduse haldusosale

Arvestades arendatava tarkvara fookust, töötati välja mitmeid mittestandardseid graafilisi lahendusi, et äratada tähelepanu ja rakenduse vastu suuremat huvi. Lisaks võimaldab see teil saada ülejäänud sarnaste teemade ja fookusega programmide hulgast omapära.

Ühte neist lahendustest võib nimetada värvikaks ja loovaks ainulaadne disain, liidese elemendid, millel pole selles valdkonnas analooge. See on umbes Flash-animatsioonil põhinevate animeeritud lisade kohta. Nende abil realiseeriti kõigi peamiste funktsionaalsete akende nimede kujundus, navigatsioonielemendid ning registreerimis- ja autoriseerimisvormi liides. Selle arenduse peamised eelised on: meeldiva ja kasutajasõbraliku liidese juurutamine; programmi kasutamise märkimisväärne lihtsustamine nii kasutaja kui ka haldustasandil.

Veel üks peamisi eeliseid analoogprogrammide seas nii tarkvaras kui ka graafilises teostuses on soovi korral testide läbimise korraldamine. Testi sooritamiseks seda tüüpi kasutaja peab koostama SQL-päringud eraldi sõltumatutest elementidest. Sõltuvalt kavandatava ülesande tingimustest lähtuvalt esitatava päringu tüübist moodustatakse konkreetne komplekteerimise hulknurk. Polügoon sisaldab välju nendesse eraldi plokist hiirega lohistatud operaatorite asendamiseks ning väljad tabelite, väljade ja tingimuste nimetuste sisestamiseks.

Kasutajastatistikat rakendatakse graafikute kujul, mis koostatakse sõltuvalt tema saadud tulemustest. Igal testil on oma dünaamika. Diagrammid sisaldavad kõiki vajalikke allkirju, neid rakendatakse TChart komponendi abil ja seetõttu on neil palju juhtelemente, mis on vaikimisi komponenti sisse ehitatud ja sellest tulenevalt ka rakenduses juurutatud.

Samuti on kasutajasõbralikuma visualiseerimise huvides asendatud tabeli päise stiilid vaikimisi arenduskeskkonnas rakendatavatega.

Seega rakendatud graafilised lahendused võimaldas meil saavutada GUI disaini ideega ettenähtud tulemuse. Loodud liides maksimeerib programmi võimalused, kuid samas ei koorma kasutajat üle menüüde, nuppude, piltide ja teksti rohkusega.

yadobr 14. jaanuar 2014, kell 09:10

Graafiline kasutajaliidese disain

• Liidesed

Sissejuhatus

IN kaasaegne maailm miljardeid arvutusseadmed. Rohkem rohkem programme neile. Ja igal neist on oma liides, mis on kasutaja ja kasutaja vahelise suhtluse "hoovad". masina kood. See pole üllatav parem liides, seda tõhusam on suhtlus.

Kuid mitte kõik arendajad ja isegi disainerid ei mõtle mugava ja arusaadava graafilise kasutajaliidese loomisele.

Enda jaoks alustasin küsimuste esitamisega: üldised põhimõtted, mis liidese elemendid (EI) looge, milline kujundus neil peaks olema, kuhu need tuleks õigesti paigutada ja kuidas nad peaksid käituma.
Allpool püüan neile küsimustele vastata.

Üldised põhimõtted

Millise EI peaksin looma?

Milline peaks olema EI disain?

Tegelikult on EI disain eraldi artikli teema. Siin peate võtma arvesse kõike: värvist, kujust, proportsioonidest kuni kognitiivse psühholoogiani. Siiski tasub meeles pidada mõnda põhimõtet:

Kuidas EI-d ekraanil õigesti positsioneerida?

Kuidas peaksid EI-d käituma?

Vahi all

See artikkel ei pretendeeri kõigele täielik juhend liidese kujundamise põhimõtted. Graafiline kasutajaliides on ulatuslik teema, mis on tihedalt läbi põimunud psühholoogiaga, hõivab teadlaste mõtteid ning sadu lehekülgi raamatuid ja uurimusi. Nii väikeses formaadis ei saa kuidagi väljendada tõstatatud teema täiust. Siiski järgimine põhiprintsiibid, võimaldab teil luua kasutajasõbralikumaid liideseid ja lihtsustada projekteerimisprotsessi ennast.
Tänan tähelepanu eest.

Kirjandus

Jeff Raskin, "Liides: uued suunad arvutisüsteemide kujundamisel"
Alan Cooper, „Liidese kohta. Interaktsiooni kujundamise alused"
Alan Cooper, "Vaimuhaigla patsientide kätes"

Traditsiooniline graafiline lähenemine kasutajaliidesele on seotud Sutherlandi, Newmani jt töödega, milles interaktsioon põhineb kasutamisel graafiline ekraan regenereerimise ja valguspliiatsiga. Graafilise dialoogi edasist arengut seostatakse edusammudega interaktiivsete arvutigraafikasüsteemide vallas, mis tõi kaasa regulatsiooni rahvusvaheliste standardite näol.
GKS on esimene rahvusvaheline graafikastandard. Esmalt salvestas see mõisted "tööjaamad" ja loogilised seadmed sisend (klaviatuur, valik, lokaator, hindaja, osuti, koordinaatjärjestuse sisend). Kahjuks eostatud paradigma üleoleku ajal vektorjoonistus. Siit ka dialoogitoe nõrkus: võimetus sisestada uusi seadmeid või muuta seadme pilti ekraanil isegi alates rakendusprogramm(kasutaja graafika pakett), mis toob kaasa vajaduse kasutada peamiselt tähemärgi sisestus dialoogi korraldamisel. Dialoogi rakendamine GKS-is on rakendusprogrammi eesõigus, ei eeldata eraldi disaini võimalust.
Graafika teine ​​suund - rastergraafika avaldas äärmiselt suurt mõju kogu järgnevale interaktiivsete süsteemide arendamisele. Kõik tänapäevaste tööjaamade kasutajaliidese põhifunktsioonid on tuletatud töödest Xerox PARC: aknahaldus

• kasutamine graafilised sümbolid("ikoonid") objektide tähistamiseks
• interaktsiooni stiil, mida nimetatakse otseseks manipuleerimiseks
• hiire populaarsus ekraani positsioneerimisseadmena
• objektorienteeritud programmeerimisstiil.

Sellest ajast alates on kasutajaliideste loomise ja haldamise tööriistade klassifitseerimise süsteemi käsitletud kolmel tasandil:

1. aknahaldussüsteemid (WMS - Window Manager System);
2. spetsiaalsed tööriistad;
   • tavaline (MacIntosh, SunView...)
   • objektorienteeritud (Smalltalk-80, Andrew, InterView)
3. kasutajaliidese haldussüsteemid.

Järgmised jaotised annavad lühikesed omadused, kõigi nende tasemete olek ja funktsionaalne kirjeldus.

Aknahaldussüsteemid (WMS)

Mitme akna tehnoloogia annab kasutajale juurdepääsu rohkemale teabele, kui on võimalik ühe ekraaniga. Windows pakub juurdepääsu mitmele teabeallikale. Kasutaja saab kombineerida mitmest allikast pärinevat teavet, uurida teavet selle kohta erinevad tasemed detailides. Mitmeprogrammilises režiimis on võimalik juhtida mitut paralleelsed ülesanded. Iga ülesande sisend ja väljund kuvatakse erinevad aknad, mis võimaldab kasutajal keskenduda vastavalt vajadusele igale ülesandele.
WMS, aknapõhiste haldusressursside töökeskkond, toetab:

• kattuvad aknad (ekraani ristkülikukujulised alad);
• mitmesugused sisendseadmed (digitaalsed ja analoogsed);
• kursorid;
• fonte.

Operaatori ja rakendusprogrammi poolne liides sisaldab käske akende loomiseks/hävitamiseks, nende suuruse ja asukoha muutmiseks, üles tõstmiseks, akna ikooniks kokkusurumiseks ja taastamiseks. Sisaldab graafika raamatukogu väljund (ainult põhiprimitiivid) ja sündmuste töötleja. Seega on kasutajaliidese rakendamiseks mõned mehhanismid.
WMS-i rakendusi on kahte tüüpi: põhisüsteem(Kernel System), mis töötab ühes masinas, ja võrk (võrgule orienteeritud), mis on rakendatud klient-serveri mudelil.

Kasutajaliidese loomise tööriistakomplekt

Märkus: Uurime vidinaid - graafilise kasutajaliidese visuaalseid elemente, nende paigutust, suurusepoliitikat, signaali-pesa ühendusi, graafilise liidese elemente ja nende kasutamist.

13.1 Vidinad

Vidinad on visuaalsed elemendid, mis moodustavad graafilise kasutajaliidese.

Vidinate näited:

• Nupp (klass QPushButton);
• Silt (klass QLabel);
• Sisestusväli (klass QLineEdit);
• Numbriline loenduri väli (klass QSpinBox);
• Kerimisriba (klass QScrollBar ).

Qt-l on umbes 50 valmisklassi graafilised elemendid kasutamiseks saadaval. Kõigi vidinate vanemklass on QWidget klass. Sellest on päritud kõik visuaalsete elementide peamised omadused, mida me hoolikalt kaalume. Alustame näitega graafilise liidesega programmide arendamise võimaluste uurimist.

Loome tühi fail projekt. Käivitame projektiviisardi ja valige jaotisest Projektid üksus Muu projekt. Järgmisena valige projekti tüüp Tühi Qt projekt. Lisame projekti faili sisu:

TEMPLATE = rakenduse #Qt moodulid, mida kasutame QT += vidinad # Vidinatega töötamiseks lisage vidinate moodul (vajalik Qt5 jaoks). TARGET = vidin# Käivitatava faili nimi SOURCES += \ main.cpp

Nüüd loome lihtsa programmi aknaga, milles kuvame pealdise. Määrame akna suuruse ja selle pealkirja teksti ning määrame ka pealdisele fondi. Selleks looge järgmise sisuga fail main.cpp:

#kaasa #kaasa int main (int lArgc, char * lArgv ) ( //Looge QApplication objekt, mis lähtestab ja konfigureerib aknaprogrammi, //juhtib selle täitmist QApplication sündmusesilmuse abil lApplication (lArgc, lArgv); QLabel lLabel; //Loo QLabel vidin - silt lLabel.setText ("Ma olen vidin!" //Määrake sildi tekst lLabel.setGeometry (200, 200, 300, 150 //Mõõtmed - asukoht (x, y), laius); ja kõrguse tekst lLabel.setAlignment (Qt::AlignHCenter | Qt::AlignVCenter //Fonti parameetrite määramiseks //Valige fondiperekond ja suurus 12. QFont lBlackFont ("Arial Black). ", 12); setFont (lBlackFont); //Seadistage sildi lLabel.show () font programm käivitada exec() //cycle. Programm ootab kasutaja toiminguid ja töötleb neid.

Nagu näeme, on Qt-s liideseid moodustavatel elementidel oma asukoht ja suurus - nn "geomeetria" - ning seega hõivavad nad ekraanil vastava ristkülikukujulise ala (vt joonis 13.1). Samuti on igal elemendil sätted, mis määravad selle käitumise ja välimuse.

Riis.

13.1.

• Struktuuri loomiseks korraldatakse vidinad hierarhiasse vastavalt “osa – terviku” põhimõttele. Iga vidin võib sisaldada teisi vidinaid. Sellest visuaalsest elemendist saab selles sisalduvate elementide "vanem" (vanema vidin). Pange tähele, et selliseid seoseid ei tohiks segi ajada pärimisega C++ - klassidevahelised seosed programmis. Vidinate vahelised seosed on seosed objektide vahel. Sellised suhted põhjustavad mitmeid tagajärgi: eemaldamise eest vastutab emaelement laps element
• : kui vanemvidin kustutatakse, kustutab see automaatselt kõik alamelemendid;
• vanemvidin asetab alamvidinad enda sisse, alamvidinate osad, mis ulatuvad vanemast kaugemale, jäävad nähtamatuks;

osa vanemvidina olekust kantakse üle selle lastele – see kehtib mõningate visuaalsele elemendile rakendatavate omaduste (nähtavus, tegevus) ja stiilide kohta. kõrgeim tase), näevad programmis välja nagu eraldi aknad. Vaatame näidet. Helistame uus projekt VanemNäide. Projektifail sisaldab GUI projekti tavalisi sätteid:

TEMPLATE = rakenduse SIHT = ParentExample QT += vidinad

Peaaknana kasutatava vidina jaoks loome uue klassi. Selle jaoks kategoorias Failid ja klassid Valime jaotise C++ ja valime C++ klass (vt joonis 13.2).

Järgmine samm on luua aknale mitu elementi. Selleks ava fail parentwidget.cpp ja muuda klassi konstruktori koodi. Elementide kuvamiseks looge need lihtsalt klassikonstruktoris ja määrake ParentWidget nende vanemaks. Parenterwidget.cpp kood näeb välja selline:

#include " parentwidget.h " #include #kaasa #kaasa ParentWidget::ParentWidget (QWidget * vanem) : QWidget (parent) ( //Loo silt, mis näitab emavidinat – see on klassi ParentWidget eksemplar. QLabel * lLabel=uus QLabel (see); //Position emavidina ülemise vasaku nurga suhtes lLabel ->setGeometry (50, 0, 100, 30) (" TextLabel " //Looge nupp, määrake "parent", geomeetria ja tekst QPushButton * lPushButton = uus QPushButton (see) (50, 50, 100, 30) QLineEdit * lLineEdit = uus QLineEdit ( see lLineEdit -> setGeometry (50, 100, 100, 30) (" LineEdit " -> valige kõik (sisene tekst); näide) //Lõpuks muutke vanemvidina suurust setGeometry (x (), y (), 300, 150 //ja määrake akna pealkirja tekst setWindowTitle (" vanemvidinExample ");

Kuna vanem element on ParentWidget , siis on selle sees silt (QLabel), nupp (QPushButton) ja tekstiväli (QLineEdit). Lapsvidinate asukoht määratakse isa vasaku ülanurga suhtes. Saate seda hõlpsalt kontrollida, muutes meie programmi akna suurust ja asukohta. Pange tähele, kuidas lõime kasutajaliidese elemendid dünaamiline mälu kasutades uus operaator. See tagab, et elemente ei eemaldata pärast ParentWidgeti konstruktori valmimist.

Kaastööd tegid Saleem Gul ja Tomas Pavek

Selles koolitus Vaatleme lihtsa graafilise kasutajaliidese loomist ja lihtsa serverifunktsionaalsuse lisamist sellele. Eelkõige vaatame koodi, mis määrab nuppude ja väljade käitumise vormil Swing.

Vaatame GUI paigutust ja struktuuri, seejärel lisame mõned nupud ja tekstiväljad. Tekstiväljad on mõeldud kasutaja sisestatud teabe vastuvõtmiseks ja programmi tulemuse kuvamiseks. Nupp käivitab programmi kliendiosa sisseehitatud funktsioonide töö. Rakendus on loomisel on lihtne, kuid täisfunktsionaalne kalkulaator.

Üksikasjalikum juhend GUI Builderi disainifunktsioonide, sealhulgas videoesitluste kohta erinevaid funktsioone arenguid, vt jaotist.

Eeldatav kestus: 20 minutit

Harjutus 1: Projekti loomine

Esimene samm on luua arendatava rakenduse jaoks IDE projekt. Paneme projektile nimeks NumberAddition.

1. Valige Fail > Uus projekt. Võite klõpsata ka IDE tööriistariba ikooni New Project.
2. Valige jaotises Kategooriad Java sõlm. Valige jaotises "Projektid" "Java rakendus". Klõpsake nuppu "Järgmine".
3. Sisestage väljale Projekti nimi NumberAddition ja määrake projekti asukohaks tee, näiteks oma kodukataloog.
4. Märkige ruut "Kasuta teekide salvestamiseks eraldi kausta" ja määrake teekide kausta asukoht (valikuline). Lisainformatsioon Vaadake artiklit Teegi jagamine teiste kasutajatega dokumendis Rakenduste arendamine NetBeans IDE abil.
5. Eemaldage ruut "Loo põhiklass", kui see on märgitud.
6. Klõpsake nuppu "Valmis".

Harjutus 2: Esiosa loomine

Liidese loomise protsessi jätkamiseks peate looma Java konteineri, kuhu paigutatakse muud vajalikud GUI elemendid. Selle tegevuse käigus luuakse JFrame'i elemendi abil konteiner. Konteiner pannakse sisse uus pakett, mis kuvatakse sõlmes "Allikaspaketid".

JFrame'i konteineri loomine

1. Klõpsake aknas Projektid paremklõps hõljutage kursorit NumberAddition sõlme kohal ja valige Uus > Muu.
2. Valige dialoogiboksis Faili loomine kategooria Swing GUI Forms ja failitüüp JFrame Form. Klõpsake nuppu "Järgmine".
3. Sisestage klassi nimeks NumberAdditionUI.
4. Valige pakett my.numberaddition.
5. Klõpsake nuppu "Valmis".

IDE loob NumberAdditionUI vormi ja NumberAdditionUI klassi NumberAddition rakenduses ning avab GUI Builderis vormi NumberAdditionUI. Pakett my.NumberAddition asendab vaikepaketi.

Elementide lisamine: esiosa loomine

Järgmiseks kasutage akent "Palett". esiots rakendus on täidetud JPaneliga. Pärast seda lisatakse kolm JLabeli elementi (tekstisildid), kolm JTextField elementi (tekstiväljad) ja kolm JButtoni elementi (nupud). Kui te pole varem GUI kujundajaga koostööd teinud, vaadake komponentide paigutuse kohta teavet jaotisest Swing GUI kujundamine NetBeansi IDE-s.

Pärast ülaltoodud elementide lohistamist ja paigutamist peaks JFrame'i element välja nägema nagu alloleval pildil.

Kui paremal ülemine nurk Kui IDE-l pole paleti akent, valige Aken > Palett.

1. Alustuseks valige paleti kategooriast Swing Containers paneel ja lohistage see JFrame'i.
2. JPanel tõstetakse esile. Minge atribuutide aknasse ja klõpsake ääriste stiili valimiseks välja Border kõrval olevat ellipside nuppu (...).
3. Dialoogiboksis Border valige loendist TitledBorder ja sisestage väljale Pealkiri Number Addition. Muudatuste salvestamiseks ja dialoogiboksi sulgemiseks klõpsake "OK".
4. Ekraan peaks nüüd ilmuma tühi element"JFrame" pealkirjaga "Number Addition", nagu on näidatud pildil. Lisage sellele pildi järgi kolm JLabelit, kolm tekstiväljad JTextField ja kolm JButtonit.

Elementide ümbernimetamine

See samm nimetab ümber JFrame'i elemendile lisatud elemendid.

1. Topeltklõpsake iLabel1 ja muutke ntrcn (atribuut "tekst") väärtuseks First Number.
2. Topeltklõpsake iLabel2 ja muutke tekstiks Teine number.
3. Topeltklõpsake iLabel3 ja muutke tekstiks Tulemus.
4. Eemaldage jTextField1-st vaiketekst. Kuvatava teksti saab teisendada redigeeritavaks tekstiks. Selleks paremklõpsake tekstiväljal ja valige hüpikmenüüst "Redigeeri teksti". See võib nõuda jTextField1 algsuuruse taastamist. Korrake seda sammu väljade jTextField2 ja jTextField3 puhul.
5. Muutke jButton1 kuvatekst väärtuseks Clear . (Nupu teksti muutmiseks paremklõpsake nuppu ja valige Redigeeri teksti. Teise võimalusena võite nuppu klõpsata, peatada ja uuesti klõpsata.)
6. Muutke jButton2 kuvatekst väärtuseks Add .
7. Muutke jButton3 kuvatekst väärtuseks Exit .

Nüüd peaks valmis GUI välja nägema nagu alloleval pildil:

Harjutus 3: Funktsionaalsuse lisamine

See harjutus lisab nuppudele Lisa, Kustuta ja Välju vajalikud funktsioonid. Kasutaja sisestamiseks kasutatakse välju jTextField1 ja jTextField2 ning programmi tulemuse kuvamiseks jTextField3. Loodud programm esindab lihtne kalkulaator. Nii et alustame!

Funktsionaalsuse lisamine nupule Välju

Nuppude funktsioneerimiseks tuleb igaühele neist määrata sündmuste töötleja, mis hakkab vastutama sündmustele reageerimise eest. Meie puhul peame tuvastama nupuvajutuse sündmuse – kas hiireklõpsu või klaviatuuri abil. Seetõttu kasutatakse "ActionEvent" sündmuste käsitlemiseks liidest "ActionListener".

1. Paremklõpsake nuppu "Välju". Valige hüpikmenüüst Sündmused > Toiming > actionPerformed. Pange tähele, et menüü sisaldab palju muid sündmusi, millele programm saab reageerida! Kui valite sündmuse actionPerformed, lisab IDE automaatselt nupule Välju ActionListeneri ja loob käitleja meetodi actionPerformed kuulaja meetodi käsitlemiseks.
2. IDE avab automaatselt lähtekoodi akna, mis näitab, kuhu sisestada toiming, mida soovite nupul klõpsamisel (hiire või klaviatuuriga) sooritada. Aken "Lähtekood" peaks sisaldama järgmised read: private void jButton3ActionPerformed(java.awt.event.ActionEvent evt) ( //TODO lisage oma käsitsemiskood siia: )
3. Nüüd lisame koodi toimingule, mida nupp "Välju" peaks tegema. Asenda rida TODO tekstiga System.exit(0); . Valmis kood Nupp "Välju" peaks välja nägema järgmine: private void jButton3ActionPerformed(java.awt.event.ActionEvent evt) ( System.exit(0); )

Funktsionaalsuse lisamine nupule "Tühjenda".

1. Paremklõpsake nuppu "Tühjenda" (jButton1). Ilmuvast menüüst valige "Sündmused > Toiming > actionPerformed".
2. Nupu "Tühjenda" klõpsamisel eemaldatakse kogu tekst kõigilt "jTextField" tekstiväljadelt. Selleks lisage ülaltoodud koodiga sarnane kood. Valmis lähtekood peaks välja nägema järgmine: private void jButton1ActionPerformed(java.awt.event.ActionEvent evt)( jTextField1.setText(""); jTextField2.setText(""); jTextField3.setText("");

See kood eemaldab teksti kõigilt kolmelt JTextFieldilt, jättes need tühjaks.

Funktsionaalsuse lisamine nupule "Lisa".

Nupp "Lisa" peaks tegema kolme asja.

1. Esmalt võtab see kasutaja sisendi väljadele jTextField1 ja jTextField2 ning teisendab need "String" tüübist "Float" tüübiks.
2. Seejärel liidab see kaks numbrit.
3. Lõpuks teisendab see summa järgmiseks tüüp String ja asetage see väljale jTextField3.

Alustagem!

1. Klõpsake ülaosas vahekaarti "Disain". tööala Vormi kujundamise ekraanile naasmiseks.
2. Paremklõpsake nuppu "Lisa" (jButton2). Valige hüpikmenüüst Sündmused > Toiming > actionPerformed.
3. Lisage kood toimingute jaoks, mida nupp "Lisa" peaks tegema. Valmis lähtekood peaks välja nägema järgmine: private void jButton2ActionPerformed(java.awt.event.ActionEvent evt)( // Esmalt defineerime float muutujad. float num1, num2, result; // Peame teksti sõeluma float tüüpi .arv1 = Float.parseFloat(jTextField1.getText()); , // muudame tulemuse väärtuse ujukist stringiks jTextField3.setText(String.valueOf(result)).

Nüüd on programm täielikult valmis ja saate alustada selle kokkupanemist ja käivitamist.

Harjutus 4: Programmi täitmine

Programmi käivitamiseks IDE-s käivitage järgmised toimingud:

1. Valige Käivita > Käivita põhiprojekt (vajutage ka F6).

   Märge. Kui avate akna, mis näitab, et Project NumberAdditionil pole põhiklassi määratud, valige samas aknas põhiklassiks my.NumberAddition.NumberAdditionUI ja klõpsake nuppu OK.

Programmi käivitamiseks väljaspool IDE-d toimige järgmiselt.

Mõne sekundi pärast käivitub rakendus.

Märge. Kui kell topeltklõps JAR-fail ei käivita rakendust, vaadake lisateavet JAR-failide seoste seadistamise kohta kasutatavas rakenduses. operatsioonisüsteem cm .

Rakenduse saate käivitada ka käsurealt.

Rakenduse käsurealt käivitamiseks toimige järgmiselt.

1. Avage käsuviip või terminaliaken.
2. IN käsurida muuta praegune kataloog kataloogi NumberAddition/dist.
3. Sisestage käsureale järgmine lause: java-purk NumberAddition.jar

   Märge. Enne rakenduse käivitamist veenduge, et minu.NumberAddition.NumberAdditionUI oleks põhiklassiks seatud. Selle kontrollimiseks paremklõpsake paneelil Projektid projektisõlmel NumberAddition, valige hüpikmenüüst Atribuudid ja valige dialoogiboksis Projekti atribuudid kategooria Käivita. Väljal Põhiklass peaks kuvama my.numberaddition.NumberAdditionUI .

Sündmuste töötlemise mootor

Selles õpetuses vaadeldi lihtsale nupuvajutussündmusele reageerimist. Rakendus saab vastata paljudele sündmustele. IDE-s saate vaadata saadaolevate sündmuste loendit, mida GUI elemendid saavad töödelda järgmiselt.

1. Naaske redaktoris faili NumberAdditionUI.java. GUI Builderis GUI struktuuri kuvamiseks klõpsake vahekaarti Kujundus.
2. Paremklõpsake mis tahes GUI elemendil ja valige kuvatavast menüüst "Sündmused". Nüüd saate lihtsalt menüü sisu uurida ilma üksusi valimata.
3. Teise võimalusena saate valida "Aken" menüüst "Atribuudid". Atribuutide aknas klõpsake vahekaarti Sündmused. Vahekaardil "Sündmused" saate vaadata ja muuta praegusega seotud sündmuste käitlejaid aktiivne element graafiline liides.
4. Rakendus suudab reageerida ka klahvivajutuste, ühe-, kahe- või kolmekordsete klõpsude, hiirekursori liigutuste, akna suuruse muutmise ja sisendi fookuse liigutustega. Menüüs "Sündmused" saate kõigi nende sündmuste jaoks automaatselt sündmuste käitlejaid luua. Kõige tavalisem neist on sündmus "Action". (Selle eest, et saada Lisainformatsioon vaadake Sun Java sündmuste õpetust, et saada praktilisi nõuandeid sündmuste käsitlemise kohta.)

Kuidas sündmusi töödeldakse? Iga kord, kui valite sündmuste menüüst sündmuse, loob IDE automaatselt sündmuste kuulaja ja seostab selle arendaja komponendiga. Sündmuse töötlemise kohta lisateabe saamiseks toimige järgmiselt.

1. Naaske redaktoris faili NumberAdditionUI.java. Vaatamiseks klõpsake vahekaarti "Allikas". lähtekood graafiline liides.
2. Kerige alla, et näha rakendatud meetodeid jButton1ActionPerformed() , jButton2ActionPerformed() ja jButton3ActionPerformed(). Neid meetodeid nimetatakse sündmuste käitlejateks.
3. Nüüd minge meetodi initComponents() juurde. Kui see meetod puudub, leidke rida Loodud kood ja klõpsake peidetud meetodi initComponents() kuvamiseks selle rea kõrval olevat + märki.
4. Pange tähele sinist plokki, mis ümbritseb meetodit initComponents(). See kood genereeriti automaatselt IDE ja kasutaja ei saa seda muuta.
5. Nüüd vaadake meetodit initComponents() ennast. Muuhulgas sisaldab see koodi, mis initsialiseerib GUI elemendid ja asetab need vormile. See kood luuakse ja värskendatakse automaatselt, kui paigutate ja muudate elemente kujundusrežiimis.
6. Leidke meetodist initComponents() järgmine jupp: jButton3.setText("Exit"); jButton3.addActionListener(new java.awt.event.ActionListener() ( public void actionPerformed(java.awt.event.ActionEvent evt) ( jButton3ActionPerformed(evt; ) ));

   Siinkohal GUI elemendi juurde sel juhul jButton3-le lisatakse sündmuste kuulaja objekt "ActionListener". Liidesel "ActionListener" on objekti "ActionEvent" meetod "actionPerformed", mille rakendab lihtne kõne jButton3ActionPerformed sündmuste töötleja. See nupp reageerib nüüd tegevussündmustele. Iga kord, kui nupule klõpsate, luuakse "ActionEvent" ja see edastatakse sündmustekuulaja liidese meetodile "actionPerformed", mis käivitab koodi, mille arendaja selle sündmuse jaoks sündmuste käitlejas andis.

7. Java GUI rakenduste õppekaart