© Markku Kuitunen Osio 4: Graafinen käyttöliittymä Tavoite: Opiskelija tuntee käyttöliittymän suunnittelun perusteita Opiskelija tuntee Javan Swing-tekniikan.

Esitys aiheesta: "© Markku Kuitunen Osio 4: Graafinen käyttöliittymä Tavoite: Opiskelija tuntee käyttöliittymän suunnittelun perusteita Opiskelija tuntee Javan Swing-tekniikan."— Esityksen transkriptio:

1 © Markku Kuitunen Osio 4: Graafinen käyttöliittymä Tavoite: Opiskelija tuntee käyttöliittymän suunnittelun perusteita Opiskelija tuntee Javan Swing-tekniikan perusteet Opiskelija osaa työasemakäyttöliittymän toteutuksen perusteet käyttäen Javan Swing-tekniikkaa

2 © Markku Kuitunen Osio 4: Graafinen käyttöliittymä Käyttöliittymän suunnittelun perusteet Graafinen käyttöliittymä eli GUI (Graphical user interface) GUI:hin liittyy ”look-and-feel” –”look” eli ulkoasu –”feel” eli käyttötuntuma tavoitteena on käyttäjän näkökulmasta miellyttävä ja helposti omaksuttava käyttöliittymä

3 © Markku Kuitunen Osio 4: Graafinen käyttöliittymä Käyttöliittymän suunnittelun perusteet Helppokäyttöinen käyttöliittymä perustuu yhdenmukaisuuteen Tavoitteena on yhdenmukaisuus eri sovellusten kesken Yhdenmukaisuuden tavoitteleminen asettaa rajoituksia käyttöliittymän toteuttajalle Rajoituksia kannattaa noudattaa: yhdenmukaisuutta ei synny sattumalta

4 © Markku Kuitunen Osio 4: Graafinen käyttöliittymä Käyttöliittymän suunnittelun perusteet Käyttöliittymien yhdenmukaisuutta tavoitellaan tyylioppaiden avulla Tyyliopas on yhdenmukaisuusvaatimus, jonka mukaan käyttöliittymä tulisi toteuttaa Tyyliopas keskittyy käyttöliittymän ja käyttäjän väliseen vuorovaikutukseen Tyylioppaalla on yhä kasvava vaikutus myös sovelluksen toteutukseen. Mm. käyttöliittymäkomponenttien toteuttaminen edellyttää tyylioppaan olemassaoloa

5 © Markku Kuitunen Osio 4: Graafinen käyttöliittymä Käyttöliittymän suunnittelun perusteet Java-työasemasovellusten tyyliopas on nimeltään Java Look and Feel Design Style Guide vuodelta 1999 Tyyliopas löytyy osoitteesta http://java.sun.com/products/jlf/ed1/dg/index.htm http://java.sun.com/products/jlf/ed1/dg/index.htm Tässä yhteydessä keskitytään jatkossa ohjelmoijan näkökulmaan käyttöliittymästä Tarkempi tutustuminen tyylioppaaseen jää opiskelijan itsenäisen opiskelun varaan

6 © Markku Kuitunen Osio 4: Graafinen käyttöliittymä Javan Swing-tekniikan perusteet Javassa kaksi erillistä GUI-kirjastoa –AWT (Abstract Window Toolkit) perustuu paikallisen sovelluskehitysalustan (local platform) tarjoamiiin valmispalveluihin seuraus: AWT-käyttöliittymien ulkoinen tyyli riippuu sovelluskehitysalustasta –Swing-käyttöliittymä on toteutettu yhdenmukaisena mahdollisimman alustariippumattomasti seuraus: Swing-käyttöliittymien ulkoinen tyyli on aina yhdenmukainen

7 © Markku Kuitunen Osio 4: Graafinen käyttöliittymä Javan Swing-tekniikan perusteet Graafisten käyttöliittymien käytännön toteuttaminen perustuu käyttöliittymäkomponentteihin Käyttöliittymäkomponentti (tai kontrolli) on valmisosa, jota voidaan käyttää käyttöliittymän toteutuksessa Esimerkiksi komentopainikkeet, radionapit ja valintalistat ovat käyttöliittymäkomponentteja

8 © Markku Kuitunen Osio 4: Graafinen käyttöliittymä Javan Swing-tekniikan perusteet Swing-komponentit on toteutettu Java-kielellä ja niitä kutsutaan lightweight-komponenteiksi AWT-komponentit ovat heavyweight-komponentteja heavyweight-komponenttien toteutus perustuu käytettyyn laitealustaan ja ne kommunikoivat laitealustan kanssa ns. peer-luokan avulla Swing-komponenteissa on aina osia, jotka on pakko toteuttaa heavyweight-komponenttien avulla esimerkiksi ikkuna on aina luotava laitealustan paikallisen ikkunointijärjestelmän keinoin

9 © 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)

10 © Markku Kuitunen Osio 4: Graafinen käyttöliittymä Javan Swing-tekniikan perusteet: komponentit 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 valintaruutu (check box):kaksiarvoisen valinnan tekeminen radionappi (radio button)valinta annetusta arvojoukosta yhdistelmäruutu (combo box) käyttäjä voi valita syöttötiedon alasvetovalikosta tai kirjoittaa sen ruutuun valintalista (list)käyttäjä voi valita yhden tai useamman vaihtoehdon valintalistasta paneeli (panel)näytöllä oleva alue, jossa voidaan esittää muita käyttöliittymäkomponentteja

11 © Markku Kuitunen Osio 4: Graafinen käyttöliittymä Javan Swing-tekniikan perusteet: 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

12 © Markku Kuitunen Osio 4: Graafinen käyttöliittymä Javan Swing-tekniikan perusteet Osa Swing-komponenteista on säilöjä (container), joihin muut Swing-komponentit voidaan tallentaa –kehykset (frames) –paneelit (panels) –appletit (applets) eli sovelmat

13 © 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)

14 © Markku Kuitunen Osio 4: Graafinen käyttöliittymä Javan Swing-tekniikan perusteet Sovellus käyttää kolmen perustyypin ikkunoita kommunikoidessaan käyttäjän kanssa: –asiakirjaikkunoita (document window) kohteen tietojen esittämiseen –keskusteluikkunoita (dialog window) toimintojen tarkentamiseen –sanomaikkunoita (message box) poikkeuksellisten viestien välittämiseen.

15 © Markku Kuitunen Osio 4: Graafinen käyttöliittymä Javan Swing-tekniikan perusteet Container: komponentti, joka sisältää muita komponentteja containerit voidaan jakaa kahteen luokkaan: –ylemmän tason containerit (Frame, Dialog) –alemman tason containerit (panel, scroll pane jne.)

16 © Markku Kuitunen Osio 4: Graafinen käyttöliittymä Javan Swing-tekniikan perusteet Container: Swing-käyttöliittymän sisältämässä sovelluksessa on vähintään yksi ylemmän tason container Ylemmän tason containerilta peritään ominaisuudet, joita tarvitaan mm. tapahtumankäsittelyyn Ylemmän tason containerit jakaantuvat kolmeen päätyyppiin: –JFrame toteuttaa asiakirjaikkunan –JDialog toteuttaa keskusteluikkunan –JApplet toteuttaa selaimessa toimivan käyttöliittymän (ei kuulu tämän opintojakson aihepiiriin)

17 © Markku Kuitunen Osio 4: Graafinen käyttöliittymä Javan Swing-tekniikan perusteet Container-hierarkia: Ylemmän tason container sisältää alemman tason containereita Alemman tason container voi sisältää joko muita containereita tai kontrolleja Kontrolleja ei voi liittää suoraan ylemmän tason containeriin Ikkunan toteutuksesta tulee siis vähintään kolmitasoinen: –ylemmän tason container –alemman tason container –kontrollit

18 © Markku Kuitunen Osio 4: Graafinen käyttöliittymä Javan Swing-tekniikan perusteet JFrame-container sisältää ikkunan ulkonäköön liittyviä ominaisuuksia –ikkunan koko –otsikkoteksti –jne. sisältää ikkunan vakiotoimintoja –ikkunan sulkeminen –ikkunan pienentäminen –ikkunan näkyviin tuominen / piilottaminen –jne.

19 © Markku Kuitunen Osio 4: Graafinen käyttöliittymä JFrame-ikkunan luominen import javax.swing.JFrame; public class OmaJFrame extends JFrame { // kontrollien määrittely tähän public OmaJFrame() { // kontrollit luodaan ja sijoitetaan // ikkunaan muodostimessa setLocation(100, 200); // Ikkunan paikka setSize(400, 300); // Ikkunan koko setVisible(true); // Näytä ikkuna } public static void main ( String args [] ) { // Luodaan ikkuna OmaJFrame jf = new OmaJFrame (); // Ikkunan sulkeminen päättää sovelluksen jf.setDefaultCloseOperation (JFrame.EXIT_ON_CLOSE); }

20 © Markku Kuitunen Osio 4: Graafinen käyttöliittymä Javan Swing-tekniikan perusteet Alemman tason containerit: Ylemmän tason container sisältää vain alemman tason containereita Yemmän tason container sisältää alemman tason oletuscontainerin, jota kutsutaan nimellä ContentPane Alemman tason container-tyyppejä on useita: –JPanel vaikuttaa vain kontrollien sijoitteluun –JScrollPane voi sisältää myös vieritinpalkit –JTabbedPane sisältää myös välilehdet Tällä opintojaksolla käsittelemme ainoastaan JPanel- containeria

21 © Markku Kuitunen Osio 4: Graafinen käyttöliittymä Javan Swing-tekniikan perusteet Alemman tason container: Jotta ylemmän tason containeriin (esim. JFrame) voidaan liittää kontrolli, tarvitaan ensin alemman tason container (säilö) Alemman tason containeriin (säilöön) voidaan liittää kontrolleja: Container con = frame.getContentPane(); con.add(new JButton("OK"));

22 © Markku Kuitunen Osio 4: Graafinen käyttöliittymä Javan Swing-tekniikan perusteet Layout Management tarkoittaa kontrollien sijoittelun hallitsemista ikkunassa Alemman tason containeriin (säilöön) liitetään kontrollien lisäksi Layout manageri, joka ohjaa containerin kontrollien asettelua ikkunaan Layout managerien toiminta on automaattista Ne sijoittelevat kontrollit oman politiikkansa mukaisesti ikkunaan vasemmalta oikealle pääsääntöisesti siinä järjestyksessä, jossa kontrollit on lisätty containeriin (säilöön) Layout Manager asetetaan containeriin ennen kontrollien lisäämistä

23 © Markku Kuitunen Osio 4: Graafinen käyttöliittymä Javan Swing-tekniikan perusteet Layout Manageria ei ole pakko käyttää, jolloin luovutaan Layout Managerista (layout = null) Kontrollien paikka määritellään tällöin absoluuttisen osoitteen avulla Seurauksena on kuitenkin ongelmia: –jokaisen komponentin koko ja paikka on pakko laskea tarkasti –ylemmän tason containerin (esim. JFrame) koon muuttaminen ei vaikuta alemman tason containeriin –seurauksena ikkunan ulkoasun sekavuus ja joustamattomuus –ikkunan sisäisten valmisosien toteutus vaikeutuu, kun alemman tason containereita ei voida käyttää helposti valmisosina

24 © Markku Kuitunen Osio 4: Graafinen käyttöliittymä Javan Swing-tekniikan perusteet Javassa on käytettävissä seuraavat Layout managerit: –FlowLayout –BoxLayout –GridLayout –BorderLayout –CardLayout –GridBagLayout

25 © Markku Kuitunen Osio 4: Graafinen käyttöliittymä Javan Swing-tekniikan perusteet BorderLayout: BorderLayout jakaa ikkunan neljään alueeseen: East, South, West, North, Center Ikkunan koon muuttuessa vain Center-alueen koko muuttuu JFrame ContentPane oletus Layout Manageriksi North South EastWestCenter

26 © Markku Kuitunen Osio 4: Graafinen käyttöliittymä Javan Swing-tekniikan perusteet FlowLayot: Asettelee komponentit vasemmalta oikealle riveittäin Aloittaa tarvittaessa uuden rivin On oletus Layout Manager JPanel:ille

27 © Markku Kuitunen Graafinen käyttöliittymä – asettelumallit FlowLayout – virta: komponentit asetellaan riviltä toiselle Asetukset:- CENTER - LEFT - RIGHT Nimi Aku Ankka Email aku.ankka@ankkis.kvaak Puhno +12345678

28 © Markku Kuitunen Osio 4: Graafinen käyttöliittymä Javan Swing-tekniikan perusteet FlowLayot –public FlowLayout() sijoittaa komponentit keskitetysti viiden pikselin etäisyydelle toisistaan niin vaaka- kuin pystytasossa –public FlowLayout(int alignment) sijoittaa komponentit parametrin määräämällä tavalla viiden pikselin etäisyydelle toisistaan –public FlowLayout(int align, int hGap, int vGap) sijoittaa komponentit parametrin määräämällä tavalla vaakatasossa hGap-parametrin määräämälle etäisyydelle ja pystytasossa vGap- parametrin määräämälle etäisyydelle toisistaan

29 © Markku Kuitunen Osio 4: Graafinen käyttöliittymä Javan Swing-tekniikan perusteet FlowLayot –huomaa: Layout Managerille voidaan esittää toiveita kontrollien asettelusta esimerkiksi muodostimen valinnan yhteydessä, mutta kontrollien lopullisen koon ja paikan päättää kuitenkin Layout Manager

30 © Markku Kuitunen Osio 4: Graafinen käyttöliittymä Javan Swing-tekniikan perusteet LayoutManagerin liittäminen säilöön: Container con = frame.getContentPane(); con.setLayout (new BorderLayout()); Käyttö sitten myöhemmin: con.add( buttonJPanel, BorderLayout.SOUTH ); Tai con.add( new JButton(“OK”), BorderLayout.SOUTH );

31 © Markku Kuitunen Osio 4: Graafinen käyttöliittymä BorderLayoutin avulla saadaan luotua tyypillinen asiakirjaikkuna. Ikkunassa ovat seuraavat osakokonaisuudet: Valikkorivi (NORTH) Ominaisuudet (CENTER) Komentopainikkeet (SOUTH)

32 © Markku Kuitunen Osio 4: Graafinen käyttöliittymä BorderLayoutin osakokonaisuudet ovat itsenäisiä paneleita, joissa puolestaan käytetään seuraavia asettelumalleja: Valikkorivi Ei asettelumallia JMenuBar-kontrolli (NORTH) Ominaisuudet GridLayout (CENTER) Komentopainikkeet FlowLayout (SOUTH)

33 © Markku Kuitunen Osio 4: Graafinen käyttöliittymä Javan Swing-tekniikan perusteet GridLayout: GridLayout järjestää kontrollit taulukon muotoon riveihin ja sarakkeisiin riveittäin vasemmasta yläreunasta alkaen Mikäli jokin gridin solu halutaan jättää tyhjäksi, on siihen lisättävä tyhjä otsikkoteksti Kaikki solut määritellään saman kokoisiksi: –Rivin korkeudeksi valitaan korkeimman solun korkeus –Sarakkeen leveydeksi valitaan leveimmän solun leveys Esimerkki: DemoJPanel = new JPanel(); // Käytetään GridLayout-manageria. 3 riviä 2 saraketta. DemoJPanel.setLayout( new GridLayout( 7, 3) );

34 © Markku Kuitunen Graafinen käyttöliittymä – asettelumallit GridLayout : ”Taulukko” Nimi Aku Ankka Email aku.ankka@ankkis.kvaak Puhno +12345678 Ylläoleva on hahmottelumalli, EI näytöllä näkyvä käyttöliittymä

35 © Markku Kuitunen Osio 4: Graafinen käyttöliittymä Javan Swing-tekniikan perusteet GridbagLayout: GridbagLayout järjestää kontrollit taulukon muotoon riveihin ja sarakkeisiin riveittäin vasemmasta yläreunasta alkaen Tosin kuin GridLayout taulukon solut voidaan täyttää satunnaisessa järjestyksessä

36 © Markku Kuitunen Osio 4: Graafinen käyttöliittymä Javan Swing-tekniikan perusteet BoxLayout: BoxLayout järjestää kontrollit järjestykseen –yhteen riviin (vierekkäin) tai –yhteen sarakkeeseen (alekkain) BoxLayout pyrkii säilyttämään kontrollin paikan ja koon annettujen ohjeiden mukaisesti

37 © Markku Kuitunen Graafinen käyttöliittymä – asettelumalleja Esimerkit Sun:Swing Tutorial CardLayout + JTabbedPane

38 © Markku Kuitunen Graafinen käyttöliittymä – asettelumalleja ja lisäksi omat asettelumallit:

39 © Markku Kuitunen Osio 4: Graafinen käyttöliittymä Javan Swing-tekniikan perusteet Ikkunan ulkoasun luonti: Luonnosteluvaihe –luonnostele ikkunan ulkoasu ja siinä tarvittavat kontrollit –luonnostele ikkunassa tarvittavat panelit –luonnostele paneleissa tarvittavat Layout Managerit Luontivaihe –luo ikkuna –luo tarvittavat panelit –liitä paneliin tarvittava Layout Manager –luo tarvittavat kontrollit –alusta kontrollien ominaisuudet –liitä kontrollit paneliin –liitä panelit ikkunaan

40 © Markku Kuitunen Osio 4: Graafinen käyttöliittymä Object Window Frame JFrameJComponent JPanelJLabelJTextComponentJMenuBar JTextAreaJTextFieldJButtonJMeniItem JMenu Abstract Button Component Container AWT-luokat Swing-luokat

41 © Markku Kuitunen Osio 4: Graafinen käyttöliittymä Javan Swing-tekniikan perusteet Miten viikon 3 ryhmäharjoitustehtävä kannattaa toteuttaa: Aluksi määrittele import-määrein ne luokat, joita toteutuksessa tarvitaan. Määrittele import-lause kullekin tarvittavalle luokalle Määrittele säilö-luokan (container) ilmentymä ja sille BorderLayout- asettelumalli Määrittele paneli, johon varsinaiset kontrollit tulevat. Määrittele panelille tarvittava asettelumalli. Valikkorivi ei tarvitse panelia. Luo tarvittavat kontrollit ja lisää ne paneliin. Liitä paneli aluksi luotuun säilö-luokkaan (containeriin) Tee main-funktio ja testaa sen avulla ikkuna.

42 © Markku Kuitunen Osio 4: Graafinen käyttöliittymä Javan Swing-tekniikan perusteet Miten viikon 3 ryhmäharjoitustehtävä kannattaa toteuttaa: Lopuksi kokoa kolme erikseen toteutettua ikkunan eri panelia samaan ikkunaan, jolloin saat esille ikkunan lopullisen ulkoasun.

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