Layout Manager

• Seperti pada gambar, layout manager bertugas menyusun komponen-komponen(button, label, checkbox, dll) di dalam suatu container (panel, frame, dll).
• Layout manager menentukan posisi danukuran setiap komponen di dalam container. Proses ini akan berbeda untuk setiap class layout yang digunakan.
• AWT dan Swing memiliki beberapa layout manager standar yang penggunaannya seringkali dikombinasikansesuai situasi dan kebutuhan kita.

1. FlowLayout

• FlowLayout merupakan layout manager yang simpel.
• FlowLayout menyusun komponen berdasarkan ukuran defaultmasing-masing, dengan posisi mulai dari kiri ke kanan dan dari atas ke bawah di dalam container yang digunakan.
• FlowLayout dapat memiliki “row justification”: LEFT, CENTER, atau RIGHT serta “padding” horizontal/vertical.
• Secara default, flow layout menggunakan justification CENTER. Artinya, semua komponen akan disimpan di posisi tengah-tengah.
• FlowLayout merupakan default untuk JPanel.
• Contoh: JPanel panel1 = new JPanel(); panel1.setLayout(new FlowLayout());
• Pada dasarnya, untuk aplikasi sesungguhnya, kita tidak disarankan menggunakan FlowLayout karena sifatnya yang tidak bisa memposisikan komponen dengan pasti.

         Coding :

import java.awt.FlowLayout;

import java.awt.LayoutManager;

import javax.swing.JButton;

import javax.swing.JFrame;

import javax.swing.JPanel;

import javax.swing.JPasswordField;

public class Flow extends JFrame {

public Flow() {

createUserInterface();

}

private void createUserInterface() {

JPanel panel1 = new JPanel();

panel1.setLayout(new FlowLayout());

panel1.add(new JButton("One"));

panel1.add(new JButton("Two"));

panel1.add(new JButton("Three"));

panel1.add(new JButton("Four"));

panel1.add(new JButton("Five"));

this.add(panel1);

this.setTitle("Flow");

this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

this.setSize(400, 75);

this.setLocationRelativeTo(null);

this.setVisible(true);

}

public static void main(String[] args) {

Flow app = new Flow();

}

}

Tampilan :

2. GridLayout

• GridLayout menempatkan komponen dalam bentuk “rectangular grid”. Ada 3 constructor untuk GridLayout:
• GridLayout(): membuat layout dengan satu kolom per komponen. Hanya satu baris yang digunakan.
• GridLayout(int rows, int cols): membuat suatu layout berdasarkan jumlah baris dan kolom yang diinginkan.
• GridLayout(int rows, int cols, int hgap, int vgap): membuat layout berdasarkan jumlah baris dan kolom yang diinginkan, serta ukuran jarak (gap) horisontal maupun vertical untuk setiap baris dan kolom tersebut.
• GridLayout menempatkan komponen dengan urutan dari kiri ke kanan dan dari atas ke bawah.
• GridLayout akan memaksa setiap komponen untuk menempati space container yang kosong serta membagi rata ukuran space tersebut.
• GridLayout paling cocok digunakan untuk menyusun komponen yang berukuran sama, misalnya 2 buah JPanel berukuran sama di dalam sebuah frame.
• Contoh:frame.add(panel1); frame.add(panel2);
• frame.setLayout(newGridLayout(2, 1));
• Kita dapat men-set jumlah baris dan kolom dengan angka 0. Artinya, kita tidak mempedulikan berapa banyak komponen yang akan masuk ke dalam dimensi layout manager tersebut.

Coding :

import java.awt.GridLayout;

import javax.swing.JButton;

import javax.swing.JFrame;

public class GridLayoutTest {

  public static void main(String[] args) {

    JFrame.setDefaultLookAndFeelDecorated(true);

    JFrame frame = new JFrame("GridLayout Test");

    frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

    frame.setLayout(new GridLayout(3, 2));

    frame.add(new JButton("Button 1"));

    frame.add(new JButton("Button 2"));

    frame.add(new JButton("Button 3"));

    frame.add(new JButton("Button 4"));

    frame.add(new JButton("Button 5"));

    frame.add(new JButton("Button 6"));

    frame.add(new JButton("Button 7"));

    frame.add(new JButton("Button 8"));

    frame.pack();

    frame.setVisible(true);

  }

}

Tampilan

3.  Border Layout

• BorderLayout menyusun komponen berdasarkan lokasi geografis: NORTH, SOUTH, EAST, WEST, and CENTER.
• Secara optional, kita dapat juga memberikan paddingdi antara komponen.
• BorderLayout merupakan layout default untuk JWindowdan JFrame.
• Karena setiap komponen diasosiasikan dengan suatu arah geografis, akibatnya layout ini hanya dapat menangani maksimal 5 komponen
• Pada saat menambahkan suatu komponen kepada container yang memiliki border layout, kita harus menentukan secara bersamaan komponen-nya dan posisi-nya.
• Contoh:

         frame.setLayout(new BorderLayout( ));
         frame.add(new JButton("Button1"), BorderLayout.NORTH );

         frame.add(new JButton("Button2"), BorderLayout.SOUTH );

Coding :

import java.awt.BorderLayout;

import java.awt.FlowLayout;

import java.awt.LayoutManager;

import javax.swing.JButton;

import javax.swing.JFrame;

import javax.swing.JPanel;

import javax.swing.JPasswordField;

public class Border extends JFrame {

public Border() {

createUserInterface();

}

private void createUserInterface() {

this.setLayout(new BorderLayout());

this.add(new JButton("North"), BorderLayout.NORTH);

this.add(new JButton("South"), BorderLayout.SOUTH);

this.add(new JButton("East"), BorderLayout.EAST);

this.add(new JButton("West"), BorderLayout.WEST);

this.add(new JButton("Center"), BorderLayout.CENTER);

this.setTitle("Border");

this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

this.setSize(300, 300);

this.setLocationRelativeTo(null);

this.setVisible(true);

}

public static void main(String[] args) {

Border app = new Border();

}

}

Tampilan

4. Box Layout

• Layout manager yang telah kita bahas sebelumnya merupakan bagian dari package java.awt.
• Javax.swingmemiliki beberapa tambahan layout manager lagi, salah satunya adalah: BoxLayout.
• Layout manager ini sangat berguna untuk membuat toolbarssederhana atau vertical button bars.
• Cara kerjanya sangat sederhana yaitu menempatkan komponen dalam satu baris atau satu kolom.
• Untuk mempermudah penggunaan BoxLayout, Swing menyediakan sebuah kelas yang bernama Boxyaitu sebuah container yang secara otomatismemiliki BoxLayout manager.
• Box memiliki beberapa methodsyang akan mempermudah kita dalam menggunakan BoxLayout manager, yaitu:

createHorizontalBox() untuk membuat box horizontal

createHorizontalGlue() untuk merekatkan komponen

createHorizontalStrut(int n) untuk memberi jarak antar komponen

createVerticalBox() untuk membuat box vertical

createVerticalGlue() untuk merekatkan komponen

createVerticalStrut(int n) untuk memberi jarak antar komponen

Coding :

import javax.swing.BoxLayout;

import javax.swing.JButton;

import javax.swing.JFrame;

public class BoxLayoutTest {

  public static void main(String[] args) {

    JFrame.setDefaultLookAndFeelDecorated(true);

    JFrame frame = new JFrame("BoxLayout Test");

    frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

    frame.setLocationRelativeTo(null);

    BoxLayout boxLayout = new BoxLayout(frame.getContentPane(), BoxLayout.Y_AXIS); // top to bottom

    frame.setLayout(boxLayout);

    frame.add(new JButton("Button 1"));

    frame.add(new JButton("Button 2"));

    frame.add(new JButton("Button 3"));

    frame.pack();

    frame.setVisible(true);

  }

}

Tampilan

5. Card Layout

• CardLayout merupakan layout manager yang mampu menciptakan efek “tumpukan” komponen.
• Artinya, layout ini tidak memposisikan komponen di lokasi-lokasi tertentu di dalam kontainer, melainkan menampilkannya satu demi satu.
• Penggunaan CardLayout biasanya untuk membuat panel yang bersifat custom-tabbed.
• Namun, sebenarnya kita dapat membuat panel tersebut dengan menggunakan komponen JTabbedPane.
• Untuk mempraktekkan cara kerja dan efek “tumpukan”dari CardLayout ini, kita perlu mempelajari terlebih dahulu mengenai “event-driven programming” seperti yang ada di Latihan 5.

Coding :

import java.awt.CardLayout;

import java.awt.event.ActionEvent;

import java.awt.event.ActionListener;

import javax.swing.JButton;

import javax.swing.JFrame;

import javax.swing.JPanel;

public class TryCardLayout extends JPanel implements ActionListener {

  CardLayout card = new CardLayout(50, 50); // Create layout

  public TryCardLayout() {

    setLayout(card);

    JButton button;

    for (int i = 1; i <= 6; i++) {

      add(button = new JButton(" Press " + i), "Card" + i); // Add a button

      button.addActionListener(this); // Add listener for button

    }

  }

  // Handle button events

  public void actionPerformed(ActionEvent e) {

    card.next(this); // Switch to the next card

  }

  public static void main(String[] args) {

    JFrame aWindow = new JFrame();

    aWindow.setBounds(30, 30, 300, 300);

    aWindow.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

    aWindow.getContentPane().add(new TryCardLayout());

    aWindow.setVisible(true);

  }

}

Tampilan 

6. GridBag Layout

• GridBagLayout merupakan layaout manager yang sangat fleksibel.
• Layout ini memampukan kita untuk memposisikan komponen relatif terhadap komponen lainnya berdasarkan constraint tertentu.
• Dengan menggunakan GridBagLayout, kita dapat menciptakan layout apapun juga, tanpa batas.
• Komponen disusun pada koordinat tertentu pada sebuah grid yang disebut “logical coordinate”.
• Logical coordinate berarti bahwa koordinat suatu komponen ditentukan oleh sekumpulan komponen lainnya.
• Baris dan kolom dari grid tersebut bersifat “stretch” yang bergantung pada sizedan constraintyang dimilikinya.
• Walaupun fleksibel, pembuatan GridBag ini terkadang sangat membingungkan karena kita harus mengatur berbagai sizedan constraint dari setiap komponen yang digunakan.
• Sebenarnya, penggunaan GridBagLayout ini jauh lebih mudah apabila kita menggunakan tools yang mendukung WYSIWYG GUI builder. (contohnya: NetBeans IDE)

Coding :

import java.awt.ComponentOrientation;

import java.awt.Container;

import java.awt.GridBagConstraints;

import java.awt.GridBagLayout;

import java.awt.Insets;

import javax.swing.JButton;

import javax.swing.JFrame;

public class GridBagLayoutDemo {

  final static boolean shouldFill = true;

  final static boolean shouldWeightX = true;

  final static boolean RIGHT_TO_LEFT = false;

  public static void addComponentsToPane(Container pane) {

    if (RIGHT_TO_LEFT) {

      pane.setComponentOrientation(ComponentOrientation.RIGHT_TO_LEFT);

    }

    JButton button;

    pane.setLayout(new GridBagLayout());

    GridBagConstraints c = new GridBagConstraints();

    if (shouldFill) {

      // natural height, maximum width

      c.fill = GridBagConstraints.HORIZONTAL;

    }

    button = new JButton("Button 1");

    if (shouldWeightX) {

      c.weightx = 0.5;

    }

    c.gridx = 0;

    c.gridy = 0;

    pane.add(button, c);

    button = new JButton("Button 2");

    c.gridx = 1;

    c.gridy = 0;

    pane.add(button, c);

    button = new JButton("Button 3");

    c.gridx = 2;

    c.gridy = 0;

    pane.add(button, c);

    button = new JButton("Long-Named Button 4");

    c.ipady = 40; // make this component tall

    c.weightx = 0.0;

    c.gridwidth = 3;

    c.gridx = 0;

    c.gridy = 1;

    pane.add(button, c);

    button = new JButton("5");

    c.ipady = 0; // reset to default

    c.weighty = 1.0; // request any extra vertical space

    c.anchor = GridBagConstraints.PAGE_END; // bottom of space

    c.insets = new Insets(10, 0, 0, 0); // top padding

    c.gridx = 1; // aligned with button 2

    c.gridwidth = 2; // 2 columns wide

    c.gridy = 2; // third row

    pane.add(button, c);

  }

  /**

   * Create the GUI and show it. For thread safety, this method should be

   * invoked from the event-dispatching thread.

   */

  private static void createAndShowGUI() {

    // Create and set up the window.

    JFrame frame = new JFrame("GridBagLayoutDemo");

    frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

    // Set up the content pane.

    addComponentsToPane(frame.getContentPane());

    // Display the window.

    frame.pack();

    frame.setVisible(true);

  }

  public static void main(String[] args) {

    // Schedule a job for the event-dispatching thread:

    // creating and showing this application's GUI.

    javax.swing.SwingUtilities.invokeLater(new Runnable() {

      public void run() {

        createAndShowGUI();

      }

    });

  }

}

Tampilan :