Osio 4: Graafinen käyttöliittymä

Transkriptio

1 Tavoite: Osio 4: Graafinen käyttöliittymä 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 Markku Kuitunen 1

2 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ä Markku Kuitunen 2

3 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 Markku Kuitunen 3

4 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 Markku Kuitunen 4

5 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 Tässä yhteydessä keskitytään jatkossa ohjelmoijan näkökulmaan käyttöliittymästä Tarkempi tutustuminen tyylioppaaseen jää opiskelijan itsenäisen opiskelun varaan Markku Kuitunen 5

6 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 Markku Kuitunen 6

7 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 Markku Kuitunen 7

8 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 Markku Kuitunen 8

9 Swing-tekniikan GUI-komponentteihin liittyy kolme peruskäsitettä: komponentit (components) tapahtumat (events) kuuntelijat (listeners) Markku Kuitunen 9

10 : komponentit otsikkoteksti (label) muokkausruutu (text field) komentopainike (button) valintaruutu (check box): radionappi (radio button) yhdistelmäruutu (combo box) valintalista (list) paneeli (panel) muuttumattoman tekstin esittäminen tekstitiedon esittäminen ja sen muuttaminen käyttäjän toimesta sovelluksen toiminnon aktivointi kaksiarvoisen valinnan tekeminen valinta annetusta arvojoukosta käyttäjä voi valita syöttötiedon alasvetovalikosta tai kirjoittaa sen ruutuun käyttäjä voi valita yhden tai useamman vaihtoehdon valintalistasta näytöllä oleva alue, jossa voidaan esittää muita käyttöliittymäkomponentteja Markku Kuitunen 10

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

12 Osa Swing-komponenteista on säilöjä (container), joihin muut Swing-komponentit voidaan tallentaa kehykset (frames) paneelit (panels) appletit (applets) eli sovelmat Markku Kuitunen 12

13 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) Markku Kuitunen 13

14 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. Markku Kuitunen 14

15 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.) Markku Kuitunen 15

16 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) Markku Kuitunen 16

17 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 Markku Kuitunen 17

18 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. Markku Kuitunen 18

19 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); } } Markku Kuitunen 19

20 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 JPanelcontaineria Markku Kuitunen 20

21 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")); Markku Kuitunen 21

22 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ä Markku Kuitunen 22

23 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 Markku Kuitunen 23

24 Javassa on käytettävissä seuraavat Layout managerit: FlowLayout BoxLayout GridLayout BorderLayout CardLayout GridBagLayout Markku Kuitunen 24

25 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 West Center East South Markku Kuitunen 25

26 FlowLayot: Asettelee komponentit vasemmalta oikealle riveittäin Aloittaa tarvittaessa uuden rivin On oletus Layout Manager JPanel:ille Markku Kuitunen 26

27 Graafinen käyttöliittymä asettelumallit FlowLayout virta: komponentit asetellaan riviltä toiselle Nimi Aku Ankka Puhno Asetukset: - CENTER -LEFT - RIGHT Markku Kuitunen 27

28 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 Markku Kuitunen 28

29 FlowLayot huomaa: Layout Managerille voidaan esittää toiveita kontrollien asettelusta esimerkiksi muodostimen valinnan yhteydessä, mutta kontrollien lopullisen koon ja paikan päättää kuitenkin Layout Manager Markku Kuitunen 29

30 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 ); Markku Kuitunen 30

31 BorderLayoutin avulla saadaan luotua tyypillinen asiakirjaikkuna. Ikkunassa ovat seuraavat osakokonaisuudet: Valikkorivi (NORTH) Ominaisuudet (CENTER) Komentopainikkeet (SOUTH) Markku Kuitunen 31

32 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) Markku Kuitunen 32

33 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) ); Markku Kuitunen 33

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

35 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ä Markku Kuitunen 35

36 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 Markku Kuitunen 36

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

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

39 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 Markku Kuitunen 39

40 Object Component AWT-luokat Container Window Frame JFrame JComponent Swing-luokat JPanel JLabel JTextComponent JMenuBar Abstract Button JTextArea JTextField JButton JMeniItem JMenu Markku Kuitunen 40

41 java.sun.com/docs/books/tutorial/uiswing/learn/index.html Markku Kuitunen 41