© Markku Kuitunen Osio 4: Graafinen käyttöliittymä Javan Swing-tekniikan perusteet: Muistutus: Tarvitset seuraavia komponentteja harjoituksissa: otsikkoteksti.

Esitys aiheesta: "© Markku Kuitunen Osio 4: Graafinen käyttöliittymä Javan Swing-tekniikan perusteet: Muistutus: Tarvitset seuraavia komponentteja harjoituksissa: otsikkoteksti."— Esityksen transkriptio:

1 © Markku Kuitunen Osio 4: Graafinen käyttöliittymä Javan Swing-tekniikan perusteet: Muistutus: Tarvitset seuraavia komponentteja harjoituksissa: otsikkoteksti (label)muuttumattoman tekstin esittäminen muokkausruutu (text field)tekstitiedon esittäminen ja sen muuttaminen käyttäjän toimesta komentopainike (button)sovelluksen toiminnon aktivointi yhdistelmäruutu (combo box) käyttäjä voi valita syöttötiedon alasvetovalikosta tai kirjoittaa sen ruutuun paneeli (panel)näytöllä oleva alue, jossa voidaan esittää muita käyttöliittymäkomponentteja

2 © Markku Kuitunen Osio 4: Graafinen käyttöliittymä Javan Swing-tekniikan perusteet •Swing-tekniikan GUI-komponentteihin liittyy kolme peruskäsitettä: –komponentit (components) –tapahtumat (events) –kuuntelijat (listeners)

3 © Markku Kuitunen Osio 4: Graafinen käyttöliittymä Javan Swing-tekniikan perusteet •Javan tapahtumankäsittely perustuu Observer design pattern –malliin –observer = tarkkailija –design pattern = suunnittelumalli •Suunnittelumalli on toteutustapa, jota voidaan soveltaa uudelleen saman tyyppisen ongelman ratkaisuun

4 © Markku Kuitunen Osio 4: Graafinen käyttöliittymä Javan Swing-tekniikan perusteet •Observer design pattern –tapahtumien lähde-objektissa tapahtuu muutoksia –joukko tarkkailijoita seuraa tapahtuvia muutoksia –lähde-objekti ei vastaa tarkkailijoiden aktivoinnista –lähde-objekti sisältää listan, johon muutoksista kiinnostuneet voivat listautua –listautuneet tarkkailijat voivat kuunnella tapahtuneita muutoksia –tarkkailija liittää haluamansa muutoksen kuuntelijaan tarvittavan toiminnallisuuden

5 © Markku Kuitunen Osio 4: Graafinen käyttöliittymä Lähde-objekti Tapahtuma Kuuntelija Tarkkailija Kuuntelija Tarkkailija … register deregister notify

6 © Markku Kuitunen Osio 4: Graafinen käyttöliittymä Javan Swing-tekniikan perusteet •Tapahtuma (event) on objekti, joka kuvaa jotakin käyttäjän tekemää toimenpidettä –hiirtä siirretään (mouse move) –hiirtä raahataan (mouse drag) –hiiren painiketta painetaan (a mouse button is clicked) –näppäimistöltä näppäillään merkki (a keyboard key is pressed) –ajastimen aika päättyy (a timer expires)

7 © Markku Kuitunen Osio 4: Graafinen käyttöliittymä Javan Swing-tekniikan perusteet •Tapahtumiin liittyy kolme peruskäsitettä (itse asiassa olioita): –Tapahtuma itse (event) –Tapahtuman lähde (event source) –Tapahtuman kuuntelija (event listener)

8 © Markku Kuitunen Osio 4: Graafinen käyttöliittymä Javan Swing-tekniikan perusteet Tapahtuma itse (event) •luodaan Lähde-objektin yhteydessä •on objekti, joka periytetään java.util – paketin EventObject-luokasta •kuvaa tapahtunutta tapahtumaa

9 © Markku Kuitunen Osio 4: Graafinen käyttöliittymä Javan Swing-tekniikan perusteet Tapahtuman kuuntelija (event listener) •on objekti, jonka rajapinta periytetään java.util –paketin EventListener- rajapinnasta •rekisteröityy kuuntelijaksi tapahtuman lähde-objektille

10 © Markku Kuitunen Osio 4: Graafinen käyttöliittymä Javan Swing-tekniikan perusteet Tapahtuman lähde (event source) •ylläpitää listaa tapahtuman kuuntelijoista •listaan rekisteröidytään addListener-metodilla ja siitä poistutaan removeListener-metodilla •lähde luo event-objektin ilmentymän •lähde ilmoittaa kullekin listan kuuntelijalle tapahtumasta notify-metodilla •notify-metodi sisältää parametrinaan viitteen event-objektiin

11 © Markku Kuitunen Osio 4: Graafinen käyttöliittymä Javan Swing-tekniikan perusteet Tapahtumiin voi liittyä eri tyyppisiä kuuntelijoita: Käyttäjä näpäyttää komentopainiketta, painaa Return-näppäintä kirjoittaessaan muokkausruutuun tai valitsee menu-valikosta toiminnon ActionListener Käyttäjä sulkee ikkunanWindowListener Käyttäjä näpäyttää hiirtä komponentin päälläMouseListener Käyttäjä siirtää kohdistimen komponentin päälleMouseMotionListener Komponentti tulee näkyväksiComponentListener Komponentti saa fokuksenFocusListener Taulun tai listan valinnan muuttuminenListSelectionListener

12 © Markku Kuitunen Osio 4: Graafinen käyttöliittymä Javan Swing-tekniikan perusteet Käyttäjän toimenpide Komponentti Event Komentopainikkeen painaminen JButton ActionEvent Tekstin muuttaminen JTextComponent TextEvent Lista-alkion kaksoisnäpäytys JList ActionEvent Alkion valinta näpäyttämällä kerran JList ItemEvent Alkion valinta tai valinnan poisto JComboBox ItemEvent

13 © Markku Kuitunen Osio 4: Graafinen käyttöliittymä Laukaisee tapahtuman (event) Kohdekomponentti Kuuntelija Listener Event-objekti Tapahtumankäsittelijä Aktivoi

14 © Markku Kuitunen Osio 4: Graafinen käyttöliittymä •Kuuntelija voidaan toteuttaa tähän tapaan: tallennaJButton = new JButton ("Tallenna"); tallennaListener = new tallennaListenerClass(); tallennaJButton.addActionListener(tallennaListener); class tallennaListenerClass implements ActionListener { public void actionPerformed (ActionEvent e) { // tähän tulee toiminnallisuus } );

15 © Markku Kuitunen Osio 4: Graafinen käyttöliittymä •Kuuntelija voidaan toteuttaa anonyymina sisäluokkana (anonymous inner class) tähän tapaan: tallennaJButton = new JButton ("Tallenna"); tallennaJButton.addActionListener( new ActionListener () { public void actionPerformed ( ActionEvent event) { // tähän tulee toiminnallisuus } );

16 © Markku Kuitunen Osio 4: Graafinen käyttöliittymä •Mikä olikaan anonyymi sisäluokka? –erikoistapaus luokan määrittelystä –luokka määritellään ilman nimeä (tästä sana anonymous) –luokan määrittely esiintyy tyypillisesti metodin sisällä (tästä sana inner) –koska luokalla ei ole nimeä, on yksi objekti luotava välittömästi määrittelyn yhteydessä –seuraus: kullakin kontrollilla on oma kuuntelija

17 © Markku Kuitunen Osio 4: Graafinen käyttöliittymä Vaihtoehtoinen tapa: public class ButtonDemo extends JFrame implements ActionListener { … public ButtonDemo () { …. JButton tallennaJButton = new JButton (”Tallenna”); tallennaJButton.addActionListener(this); … JButton poistaJButton = new JButton (”Poista”); poistaJButton.addActionListener(this); … } public void actionPerformed (ActionEvent e) { if (e.getActionCommand().equals(”Tallenna”)) // tallennatoiminta ; else if (e.getActionCommand().equals(”Poista”)) // poistatoiminta ; else //virhetoiminta ; }

18 © Markku Kuitunen Osio 4: Graafinen käyttöliittymä Erona anonyymiin sisäluokkaan: •nyt painikkeilla on yhteinen kuuntelija •molemmat painikkeet aktivoivat saman kuuntelijan •tapahtumaobjektista selviää, kumpi painike on kuuntelijan aktivoinut •sen mukaan valitaan toiminta •huomaa, että kontrollista ja käyttäjän toimenpiteestä riippuu tapahtuma, joka aktivoituu

19 © Markku Kuitunen Osio 4: Graafinen käyttöliittymä Kumpaa kuuntelijatyyppiä kannattaa käyttää? •Tässä tapauksessa tavoitteena on yhdistää usean eri tekijän osakokonaisuuksien toiminnallisuus samaan ikkunaan •Silloin on parempi käyttää anonyymiä sisäluokkaa, jolloin jokaisella kontrollilla on oma kuuntelija •Yhdistäminen on helppoa mutta ikkunan koodi pitenee •Yleisessä tilanteessa vertailu ei ole näin helppo

20 © Markku Kuitunen Osio 4: Graafinen käyttöliittymä Toiminnallisen eheyden käsite •esimerkissämme sama toiminto voidaan aktivoida sekä valikkoriviltä että komentopainikkeesta •kummallakin kontrollilla on oma kuuntelija •kuuntelijoiden tulee aktivoida sama toiminta (toteutettuna esim. luokan sisäisenä metodina) ilman ylimääräisiä toimenpiteitä •metodissa toteutetaan se toiminnallisuus, joka toimintoon halutaan liittää •seuraus: kumpikin toiminnon aktivointitapa johtaa täsmälleen samaan suoritukseen •seuraus: käyttäjän oppimista tuetaan

21 © Markku Kuitunen Osio 4: Graafinen käyttöliittymä Javan Swing-tekniikan perusteet Miten viikon 4 ryhmäharjoitustehtävä kannattaa toteuttaa: •Otetaan lähtökohdaksi edellisellä viikolla toteutettu osasovellus •Lisätään sovellukseen kuuntelijat anonyymina sisäluokkana •Toteutetaan jokaiseen kuuntelijaan sanomaikkuna, joka kertoo aktivoidun komennon nimen •Testataan osasovellus •Kootaan testatuista osasovelluksista toimiva ikkuna •Lisätään ikkunaan kutakin toimintoa vastaava metodi •Aktivoidaan ko. metodi sekä valikkorivin toiminnosta että komentopainikkeen toiminnosta •Testataan toteutus

22 © Markku Kuitunen Osio 4: Graafinen käyttöliittymä Javan Swing-tekniikan perusteet Miten viikon 4 ryhmäharjoitustehtävä voi laajentaa •Etsitään arkistoista tosite-luokan toteutus •Liitetään tosite-luokan toteutus sovellukseen niin, että uuden tositteen tiedot saadaan ikkunasta Tallenna-toiminnon painamisen jälkeen •Talletetaan ikkunan tiedot tosite-luokkaan sen metodien avulla •Tarkistetaan tietojen kelvollisuus. Tähän olisi hyvä olla metodi tosite- luokassa •Jos tiedot kelpaavat, tuodaan siitä viesti käyttäjälle •Testataan toteutus •Toteutuksen onnistuessa saadaan hyvä arvosana

23 © Markku Kuitunen Osio 4: Graafinen käyttöliittymä Keskusteluikkunan (Dialog window) toteuttaminen •Keskusteluikkuna voidaan toteuttaa kahdella vaihtoehtoisella tavalla –käytetään JDialog-luokkaa, jolloin dialogi-ikkuna kiinnitetään vastaavaan JFrame-ikkunaan –käytetään JFrame-luokkaa, jolloin toteuttajan on muunnettava ikkunan käyttöliittymä otsikkorivin komentopainikkeiden osalta (ei suositeltavaa)

24 © Markku Kuitunen Osio 4: Graafinen käyttöliittymä JDialog-luokka •muodostin vaatii sen ikkunan kahvan, johon dialogi-ikkuna liittyy •tuhoamalla ikkuna tuhoutuu myös siitä riippuva dialogi-ikkuna •dialogi-ikkuna modaalisuus voidaan valita –modaalinen – dialogi-ikkuna on pakko käsitellä ennen muita ikkunoita –modaaliton –muiden ikkunoiden samanaikainen käsittely onnistuu (harvinaisempi tapaus) •Swingissä on valmiita dialogi-ikkunoita: –JFileChooser –JColorChooser –jne.

25 © Markku Kuitunen Osio 4: Graafinen käyttöliittymä •Dialogin toteuttaminen JFrame-luokan avulla –asiakirjaikkuna kutsuu dialogi-ikkunaa –kutsun yhteydessä päätetään myös modaalisuudesta (sopimuskysymys) –dialogi-ikkunan riippuvuus asiakirjaikkunaan syntyy vasta kutsuhetkellä –dialogi-ikkuna voidaan liittää useampaankin asiakirjaikkunaan

26 © Markku Kuitunen Osio 4: Graafinen käyttöliittymä Työn iloa!