N3 [Java] Introduction to Java GUI

dhy_pw · Dec 23, 2014

Credits: @dhy_pw
Thanks to: Pak Muhsin Shodiq

Menyambut ultah nyit-nyit.net yang ke-12, baru kali ini saya coba untuk share ke rekan" sekalian berupa tutorial, tutorial apa kk? kali ini kita bahas tentang pengenalan "Graphical User Interface" pada Java wkwkwk...

Subtopic nya apa aja kk?

Swing vs AWT
The Java GUI API
Frames
Basic Layout Manager
Panels
Label, TextField and Button
Run a simple Java GUI

Apa saja sih yang kita dapatkan sehabis belajar ini?

Dapat menerapkan konsep pemrograman berorientasi objek teknologi Java
Menunjukkan pengguna grafis antarmuka pemrograman teknologi Java

Kalau belajar java pake compiler apa kk? saya biasa gunain compiler dibawah ini

Eclipse Luna

Saya sudah download Eclipse Luna nih kk, selanjutnya gimana?

Ok...langsung saja kita praktekan, pada contoh kali ini saya akan membuat aplikasi registrasi ID (ingat hanya layout nya saja), pahami langkah-langkah berikut...

1. Import library, 3 ini penting...

Code:

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

2. Buat variabel yang kita butuhkan

Code:

private final Color RADIO_BUTTON_BG_COLOR = Color.LIGHT_GRAY;
private JLabel mainTitle;
private JTextField textName;
private JTextField textPhone;
private JTextField textEmail;
private JRadioButton radioGold;
private JRadioButton radioBronze;
private JRadioButton radioPlatinum;
private JRadioButton radioSilver;
private JCheckBox checkAggree;
private JButton btnSubmit;
private JButton btnCancel;
private JLabel nameLabel;
private JLabel phoneLabel;
private JLabel emailLabel;
private JLabel categoryLabel;
private ButtonGroup categoryGroup;

3. Pembuatan Objek

Code:

mainTitle = new JLabel("Welcome to nyit-nyit.net", JLabel.CENTER);
mainTitle.setFont(new Font("Arial", Font.BOLD, 40));
mainTitle.setBorder(BorderFactory.createEmptyBorder(0, 20, 0, 20));

textName = new JTextField();
textPhone = new JTextField();
textEmail = new JTextField();

radioGold = new JRadioButton("Gold");
radioGold.setBackground(RADIO_BUTTON_BG_COLOR);

radioBronze = new JRadioButton("Bronze");
radioBronze.setBackground(RADIO_BUTTON_BG_COLOR);

radioPlatinum = new JRadioButton("Platinum");
radioPlatinum.setBackground(RADIO_BUTTON_BG_COLOR);

radioSilver = new JRadioButton("Silver");
radioSilver.setBackground(RADIO_BUTTON_BG_COLOR);

checkAggree = new JCheckBox("I agree with this terms and conditions");
checkAggree.setBackground(Color.PINK);

btnSubmit = new JButton("Submit");
btnCancel = new JButton("Cancel");

Font fieldLabelFont = new Font("Arial", Font.BOLD, 15);

nameLabel = new JLabel("Name :");
nameLabel.setFont(fieldLabelFont);

phoneLabel = new JLabel("Phone :");
phoneLabel.setFont(fieldLabelFont);

emailLabel = new JLabel("Email :");
emailLabel.setFont(fieldLabelFont);

categoryLabel = new JLabel("Category :");
categoryLabel.setFont(fieldLabelFont);

categoryGroup = new ButtonGroup();
categoryGroup.add(radioGold);
categoryGroup.add(radioBronze);
categoryGroup.add(radioPlatinum);
categoryGroup.add(radioSilver);

4. Pengaturan Layout

Code:

JPanel radioPanel = new JPanel();
radioPanel.setLayout(new GridLayout(2,2));
radioPanel.add(radioGold);
radioPanel.add(radioBronze);
radioPanel.add(radioPlatinum);
radioPanel.add(radioSilver);

JPanel buttonPanel = new JPanel();
buttonPanel.setLayout(new FlowLayout(FlowLayout.CENTER));
buttonPanel.setOpaque(false);
buttonPanel.add(btnSubmit);
buttonPanel.add(btnCancel);

JPanel firstColumnPanel = new JPanel();
firstColumnPanel.setLayout(new GridLayout(4,1,0,10));
firstColumnPanel.setBackground(new Color(29, 209, 200));
firstColumnPanel.add(nameLabel);
firstColumnPanel.add(phoneLabel);
firstColumnPanel.add(emailLabel);
firstColumnPanel.add(categoryLabel);

JPanel secondColumnPanel = new JPanel();
secondColumnPanel.setLayout(new GridLayout(4,1,0,10));
secondColumnPanel.setOpaque(false);
secondColumnPanel.add(textName);
secondColumnPanel.add(textPhone);
secondColumnPanel.add(textEmail);
secondColumnPanel.add(radioPanel);

JPanel centerPanel = new JPanel();
centerPanel.setLayout(new GridLayout(1,2,10,0));
centerPanel.setOpaque(false);
centerPanel.add(firstColumnPanel);
centerPanel.add(secondColumnPanel);    

JPanel southPanel = new JPanel();
southPanel.setLayout(new GridLayout(2,1));
southPanel.setOpaque(false);
southPanel.add(checkAggree);
southPanel.add(buttonPanel);

JPanel mainPanel = new JPanel();
mainPanel.setLayout(new BorderLayout());
mainPanel.add(mainTitle, BorderLayout.NORTH);
mainPanel.add(centerPanel, BorderLayout.CENTER);
mainPanel.add(southPanel, BorderLayout.SOUTH);
mainPanel.setBackground(new Color(166,237,197));

this.add(mainPanel);

Sekarang tinggal kita gabungkan langkah-langkah tersebut menjadi 1 kerangka...
Full Source Code

Code:

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

public class GUI extends JFrame {
    private final Color RADIO_BUTTON_BG_COLOR = Color.LIGHT_GRAY;
    private JLabel mainTitle;
    private JTextField textName;
    private JTextField textPhone;
    private JTextField textEmail;
    private JRadioButton radioGold;
    private JRadioButton radioBronze;
    private JRadioButton radioPlatinum;
    private JRadioButton radioSilver;
    private JCheckBox checkAggree;
    private JButton btnSubmit;
    private JButton btnCancel;
    private JLabel nameLabel;
    private JLabel phoneLabel;
    private JLabel emailLabel;
    private JLabel categoryLabel;
    private ButtonGroup categoryGroup;

    public GUI() {
        super("Registration ID");
        initObject();
        setFormLayout();
        this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
    }

    private void initObject() {
        mainTitle = new JLabel("Welcome to nyit-nyit.net", JLabel.CENTER);
        mainTitle.setFont(new Font("Arial", Font.BOLD, 40));
        mainTitle.setBorder(BorderFactory.createEmptyBorder(0, 20, 0, 20));
    
        textName = new JTextField();
        textPhone = new JTextField();
        textEmail = new JTextField();
    
        radioGold = new JRadioButton("Gold");
        radioGold.setBackground(RADIO_BUTTON_BG_COLOR);
    
        radioBronze = new JRadioButton("Bronze");
        radioBronze.setBackground(RADIO_BUTTON_BG_COLOR);
    
        radioPlatinum = new JRadioButton("Platinum");
        radioPlatinum.setBackground(RADIO_BUTTON_BG_COLOR);

        radioSilver = new JRadioButton("Silver");
        radioSilver.setBackground(RADIO_BUTTON_BG_COLOR);

        checkAggree = new JCheckBox("I agree with this terms and conditions");
        checkAggree.setBackground(Color.PINK);

        btnSubmit = new JButton("Submit");
    
        btnCancel = new JButton("Cancel");
    
        Font fieldLabelFont = new Font("Arial", Font.BOLD, 15);

        nameLabel = new JLabel("Name :");
        nameLabel.setFont(fieldLabelFont);
    
        phoneLabel = new JLabel("Phone :");
        phoneLabel.setFont(fieldLabelFont);
    
        emailLabel = new JLabel("Email :");
        emailLabel.setFont(fieldLabelFont);
    
        categoryLabel = new JLabel("Category :");
        categoryLabel.setFont(fieldLabelFont);
    
        categoryGroup = new ButtonGroup();
        categoryGroup.add(radioGold);
        categoryGroup.add(radioBronze);
        categoryGroup.add(radioPlatinum);
        categoryGroup.add(radioSilver);    
    }

    private void setFormLayout() {
        JPanel radioPanel = new JPanel();
        radioPanel.setLayout(new GridLayout(2,2));
        radioPanel.add(radioGold);
        radioPanel.add(radioBronze);
        radioPanel.add(radioPlatinum);
        radioPanel.add(radioSilver);

        JPanel buttonPanel = new JPanel();
        buttonPanel.setLayout(new FlowLayout(FlowLayout.CENTER));
        buttonPanel.setOpaque(false);
        buttonPanel.add(btnSubmit);
        buttonPanel.add(btnCancel);

        JPanel firstColumnPanel = new JPanel();
        firstColumnPanel.setLayout(new GridLayout(4,1,0,10));
        firstColumnPanel.setBackground(new Color(29, 209, 200));
        firstColumnPanel.add(nameLabel);
        firstColumnPanel.add(phoneLabel);
        firstColumnPanel.add(emailLabel);
        firstColumnPanel.add(categoryLabel);

        JPanel secondColumnPanel = new JPanel();
        secondColumnPanel.setLayout(new GridLayout(4,1,0,10));
        secondColumnPanel.setOpaque(false);
        secondColumnPanel.add(textName);
        secondColumnPanel.add(textPhone);
        secondColumnPanel.add(textEmail);
        secondColumnPanel.add(radioPanel);

        JPanel centerPanel = new JPanel();
        centerPanel.setLayout(new GridLayout(1,2,10,0));
        centerPanel.setOpaque(false);
        centerPanel.add(firstColumnPanel);
        centerPanel.add(secondColumnPanel);    
    
        JPanel southPanel = new JPanel();
        southPanel.setLayout(new GridLayout(2,1));
        southPanel.setOpaque(false);
        southPanel.add(checkAggree);
        southPanel.add(buttonPanel);
    
        JPanel mainPanel = new JPanel();
        mainPanel.setLayout(new BorderLayout());
        mainPanel.add(mainTitle, BorderLayout.NORTH);
        mainPanel.add(centerPanel, BorderLayout.CENTER);
        mainPanel.add(southPanel, BorderLayout.SOUTH);
        mainPanel.setBackground(new Color(166,237,197));

        this.add(mainPanel);
    }

    private void resetForm() {
        textName.setText("");
        textPhone.setText("");
        textEmail.setText("");
        categoryGroup.clearSelection();
        checkAggree.setSelected(false);
    }

    public static void main(String[] args) {
        GUI mainForm = new GUI();
        mainForm.pack();
        mainForm.setVisible(true);
    }
}

Selesai, sekarang kita lihat ouput yang dihasilkan...

Saat ini sampai di Layout dulu...Next release akan saya lanjutkan dalam pembuatan fungsi di layout tersebut, dimana kita akan masuk ke tahap "Event Driven Programming"...

Like This yo...

LeopardIce · Jan 6, 2015

kang dhy_pw
pada bagian ini
"radioGold = new JRadioButton("Gold");
radioGold.setBackground(RADIO_BUTTON_BG_COLOR);

radioBronze = new JRadioButton("Bronze");
radioBronze.setBackground(RADIO_BUTTON_BG_COLOR);

radioPlatinum = new JRadioButton("Platinum");
radioPlatinum.setBackground(RADIO_BUTTON_BG_COLOR);

radioSilver = new JRadioButton("Silver");
radioSilver.setBackground(RADIO_BUTTON_BG_COLOR);"

untuk perintah di bagian radioGold , bronze , platinum , silver bisa di deklarasiin ke user interface panel nya masing2 gak ?
jadi misalnya pas registrasi dia pilih bagian Gold , nah ntar pas login , dia masuk panel yang dia pilih Gold tadi ketika mendaftar
atau bisa lebih simplenya misalnya itu yang bagian gold , bronze , platinum , silver di ganti jadi misalnya admin , c.o reseller , reseller , member
nah ane mau kembangin seperti itu kira2 .

kalo bisa mohon bantuannya kang masih awam GUI wkwk

dhy_pw · Jan 11, 2015

@up
bisa, itu tinggal kamu kembangin aja,
logic nya gini...misal diwaktu register dia pilih "Member" maka diwaktu dia login akan masuk ke panel "Member" sesuai pilihan...
berarti nanti akan ada 4 fungsi, yaitu...LoginAdmin, LoginCoReseller, LoginReseller, LoginMember...
dimana pada ke 4 fungsi itu akan menampilkan layout yang berbeda...

untuk melakukan itu harus masuk ke tahap "Event Driven Programming" yang mungkin akan saya jelaskan pada release selanjutnya...
contoh singkat dari "Event Driven Programming" itu apa? misal ada button "Submit", dimana kita akan memata-matai button itu,
jika button itu di click akan mengeksekusi sesuatu...ya begitulah wkwk...

FelixRichard · Jan 18, 2015

ini blm ke database yaa mas, kyk ntr bisa vew gold member, platinum member, dsb gitu heheh

dhy_pw · Jan 19, 2015

@up
klo udah pake file, seperti edit, view info, dll udah masuk ke database...
masih layout dulu wkwk, layout -> event driven programming -> database...

FelixRichard · Jan 20, 2015

dhy_pw said:
@up
klo udah pake file, seperti edit, view info, dll udah masuk ke database...
masih layout dulu wkwk, layout -> event driven programming -> database...

ooh gitu mas
baik deh ditunggu next updatenya yaa

FelixRichard · Jan 20, 2015

upppppp

LeopardIce · Feb 14, 2015

ditunggu kang sampe ke database wkwkw mau buat project pake GUI soalnya .

duelinside · Jul 31, 2015

Jadi inget waktu di kasih tugas java -_-
buat nya penuh dengan tanda merah , apa lagi pas konek database. hhaha
tapi gk sia-sia, dapet A bro wkwk

sorry OOT
btw , untuk ke database mah gk terlalu ribet , kuasain layout aja dulu.
kalau udah ke database lebih maen ke query cmiw

N3 [Java] Introduction to Java GUI

dhy_pw

3 SD

LeopardIce

TK A

dhy_pw

3 SD

FelixRichard

PAUD

dhy_pw

3 SD

FelixRichard

PAUD

FelixRichard

PAUD

LeopardIce

TK A

duelinside

PAUD