Osio 4: Graafinen käyttöliittymä

Transkriptio

1 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 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 Käyttöliittymän suunnittelun perusteet Käyttöliittymien toteuttamisessa on kaksi päälinjaa: Työasemakäyttöliittymät toteutetaan ohjelmointialustan graafisten kirjastojen avulla Selainkäyttöliittymät perustuvat selaintekniikkaan ja XHTML-dokumentteihin Tässä esityksessä tutustutaan vain työasemakäyttöliittymien toteuttamiseen Javaohjelmointikielen graafisia käyttöliittymäkirjastoja hyväksikäyttäen

4 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

5 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

6 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

7 Käyttöliittymän suunnittelun perusteet Käyttöliittymän toteutus noudattaa MVC-mallia M = model eli sovelluslogiikka V = View eli käyttäjän käyttöliittymä C = Controller eli käyttäjän toimenpiteiden välittäjä Prosessi on seuraava: Käyttäjä toimittaa kontrollerin välityksellä ohjaustoimenpiteet sovellukselle Sovelluslogiikka suorittaa toimenpiteen ja informoi tilan muutoksesta käyttöliittymää Käyttöliittymä muuttaa ulkoasunsa muutosta vastaavaksi käyttäjälle

8 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

9 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

10 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

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

12 : 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

13 : 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

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

15 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)

16 Kuuntelijaobjekti (listener object) odottaa kunnes jokin tapahtuma herättää sen Tapahtuman syntyessä komponenttiobjekti luo tapahtumaobjektin ja välittää sen kuuntelijaobjektille kutsumalla kuuntelijaobjektin metodia Kuuntelijaobjekti tunnistaa tapahtuman ja käynnistää siihen liittyvän toimenpiteen

17 Opintojakson käyttämässä oppikirjassa Deitel, Deitel: Java How To Program graafisen käyttöliittymän toteutuksesta löytyy tietoa: Luvussa 11 sivuilla esitetään GUI:n peruslogiikka ja peruskomponentit. Luku käsitellään osiossa 4. Luvussa 12 sivuilla esitetään kaksiulotteisen grafiikan toteutus Java-käyttöliittymässä. Luvusta käsitellään osiossa 4 vain muutamia soveltuvia osia. Luvussa 22 sivuilla syvennetään luvun 11 sisältöä erityisesti Swing-tekniikan osalta. Luku käsitellään osiossa 4.

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

19 : Sanomaikkuna import javax.swing.joptionpane; public class Sanoma_1 { public static void main( String args[] ) { // Määrittele paneeli, sovellus, ilmoitus, jatkoehdotus ja sanoma JOptionPane paneeli; String sovellus, ilmoitus, jatkoehdotus, sanoma; sovellus = "Kirjanpito"; ilmoitus = "Viennin debet ja kdedit eivät täsmää."; jatkoehdotus = "Korjaa debet- ja kredit-summat yhtä suuriksi."; sanoma = ilmoitus + "\n" + jatkoehdotus; } } paneeli = new JOptionPane(); paneeli.showmessagedialog (null, sanoma, sovellus, JOptionPane.QUESTION_MESSAGE);

20 : Sanomaikkuna import javax.swing.joptionpane; public class Sanoma_1 { public static void main( String args[] ) { // Määrittele paneeli, sovellus, ilmoitus, jatkoehdotus ja sanoma JOptionPane paneeli; String sovellus, ilmoitus, jatkoehdotus, sanoma; sovellus = "Kirjanpito"; ilmoitus = "Viennin debet ja kdedit eivät täsmää."; jatkoehdotus = "Korjaa debet- ja kredit-summat yhtä suuriksi."; sanoma = ilmoitus + "\n" + jatkoehdotus; } } paneeli = new JOptionPane(); paneeli.showmessagedialog (null, sanoma, sovellus, JOptionPane.QUESTION_MESSAGE);

21 Itsenäinen harjoitustehtävä viikolle 3: Toteuta sanomaikkuna Tee myös seuraavia kokeiluja: muuta ilmoitustekstiä ja jatkoehdotustekstiä vaihda sanomaikkunan tyypin määrittelevää parametria ja tarkastele, minkä tyyppisiä ikoneita ja komentopainikkeita sanomaikkunaan ilmestyy mieti, missä tilanteessa mikin vaihtoehto on tarpeen vihjeitä saat kirjan luvusta 11.2 Huom: Tarvitset sanomaikkunaa viikolla 4

22 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.)

23 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)

24 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

25 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.

26 JFrame-ikkunan luominen: import javax.swing.jframe; Ikkunan otsikko public class OmaFrame { public static void main(string[] args) { JFrame frame = new JFrame("Demoframe"); frame.setlocation(100, 100); // Ikkunan paikka frame.setsize(400, 300); // Ikkunan koko frame.setvisible(true); // Näytä ikkuna frame.setdefaultcloseoperation (JFrame.EXIT_ON_CLOSE); // Oletuslopetus } }

27 JFrame-ikkunan luominen (toinen vaihtoehto): 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); } }

28 JFrame-ikkunan voi luoda näinkin (huomaa ero!): import javax.swing.jframe; public class OmaJFrame extends JFrame { // kontrollien määrittely tähän public static final int WIDTH = 300; public static final int HEIGHT = 200; public OmaJFrame() { // kontrollit luodaan ja sijoitetaan // ikkunaan muodostimessa setlocation(100, 200); // Ikkunan paikka setsize(width, HEIGHT); // 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); } }

29 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 JScrollPanevoi sisältää myös vieritinpalkit JTabbedPane sisältää myös välilehdet Tällä opintojaksolla käsittelemme ainoastaan Jpanelconteineria

30 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"));

31 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ä

32 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

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

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

35 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

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

37 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

38 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 );

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

40 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)

41 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) );

42 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ä

43 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

44 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

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

46 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 BorderLayoutasettelumalli 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.

47 Miten viikon 3 ryhmäharjoitustehtävä kannattaa toteuttaa: Lopuksi kokoa kolme erikseen toteutettua ikkunan eri panelia samaan ikkunaan, jolloin saat esille ikkunan lopullisen ulkoasun.

48 Työn iloa!