N3 [Java] Introduction to Java GUI

Discussion in 'N3 Source Codes dan Tutorials' started by dhy_pw, Dec 23, 2014.

Discuss [Java] Introduction to Java GUI in the N3 Source Codes dan Tutorials area at Nyit-Nyit.Net

  1. dhy_pw 3 SD Level 4

    Messages:
    402
    Likes Received:
    109
    Trophy Points:
    69
    Game:
    Idol street
    Credits: @dhy_pw@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
    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...
    java.JPG
    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...
     
    Last edited: Dec 23, 2014

    Gunakan jasa Rekber N3 untuk menjamin jual beli anda atau menghindari penipuan dengan meng klik disini
  2. LeopardIce TK 0 Kecil Level 1 Banned

    Messages:
    77
    Likes Received:
    13
    Trophy Points:
    33
    Game:
    League Legend
    Region:
    Unknown
    kang dhy_pwdhy_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
     
  3. dhy_pw 3 SD Level 4

    Messages:
    402
    Likes Received:
    109
    Trophy Points:
    69
    Game:
    Idol street
    @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...
     
  4. FelixRichard Pra TK Level 1

    Messages:
    18
    Likes Received:
    0
    Trophy Points:
    26
    ini blm ke database yaa mas, kyk ntr bisa vew gold member, platinum member, dsb gitu heheh
     
    Last edited: Feb 3, 2015
  5. dhy_pw 3 SD Level 4

    Messages:
    402
    Likes Received:
    109
    Trophy Points:
    69
    Game:
    Idol street
    @up
    klo udah pake file, seperti edit, view info, dll udah masuk ke database...
    masih layout dulu wkwk, layout -> event driven programming -> database...
     
  6. FelixRichard Pra TK Level 1

    Messages:
    18
    Likes Received:
    0
    Trophy Points:
    26
    ooh gitu mas
    baik deh ditunggu next updatenya yaa
     
  7. FelixRichard Pra TK Level 1

    Messages:
    18
    Likes Received:
    0
    Trophy Points:
    26
    upppppp
     
    Last edited: Feb 3, 2015
  8. LeopardIce TK 0 Kecil Level 1 Banned

    Messages:
    77
    Likes Received:
    13
    Trophy Points:
    33
    Game:
    League Legend
    Region:
    Unknown
    ditunggu kang sampe ke database wkwkw mau buat project pake GUI soalnya .
     
  9. duelinside Pra TK Level 1

    Messages:
    7
    Likes Received:
    0
    Trophy Points:
    26
    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
     

Share This Page