Tag Archive: Programming


Di postingan sebelumnya, sudah dibahas tentang Flow Layout, sekarang kita akan pelajari apa bedanya dengan Grid Layout. Modifikasi file SimpleCalc.java yang ada di postingan Flow Layout menjadi seperti di bawah:

import javax.swing.*;
import java.awt.GridLayout;

public class SimpleCalc{
	public static void main(String[] args){
		JPanel windowPane = new JPanel();

		GridLayout g1 = new GridLayout(4,2);
		windowPane.setLayout(g1);

		JLabel label1 = new JLabel("operand 1 = ");
		JTextField angka1 = new JTextField(10);
		JLabel label2 = new JLabel("operand 2 = ");
		JTextField angka2 = new JTextField(10);
		JLabel label3 = new JLabel("hasil = ");
		JTextField hasil = new JTextField(10);
		JButton go = new JButton("Sum");

		windowPane.add(label1);
		windowPane.add(angka1);
		windowPane.add(label2);
		windowPane.add(angka2);
		windowPane.add(label3);
		windowPane.add(hasil);
		windowPane.add(go);

		JFrame frame = new JFrame();
		frame.setContentPane(windowPane);

		frame.setSize(500,100);
		frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
		frame.setVisible(true);
	}
}

Lalu run. Maka sekarang tampilannya lebih rapih.

007

Lalu coba resize windowsnya, posisi nya pun relatif tetap sama saja.. hanya ukurannya saja yg bertambah. Itulah perbedaannya Flow Layout dengan Grid Layout. Jadi Grid Layout akan menyimpan widget/komponen pada cell masing-masing sesuai urutannya.

008

Dalam instansiasi objek bertipe GridLayout, harus disertakan ukuran Grid-nya (dalam contoh ini yaitu 4 baris 2 kolom), mirip seperti table ya? Ada baris dan kolom :mrgreen:

 

 

Java GUI memiliki 2 package: abstract windows kit (AWT) dan Swing toolkit. Komponen dari package Swing, memiliki prefix J di depannya (misal JFrame, JWindows). Yang kemaren sudah dipelajari, adalah komponen dari package Swing.
JFrame yg kemaren kita pelajari adalah salah satu top level container pada Java GUI. Container adalah tempat dimana widget berada, seperti button, text area, radio button, dll.

Lalu untuk intermediate level container (container level menengah), beberapa diantaranya adalah JPanel, JOptionsPane, JScrollPane, dan JSplitPane. Dalam postingan ini akan dibahas JPanel berikut dengan berbagai macam Layout Manager. Untuk yg pertama dibahas: FlowLayout. Untuk memahami seperti apa itu FlowLayout, kita harus mencoba untuk code, tidak cukup hanya dengan melihat pengertian, tapi juga harus learning by doing.

Untuk belajar, mari kita coba membuat kalkulator pertambahan. Ingat: Hanya GUI-nya saja. Kita belum belajar tentang bagaimana program kita membaca tombol mana yang dieksekusi (untuk ini, nanti akan dibahas pada bagian ActionListener). Untuk memulai, silakan eksekusi code program berikut:

import javax.swing.*;
import java.awt.FlowLayout;

public class SimpleCalc{
	public static void main(String[] args){
		JPanel windowPane = new JPanel();

		FlowLayout f1 = new FlowLayout();
		windowPane.setLayout(f1);

		JLabel label1 = new JLabel("operand 1 = ");
		JTextField angka1 = new JTextField(10);
		JLabel label2 = new JLabel("operand 2 = ");
		JTextField angka2 = new JTextField(10);
		JLabel label3 = new JLabel("hasil = ");
		JTextField hasil = new JTextField(10);
		JButton go = new JButton("Sum");

		windowPane.add(label1);
		windowPane.add(angka1);
		windowPane.add(label2);
		windowPane.add(angka2);
		windowPane.add(label3);
		windowPane.add(hasil);
		windowPane.add(go);

		JFrame frame = new JFrame();
		frame.setContentPane(windowPane);

		frame.setSize(500,100);
		frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
		frame.setVisible(true);
	}
}

Setelah di run, akan tampil seperti ini:

005

Hm.. sekarang coba perlebar ukuran windows-nya, pasti layout komponennya berubah. Posisi komponennya menyesuaikan dengan lebar aplikasi tadi. Itulah sifat dari Flow Layout.

006

Pada layout ini, kita tidak mensetting letak masing-masing komponen, karena posisi komponen bersifat dinamis, tergantung ukuran aplikasi-nya.. kalau dilebarin maka semua komponen akan terletak pada 1 baris ke samping. Tapi kalau kita setting posisi-nya seperti pada postingan sebelumnya tentang JFrame, maka komponen tersebut akan berada pada koordinat static.

Masih ada layout lainnya seperti Grid Layout, dll. Nanti akan dibahas pada postingan berikutnya.

Masih dengan Java GUI. Sekarang bagian 3, kali ini mau membahas bagaimana cara mengganti icon di JFrame. Icon yg mana sih yg dimaksud? Yg dibuletin di bawah ini nih:

003

Defaultnya ya icon Java. Tapi kadang kita ingin ganti dengan icon lain. Lalu bagaimana caranya? Simple, tambahkan saja line berikut:

setIconImage (getToolkit().getImage ("Home.PNG"));

Dimana file Home.PNG berada satu direktori dengan kode program. Oiya, code program-nya sekarang jadi seperti ini:

import java.awt.Dimension;
import java.awt.Toolkit;

import javax.swing.JFrame;

public class Main extends JFrame {

	private Dimension layar = Toolkit.getDefaultToolkit().getScreenSize();

	public Main(){
		super("Test Java GUI");
		setIconImage (getToolkit().getImage ("Home.PNG"));
		setSize(300, 200);
		setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
		int posisiX = (layar.width-getWidth())/2;
		int posisiY = (layar.height-getHeight())/2;
		setLocation(posisiX, posisiY);
		setVisible(true);
	}

	public static void main(String[] args) {
		new Main();
	}

}

Dan berikut ini file Home.PNG yg saya gunakan.

Home

Lalu ini adalah hasilnya:

004

Di postingan sebelumnya, telah dibahas bagaimana membuat JFrame. Sekarang, bagaimana supaya JFrame muncul tepat di tengah-tengah layar?

Untuk memindahkan posisi JFrame, sebelum JFrame ditampilkan kita perlu memanggil method setLocation(x, y), dimana x dan y adalah koordinatnya. Posisi 0,0 berada di pojok kiri atas. Dan semakin ke kanan maka x semakin besar, semakin ke bawah y semakin besar.

Sekarang, kita coba pindahkan ke posisi 300, 200. Lalu Run lagi, source code-nya harusnya sekarang seperti ini:

import javax.swing.JFrame;

public class Main extends JFrame {

	public Main(){
		super("Test Java GUI");
		setSize(300, 200);
		setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
		setLocation(300, 200);
		setVisible(true);
	}

	public static void main(String[] args) {
		new Main();
	}

}

Lalu Run program. Posisi JFrame sekarang bukan lagi di pojok kiri atas, tapi sudah bergeser sedikit ke kanan dan ke bawah. Lalu bagaimana supaya muncul di tengah-tengah? Rumusnya adalah:

posixi X = (Width Layar - Width JFrame)/2
posisi Y = (Height Layar - Height JFrame)/2

Jadi posisi X dan Y di yang tepat supaya JFrame muncul di tengah-tengah layar, dapat diperoleh dengan rumus di atas. Pertanyaannya adalah, bagaimana cara mendapatkan Width/Height Layar komputer kita sendiri? Caranya, tambahkan line code berikut sebagai atribut dari class Main:

private Dimension d = Toolkit.getDefaultToolkit().getScreenSize();

Code di atas adalah code untuk mendapatkan ukuran layar. Lalu implementasikan rumus posisi X dan Y diatas, sehingga sekarang source code-nya seperti ini:

import java.awt.Dimension;
import java.awt.Toolkit;

import javax.swing.JFrame;

public class Main extends JFrame {

	private Dimension layar = Toolkit.getDefaultToolkit().getScreenSize();

	public Main(){
		super("Test Java GUI");
		setSize(300, 200);
		setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
		int posisiX = (layar.width-getWidth())/2;
		int posisiY = (layar.height-getHeight())/2;
		setLocation(posisiX, posisiY);
		setVisible(true);
	}

	public static void main(String[] args) {
		new Main();
	}

}

Jangan lupa import java.awt.Dimension dan java.awt.Toolkit. Lalu Run lagi… dan sekarang sudah ada di tengah-tengah layar bukan?

Bagaimana kalau ingin mengganti icon aplikasi yang ada di JFrame? Terkadang kita bosan dengan icon tersebut atau ga mau ketahuan sama user kalau aplikasinya dibuat pakai Java. Untuk ini, akan dibahas di postingan berikutnya.

Berkenalan dengan Java GUI

Java GUI? Kenapa tidak. Mudah? Ya.

Mari kita berkenalan dengan Java GUI. Di postingan ini, akan didemonstrasikan dasar-dasar pemrograman GUI dengan menggunakan Java. Mari kita mulai dengan membuat Frame. Pertama buat class dengan nama Main seperti di bawah ini.

public class Main {

	public static void main(String[] args) {
		new Main();
	}

}

Lalu sekarang modifikasi class Main, supaya meng-extends class JFrame. Tambahkan juga constructor class Main seperti di bawah ini. (Dan jangan lupa import class javax.swing.JFrame).

import javax.swing.JFrame;

public class Main extends JFrame {

	public Main(){
		super("Test Java GUI");
		setSize(300, 200);
		setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
		setVisible(true);
	}

	public static void main(String[] args) {
		new Main();
	}

}

Setelah itu, Run Program. Apa yang terjadi? Muncul Frame dengan ukuran 300 x 200 pixels, pada posisi pojok kiri atas.

JFrame Example

JFrame Example

Apa sih itu JFrame? JFrame itu ya komponen GUI yang bentuknya seperti yg tadi di-Run. Lalu apa gunanya memanggil method super(“Test Java GUI”) pada constructor? Ya, tulisan itu muncul di Frame tadi. Karena class Main merupakan turunan dari class JFrame, maka pemanggilan method super() pada contructor di atas berarti memanggil constructor dari class JFrame. Begitu juga dengan pemanggilan method setSize(), setDefaultCloseOperation(), dan setVisible(), itu semua adalah method yg diturunkan dari class parent. Fungsi method setSize() saya rasa cukup jelas, itu untuk men-setting size dari Frame. setVisible() juga sudah cukup jelas, yaitu supaya Frame tsb dapat dilihat (visible), by default adalah false. Jadi  kita harus setVisible dengan nilai true. Lalu kalau setDefaultCloseOperation() untuk apa? Method ini untuk menentukan apa yg harus dilakukan program apabila Frame tadi di-close. Dalam contoh ini, program harus exit (terminate) apabila Frame di-close. Kalau tidak disetting, nanti saat Frame di-close.. program akan tetap running. Tentu kita tidak menginginkan hal itu. Kita ingin Program berhenti setelah Frame tadi di-close.

Mengapa program muncul di pojok kiri atas? Bisa tidak program muncul di tengah-tengah layar? Akan dibahas di postingan berikutnya.

Follow

Get every new post delivered to your Inbox.

Join 1,515 other followers