PENGENALAN AVAGUI’ PROGRAMMING · mengembangkan$aplikasi$berbasis$GUI ... dimiliki$oleh$suatu$plaorm$ sistem$operasi$ ... • Karena$se=ap$tampilan$komponen$GUI tetap$

PENGENALAN  JAVA  GUI  PROGRAMMING  

Sub  Pokok  Bahasan  

•  JFC  •  AWT  •  Swing  •  Ilustrasi    

JFC  (Java  Founda=on  Classes)    

Java  Founda=on  Class  

•  Merupakan  framework  dalam  Java  untuk  mengembangkan  aplikasi  berbasis  GUI  (Graphical  User  Interface)    

•  JFC  juga  mempunyai  class-­‐class  yang  digunakan  untuk  menambahkan  fungsi  dan  kemampuan  interaksi  yang  varia=f  dari  pemrograman  Java.  

Java  Founda=on  Class  

•  JFC:  – AWT  (Abstract  Window  Toolkit)  – Swing  –  Java2D  

AWT  (Abstract  Window  Toolkit)  

•  PlaNorm  awal  yang  dimiliki  Java  untuk  mengembangkan  aplikasi  GUI  

•  Sudah  ada  lebih  dulu  sebelum  Swing  •  AWT  membangun  tampilan  grafis  dengan  menggunakan  subru=n/fungsi  asli  yang  dimiliki  oleh  suatu  plaNorm  sistem  operasi  

•  Sehingga  memungkinkan  hasil  tampilan  komponen  grafisnya,  =dak  sama  antar  plaNorm  SO  satu  dengan  yang  lain  

AWT  

•  Di  dalamnya  terdapat  API  (Applica=on  Programming  Interface)  untuk  menangani  event  handling  

•  Secara  fisik  bentuk  AWT  adalah  berupa  kumpulan  klas-­‐klas  yang  ada  dalam  paket  java.awt  

Swing  

•  Teknologi  yang  lebih  baru  daripada  AWT  •  Swing  membangun  tampilan  grafis  =dak  langsung  menggunakan  subru=n/fungsi  asli  dari  plaNorm  SO.  

•  Swing  membangun  sendiri  tampilan  grafis  tersebut  (yaitu  menggunakan  Java2D,  dan  Java2D  yang  berhubungan  dengan  low-­‐level  subru=n  asli  dari  plaNorm  SO)    

Swing  •  Tampilan  grafis  yang  dihasilkan  antara  plaNorm  satu  dengan  yang  lain  sama  

•  Lebih  kaya  dan  lebih  bagus  •  Menyediakan  fasilitas  “cross-­‐plaNorm  look  and  feel”,  sehingga  bisa  membuat  tampilan  yang  seolah2  tampilan  grafisnya  dibuat  menggunakan  plaNorm  sistem  operasi  lain  

       Contoh:  Misal  dibuat  program  di  Windows,  tampilannya  bisa  dibuat  seper=  di  tampilan  di  Mac.  

Swing    

•  Swing  bukan  penggan=  AWT,  Swing  akan  berdampigan  dengan  AWT  

•  Karena  se=ap  tampilan  komponen  GUI  tetap  perlu  berkomunikasi  dengan  low-­‐level  subrou=n  dari  suatu  plaNorm  SO  

•  Misalkan  saat  Event  Handling,  Event  source  nya  berasal  dari  hardware  seper=  mouse  dan  keyboard.  Jadi  tetap  perlu  berkomunikasi  dengan  subrou=n  asli  SO  untuk  bisa  mengenali  event  dari  keyboard  atau  mouse  

Swing    

•  Secara  fisik  bentuk  Swing  adalah  berupa  kumpulan  klas-­‐klas  yang  ada  dalam  paket  javax.swing  

Java2D  

•  API  di  Java  untuk  mengembangkan  aplikasi  grafis  2  dimensi  

•  Shape  •  Color  •  Fill  •  Transform  •  Stroke  •  Font  

Swing  

Arsitektur  Swing  

•  Se=ap  aplikasi  GUI  Swing  harus  memiliki  se=daknya  satu  TOP-­‐LEVEL  CONTAINER  

•  CONTAINER  merupakan  komponen  GUI  dimana  didalamnya  dapat  dimasukkan  komponen  GUI  lainnya  

•  Dalam  TOP-­‐LEVEL  CONTAINER  tsb  akan  diletakkan  komponen-­‐komponen  GUI  lainnya  

Arsitektur  Swing  

•  TOP-­‐LEVEL  CONTAINER  – Menu  Bar  •  Tempat  diletakkannya  komponen  MENU  dan  MENU  ITEM  

– Content  Pane  •  Tempat  diletakkannya  komponen-­‐komponen  GUI  lainnya  (selain  menu,  seper=  Bu\on,  Text  Field  dsb)  

•  Implementasi  dalam  Swing  utk  TOP-­‐LEVEL  CONTAINER  adalah  menggunakan  klas  JFrame,  Jdialog  dan  JApplet  

Arsitektur  Swing  

Top-­‐Level  Container  

Content  Pane  

Komponen   Komponen  

Komponen  

Dsb  

Menu  Bar  

Menu  

Menu  Item  

Arsitektur  Swing  

Ilustrasi  

Langkah-­‐Langkah  

1.  Buat  Root  Level  Container  2.  Buat  Komponen  GUI  dan  masukkan  ke  

dalam  Root  Level  Container  3.  Buat  Event  Handling  

(1)  Membuat  Root  Level  Container  

•  Dibuat  dengan  menggunakan  klas  JFrame  •  Buat  SUBKLAS  dari  Jframe  •  Buat  objek  dari  SUBKLAS  tersebut  •  Panggil  method  dari  objek  tersebut,  untuk  mendapatkan  hasil  yang  diinginkan  

(1)  Membuat  Root  Level  Container  

•  Buat  SUBKLAS  dari  JFrame    

•  Buat  objek  dari  SUBKLAS  tsb,  dan  panggil  method  utk  mendapatkan  hasil  yang  diinginkan  

(1)  Membuat  Root  Level  Container  

•  Agar  tampilan  lebih  baik  dari  sebelumnya,  lengkapi  pada  class  Main  hingga  sbg  berikut  

(2)  Masukkan  Komponen  GUI  ke  Frame    •  Lengkapi  klas  MainWindow  dg  atribut,  dimana  atribut  tsb  merupakan  komponen  GUI  yang  akan  dimasukkan  ke  Frame  

•   Isikan  dalam  konstruktor  klas  MainWindow  sintaks  instansiasi  objek  komponen  GUI    

•  Masukkan  komponen  GUI  ke  dalam  Frame  dgn  menggunakan  method  add  

(2)  Masukkan  Komponen  GUI  ke  Frame    

Buat  atribut  

Ins=ansi  objek  dari  =ap  atribut  

1.  Masukkan  objek  txt1,  txt2  dan  btn  ke  dalam  panel.  

2.  Masukkan  panel  ke  dalam  Fame  

(2)  Masukkan  Komponen  GUI  ke  Frame    •  Untuk  melihat  hasil  perubahannya,  panggil  method  addComponent()  yang  ada  di  klas  MainWindow,  dari  dalam  klas  Main  

(3)  Membuat  Event  Handling  

•  Event  Handling  digunakan  untuk  menangani  ke=ka  user  memberikan  event  pada  suatu  komponen  GUI,  misalnya:  ke,ka  tombol  di  klik,  ke,ka  user  menge,kkan  sesuatu  dalam  text  field,  ke,ka  user  memilih  salah  satu  item  di  dalam  combo  box  dsb.  

•  Event  handling  dibuat  dengan  cara  mengimplentasikan  (implements)  suatu  interface  

•  Meletakkan  proses  penanganan  event  ke  dalam  method  implementasinya  

(3)  Membuat  Event  Handling  

•  Implements-­‐kan  klas  MainWindow  ke  interface  Ac=onListener  

•  Konsekuensinya,  dalam  klas  MainWindow  harus  memberikan  isi  method  acIonPerformed.  acIonPerformed  merupakan  method  abstract  yang  ada  dalam  interface  AcIonListener    

(klik  tanda  merah  dan  implements  all  abstract  method)  

(3)  Membuat  Event  Handling  

1.  Implements  ke  interface  AcIonListener  

2.  Masukkan  sintaks  untuk  menangani  event  ke  dalam  method  acIonPerformed  

3.  Tambahkan  listener  yang  telah  dibuat  ini  ke  dalam  btn  (sehingga  ke=ka  btn  diklik  akan  menjalankan  sintaks  yang  ada  dalam  acIonPerformed)  

(4)  Jalankan  Program  

•  Jalankan  klas  Main  dan  coba  analisis  hasil  nya  

•  Masukan  nilai  ke  txt1  dan  txt2.  Kemudian  tekan  tombol  btn  

SELESAI