wiki:guimalli
Last modified 5 years ago Last modified on 2013-01-06 21:07:42

Pages linking to guimalli:

Yksinkertaisen käyttöliittymän tekeminen Puhelinmuistiohakuun WindowBuilderilla

Oletan, että perusohjelmointi on jo ohj1 -kurssilta hanskassa. Jos jotain kuitenkin jää tästä esimerkistä epäselväksi, ilmoittakaa ihmeessä minulle (toni.haka-risku@…) tai muuttakaa suoraan wikiin.

Käytämme seuraavaa koodia toiminnallisuuden pohjana. Aloita siis eclipsessä uusi projekti ja lisää sinne luokka, jossa alla oleva koodi. Tarkoituksemme on siis tehdä tähän nopea ja yksinkertainen käyttöliittymä.

// package

import java.util.*;
import fi.jyu.mit.ohj2.Tiedosto;

public class Puhelinmuistio {

    /**
     * Yksinkertainen staattinen aliohjelma, jolla voimme tarkistaa täsmääkö annettu
     * merkkijono tiedostossa oleviin riveihin.
     * @author Toni Haka-Risku
     * @param haku - hakuehto
     * @param tiedosto - tiedoston nimi
     * @return lista, jossa hakuun täsmäävät
     */
    public static List <String> hae(String haku, String tiedosto) {
		
        // Haetaan käyttäjien tiedot listaan tiedostosta
        List <String> puhelinmuistio = Tiedosto.lueTiedostoListaan(tiedosto); 
        
        // Lista jonne laitamme kaikki, jotka sopivat hakuun
        List <String> loydetyt = new ArrayList<String>();
        
        for (String rivi: puhelinmuistio) {
            if ( rivi.toUpperCase().contains(haku.toUpperCase()) ) {
                loydetyt.add(rivi);
            }
	}
        return loydetyt;
    }
}

Muista myös lisätä .txt tiedosto, jossa haettava data on. Tässä esimerkki miltä tiedosto näyttää:

"puhelinmuistio.txt"

Seppo Taalasmaa 031 6969696
Ismo Laitela 040 32295010
Peter Teräsmies 00003223034
Pekka Laitinen 12390484
Joonas Ek 2304005
Olavi Leppänen 239048225
Jukka Kontti 0566202374

Sitten itse käyttöliittymän tekoon:

Aluksi luodaan uusi ikkuna:

  • Klikkaa hiiren oikealla napilla vaikkapa pakettia ja sieltä New > other
  • Tämän jälkeen avaa hakemistot WindowBuilder > Swing Designer > Application Window
  • Kun Application Window on valittu, paina next. Anna luokalle mieluista nimi, vaikkapa "MuistioGUI"
  • Finish

Nyt meille onkin valmiiksi tehtyä koodia ilmestynyt MuistioGUI -luokkaan. Tarkasta vielä ohjelman toimivuus ja aja ohjelma. Jos kaikki on mennyt niinkin pitääkin, pitäisi nyt avautua ruudulle tyhjä ikkuna.

Seuraavaksi luodaan käyttöliittymä Design -näkymässä. Tähän pääset klikkaamalla "koodiboxin" alla olevaa "design"- välilehteä.

Nyt edessäsi pitäisi olla graafinen "suunnittelupöytä", jossa pystyt tekemään käyttöliittymän mahdollisimman helposti ilman riviäkään koodia. Tehdäänpä siis yksi nappi, ja kaksi tekstikenttää, joista toiseen tulee hakuehto ja toiseen sitten nappaamme haun tulokset.

  • Yksinkertaistetaan ensiksi layout. Klikkaa "Layouts" -hakemistosta ensimmäistä eli "absolute layout" ja klikkaa sitten ikkunaa. Nyt meillä on käytössä layout, joka antaa meidän siirtää komponentteja mielivaltaisesti käyttöliittymässä, ilman että järjestelee niitä mitenkään.
  • Klikkaa paletista "JButton" -komponenttia, siirrä nappi halutulle paikalle.
  • Tee sama myös "JTextField" -komponentille sekä "JTextAreallle". Muista venyttää textareaa tarpeeksi isoksi.
  • Nimetään komponentit oikein. Tämä onnistuu klikkaamalla komponenttia, jolloin vasemmalle avautuu Properties -valikko. Täällä pystymme muuttamaan komponentin asetuksia. Vaihdetaan napille text = hae ja Variable = btnHae. Vaihdetaan myös JTextFieldin ja JTextArean muuttujien nimet kuvaavimmiksi: JTextField > textAreaTulos ja JTextField > textFieldHaku.

Nyt käyttöliittymä on valmis. Sitten vain muokkaamme koodiin toiminnallisuuden:

  • Ensin tehdään nappiin toiminnallisuus. Tämä saadaan helposti kaksoisklikkaamalla nappia, jolloin meille luodaan valmiiksi nappiin kuuntelija, joka reagoi kun nappia on painettu.

Koodin pitäisi siis napin kohdalta näyttää tältä:

		JButton btnHae = new JButton("Hae");
		btnHae.addActionListener(new ActionListener() {
			public void actionPerformed(ActionEvent arg0) {
				// Tänne koodataan mitä tapahtuu, kun nappia painetaan
			}
		});

Tässä vaiheessa emme enää tarvitse design -näkymää vaan lopun koodaamme käsin. Koodia on tullut valmiiksi jo aikapaljon ilman, että olemme oikeastaan koodanneet mitään ja näin sen pitäisikin olla. Meille on valmiiksi luotu kaikki tarvittavat palikat graafisen käyttöliittymän tekoon. Miten sitten tästä eteenpäin? Yksinkertaisesti meidän tarvitsee vain tehdä niin, että nappia painamalla otamme tekstiboksiin kirjoitetun tekstin ja annamme sen parametrina Puhelinmuistio -luokan Hae(String s, String tiedosto) -aliohjelmalle ja otamme vastaan palautetun listan. Lista taas näytetään isommalla tekstialueella.

Muutetaan kuitenkin hieman koodia, jotta tämä onnistuu mahdollisimman yksinkertaisesti:

  • Laitetaan textAreaTulos näkymään koko luokalle. Muutetaan siis koodia näinkin vähän:
	JTextArea textAreaTulos = new JTextArea();
	textAreaTulos.setBounds(73, 77, 208, 126);
	frame.getContentPane().add(textAreaTulos);		
	textAreaTulos = new JTextArea();
	textAreaTulos.setBounds(73, 77, 208, 126);
	frame.getContentPane().add(textAreaTulos);

Tämän tehtyä lisäämme vain textArean luokan muuttujaksi. Lisää myös valmiiksi luokkaan muuttuja listalle, johon otamme vastaan tiedost Hae() -aliohjelmalta.

public class MuistioGUI {

	private JFrame frame;
	private JTextField textFieldHaku;
	private JTextArea textAreaTulos;
        private List<String> loydetyt;

Enää meidän ei tarvitse kuin muuttaa vain nappi tekemään se mitä haluamme:

JButton btnHae = new JButton("Hae");
btnHae.addActionListener(new ActionListener() {
   public void actionPerformed(ActionEvent arg0) {
				
      // Haetaan puhelinmuistion staattisen aliohjelman Hae() -avulla lista niistä nimistä
      // Jotka täsmäävät tekstiboksissa olevaan tekstiin
      loydetyt = Puhelinmuistio.hae(textFieldHaku.getText(), "puhelinmuistio.txt");
				
      // Muistetaan tyhjentää tekstialue aina ennen uuden tuloksen laittamista
      textAreaTulos.setText("");
				
      // Lisätään kaikki loydetyt rivit tekstialueeseen
      for (String s : loydetyt) {
          textAreaTulos.append(s + "\n");
      }
				
   }
});

Nyt meillä onkin käyttöliittymä puhelinmuistiolle.

Lopullinen koodi siis tässä:

//package

import java.awt.EventQueue;

import javax.swing.JFrame;
import javax.swing.JButton;
import javax.swing.JTextArea;
import javax.swing.JTextField;
import java.awt.event.ActionListener;
import java.awt.event.ActionEvent;
import java.util.List;


public class MuistioGUI {

	private JFrame frame;
	private JTextField textFieldHaku;
	private JTextArea textAreaTulos;
	private List<String> loydetyt;

	/**
	 * Launch the application.
	 */
	public static void main(String[] args) {
		EventQueue.invokeLater(new Runnable() {
			public void run() {
				try {
					MuistioGUI window = new MuistioGUI();
					window.frame.setVisible(true);
				} catch (Exception e) {
					e.printStackTrace();
				}
			}
		});
	}

	/**
	 * Create the application.
	 */
	public MuistioGUI() {
		initialize();
	}

	/**
	 * Initialize the contents of the frame.
	 */
	private void initialize() {
		frame = new JFrame();
		frame.setBounds(100, 100, 450, 300);
		frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
		frame.getContentPane().setLayout(null);
		
		JButton btnHae = new JButton("Hae");
		btnHae.addActionListener(new ActionListener() {
			public void actionPerformed(ActionEvent arg0) {
				
				// Haetaan puhelinmuistion staattisen aliohjelman Hae() -avulla lista niistä nimistä
				// Jotka täsmäävät tekstiboksissa olevaan tekstiin
				loydetyt = Puhelinmuistio.hae(textFieldHaku.getText(), "puhelinmuistio.txt");
				
				// Muistetaan tyhjentää tekstialue aina ennen uuden tuloksen laittamista
				textAreaTulos.setText("");
				
				// Lisätään kaikki loydetyt rivit tekstialueeseen
				for (String s : loydetyt) {
					textAreaTulos.append(s + "\n");
				}
				
			}
		});
		btnHae.setBounds(318, 27, 89, 23);
		frame.getContentPane().add(btnHae);
		
		textAreaTulos = new JTextArea();
		textAreaTulos.setBounds(73, 77, 208, 126);
		frame.getContentPane().add(textAreaTulos);
		
		textFieldHaku = new JTextField();
		textFieldHaku.setBounds(54, 28, 187, 22);
		frame.getContentPane().add(textFieldHaku);
		textFieldHaku.setColumns(10);
	}
}

Tekijä: Toni Haka-Risku