Java GUI tegemine

Allikas: Teadmusbaas

Sissejuhatus GUI Building

See algaja juhendaja õpetab, kuidas luua lihtne graafiline kasutajaliides ja lisada lihtsaid back-end funktsioone. Eelkõige näitame, kuidas koodi käitumist nupud ja põldude Swing kujul. Me töötame läbi paigutuse ja kujunduse GUI ja lisada paar nupud ja väljadel. Tekstis välju kasutatakse vastuvõtuks kasutaja sisend- ja ka näidatava programmi väljundi. Nupp algatab sisseehitatud funktsioone esiotsa. Taotlus loome on lihtne, kuid funktsionaalne kalkulaatorit. Sest põhjalikum juhend GUI Ehitaja disaini iseärasusi, sealhulgas video demonstratsioon eri kujunduselementide.

Harjutus 1: Projekti loomine

Esimene samm on luua IDE projekti taotluses, et me arendada. Toome siinkohal meie projekti NumberAddition . Vali Fail > Uus projekt . Samuti võite klõpsata New Project ikoon IDE tööriistaribal. Kategooriates väljal valige Java sõlme. Projektides paanil valida Java. Next. Tüüp NumberAdditionon Projekti nimi ja määrama tee, näiteks kodus kataloogi, kui projekti asukohta. (Valikuline) kasutamine Pühendatud Folder hoidmiseks Raamatukogud ruut ja täpsustada asukohta raamatukogude kataloogi. Vaata jagamine raamatukogu teised kasutajad in Developing rakendusi NetBeansin IDE rohkem teavet. Tühista Loo Main klassi kast, kui see on valitud. Vajuta Finish.


Harjutus 2: Hoonete esiotsa

Et jätkata hoone meie liides, meil on vaja luua Java konteiner, mille jooksul me koht muule nõutavale GUI komponendid. Selle sammu loome konteiner abil JFramekomponent. Me paneb konteineri uue paketi, mis ilmub jooksul Lähtetekstipaketid sõlme. Loo JFrame konteiner Projektides aken, paremklõpsake NumberAddition sõlme ja valida New > Muud . Uus fail dialoogiboksis valida Swing GUI vormid kategooria ja JFrame vorm tüüp. Next. Sisesta NumberAdditionUI nagu klassi nimi. Sisesta my.numberadditionnagu pakendil. Vajuta Finish. IDE loob NumberAdditionUIvormi ja NumberAdditionUIklassi jooksul NumberAddition taotluse ja avab NumberAdditionUIvormi GUI Builder. my.NumberAddition Pakett asendab vaikimisi pakendis. Lisades komponendid: Making esiotsa Järgmine me kasutame Palette asustada meie rakenduse esiotsa koos JPanel. Siis lisame kolm JLabels kolm JTextFields ja kolm JButtons. Kui te ei ole kasutanud GUI Builder enne, võite leida teavet Projekteerimine Swing GUI NetBeansin IDE juhendaja positsioneerimine komponendid kasulik. Kui olete teinud lohistades ja positsioneerimise eelnimetatud komponendid, JFrame peaks välja nägema midagi juuresoleval pildil.


Gui1.png


Kui te ei näe Palette akna ülemises paremas nurgas IDE vali Window> Palette. Alusta valides Paneeli Swing Konteinerid kategooria Palette ja pistad selle JFrame. Kuigi JPanel on esile tõstetud, minge Properties aken ja klõpsa Sulgudes (...) nuppu Border valida piirde stiili. In the Border dialoog, valige TitledBorder nimekirjast ja kirjuta Number Additionpealkirjana valdkonnas. Kliki OK muudatuste salvestamiseks ja väljumiseks dialoogi. Sa peaksid nüüd näha tühja pealkirjaga JFrame mis ütleb arv lisamine, nagu pildil näha. Vaata pilt ja lisada kolm JLabels kolm JTextFields ja kolm JButtons nagu näete eespool. Ümbernimetamine komponendid Selle sammu me ümber ekraanile teksti osad, mis olid lihtsalt lisatakse JFrame. Topeltklõpsake jLabel1ja muuta teksti vara First Number:. Topeltklõpsake jLabel2ja teksti muuta Second Number:. Topeltklõpsake jLabel3ja teksti muuta Result:. Kustuta proovi teksti jTextField1. Sa ei saa teha Kuvateksti muudetav paremklõpsu tekstiväljale ja valige Edit Text hüpikmenüüst. Te võib-olla suurust jTextField1oma originaalsuuruses. Korrake seda sammu jTextField2ja jTextField3. Nimeta ekraanile tekst jButton1, et Clear. (Saab muuta nupu teksti paremklõpsu nuppu ja valides Edit Text. Või võite klõpsata nuppu, paus ja seejärel nuppu uuesti.) Nimeta ekraanile tekst jButton2, et Add. Nimeta ekraanile tekst jButton3, et Exit. Teie Lõppenud GUI näeb nüüd välja järgmine pilt: Gui2.png


Harjutus 3: lisamine funktsionaalsus

Selles ülesandes me kavatseme anda funktsionaalsust Lisa, selge ja Väljumisnupud. jTextField1Ja jTextField2kastid, mida kasutatakse kasutaja sisend ja jTextField3programmi väljund - mida me loome, on väga lihtne kalkulaator. Alustagem. Making Väljumisnupp töö Et anda funktsiooni nupud, meil määrata sündmuse käitleja iga reageerida sündmustele. Meie puhul me tahame teada, kui nuppu vajutatakse, kas hiireklõpsuga või läbi klaviatuuri. Nii me kasutame ActionListener vastates ActionEvent. Parem klõps Exit-nupp. Pop-up menüüst valida Üritused> Action> actionPerformed. Pange tähele, et menüü sisaldab palju sündmusi saab vastata! Kui valid actionPerformed juhul IDE automaatselt lisada ActionListener exit nuppu ja tekitada käitleja meetod käitlemise kuulaja actionPerformed meetod. IDE avab Lähtekood akna ja liikuge kohta, kuhu rakendada meetmeid, mida soovid nuppu teha, kui vajutatakse nuppu (kas hiireklõpsuga või läbi klaviatuuri). Oma lähtekoodi aken peaks sisaldama järgmised read:

jButton3ActionPerformed (java.awt.event.ActionEvent evt) {
   // TODO lisada oma käsitluskoodi siin:
               }
Me oleme nüüd lisada kood, mida me tahame Väljumisnupp teha. Vahetage TODO kooskõlas System.exit(0);. Teie valmis Exit nupu kood peaks välja nägema selline:
 

jButton3ActionPerformed (java.awt.event.ActionEvent evt) {

   System.exit (0);
               } 
Making Clear Button töö
Klõpsake Design sakk ülaosas oma töö valdkonnas, et minna tagasi vormi Design.
Parem klõps Kustutamisnupp ( jButton1). Pop-up menüüst valige Üritused> Action> actionPerformed.
Me ei kavatse on nuppu Tühjenda kustutada kõik teksti jTextFields. Et seda teha, siis lisada mõned kood, nagu eespool. Teie valmis lähtekoodi peaks välja nägema selline:

jButton1ActionPerformed (java.awt.event.ActionEvent evt) {
   jTextField1.setText ( "");
   jTextField2.setText ( "");
   jTextField3.setText ( "");
            }

Eespool nimetatud koodi muudab teksti kõik kolm meie JTextFields midagi sisuliselt seda, kas kirjutada olemasolev tekst tühi. Making nupule Lisa töö Nupp Lisa täidab kolme meedet. See saab kasutaja andmeid sisestada alates jTextField1ja jTextField2ja teisendada sisend tüüpi String sularahaga. Siis liitmist neist kahest numbrist. Ja lõpuks, see konverteerib summa tüüpi String ja pane see jTextField3. Alustame! Klõpsake Design sakk ülaosas oma töö valdkonnas, et minna tagasi vormi Design. Paremklõpsake nuppu Add ( jButton2). Pop-up menüüst valige Üritused> Action> actionPerformed. Me lisada mõned koodi on meie nupule Lisa töö. Valmis lähtekoodi peab välja nägema selline:

jButton2ActionPerformed (java.awt.event.ActionEvent evt) {
   // Esiteks me defineerime float muutujaid.
   float num1, num2, kaasa;
   // Meil ​​on sõeluda teksti tüüpi sularahaga.
   num1 = Float.parseFloat (jTextField1.getText ());
   num2 = Float.parseFloat (jTextField2.getText ());
  // Nüüd saame täita lisaks.
   tulemus = num1 + num2;
   // Nüüd liigu väärtus tulemuse jTextField3.
   // Samas, me
   // Väärtuse muutmiseks tulemus float string.
   jTextField3.setText (String.valueOf (tulemus));
                }

Meie programm on nüüd valmis saame ehitada ja käivitada, et näha, kuidas see toimib.


Harjutus 4: Running Program

Et käivitada programmi IDE: Vali Run> Run Project (arv lisamine) (teise vajuta F6).

Märkus: Kui teil tekib aken, mis teavitab teid Project NumberAddition ei ole peamine klassi komplekti, siis tuleks valida my.NumberAddition.NumberAdditionUI peamise klassi samas aknas ja klõpsake nuppu OK. Et käivitada programmi väljaspool IDE: Vali Run> Puhas ja Build Main Project (Shift-F11) ehitada taotluse JAR-faili. Kasutades oma süsteemi faili explorer või failihaldur, navigeerida NumberAddition/distkataloogi. Märkus: asukoht NumberAddition projekti kataloogi sõltub tee sa kindlaks, luues samal ajal projekti samm 3 Harjutus 1: Projekti loomine jagu. Topeltklõpsake NumberAddition.jarfaili. Pärast paar sekundit, taotlus tuleb alustada. Märkus: Kui topeltklõpsuga JAR faili ei käivitada rakendus, vaadake seda artiklit teavet, milles JAR failiseostega oma operatsioonisüsteemi. Võite käivitada rakendus käsurealt. Rakenduse käivitamiseks käsurealt: On oma süsteemi, avab käsureale või terminali aknas. Kui käsureale muuta kataloogide NumberAddition/distkataloog. Käsurida, kirjuta järgmine tekst: java-jar NumberAddition.jar Märkus: Veenduge my.NumberAddition.NumberAdditionUI on seatud peamiseks klassi enne, kui vastavat rakendust. Seda saab vaadata parema klõpsates NumberAddition projekti sõlme Projektid pane, valides Properties hüpikmenüü, ja valides Run kategooria Project Properties dialoogiboks. Põhiklass valdkonnas peaks näidata my.numberaddition.NumberAdditionUI .


Kuidas Event käsitlus töötab

See õpetus on näidanud, kuidas reageerida lihtsa nupu sündmus. Seal on palju rohkem üritusi, võite lasta oma taotluse reageerida. IDE aitab leida loendist sündmusi oma GUI komponendid saavad hakkama: Mine tagasi fail NumberAdditionUI.javaon toimetaja. Klõpsake Design sakk näha graafilise kujunduse GUI Builder. Paremklõpsake GUI osa ja valige Sündmused alates pop-up menüüst. Praegu lihtsalt sirvida menu, et näha mis seal on, sa ei pea valima midagi. Võite valige Properties menüüst Aken. Properties klõpsake akna Sündmused alt. Sündmustes alt saate vaadata ja muuta sündmusi käitleja seotud aktiivse GUI komponent. Sul võib olla oma taotluse vastata klahvivajutusi, ühe, kahe ja kolme hiireklõpsuga, hiire liikumine, akna suurus ja keskenduda muutusi. Saate luua sündmuse käitleja neile kõigile alates Sündmused menüü. Kõige tavalisem sündmus te kasutate on Action sündmus. (Loe parimaid tavasid Event käitlemise alates Suni Java Sündmused Õpetus .) Kuidas sündmus käitlemise tööd? Iga kord, kui valite Sündmuse kustutamiseks menüü IDE loob automaatselt nn juhul kuulaja jaoks, ja konksud see üles oma osa. Läbida järgmised sammud, et näha, kuidas sündmus käitlemise teoseid. Mine tagasi fail NumberAdditionUI.javaon toimetaja. Klõpsake Allikas sakk näha logimisel allikas. Liikuge alla ja pange tähele, meetodid jButton1ActionPerformed(), jButton2ActionPerformed()ja jButton3ActionPerformed()et sa lihtsalt ellu. Need meetodid on nn sündmuste haldurid. Nüüd liikuge meetodit nimetatakse initComponents(). Kui te ei näe seda meetodit, otsida rida, mis ütleb Generated Code, klõpsa + märgi kõrval laiendada varises initComponents()meetod. Esiteks tähele sinine plokk ümber initComponents()meetod. See kood oli Isegenereeritud poolt IDE ja te ei saa seda muuta. Nüüd, sirvida initComponents()meetod. Muuhulgas sisaldab see kood, mis käivitab ja asetab oma GUI komponendid vormi. See kood on loodud ja uuendatakse automaatselt, kui paned ja muuta komponentide kujundamisvaates. In initComponents()kerige kus ta loeb jButton3.setText ( "Exit"); jButton3.addActionListener (uus java.awt.event.ActionListener () {

   public void actionPerformed (java.awt.event.ActionEvent evt) {
          jButton3ActionPerformed (evt);
   }
           });

See on koht, kus sündmus kuulaja objekti lisatakse GUI osa; sel juhul sa registreerima ActionListener on jButton3. ActionListener liides on actionPerformed meetod, mis võtab ActionEvent objekt, mis on rakendatud lihtsalt helistades jButton3ActionPerformedkorral käitleja. Nupp on nüüd kuulata tegevuse sündmusi. Every see surutakse ActionEvent on loodud ja edasi kuulaja actionPerformed meetod, mis omakorda käivitab koodi, mis sa ette, kui käitleja selle sündmuse. Üldiselt oleks võimalik vastata, iga interaktiivne graafiline osa peab registreerima, et sündmus kuulaja peab rakendama sündmuse käitleja. Nagu näete, NetBeansin IDE käepidemed kinnihakkamine juhul kuulaja jaoks, nii et saate keskenduda rakendamise tegelik äriloogika, et tuleks vallandas korral.


Villem Ausmees (arutelu) 8. november 2016, kell 12:34 (EET)


Viide