LAPORAN PRAKTIKUM
LAPORAN PRAKTIKUM
PEMROGRAMAN BERBASIS OBJEK
PEMROGRAMAN BERBASIS OBJEK
“
“
Manajemen L
Manajemen Layout
ayout
””Disusun Oleh :
Disusun Oleh :
Ardi Kurniawan
Ardi Kurniawan
3.34.10.0.06
3.34.10.0.06
IK-2A
IK-2A
PROGRAM STUDI TEKNIK INFORMATIKA PROGRAM STUDI TEKNIK INFORMATIKA
JURUSAN ELEKTRO JURUSAN ELEKTRO
POLITEKNIK NEGERI SEMARANG
POLITEKNIK NEGERI SEMARANG
TAHUN 2011 TAHUN 2011
BAB 8 BAB 8
MANAJEMEN LAYOUT
MANAJEMEN LAYOUT
I. Tujuan Instruksional Khusus I. Tujuan Instruksional Khusus
Setelah menyelesaikan praktek ini mahasiswa dapat : Setelah menyelesaikan praktek ini mahasiswa dapat : 1. menjelaskan apa yang dimaksud objek container, 1. menjelaskan apa yang dimaksud objek container, 2. menjelaskan konsep layout manajemen,
2. menjelaskan konsep layout manajemen, 3. menjelaskan tentang
3. menjelaskan tentang flow layout, border layout, flow layout, border layout,dandangrid layout grid layout dalam komponen GUI,dalam komponen GUI, 4. membuat tampilan yang komplek dalam mendesain aplikasi GUI.
4. membuat tampilan yang komplek dalam mendesain aplikasi GUI.
II. Persyaratan / Kebutuhan Sistem Komputer II. Persyaratan / Kebutuhan Sistem Komputer
Persyaratan / kebutuhan sistem untuk menjalankan program Java adalah sebagai berikut : Persyaratan / kebutuhan sistem untuk menjalankan program Java adalah sebagai berikut : 1.
1. processor processor P-II atau P-II atau yang lebih yang lebih tinggi,tinggi, 2.
2. ram minimal 32 Mbyte,ram minimal 32 Mbyte, 3.
3. free space harddisk minimal 200 Mbyte,free space harddisk minimal 200 Mbyte, 4.
4. mouse ( Serial / PS2 ),mouse ( Serial / PS2 ), 5.
5. sistem operasi :sistem operasi : a.
a. minimal Windows 98 ( disarankan versi Windows yang lebih tinggi),minimal Windows 98 ( disarankan versi Windows yang lebih tinggi), b.
b. Linux.Linux.
III. Dasar Teori III. Dasar Teori
Objek kontainer adalah objek visual yang dignakan untuk menampung objek-objek visual Objek kontainer adalah objek visual yang dignakan untuk menampung objek-objek visual lainnya termasuk objek
lainnya termasuk objek container, untuk dikelompokan menjadi container, untuk dikelompokan menjadi satu grup. satu grup. Objek container iniObjek container ini terdiri dari:
terdiri dari: 1.
1. classs Container,classs Container, 2.
2. class Panel,class Panel, 3.
3. class Jpanel.class Jpanel.
Objek container dapat berisi objek container lainnya. Sedangkan pengaturan letak komponen Objek container dapat berisi objek container lainnya. Sedangkan pengaturan letak komponen didalam objek Container menggunakan layout manager.
didalam objek Container menggunakan layout manager.
Posisi dan ukuran suatu komponen ditentukan oleh layout manager. Layout manager Posisi dan ukuran suatu komponen ditentukan oleh layout manager. Layout manager
mengatur tampilan dari komponen di dalam kontainer. Berikut ini beberapa layout manager mengatur tampilan dari komponen di dalam kontainer. Berikut ini beberapa layout manager
yang terdapat di dalam Java. yang terdapat di dalam Java. 1.FlowLayout 1.FlowLayout 2.BorderLayout 2.BorderLayout 3.GridLayout 3.GridLayout 4.GridBagLayout 4.GridBagLayout 5.CardLayout 5.CardLayout
Layout manager dapat diatur menggunakan method
Layout manager dapat diatur menggunakan method setLayout setLayout dari classdari class Container.Container. Method iniMethod ini dapat ditulis sebagai berikut.
dapat ditulis sebagai berikut.
void setLayout(LayoutManager mgr) void setLayout(LayoutManager mgr)
Jika Anda memilih untuk tidak menggunakan layout manager, Anda dapat mengisi null sebagai Jika Anda memilih untuk tidak menggunakan layout manager, Anda dapat mengisi null sebagai argumen untuk method ini. Tetapi selanjutnya, Anda akan mengatur posisi elemen secara manual argumen untuk method ini. Tetapi selanjutnya, Anda akan mengatur posisi elemen secara manual dengan menggunakan method
dengan menggunakan method setBoundssetBoundsdari class Components.dari class Components. public void setBounds(int x, int y, int width, int height) public void setBounds(int x, int y, int width, int height)
Metode ini mengatur posisi berdasarkan pada argumen x dan y, dan ukuran berdasarkan argumen Metode ini mengatur posisi berdasarkan pada argumen x dan y, dan ukuran berdasarkan argumen
width
width dandanheight.height.Hal ini akan cukup menyulitkan dan membosankan untuk aplikasiHal ini akan cukup menyulitkan dan membosankan untuk aplikasi jika Anda
jika Anda memiliki beberapa objek komponen didalam object container. Anda memiliki beberapa objek komponen didalam object container. Anda akan memanggilakan memanggil metode ini untuk setiap komponen.
metode ini untuk setiap komponen.
FlowLayo
FlowLayout manageut managerr
FlowLayout Manager adalah default manager untuk class
FlowLayout Manager adalah default manager untuk class PanelPaneldan subclassnya, termasuk classdan subclassnya, termasuk class applet. Cara meletakkan komponen dari FlowLayout Manager dimulai dari kiri ke kanan dan dari applet. Cara meletakkan komponen dari FlowLayout Manager dimulai dari kiri ke kanan dan dari atas ke bawah, dimulai dari pojok kiri atas. Seperti pada saat Anda mengetik menggunakan atas ke bawah, dimulai dari pojok kiri atas. Seperti pada saat Anda mengetik menggunakan editor kata pada umumnya. Berikut adalah bagaimana FlowLayout Manager bekerja, dimana editor kata pada umumnya. Berikut adalah bagaimana FlowLayout Manager bekerja, dimana memiliki tiga constructor seperti daftar di bawah ini.
memiliki tiga constructor seperti daftar di bawah ini.
FlowLayo
FlowLayout construut constructorsctors
FlowLayout() Membuat object baru FlowLayout dengan posisi di tengah dan lima unit horizontal FlowLayout() Membuat object baru FlowLayout dengan posisi di tengah dan lima unit horizontal dan vertical gap dimasukkan pada komponen sebagai default.
dan vertical gap dimasukkan pada komponen sebagai default. FlowLayout(int align)
FlowLayout(int align)
Membuat objek baru FlowLayout dengan posisi spesifik dan lima unit horizontal dan vertikal Membuat objek baru FlowLayout dengan posisi spesifik dan lima unit horizontal dan vertikal gap dimasukkan pada komponen sebagai default.
FlowLayo
FlowLayout construut constructorsctors
FlowLayout(int align, int hgap, int vgap) Membuat object baru FlowLayout dengan argumen FlowLayout(int align, int hgap, int vgap) Membuat object baru FlowLayout dengan argumen pertama sebagai posisi pada komponen dan
pertama sebagai posisi pada komponen dan hgaphgap untuk horizontal danuntuk horizontal dan vgapvgap untuk vertikal padauntuk vertikal pada komponen Gap dapat dikatakan sebagai jarak antara komponen dan biasanya diukur dengan komponen Gap dapat dikatakan sebagai jarak antara komponen dan biasanya diukur dengan satuan pixel. Posisi argumen mengikuti penulisan sebagai berikut :
satuan pixel. Posisi argumen mengikuti penulisan sebagai berikut : 1.FlowLayout.LEFT 1.FlowLayout.LEFT 2.FlowLayout.CENTER 2.FlowLayout.CENTER 3.FlowLayout.RIGHT 3.FlowLayout.RIGHT BorderLa
BorderLayout manayout managerger
BorderLayout membagi kontainer menjadi lima bagian diantaranya utara, selatan, timur, barat, BorderLayout membagi kontainer menjadi lima bagian diantaranya utara, selatan, timur, barat, dan tengah. Setiap komponen dimasukkan ke dalam region yang spesifik. Region utara dan dan tengah. Setiap komponen dimasukkan ke dalam region yang spesifik. Region utara dan selatan membentuk jalur horizontal sedangkan region timur dan barat membentuk jalur vertikal. selatan membentuk jalur horizontal sedangkan region timur dan barat membentuk jalur vertikal. Dan region tengah berada pada perpotongan jalur horizontal dan vertikal. Tampilan ini adalah Dan region tengah berada pada perpotongan jalur horizontal dan vertikal. Tampilan ini adalah bersifat default untuk object
bersifat default untuk object WindowWindow, termasuk object dari subclass, termasuk object dari subclass WindowWindow yaitu tipe Frameyaitu tipe Frame dan Dialog. dan Dialog. Constructor BorderLayout Constructor BorderLayout BorderLayout() BorderLayout()
Membuat object BorderLayout baru tanpa spasi yang diaplikasikan diantara komponen yang Membuat object BorderLayout baru tanpa spasi yang diaplikasikan diantara komponen yang berbeda.
berbeda.
BorderLayout(int hgap, int vgap) BorderLayout(int hgap, int vgap)
Membuat object BorderLayout baru dengan spasi unit
Membuat object BorderLayout baru dengan spasi unit hgaphgaphorizontal dan unithorizontal dan unit vgapvgapvertikalvertikal yang diaplikasikan diantara komponen yang berbeda.
yang diaplikasikan diantara komponen yang berbeda.
Seperti pada FlowLayout Manager, parameter
Seperti pada FlowLayout Manager, parameter hgaphgap dandanvgapvgapdisini juga menjelaskan jarak disini juga menjelaskan jarak antara komponen dengan kontainer. Untuk menambahkan komponen kedalam region yang antara komponen dengan kontainer. Untuk menambahkan komponen kedalam region yang spesifik, gunakan method menambahkan dan melewatkan dua argumen yaitu : komponen yang spesifik, gunakan method menambahkan dan melewatkan dua argumen yaitu : komponen yang ingin dimasukkan ke dalam region dan region mana yang ingin dipakai untuk meletakkan ingin dimasukkan ke dalam region dan region mana yang ingin dipakai untuk meletakkan komponen. Perlu diperhatikan bahwa hanya satu komponen yang dapat dimasukkan dalam satu komponen. Perlu diperhatikan bahwa hanya satu komponen yang dapat dimasukkan dalam satu
region. Menambahkan lebih dari satu komponen pada kontainer yang bersangkutan, maka region. Menambahkan lebih dari satu komponen pada kontainer yang bersangkutan, maka komponen yang terakhir ditambahkan yang akan ditampilkan. Berikut ini adalah daftar dari komponen yang terakhir ditambahkan yang akan ditampilkan. Berikut ini adalah daftar dari kelima region. kelima region. 1. BorderLayout.NORTH 1. BorderLayout.NORTH 2. BorderLayout.SOUTH 2. BorderLayout.SOUTH 3. BorderLayout.EAST 3. BorderLayout.EAST 4. BorderLayout.WEST 4. BorderLayout.WEST 5. BorderLayout.CENTER 5. BorderLayout.CENTER GridLayout manager GridLayout manager Dengan
Dengan GridLayout manager GridLayout manager , komponen juga diposisikan dari kiri ke kanan dan dari atas ke, komponen juga diposisikan dari kiri ke kanan dan dari atas ke bawah seperti pada
bawah seperti pada FlowLayout manager. GridLayout manager FlowLayout manager. GridLayout manager membagi kontainer menjadimembagi kontainer menjadi baris dan kolom. Semua region memiliki ukuran yang sama. Hal tersebut tidak mempedulikan baris dan kolom. Semua region memiliki ukuran yang sama. Hal tersebut tidak mempedulikan ukuran sebenarnya dari komponen.
ukuran sebenarnya dari komponen.
Berikut ini adalah daftar dari constructor untuk class
Berikut ini adalah daftar dari constructor untuk class GridLayout GridLayout .. Constructor GridLayout
Constructor GridLayout GridLayout()
GridLayout()
Membuat object GridLayout baru dengan satu baris dan satu kolom sebagai default Membuat object GridLayout baru dengan satu baris dan satu kolom sebagai default GridLayout(int rows, int cols)
GridLayout(int rows, int cols)
Membuat object GridLayout baru dengan jumlah baris dan kolom sesuai dengan keinginan Membuat object GridLayout baru dengan jumlah baris dan kolom sesuai dengan keinginan GridLayout(int rows, int cols, int hgap, int vgap)
GridLayout(int rows, int cols, int hgap, int vgap)
Membuat object GridLayout baru dengan jumlah baris dan kolom yang ditentukan. Unit spasi Membuat object GridLayout baru dengan jumlah baris dan kolom yang ditentukan. Unit spasi hgap horizontal dan vgap vertikal diaplikasikan ke dalam komponen.
hgap horizontal dan vgap vertikal diaplikasikan ke dalam komponen.
Panel dan tampilan kompleks Panel dan tampilan kompleks
Untuk membuat tampilan yang lebih lengkap, Anda dapat menggabungkan layout manager yang Untuk membuat tampilan yang lebih lengkap, Anda dapat menggabungkan layout manager yang berbeda dengan menggunakan panel. Ingatlah bahwa panel adalah kontainer dan komponen pada berbeda dengan menggunakan panel. Ingatlah bahwa panel adalah kontainer dan komponen pada saat yang sama. Anda dapat memasukkan komponen ke dalam panel dan kemudian saat yang sama. Anda dapat memasukkan komponen ke dalam panel dan kemudian menambahkan panel ke dalam region yang Anda inginkan di dalam kontainer.
menambahkan panel ke dalam region yang Anda inginkan di dalam kontainer.
IV. Langkah Kerja IV. Langkah Kerja
Jalankan Edit Plus, buat file baru java dan ketikkan kode program berikut : Jalankan Edit Plus, buat file baru java dan ketikkan kode program berikut :
1.
1. Bagaimanakah output dari program berikut?Bagaimanakah output dari program berikut? import java.awt.*;
import java.awt.*;
class FlowLayoutDemo extends Frame { class FlowLayoutDemo extends Frame { public static void main(String args[]) { public static void main(String args[]) {
FlowLayoutDemo fld = new FlowLayoutDemo(); FlowLayoutDemo fld = new FlowLayoutDemo();
fld.setLayout(new FlowLayout(FlowLayout.RIGHT, 10, 10)); fld.setLayout(new FlowLayout(FlowLayout.RIGHT, 10, 10)); fld.add(new Button("ONE")); fld.add(new Button("ONE")); fld.add(new Button("TWO")); fld.add(new Button("TWO")); fld.add(new Button("THREE")); fld.add(new Button("THREE")); fld.setSize(100, 100); fld.setSize(100, 100); fld.setVisible(true); fld.setVisible(true); } } } } 2.
2. Berikut ini adalah contoh program yang menunjukkan bagaimanaBerikut ini adalah contoh program yang menunjukkan bagaimana BorderLayout BorderLayout bekerja.bekerja. import java.awt.*;
import java.awt.*;
class BorderLayoutDemo extends Frame { class BorderLayoutDemo extends Frame { public static void main(String args[]) { public static void main(String args[]) {
BorderLayoutDemo bld = new BorderLayoutDemo(); BorderLayoutDemo bld = new BorderLayoutDemo(); bld.setLayout(new BorderLayout(10, 10)); //may remove bld.setLayout(new BorderLayout(10, 10)); //may remove bld.add(new Button("NORTH"), BorderLayout.NORTH); bld.add(new Button("NORTH"), BorderLayout.NORTH); bld.add(new Button("SOUTH"), BorderLayout.SOUTH); bld.add(new Button("SOUTH"), BorderLayout.SOUTH); bld.add(new Button("EAST"), BorderLayout.EAST); bld.add(new Button("EAST"), BorderLayout.EAST); bld.add(new Button("WEST"), BorderLayout.WEST); bld.add(new Button("WEST"), BorderLayout.WEST); bld.add(new Button("CENTER"), BorderLayout.CENTER); bld.add(new Button("CENTER"), BorderLayout.CENTER); bld.setSize(200, 200);
bld.setVisible(true); bld.setVisible(true); } } } } 3.
3. Cobalah program ini.Cobalah program ini. import java.awt.*; import java.awt.*;
class GridLayoutDemo extends Frame { class GridLayoutDemo extends Frame { public static void main(String args[]) { public static void main(String args[]) {
GridLayoutDemo gld = new GridLayoutDemo(); GridLayoutDemo gld = new GridLayoutDemo(); gld.setLayout(new GridLayout(2, 3, 4, 4)); gld.setLayout(new GridLayout(2, 3, 4, 4)); gld.add(new Button("ONE")); gld.add(new Button("ONE")); gld.add(new Button("TWO")); gld.add(new Button("TWO")); gld.add(new Button("THREE")); gld.add(new Button("THREE")); gld.add(new Button("FOUR")); gld.add(new Button("FOUR")); gld.add(new Button("FIVE")); gld.add(new Button("FIVE")); gld.setSize(200, 200); gld.setSize(200, 200); gld.setVisible(true); gld.setVisible(true); } } } }
4.
4. Perhatikan teknik yang digunakan pada contoh berikut.Perhatikan teknik yang digunakan pada contoh berikut. import java.awt.*;
import java.awt.*;
class ComplexLayout extends Frame { class ComplexLayout extends Frame { public static void main(String args[]) { public static void main(String args[]) {
ComplexLayout cl = new ComplexLayout(); ComplexLayout cl = new ComplexLayout(); Panel panelNorth = new Panel();
Panel panelNorth = new Panel(); Panel panelCenter = new Panel(); Panel panelCenter = new Panel(); Panel panelSouth = new Panel(); Panel panelSouth = new Panel(); /* Panel u
/* Panel utara */ tara */ //Panel me
//Panel menggunakanggunakan FlowLayn FlowLayout sebagaout sebagai defauli defaultt panelNorth.add(new Button("ONE")); panelNorth.add(new Button("ONE")); panelNorth.add(new Button("TWO")); panelNorth.add(new Button("TWO")); panelNorth.add(new Button("THREE")); panelNorth.add(new Button("THREE")); /* Panel te
/* Panel tengah */ ngah */
panelCenter.setLayout(new GridLayout(4,4)); panelCenter.setLayout(new GridLayout(4,4)); panelCenter.add(new TextField("1st")); panelCenter.add(new TextField("1st")); panelCenter.add(new TextField("2nd")); panelCenter.add(new TextField("2nd")); panelCenter.add(new TextField("3rd")); panelCenter.add(new TextField("3rd")); panelCenter.add(new TextField("4th")); panelCenter.add(new TextField("4th")); /* Panel se
/* Panel selatan */ latan */
panelSouth.setLayout(new BorderLayout()); panelSouth.setLayout(new BorderLayout()); panelSouth.add(new Checkbox("Choose me!"), panelSouth.add(new Checkbox("Choose me!"), BorderLayout.CENTER);
BorderLayout.CENTER);
panelSouth.add(new Checkbox("I'm here!"), panelSouth.add(new Checkbox("I'm here!"),
BorderLayout.EAST); BorderLayout.EAST);
panelSouth.add(new Checkbox("Pick me!"), panelSouth.add(new Checkbox("Pick me!"), BorderLayout.WEST);
BorderLayout.WEST); /* Menamb
/* Menambahkan paahkan panel pada cnel pada container Frontainer Frame*/ ame*/ //Frame
//Frame menggunamenggunakan Bordekan BorderLayourLayout sebagai det sebagai defaultfault cl.add(panelNorth, BorderLayout.NORTH); cl.add(panelNorth, BorderLayout.NORTH); cl.add(panelCenter, BorderLayout.CENTER); cl.add(panelCenter, BorderLayout.CENTER); cl.add(panelSouth, BorderLayout.SOUTH); cl.add(panelSouth, BorderLayout.SOUTH); cl.setSize(300,300); cl.setSize(300,300); cl.setVisible(true); cl.setVisible(true); } } } } 5.
5. Simpan program Java di atas.Simpan program Java di atas. 6.
6. Eksekusi program Java Pertama dengan mengklik Eksekusi program Java Pertama dengan mengklik Tool Tool Compile Program JavaCompile Program Java. Lalu. Lalu Tool
Tool Menjalanka Menjalankan Progran Program Javam Java.. 7.
V. Pertanyaan V. Pertanyaan
1.
1. Jelaskan apa yang dimaksud objek container dan sebutkan macam-macam objek Jelaskan apa yang dimaksud objek container dan sebutkan macam-macam objek container.
container. Jawab : Jawab :
Objek kontainer adalah objek visual yang dignakan untuk menampung objek-objek visual Objek kontainer adalah objek visual yang dignakan untuk menampung objek-objek visual lainnya
lainnya termasuk termasuk objek cobjek container, untuk ontainer, untuk dikelompokan menjadi dikelompokan menjadi satu grup. satu grup. Objek Objek container ini terdiri dari:
container ini terdiri dari: 1.
1. classs Container,classs Container, 2.
2. class Panel,class Panel, 3.
3. class Jpanel.class Jpanel.
Objek container dapat berisi objek container lainnya. Sedangkan pengaturan letak Objek container dapat berisi objek container lainnya. Sedangkan pengaturan letak komponen didalam objek Container menggunakan layout manager.
komponen didalam objek Container menggunakan layout manager.
Posisi dan ukuran suatu komponen ditentukan oleh layout manager. Layout manager Posisi dan ukuran suatu komponen ditentukan oleh layout manager. Layout manager mengatur tampilan dari komponen di dalam kontainer. Berikut ini beberapa layout mengatur tampilan dari komponen di dalam kontainer. Berikut ini beberapa layout manager
manager
yang terdapat di dalam Java. yang terdapat di dalam Java. 1.FlowLayout 1.FlowLayout 2.BorderLayout 2.BorderLayout 3.GridLayout 3.GridLayout 4.GridBagLayout 4.GridBagLayout 5.CardLayout 5.CardLayout 2.
2. Jelasakan apa fungsi layout manajemen, dan sebutkan macamnya.Jelasakan apa fungsi layout manajemen, dan sebutkan macamnya.
Layout manager menentukan posisi danukuran setiap komponen di dalam container. Layout manager menentukan posisi danukuran setiap komponen di dalam container. Proses ini akan berbeda untuk setiap class layout yang digunakan.
Proses ini akan berbeda untuk setiap class layout yang digunakan. Macamnya adalah : Macamnya adalah : FlowLayoutFlowLayout GridLayoutGridLayout BorderLayoutBorderLayout BoxLayoutBoxLayout CardLayoutCardLayout
GridBagLayoutGridBagLayout SpringLayoutSpringLayout GroupLayoutGroupLayout 3.
3. Desain sebuah tampilan untuk input data mahasiswaDesain sebuah tampilan untuk input data mahasiswa Desain input mahasiswa :
