Osio 4: Graafinen käyttöliittymä

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

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

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 Java-ohjelmointikielen graafisia käyttöliittymäkirjastoja hyväksikäyttäen © Markku Kuitunen

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

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

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

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

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

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

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

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

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

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

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

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

Javan Swing-tekniikan perusteet 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 © Markku Kuitunen

Javan Swing-tekniikan perusteet 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. © Markku Kuitunen

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

Javan Swing-tekniikan perusteet: 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); } © Markku Kuitunen

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

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

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

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

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

Javan Swing-tekniikan perusteet JFrame-ikkunan luominen: import javax.swing.JFrame; 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 } Ikkunan otsikko © Markku Kuitunen

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

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

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 JScrollPanevoi sisältää myös vieritinpalkit JTabbedPane sisältää myös välilehdet Tällä opintojaksolla käsittelemme ainoastaan Jpanel-conteineria © Markku Kuitunen

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

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

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

Javan Swing-tekniikan perusteet Javassa on käytettävissä seuraavat Layout managerit: FlowLayout BoxLayout GridLayout BorderLayout CardLayout GridBagLayout © Markku Kuitunen

Javan Swing-tekniikan perusteet FlowLayot: Asettelee komponentit vasemmalta oikealle riveittäin Aloittaa tarvittaessa uuden rivin On oletus Layout Manager JPanel:ille © Markku Kuitunen

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

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

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

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

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

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

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

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

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

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

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

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

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

Osio 4: Graafinen käyttöliittymä

Samankaltaiset esitykset

Esitys aiheesta: "Osio 4: Graafinen käyttöliittymä"— Esityksen transkriptio:

Samankaltaiset esitykset

Projektista

Palaute

Kirjaudu sisään

Kirjaudu sisään sosiaaliverkostojen kautta:

Osio 4: Graafinen käyttöliittymä

Samankaltaiset esitykset

Esitys aiheesta: "Osio 4: Graafinen käyttöliittymä"— Esityksen transkriptio:

Samankaltaiset esitykset

Projektista

Palaute