komponengui’ di wingmenu$bar,$menu$dan$menu$ item$ • di netbeans,...

33
KOMPONEN GUI DI SWING Visual Mode (NetBeans)

Upload: hathu

Post on 04-Apr-2019

287 views

Category:

Documents


1 download

TRANSCRIPT

Page 1: KOMPONENGUI’ DI WINGMenu$Bar,$Menu$dan$Menu$ Item$ • Di NetBeans, komponen$menu$bar,$menu$danmenu item$ada$di$panel$PaleUe$kategori$Swing$Menus$ • Di dalamnya$terdapat: – Menu$Bar$$

KOMPONEN  GUI  DI  SWING  

Visual Mode (NetBeans)

Page 2: KOMPONENGUI’ DI WINGMenu$Bar,$Menu$dan$Menu$ Item$ • Di NetBeans, komponen$menu$bar,$menu$danmenu item$ada$di$panel$PaleUe$kategori$Swing$Menus$ • Di dalamnya$terdapat: – Menu$Bar$$

Sub  Pokok  Bahasan  

•  Membuat  komponen  GUI  menggunakan  NetBeans  (Visual/Design  Mode)    

Page 3: KOMPONENGUI’ DI WINGMenu$Bar,$Menu$dan$Menu$ Item$ • Di NetBeans, komponen$menu$bar,$menu$danmenu item$ada$di$panel$PaleUe$kategori$Swing$Menus$ • Di dalamnya$terdapat: – Menu$Bar$$

Membuat  Window  

JFrame  

Page 4: KOMPONENGUI’ DI WINGMenu$Bar,$Menu$dan$Menu$ Item$ • Di NetBeans, komponen$menu$bar,$menu$danmenu item$ada$di$panel$PaleUe$kategori$Swing$Menus$ • Di dalamnya$terdapat: – Menu$Bar$$

Membuat  Window  dengan  JFrame  

•  Jalankan  NetBeans  (yang  saya  pakai  saat  ini  versi  7.1.1  untuk  Mac)  

•  Buat  project  (File  >  New  Project)  •  Untuk  membuat  frame/window  pada  project  yang  telah  dibuat,  klik  kanan  project,  New  >  JFrame  Form    

Page 5: KOMPONENGUI’ DI WINGMenu$Bar,$Menu$dan$Menu$ Item$ • Di NetBeans, komponen$menu$bar,$menu$danmenu item$ada$di$panel$PaleUe$kategori$Swing$Menus$ • Di dalamnya$terdapat: – Menu$Bar$$

Membuat  Window  dengan  JFrame  •  Atau  jika  Odak  muncul  New  >  JFrame  Form,  pilih  New  >  Other  

•  Kemudian  pada  dialog  New  File,  pada  Categories  pilih  Swing  GUI  Forms,  pada  File  Type  pilih  JFrame  Form  

•  Next  

Page 6: KOMPONENGUI’ DI WINGMenu$Bar,$Menu$dan$Menu$ Item$ • Di NetBeans, komponen$menu$bar,$menu$danmenu item$ada$di$panel$PaleUe$kategori$Swing$Menus$ • Di dalamnya$terdapat: – Menu$Bar$$

Fitur  NetBeans  utk  membuat  GUI  dengan  

Visual/Design  Mode  

Page 7: KOMPONENGUI’ DI WINGMenu$Bar,$Menu$dan$Menu$ Item$ • Di NetBeans, komponen$menu$bar,$menu$danmenu item$ada$di$panel$PaleUe$kategori$Swing$Menus$ • Di dalamnya$terdapat: – Menu$Bar$$

Panel  ProperOes  Panel  PaleUe  

Project  

Tombol  Switch  utk  berpindah  dari  mode  Design  Ke  mode  Source,  atau  sebaliknya  

Tampilan  Frame/Window  

Page 8: KOMPONENGUI’ DI WINGMenu$Bar,$Menu$dan$Menu$ Item$ • Di NetBeans, komponen$menu$bar,$menu$danmenu item$ada$di$panel$PaleUe$kategori$Swing$Menus$ • Di dalamnya$terdapat: – Menu$Bar$$

Menambahkan  komponen  menggunakan  

Panel  PaleUe  

Page 9: KOMPONENGUI’ DI WINGMenu$Bar,$Menu$dan$Menu$ Item$ • Di NetBeans, komponen$menu$bar,$menu$danmenu item$ada$di$panel$PaleUe$kategori$Swing$Menus$ • Di dalamnya$terdapat: – Menu$Bar$$

Menambahkan  komponen  melalui  panel  PaleUe  •  Panel  PaleUe  berisi  komponen-­‐komponen  GUI  

•  Untuk  menambahkan  komponen  GUI  tsb  ke  dalam  Frame,  Ongga  click-­‐drag  komponen  dari  panel  PaleUe  ke  dalam  Frame  

Page 10: KOMPONENGUI’ DI WINGMenu$Bar,$Menu$dan$Menu$ Item$ • Di NetBeans, komponen$menu$bar,$menu$danmenu item$ada$di$panel$PaleUe$kategori$Swing$Menus$ • Di dalamnya$terdapat: – Menu$Bar$$

Klik  dan  drag  ke  dalam  Frame  

Page 11: KOMPONENGUI’ DI WINGMenu$Bar,$Menu$dan$Menu$ Item$ • Di NetBeans, komponen$menu$bar,$menu$danmenu item$ada$di$panel$PaleUe$kategori$Swing$Menus$ • Di dalamnya$terdapat: – Menu$Bar$$

Mengatur  properO  komponen  menggunakan  

Panel  ProperOess  

Page 12: KOMPONENGUI’ DI WINGMenu$Bar,$Menu$dan$Menu$ Item$ • Di NetBeans, komponen$menu$bar,$menu$danmenu item$ada$di$panel$PaleUe$kategori$Swing$Menus$ • Di dalamnya$terdapat: – Menu$Bar$$

Mengatur  properO  komponen  melalui  panel  ProperOes  •  Untuk  mengatur  properO  suatu  komponen  (misal,  isi  teks  dari  Jlabel,  lebar  dan  panjang  dari  Jframe,  dst)  bisa  digunakan  panel  ProperOes  

•  Select  terlebih  dahulu  komponen  yang  akan  diatur  properOnya  

•  Pilih  properO  yang  akan  diatur  dalam  panel  ProperOes  

•  Lakukan  pengaturan  sesuai  dengan  nilai  yang  diinginkan  

Page 13: KOMPONENGUI’ DI WINGMenu$Bar,$Menu$dan$Menu$ Item$ • Di NetBeans, komponen$menu$bar,$menu$danmenu item$ada$di$panel$PaleUe$kategori$Swing$Menus$ • Di dalamnya$terdapat: – Menu$Bar$$

Select  komponen  

Pilih  proper@  (text  misalnya),  dan  atur  nilainya  Sesuai  dengan  yang  diinginkan  (misalnya,    FORM  INPUT  DATA  MHS)  

Page 14: KOMPONENGUI’ DI WINGMenu$Bar,$Menu$dan$Menu$ Item$ • Di NetBeans, komponen$menu$bar,$menu$danmenu item$ada$di$panel$PaleUe$kategori$Swing$Menus$ • Di dalamnya$terdapat: – Menu$Bar$$

Pada   contoh   di   atas,   komponen   JLabel,  properO  Text  diatur  nilainya  ke  FORM  INPUT  DATA  MHS.    Untuk  mengatur  properO  lain  dari  JLabel,  bisa  dilakukan  dengan  hal  serupa  (Misalnya   untuk   mengubah   Ope   font   dan  ukuran  font,  bisa  dilakukan  dengan  mengatur  properO  Font  )  

Page 15: KOMPONENGUI’ DI WINGMenu$Bar,$Menu$dan$Menu$ Item$ • Di NetBeans, komponen$menu$bar,$menu$danmenu item$ada$di$panel$PaleUe$kategori$Swing$Menus$ • Di dalamnya$terdapat: – Menu$Bar$$

Mengatur  ProperO  

Komponen  

Page 16: KOMPONENGUI’ DI WINGMenu$Bar,$Menu$dan$Menu$ Item$ • Di NetBeans, komponen$menu$bar,$menu$danmenu item$ada$di$panel$PaleUe$kategori$Swing$Menus$ • Di dalamnya$terdapat: – Menu$Bar$$

JFrame  

•  defaultCloseOperaOon  :  properO  utk  mengatur  keOka  window  di  close  apa  yang  dilakukan  (progam  berhenO,  hide  dsb)  

•  Title  :  judul  window  •  Always  on  top  :  agar  window  selalu  ada  di  atas  •  Cursor  :  mengatur  Ope  kursor  •  Resizeable  :  properO  yang  menentukan  window  apakah  bisa  di  resize  apa  Odak  

•  Size  :  menentukan  dimensi/ukuran  window  

Page 17: KOMPONENGUI’ DI WINGMenu$Bar,$Menu$dan$Menu$ Item$ • Di NetBeans, komponen$menu$bar,$menu$danmenu item$ada$di$panel$PaleUe$kategori$Swing$Menus$ • Di dalamnya$terdapat: – Menu$Bar$$

JLabel  

•  Font  :  mengatur  jenis,  style  dan  ukuran  font  •  Foreground  :  mengatur  warna  font  •  Icon  :  mengatur  icon  yang  muncul  dalam  label  

•  Text  :  mengatur  teks  yang  akan  muncul  di  label  

Page 18: KOMPONENGUI’ DI WINGMenu$Bar,$Menu$dan$Menu$ Item$ • Di NetBeans, komponen$menu$bar,$menu$danmenu item$ada$di$panel$PaleUe$kategori$Swing$Menus$ • Di dalamnya$terdapat: – Menu$Bar$$

JTextField  

•  Background  :  menentukan  warna  background  text  field  

•  Editable  :  menentukan  apakah  text  field  bisa  diedit  atau  Odak  

•  Font  :  menentukan  jenis,  style  dan  ukuran  font  •  Foreground  :  menetukan  warna  font  •  Text  :  mengatur  teks  yang  akan  muncul  dalam  text  field    

Page 19: KOMPONENGUI’ DI WINGMenu$Bar,$Menu$dan$Menu$ Item$ • Di NetBeans, komponen$menu$bar,$menu$danmenu item$ada$di$panel$PaleUe$kategori$Swing$Menus$ • Di dalamnya$terdapat: – Menu$Bar$$

JRadioBuUon  

•  BuUon  Group  :  untuk  menentukan  buUon  group  yang  akan  diikuO  oleh  radio  buUon  yang  bersangkutan  

•  Font  :  menentukan  jenis,  style  dan  ukuran  font  

•  Selected  :  menentukan  apakah  radio  buUon  tsb  terseleksi  scr  default  

•  Text  :  menentukan  label  atau  teks  yang  muncul  di  radio  buUon  tsb  

Page 20: KOMPONENGUI’ DI WINGMenu$Bar,$Menu$dan$Menu$ Item$ • Di NetBeans, komponen$menu$bar,$menu$danmenu item$ada$di$panel$PaleUe$kategori$Swing$Menus$ • Di dalamnya$terdapat: – Menu$Bar$$

JCheckBox  •  Mirip  dengan  JRadioBuUon  •  Bedanya  secara  fungsi,  biasanya  jika  terdapat  sekumpulan  radio  buUon,  maka  diantara  mereka  hanya  bisa  diseleksi  atau  dipilih  SATU  saja  

•  Jika  terdapat  sekumpulan  check  box,  diantara  mereka  bisa  dipilih  BEBERAPA  atau  TIDAK  HANYA  BISA  SATU  

•  Oleh  karena  itu,  biasanya  properO  BuOon  Group  di  check  box,  TIDAK  PERNAH  DISET  (berbeda  dengan  radio  buUon,  dimana  properO  BuUon  Group  pasO  diset,  agar  dari  sekumpulan  radio  buUon  hanya  bisa  dipilih  SATU)  

Page 21: KOMPONENGUI’ DI WINGMenu$Bar,$Menu$dan$Menu$ Item$ • Di NetBeans, komponen$menu$bar,$menu$danmenu item$ada$di$panel$PaleUe$kategori$Swing$Menus$ • Di dalamnya$terdapat: – Menu$Bar$$

JComboBox  

•  Editable  :  menentukan  apakah  elemen  dalam  combo  box  bisa  diedit  atau  Odak  

•  Model  :  untuk  memasukkan  elemen  apa  saja  yang  akan  dimasukkan  ke  dalam  combo  box  

•  Selected  index  :  menentukan  secara  default,  elemen  pada  index  berapa  yang  akan  terseleksi  

•  Selected  item  :  menentukan  secara  default,  elemen  mana  yang  akan  terseleksi  

Page 22: KOMPONENGUI’ DI WINGMenu$Bar,$Menu$dan$Menu$ Item$ • Di NetBeans, komponen$menu$bar,$menu$danmenu item$ada$di$panel$PaleUe$kategori$Swing$Menus$ • Di dalamnya$terdapat: – Menu$Bar$$

JList  

•  Model  :  untuk  memasukkan  elemen  apa  saja  yang  akan  dimasukkan  ke  dalam  combo  box  

•  SelecOon  mode  :  menentukan  mode  seleksi  thd  elemen  yang  ada  di  dalamnya,  apakah  hanya  bisa  diseleksi  satu,  atau  banyak  

Page 23: KOMPONENGUI’ DI WINGMenu$Bar,$Menu$dan$Menu$ Item$ • Di NetBeans, komponen$menu$bar,$menu$danmenu item$ada$di$panel$PaleUe$kategori$Swing$Menus$ • Di dalamnya$terdapat: – Menu$Bar$$

Komponen  Lainnya  

•  Pada  inOnya,  untuk  mengatur  properO  komponen  lainya,  hampir  serupa  

•  Silakan  dieksplorasi  secara  mandiri  

Page 24: KOMPONENGUI’ DI WINGMenu$Bar,$Menu$dan$Menu$ Item$ • Di NetBeans, komponen$menu$bar,$menu$danmenu item$ada$di$panel$PaleUe$kategori$Swing$Menus$ • Di dalamnya$terdapat: – Menu$Bar$$

Membuat  menu  bar,  menu  dan  menu  item  

JMenuBar,  JMenu  &  JMenuItem  

Page 25: KOMPONENGUI’ DI WINGMenu$Bar,$Menu$dan$Menu$ Item$ • Di NetBeans, komponen$menu$bar,$menu$danmenu item$ada$di$panel$PaleUe$kategori$Swing$Menus$ • Di dalamnya$terdapat: – Menu$Bar$$

Membuat  Menu  Bar,  Menu  dan  Menu  Item  •  Di  NetBeans,  komponen  menu  bar,  menu  dan  menu  item  ada  di  panel  PaleUe  kategori  Swing  Menus  

•  Di  dalamnya  terdapat:  – Menu  Bar    – Menu  – Menu  Item  – Menu  Item/Check  box  :  menu  item  dilengkapi  dengan  fitur  check  box  

– Menu  Item/Radio  BuUon  :  menu  item  dilengkapi  dengan  fitur  radio  buUon  

–  Popup  Menu  :  berupa  window  kecil  yang  di  dalamnya  terdapat  sekumpulan  pilihan    

–  Separator  :  untuk  pemisah  antar  menu  item  

Page 26: KOMPONENGUI’ DI WINGMenu$Bar,$Menu$dan$Menu$ Item$ • Di NetBeans, komponen$menu$bar,$menu$danmenu item$ada$di$panel$PaleUe$kategori$Swing$Menus$ • Di dalamnya$terdapat: – Menu$Bar$$

Cara  Membuat  Menu  Bar,  Menu  dan  Menu  Item  •  Klik-­‐Drag  Menu  Bar  (Secara  default  di  dalamnya  sudah  ada  menu  File  dan  Edit)  

•  Untuk  menambahkan  menu,  klik-­‐drag  Menu  ke  dalam  menu  bar  

•  Untuk  menambahkan  menu  item,  klik-­‐drag  Menu  Item  ke  dalam  menu  

Page 27: KOMPONENGUI’ DI WINGMenu$Bar,$Menu$dan$Menu$ Item$ • Di NetBeans, komponen$menu$bar,$menu$danmenu item$ada$di$panel$PaleUe$kategori$Swing$Menus$ • Di dalamnya$terdapat: – Menu$Bar$$
Page 28: KOMPONENGUI’ DI WINGMenu$Bar,$Menu$dan$Menu$ Item$ • Di NetBeans, komponen$menu$bar,$menu$danmenu item$ada$di$panel$PaleUe$kategori$Swing$Menus$ • Di dalamnya$terdapat: – Menu$Bar$$
Page 29: KOMPONENGUI’ DI WINGMenu$Bar,$Menu$dan$Menu$ Item$ • Di NetBeans, komponen$menu$bar,$menu$danmenu item$ada$di$panel$PaleUe$kategori$Swing$Menus$ • Di dalamnya$terdapat: – Menu$Bar$$
Page 30: KOMPONENGUI’ DI WINGMenu$Bar,$Menu$dan$Menu$ Item$ • Di NetBeans, komponen$menu$bar,$menu$danmenu item$ada$di$panel$PaleUe$kategori$Swing$Menus$ • Di dalamnya$terdapat: – Menu$Bar$$

Membuat  Shortcut  pada  Menu  Item  

•  Buka  menu  item,  dan  double  klik  pada  bagian  shortcut  

Page 31: KOMPONENGUI’ DI WINGMenu$Bar,$Menu$dan$Menu$ Item$ • Di NetBeans, komponen$menu$bar,$menu$danmenu item$ada$di$panel$PaleUe$kategori$Swing$Menus$ • Di dalamnya$terdapat: – Menu$Bar$$

Membuat  Shortcut  pada  Menu  Item  

•  Pada  window  Accelerator,  taruh  mouse  pada  field  Key  Stoke,  dan  keOkkan  huruf  apa  yang  akan  digunakan  sbg  shortcut  

•  Kita  jg  bisa  mengkombinasikan  dg  tombol  Ctrl,  Alt  ataupun  Shi^  

Page 32: KOMPONENGUI’ DI WINGMenu$Bar,$Menu$dan$Menu$ Item$ • Di NetBeans, komponen$menu$bar,$menu$danmenu item$ada$di$panel$PaleUe$kategori$Swing$Menus$ • Di dalamnya$terdapat: – Menu$Bar$$

1.  Arahkan  kursor  ke  field  ini,  dan  keOkkan  huruf  yang  digunakan  utk  shortcut  

2.  Centang  tombol  yang  ingin  digunakan  utk  kombinasi  

Page 33: KOMPONENGUI’ DI WINGMenu$Bar,$Menu$dan$Menu$ Item$ • Di NetBeans, komponen$menu$bar,$menu$danmenu item$ada$di$panel$PaleUe$kategori$Swing$Menus$ • Di dalamnya$terdapat: – Menu$Bar$$

LaOhan  

•  Buat  window  dengan  komposisi  tampilan  seperO  gambar  di  samping