Copy of Java Topik 4 Mengenal SWING

  Universitas Multimedia Nusantara TOPIK 4

  

Mengenal SWING

JAVA - 2013 ^{Martinus R. Sigit S. sigit@umn.ac.id}

GUI dalam Java

  Ada tiga: AWT (Abstract Window Toolkit)  awal

• SWING  pengembangan dari AWT
• JavaFX  untuk aplikasi desktop, RIA
• (Rich Internet Application)

Mengapa Swing

• Sun tidak menganjurkan AWT
• – AWT lambat dan fiturnya kurang
• Swing lebih ringan dari AWT
• Swing paling banyak digunakan untuk aplikasi desktop
• Tidak tergantung sistem operasi
• Bagian dari JFC (Java Fondation Classes)
• Ada fasilitas Look and Feel • Swing dibuat berdasar dari AWT tapi jauh lebih ringan

Swing

  Dalam package javax.swing

• Semua objek Swing diawali dengan huruf
• J contohnya JFrame, JButton, JLabel, JTextField, JTextArea, JCheckBox, JRadioButton

  

Hirarki Swing

  

Komponen Dasar Swing

• Top-Level Container •

  Intermediate Container

• Atomic Container •

  Layout Manager

• Event Handling

Container

• Tempat komponen lain diletakkan
• Contohnya:
• – JPanel
• – JFrame
• – JButton
• – JTable
• – JList

Swing Package

• • Tersedia 17 package yang berisi kelas-kelas

  Swing • Banyak yang menyediakan komponen lain:

   JGoodies  Swingx  javadesktop.org  swinglabs.org

  

JGoodies

  cont’d Fitur Swing

  Jalankan swingset3.jar

• Caranya:
• Buka command prompt
• – Ketika java -jar swingset3
• –

  

Fitur Swing

  Fitur Swing cont’d

How to create

  Aplikasi swing bisa dibuat dengan: Mengetik kode langsung

• Untuk memahami konsep Swing ini yang kita
• – lakukan untuk sekarang

  Menggunakan fasilitas ‘What You See Is

• What You Get”

  Kodenya akan tergenerate secara otomatis

• –

  

DIY (Do It Yourself)

  

DIY (Do It Yourself)

  

DIY (Do It Yourself) - hasil

  

Message Dialog Type

  

Swing Basic Component

  DIY Membuat Form

  Buat Kelas FormUtama.java

  DIY Membuat Form Menggunakan JFrame Container paling atas untuk menangani GUI Beberapa method penting:

• setSize(lebar, tinggi)
• setLocation(x,y)
• setVisible(boolean)

• setDefaultCloseOperation(int) spesifikasi operasi jika

  frame ditutup

• setLocationRelativeTo(component) set lokasi frame ke komponen yang spesifik.
• pack() secara otomatis set ukuran frame dengan

  komponen-komponen yang ada dalam frame

  cont’d DIY Membuat Windows

  Buat Kelas KelasUtama.java

  

DIY Membuat Windows hasil

  Event:

  Event Handling Untuk menangani bila terjadi event.

• – Button yang diklik
• – Textbox berubah isinya
• – Mouse berada di atas komponen
• – Dll.

  

Hirarki Event Handling

  Menambahkan Button

  Edit Kelas FormUtama.java

  Menambahkan Button hasil

  Menambahkan Text Box

  Edit Kelas FormUtama.java

  Menambahkan Text Box (hasil)

  Menambahkan Check Box

  Edit Kelas FormUtama.java

  Menambahkan Check Box (hasil)

  Latihan 1

  Buatlah kalkulator sederhana dengan tampilan seperti di bawah ini

  Eclipse Window Builder Plug In

  Eclipse merupakan IDE berbasis plug in

• Untuk mendapatkan fasilitas WYSIWYG
• dalam membangung Swing kita perlu menambahkan Window Builder WindowBuilder adalah plugin open source
• yang dikelola oleh google untuk membantu pengguna eclipse dalam membuat GUI.

  Eclipse Window Builder Plug In Installation

  Untuk melakukan instalasi WindowBuilder bisa secara: a. Offline

  b. Online

  

INSTALASI WINDOWBUILDER

SECARA OFFLINE

  Eclipse Window Builder Plug In Installation - offline

  Untuk offline installation Pastikan sudah mendapatkan filenya yang didapat dari :

  

  Masuk ke halaman download , dah pilih yang sesuai

  

Eclipse Window Builder Plug In

Installation - offline

  Eclipse Window Builder Plug In Installation - offline

  Setelah di-download masukkan di folder tertentu dan di-extract

  

Eclipse Window Builder Plug In

Installation - offline

  Buka Eclipse

  Eclipse Window Builder Plug In Installation - offline

  Masuk ke help , pilih Install New Software

  

Eclipse Window Builder Plug In

Installation - offline

  Halaman Install New Software

  

Eclipse Window Builder Plug In

Installation - offline

  Pilih add

  Eclipse Window Builder Plug In Installation - offline

  Pilih local, pilih folder tempat anda meletakkan hasil extract windows builder

  Eclipse Window Builder Plug In Installation - offline

  Pastikan location sudah benar, tekan OK

  Eclipse Window Builder Plug In Installation - offline

  Pilih semua check box, dan klik next

  Eclipse Window Builder Plug In Installation - offline

Setelah tekan Next , tunggu proses melakukan pengecekan

  

Eclipse Window Builder Plug In

Installation - offline

  Tekan button Next

  

Eclipse Window Builder Plug In

Installation - offline

  Pilih Finish

  Eclipse Window Builder Plug In Installation - offline

  Proses Installasi akan berjalan

  Eclipse Window Builder Plug In Installation - offline

  Lakukan Restart terhadap eclipse

  

INSTALASI WINDOWBUILDER

SECARA ONLINE

  Eclipse Window Builder Plug In Installation - online

http://www.eclipse.org/windowbuilder/download.php

  Eclipse Window Builder Plug In Installation - online

http://download.eclipse.org/windowbuilder/WB/release/

R201209281200/4.2/

  Eclipse Window Builder Plug In Installation - online

http://download.eclipse.org/windowbuilder/WB/release/

R201209281200/4.2/

  Eclipse Window Builder Plug In Installation - online

http://download.eclipse.org/windowbuilder/WB/release/

R201209281200/4.2/

  

Eclipse Window Builder Plug In

Installation - online

  

Eclipse Window Builder Plug In

Installation - online

  

Eclipse Window Builder Plug In

Installation - online

  

Eclipse Window Builder Plug In

Installation - online

  

Eclipse Window Builder Plug In

Installation - online

  

Eclipse Window Builder Plug In

Installation - online

  

Eclipse Window Builder Plug In

Installation - online

  Eclipse Window Builder Plug In Installation - offline

  Untuk mengetest apakah sudah jalan, create project baru, klik other

  

Eclipse Window Builder Plug In

Installation - offline

  Pilih Application Window

  

MENGGUNAKAN WINDOW

BUILDER

  

Menggunakan WindowBuilder

  Buat project baru (Java Project)

  Menggunakan WindowBuilder cont’d

  Beri nama Sistem Informasi Penjualan

  Buat package baru:

  id.web.sigit.tutorial.windowbuilder.sip.resources id.web.sigit.tutorial.windowbuilder.sip.view Menggunakan WindowBuilder cont’d

  

Menggunakan WindowBuilder cont’d

  Hasilnya

  Menggunakan WindowBuilder cont’d

  Copy image (icon yang diberikan oleh dosen) ke package resources

  Menggunakan WindowBuilder cont’d

Pilih package views dan pilih Create New Visual Classes

  

Menggunakan WindowBuilder cont’d

  Pilih Swing > JFrame

  

Menggunakan WindowBuilder cont’d

  Beri nama FormUtama

  

Menggunakan WindowBuilder cont’d

  Coba Jalankan

  

Menggunakan WindowBuilder cont’d

  Pilih Menu Design

  

Menggunakan WindowBuilder cont’d

  Menu Design

  

Menggunakan WindowBuilder cont’d

  Pilih Maximize

  

Menggunakan WindowBuilder cont’d

  Mode maximize

  

Memilih Look n Feel

  Pilih Look and Feel

  

Memilih Look n Feel

  Pilih Look and Feel

Memilih Look n Feel

  Agar look and feel diimplement ketika awal masuk program: Pilih Window > Preferences

  

Memilih Look n Feel

  Pilih Look and Feel

  Memilih Look n Feel

  Check Apply Chosen LookAndFeel

  

Memilih Look n Feel

  Kode akan terubah otomatis

  Mengubah Property

Pilih window yang dibuat dan ubah property, misalnya Judul

  

Mengubah Property

Hasilnya

  Mengubah Property

Ubah Icon Image, di bagian property , pilih Browse

  

Mengubah Property

Pilih dari gambar yang sudah ada di project

  

Mengubah Property

Hasilnya:

  Melakukan Preview

Untuk melakukan preview secara cepat tekan button play di

bawah toolbar standard

  Set Layout

Pilih contentPane, isi dari window akan ter-select

  Set Layout

Klik Kanan pada isi window , pilih set layout, pilih group layout

  Mengubah Ukuran

Untuk mengubah ukuran window, pilih window , dan lakukan resize

lewat pojok kanan bawah

Membuat Menu

  Merupakan bagian yang sangat penting

• dalam aplikasi Pada Swing, Menu hanya bisa dipasang
• pada objek yang mempunyai method

  setJMenuBar

  Untuk membuat menu dibutuhkan

• beberapa kelas yaitu JMenuBar,

  Jmenu, JMenuItem, JCheckBoxMenuItem, JRadioButtonMenuItem

  cont’d Membuat Menu

  Buka section Menu, dan pilih JMenuBar

  Mengubah Ukuran

Klik JMenuBar dan arahkan ke window di bagian atas

  

Membuat Menu

  Hasilnya:

  cont’d Membuat Menu

  Menambahkan menu, pilih JMenu, dan letakkan di JMenuBar

  cont’d Membuat Menu

  Rename judulnya jadi Administrasi

  cont’d Membuat Menu

  Hasilnya:

  cont’d Membuat Menu

  Tambahkan Menu Item

  cont’d Membuat Menu

  Tambahkan Master Data Pengguna

  cont’d Membuat Menu

  Pilih icon untuk mengubah icon

  cont’d Membuat Menu

  Pilih icon user

  cont’d Membuat Menu

  Hasilnya:

  cont’d Membuat Toolbar Menu

  Menambahkan toolbar, pilih (klik sekali) JToolBar dari kategori Container

  cont’d Membuat Toolbar Menu

  Klik dan arahkan ke bawah menu

  cont’d Membuat Toolbar Menu

  Ubah sizenya sesuai keinginan

  cont’d Membuat Toolbar Menu

  Tambahkan JButton ke dalam toolbar

  cont’d Membuat Toolbar Menu

  Ubah icon untuk toolbar

  Text bisa dihilangkan

  cont’d Membuat Internal Frame

  Di package explorer pilih package views

  cont’d Membuat Internal Frame

  Pilih JInternalFrame

  cont’d Membuat Internal Frame

  Beri nama MyInternalFrame

  cont’d Membuat Internal Frame

Hapus blok void main di kelas MyInternalFrame.java

  cont’d Membuat Internal Frame

  Di window design, set ke group layout

  cont’d Membuat Internal Frame

  Beri tool untuk minimize dan close

  cont’d Membuat Internal Frame

  Ubah title ke Data Pengguna

  cont’d Membuat Internal Frame

  Tambahkan panel (JPanel)

  cont’d Membuat Internal Frame

  Pilih panel yang baru saja dibuat dan pilih property border

  cont’d Membuat Internal Frame

  Ubah title untuk border

  cont’d Membuat Internal Frame

  Untuk panel ini ubah layout ke group layout

  cont’d Membuat Internal Frame

  Tambahka JTextField dan JTextBox

  cont’d Membuat Internal Frame

  Tambahkan panel untuk menambah button

  Menampilkan Internal Frame _cont’d

Di form utamaSet layout content pane ke border layout

  

Menampilkan Internal Frame

_cont’d

  Pindah toolbar ke Border North

  cont’d Membuat Internal Frame

  Masukkan JScrollPane ke Border Center

  cont’d Membuat Internal Frame

  Masukkan JDesktopPane ke JScrollPane

  cont’d Membuat Internal Frame

  Masukkan JDesktopPane

  cont’d Membuat Internal Frame

Ubah property background color dari JDesktopPane, misalnya pilih

Inactive Caption

  cont’d Membuat Internal Frame

Pilih (klik kanan) Icon dan berikan event handler

  cont’d Membuat Internal Frame

  Tambahkan kode di form utama

  cont’d Membuat Internal Frame

  Tambahkan kode berikut

  cont’d Membuat Internal Frame

  Panggil Internal Frame dari window utama Pilih window utama

  cont’d Membuat Internal Frame

  Panggil Internal Frame dari window utama Pilih window utama

Membuat Menu cont’d

  Coba Jalankan

  Tambahkan 3 Menu Item Lain

• Master Data Kategori • Master Data Barang •

  Master Data Pemasok

  

END – SEE U NEXT

CONT’D WEEK MENU