Tutorial : Penggunaan Form Layout bagian 1

Diposting oleh Unknown Kamis, 26 Mei 2011 20.27
Label: , , ,

Untuk memenuhi janji saya pada posting sebelumnya, kali ini saya akan membahas bagaimana penggunaan form layout. Namun sebelum membahas lebih lanjut, saya akan menjelaskan secara singkat mengenai apa dan mengapa kita menggunakan Form Layout. Form Layout merupakan Form framework yang dikembangkan oleh Jgoodies dan dipergunakan untuk mempermudah dalam pembuatan form atau tampilan.
Bagi programmer java baik yang sudah mahir maupun yang masih pemula, tentunya sangat memahami bahwa untuk membuat tampilan yang baik dan rapi tidaklah mudah. Kita biasanya untuk membuat suatu tampilan berbentuk form biasanya menggunakan Gridbaglayout. Nah menurut saya pribadi membuat form menggunakan layout ini tidak menyenangkan, bahkan pada implementasinya sangat menyiksa. Mari kita lihat perbedaan cara penggunaan keduanya.
Kali ini kita akan membuat tampilan form yang bentuknya kira-kira akan terlihat seperti gambar dibawah ini.
SS-2011-05-26_13.12.24

Untuk tampilan seperti gambar diatas source code program dengan menggunakan Layout GridBagLayout akan tampak sepeti berikut ini :
import java.awt.BorderLayout;
import java.awt.Dimension;
import java.awt.FlowLayout;
import java.awt.GridBagConstraints;
import java.awt.GridBagLayout;
import java.awt.Insets;
import java.awt.event.WindowAdapter;
import java.awt.event.WindowEvent;
import java.awt.event.WindowListener;
import javax.swing.ButtonGroup;
import javax.swing.JButton;
import javax.swing.JComboBox;
import javax.swing.JDialog;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;
import javax.swing.JRadioButton;
import javax.swing.JScrollPane;
import javax.swing.JTextArea;
import javax.swing.JTextField;
import javax.swing.border.EmptyBorder;

/**
 *
 * @author Muhamad Wibawa
 */
public class ComplaintsDialog extends JDialog {

    public ComplaintsDialog(JFrame frame) {
        super(frame, true);
        setTitle("Simple Complaints Dialog");
        setSize(500, 300);

        JPanel panel = new JPanel(new BorderLayout());
        panel.setLayout(new GridBagLayout());

        panel.setBorder(new EmptyBorder(new Insets(5, 5, 5, 5)));
        getContentPane().add(BorderLayout.CENTER, panel);

        GridBagConstraints c = new GridBagConstraints();

        Dimension shortField = new Dimension(40, 20);
        Dimension mediumField = new Dimension(120, 20);
        Dimension longField = new Dimension(240, 20);
        Dimension hugeField = new Dimension(240, 80);

        EmptyBorder border = new EmptyBorder(new Insets(0, 0, 0, 10));
        EmptyBorder border1 = new EmptyBorder(new Insets(0, 20, 0, 10));

        c.insets = new Insets(2, 2, 2, 2);

        c.anchor = GridBagConstraints.WEST;

        JLabel lbl1 = new JLabel("Short Description");
        lbl1.setBorder(border); 
        panel.add(lbl1, c);
        JTextField txt1 = new JTextField();
        txt1.setPreferredSize(longField);
        c.gridx = 1;
        c.weightx = 1.0; 
        c.gridwidth = 3; 
        c.fill = GridBagConstraints.HORIZONTAL;
        panel.add(txt1, c);

        JLabel lbl2 = new JLabel("Description");
        lbl2.setBorder(border);
        c.gridwidth = 1;
        c.gridx = 0;
        c.gridy = 1;
        c.weightx = 0.0; 
        panel.add(lbl2, c);
        JTextArea area1 = new JTextArea();
        JScrollPane scroll = new JScrollPane(area1);
        scroll.setPreferredSize(hugeField);
        c.gridx = 1;
        c.weightx = 1.0; 
        c.weighty = 1.0; 
        c.gridwidth = 3; 
        c.gridheight = 2; 
        c.fill = GridBagConstraints.BOTH; 
        panel.add(scroll, c);

        JLabel lbl3 = new JLabel("Severity");
        lbl3.setBorder(border);
        c.gridx = 0;
        c.gridy = 3;
        c.gridwidth = 1;
        c.gridheight = 1;
        c.weightx = 0.0;
        c.weighty = 0.0;
        c.fill = GridBagConstraints.NONE;
        panel.add(lbl3, c);
        JComboBox combo3 = new JComboBox();
        combo3.addItem("A");
        combo3.addItem("B");
        combo3.addItem("C");
        combo3.addItem("D");
        combo3.addItem("E");
        combo3.setPreferredSize(shortField);
        c.gridx = 1;
        panel.add(combo3, c);

        JLabel lbl4 = new JLabel("Priority");
        lbl4.setBorder(border1);
        c.gridx = 2;
        panel.add(lbl4, c);
        JComboBox combo4 = new JComboBox();
        combo4.addItem("1");
        combo4.addItem("2");
        combo4.addItem("3");
        combo4.addItem("4");
        combo4.addItem("5");
        combo4.setPreferredSize(shortField);
        c.gridx = 3;
        panel.add(combo4, c);

        JLabel lbl5 = new JLabel("Name");
        lbl5.setBorder(border);
        c.gridx = 0;
        c.gridy = 4;
        panel.add(lbl5, c);
        JTextField txt5 = new JTextField();
        txt5.setPreferredSize(longField);
        c.gridx = 1;
        c.gridwidth = 3;
        panel.add(txt5, c);

        JLabel lbl6 = new JLabel("Telephone");
        lbl6.setBorder(border);
        c.gridx = 0;
        c.gridy = 5;
        panel.add(lbl6, c);
        JTextField txt6 = new JTextField();
        txt6.setPreferredSize(mediumField);
        c.gridx = 1;
        c.gridwidth = 3;
        panel.add(txt6, c);

        JLabel lbl7 = new JLabel("Sex");
        lbl7.setBorder(border);
        c.gridx = 0;
        c.gridy = 6;
        panel.add(lbl7, c);
        JPanel radioPanel = new JPanel();

        radioPanel.setLayout(new FlowLayout(FlowLayout.LEFT, 5, 0));
        ButtonGroup group = new ButtonGroup();
        JRadioButton radio1 = new JRadioButton("Male");
        radio1.setSelected(true);
        group.add(radio1);
        JRadioButton radio2 = new JRadioButton("Female");
        group.add(radio2);
        radioPanel.add(radio1);
        radioPanel.add(radio2);
        c.gridx = 1;
        c.gridwidth = 3;
        panel.add(radioPanel, c);

        JLabel lbl8 = new JLabel("ID Number");
        lbl8.setBorder(border);
        c.gridx = 0;
        c.gridy = 7;
        c.gridwidth = 1;
        panel.add(lbl8, c);
        JTextField txt8 = new JTextField();
        txt8.setPreferredSize(mediumField);
        c.gridx = 1;
        c.gridwidth = 3;
        panel.add(txt8, c);

        JButton submitBtn = new JButton("Submit");
        c.gridx = 4;
        c.gridy = 0;
        c.gridwidth = 1;
        c.fill = GridBagConstraints.HORIZONTAL;
        panel.add(submitBtn, c);

        JButton cancelBtn = new JButton("Cancel");
        c.gridy = 1;
        panel.add(cancelBtn, c);

        JButton helpBtn = new JButton("Help");
        c.gridy = 2;
        c.anchor = GridBagConstraints.NORTH; 
        panel.add(helpBtn, c);

        WindowListener wndCloser = new WindowAdapter() {

            @Override
            public void windowClosing(WindowEvent e) {
                System.exit(0);
            }
        };
        addWindowListener(wndCloser);

        setVisible(true);
    }

    public static void main(String[] args) {
        new ComplaintsDialog(new JFrame());
    }
}
Sedangkan jika menggunakan Form Layout kira-kira source yang harus kita tuliskan akan seperti berikut ini.
import com.jgoodies.forms.builder.DefaultFormBuilder;
import com.jgoodies.forms.layout.CellConstraints;
import com.jgoodies.forms.layout.FormLayout;
import java.awt.BorderLayout;
import java.awt.Dimension;
import java.awt.event.WindowAdapter;
import java.awt.event.WindowEvent;
import java.awt.event.WindowListener;
import javax.swing.ButtonGroup;
import javax.swing.JButton;
import javax.swing.JComboBox;
import javax.swing.JDialog;
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.JRadioButton;
import javax.swing.JScrollPane;
import javax.swing.JTextArea;
import javax.swing.JTextField;

/**
 *
 * @author Muhamad Wibawa
 */
public class ComplaintDialogFormLayout extends JDialog {
    
    public ComplaintDialogFormLayout(JFrame frame) {
        super(frame, true);
        setTitle("Simple Complaints Dialog Form Layout");
        setSize(500, 300);
        
        getContentPane().add(BorderLayout.CENTER, createPanel());
        
        WindowListener wndCloser = new WindowAdapter() {

            @Override
            public void windowClosing(WindowEvent e) {
                System.exit(0);
            }
        };
        addWindowListener(wndCloser);

        setVisible(true);
    }
    
    private JPanel createPanel() {
        
        Dimension shortField = new Dimension(40, 20);
        
        FormLayout lm = new FormLayout(
                "pref,10px,pref,20px,pref,10px,pref,fill:default:grow,"
                + "fill:default:grow,5px,pref,75px,2px",
                "pref,3px,pref,3px,pref,3px,pref,fill:default:grow,3px,pref,"
                + "3px,pref,3px,pref,3px,pref,3px,pref");

        DefaultFormBuilder builder = new DefaultFormBuilder(lm);
        builder.setDefaultDialogBorder();

        CellConstraints cc = new CellConstraints();
        
        builder.addLabel("Short Description", cc.xy(1, 1));
        builder.add(new JTextField(), cc.xyw(3, 1,7));
        builder.add(new JButton("Submit"), cc.xyw(11, 1,2));
        
        builder.addLabel("Description", cc.xy(1, 3));
        builder.add(new JScrollPane(new JTextArea()), cc.xywh(3, 3,7,6));
        builder.add(new JButton("Cancel"), cc.xyw(11, 3,2));
        builder.add(new JButton("Help"), cc.xyw(11, 5,2));
        
        JComboBox combo3 = new JComboBox(new Object[]{"A","B","C","D","E"});
        JComboBox combo4 = new JComboBox(new Object[]{"1","2","3","4","5"});
        
        combo3.setPreferredSize(shortField);
        combo4.setPreferredSize(shortField);
        
        builder.addLabel("Severity", cc.xy(1, 10));
        builder.add(combo3, cc.xy(3, 10));
        builder.addLabel("Priority", cc.xy(5, 10));
        builder.add(combo4, cc.xy(7, 10));
        
        builder.addLabel("Name", cc.xy(1, 12));
        builder.add(new JTextField(), cc.xyw(3, 12,6));
        
        builder.addLabel("Telepone", cc.xy(1, 14));
        builder.add(new JTextField(), cc.xyw(3, 14,5));
        
        JRadioButton rb1 = new JRadioButton("Male");
        JRadioButton rb2 = new JRadioButton("Female");
        
        rb1.setSelected(true);
        
        ButtonGroup bg = new ButtonGroup();
        bg.add(rb1);
        bg.add(rb2);
        
        builder.addLabel("Sex", cc.xy(1, 16));
        builder.add(rb1, cc.xy(3, 16));
        builder.add(rb2, cc.xy(5, 16));
        
        builder.addLabel("ID Number", cc.xy(1, 18));
        builder.add(new JTextField(), cc.xyw(3, 18,5));
        
        return builder.getPanel();
    }
    
    public static void main(String[] args) {
        new ComplaintDialogFormLayout(new JFrame());
    }
}

Sekian penjelasan singkat penggunaan Form Layout bagian 1 ini pada bagian selanjutnya saya akan menjelaskan lebih rinci mengenai Form Layout ini.

Wassalam,
Muhamad Wibawa

Tablet Android Honeycomb Terbaik Murah

Ultrabook Notebook Tipis Harga Murah Terbaik