Anda di halaman 1dari 25

http://docs.oracle.

com/javase/tutorial/uiswing/learn/

JFC dan Swing


JFC adalah singkatan Java Foundation Classes, yang mencakup sekelompok fitur untuk membangun antarmuka pengguna grafis (GU ! dan menambahkan fungsionalitas yang kaya grafis dan interaktivitas ke aplikasi Java" Salah satu Fitur JFC adalah komponen Swing GUI, yang berisi mulai dari tombol sampai untuk membagi panel pada tabel" #anyak komponen mampu melakukan sortir, pencetakan, dan dan drop"

Paket swing yang mana yang digunakan? Swing $% memiliki &' paket publik(
javax.accessibility javax.swing javax.swing.border javax.swing.colorchooser javax.swing.event javax.swing.filechooser javax.swing.plaf javax.swing.plaf.basic javax.swing.plaf.metal javax.swing.plaf.multi javax.swing.plaf.synth javax.swing.table javax.swing.text javax.swing.text.html javax.swing.text.html.parser javax.swing.text.rtf javax.swing.tree javax.swing.undo

)ebanyakan program hanya menggunakan sebagian kecil dari paket ini" *ang paling sering dipakai adalah(
javax.swing javax.swing.event

Compiling dan Running Program Swing +angkah( nstall rilis terakhir platform Java S," Ciptakan program yang menggunakan komponen Swing" )ompilasi program" Jalankan (run! program" -ilis terakhir J.) dapat diunduh dari http(//www"oracle"com/technetwork/0ava/0avase/downloads/inde1"html" Contoh program berikut disimpan pada file HelloWorldSwing.java"

/* * Copyright (c) rights reserved. */ pac)age start*

!!"# $%%&# 'racle and/or its affiliates. (ll

/* * +ello,orld-wing.java re.uires no other files. */ import javax.swing.** public class +ello,orld-wing / /** * Create the 012 and show it. 3or thread safety# * this method should be invo)ed from the * event4dispatching thread. */ private static void create(nd-how012() / //Create and set up the window. 53rame frame 6 new 53rame(7+ello,orld-wing7)* frame.set8efaultClose'peration(53rame.9:2;<'=<C>'-9)* //(dd the ubi.uitous 7+ello ,orld7 label. 5>abel label 6 new 5>abel(7+ello ,orld7)* frame.getContent?ane().add(label)* //8isplay the window. frame.pac)()* frame.set@isible(true)* A public static void main(-tringBC args) / //-chedule a job for the event4dispatching thread: //creating and showing this applicationDs 012. javax.swing.-wing1tilities.invo)e>ater(new Eunnable() / public void run() / create(nd-how012()* A A)* A

%rogram ini diciptakan di dalam paket, seperti ditun0ukkan di awal file(


pac)age start*

ni berarti anda harus meletakkan file +ello,orld-wing.java didalam folder (direktori! start" +akukan kompilasi dan 0alankan contoh program ini dari folder di atas folder start" Untuk mengkompilasi contoh program ini, dari folder di atas folder start(
javac start/+ello,orld-wing.java

#isa 0uga anda kompilasi program ini dari dalam folder start(

javac +ello,orld-wing.java

Selan0utnya anda dapat men0alankan program dari folder di atas folder start(
java start.+ello,orld-wing

#ela0ar Swing dengan ., 2et#eans


Examples Index
%ela0aran ini memberikan pendahuluan pada pemrograman Graphical User nterface (GU ! dengan Swing dan ., 2et#eans" ., 2et#eans adalah lingkungan pengembangan terpadu yang bersifat free, open3 source, cross3platform dengan dukungan built3in untuk bahasa pemrograman Java" 4u0uan pela0aran ini adalah memperkenalkan Swing $% dengan merancang aplikasi sederhana yang mengkonversi suhu dari Celsius ke Fahrenheit" %ela0aran ini bersifat step3by3step untuk setiap langkah, maka direkomendasikan anda men0alankan 2et#eans ., dan mengikuti langkah3langkah yang diminta" 5asil GU dari aplikasi ini adalah seperti berikut(

Setting up %ro0ect CelsiusConverter


Langkah 1: Ciptakan Project Baru
#uka 2et#eans ., dan pilih 2ew %ro0ect dari menu File(

Langkah 2: Pilih Java -> Java Application


Selan0utnya, pilih Java dari kolom Categories, dan Java Application dari kolom Projects(

)lik Next untuk melan0utkan"

Langkah 3: Set Na

a Project

4ulis 6CelsiusConverter%ro0ect6 sebagai nama pro0ect" Silahkan isi %ro0ect +ocation dan %ro0ect Folder untuk meletkan pro0ect ke harddisk"

%astikan opsi 6Create 7ain Class6 tidak terpilih" )lik 6Finish6 untuk menyelesaikannya"

Langkah !: "a

#ahkan $or

J$ra

)lik3kanan node CelsiusConverterProject dan pilih New - J!rame !orm (JFrame adalah kelas Swing yang men0adi frame utama dari aplikasi ini"!

Langkah %: Na

ai kela& '()

Selan0utnya, tulis CelsiusConverterGUI sebagai nama kelas, dan belajar sebagai nama package"

Field3field lain otomatis akan diisi, seperti gambar di atas" )lik tombol !inis" untuk menyelesaikannya"

Setelah ., selesai memuat, panel kanan akan menampilkan tampilan grafis saat disain dari CelsiusConverterGU " %ada layar ini anda akan secara visual melakukan drag, drop, dan memanipulasi se0umlah komponen Swing"

.asar ., 2et#eans

)ali ini kita tidak akan mempela0ari setiap fitur dari 2et#eans .," )enyataannya, hanya fitur3fitur yang nyata3nyata anda butuhkan untuk dimengerti adalah Palette, Design Area, Property Editor, dan Inspector"

Palette
%alette mencakup semua komponen yang ditawarkan oleh Swing $% " )emungkinan anda bisa menebak untuk apa komponen3komponen ini digunakan (5>abel adalah teks label, 5>ist adalah list drop3down, dll"!

.ari daftar ini, aplikasi kita hanya akan menggunakan >abel (teks label dasar!, ;ext3ield (untuk user memasukkan suhu!, dan Futton (untuk mengkonversi suhu dari Celsius ke Fahrenheit"!

Area *e&ign
$rea .esign adalah daerah dimana anda secara visual akan menciptakan tampilan GU " $rea ini mempunyai dua bagian( source view, dan design view" #esign view adalah default, seperti ditun0ukkan di bawah" $nda secara toggle dapat melihat antara #esign dan Source dengan klik tab yang sesuai"

Gambar di atas menun0ukkan sebuah ob0ek 53rame, yang ditampilkan sebagai bentuk persegi terarsir warna abu dengan border biru"

.apat kita lihat pada tampilan source bahwa ., telah menciptakan method private yang dinamai initComponents, yang melakukan

inisialisasi se0umlah komponen GU " .idalam method ini ada kode agar aplikasi untuk "exit on close", membentuk tugas layout, kemudian melakukan pack komponen di layar"

+,itor Propert,ditor %roperty mengi0inkan anda untuk mengubah properti setiap komponen" $nda lihat terdapat sederet baris 8 satu baris per properti 8 sehingga dapat anda klik dan ubah tanpa memasukkan source code secara langsung" Gambar berikut menun0ukkan ,ditor %roperty untuk ob0ek JFrame(

.ari screenshot di atas menun0ukkan se0umlah properti dari ob0ek ini, seperti such as background color, foreground color, font, dan cursor"

"he )n&pector
)omponen terakhir nspector( ., 2et#eans yang akan kita gunakan adalah

nspector menyediakan representasi dari komponen aplikasi" )ita akan gunakan nspector hanya sekali, untuk mengubah nama variabel names to something other than their defaults"

$enciptakan %&' untuk CelsiusConverter


#agian ini men0elaskan bagaimana menggunakan ., 2et#eans untuk menciptakan aplikasi GU " Seperti anda melakukan drag setiap komponen dari %alette ke $rea .esign, maka ., melakukan auto3 generates source code yang sesuai"

Langkah 1: Set "itle


%ertama, set title JFrame men0adi 6Celsius Converter6, dengan klik tunggal J!rame dalam 'nspector(

7aka, set title dengan (ditor Property(

$nda dapat menset title dengan double-click properti title dan langsung memasukkan teks baru, atau dengan click tombol dan memasukkan title dalam field yang disediakan"

Langkah 2: "a

#ahkan "e.t$iel,

Selan0utnya, drag 4e1tField dari %alette ke po0ok kiri atas dari $rea .esign" %ada saat anda drag menu0u ke po0ok kiri atas, GU builder menyediakan tanda visual (garis putus3putus! yang menyarankan ruang lokasi yang sesuai" .engan menggunakan tanda ini sebagai panduan, lakukan drop )ext!ield kepo0ok kiri atas dari 0endela(

%enambahan 4e1tField $nda mungkin tergoda untuk menghapus teks default 604e1tField&6, tetapi sekarang biarkanlah dulu" )ita akan menggantinya nanti dalam pela0aran ini pada saat kita buat penyesuaian akhir untuk masing3masing komponen"

Langkah 3: "a

#ahkan La#el

Selan0utnya, drag +abel kedalam $rea .esign" +etakkan +abel di sebelah kanan ;ext3ield, lagi dengan melihat tanda visual yang menyarankan se0umlah ruang sela yang sesuai"

%enambahan +abel

Langkah !: "a

#ahkan Button

Selan0utnya, drag #utton dari %alette dan letakkan +abel ini ke kiri dan bawah ;ext3ield"

%enambahan Futton

Step %: "a

#ahkan La#el ke,ua

%enambahan >abel kedua

4erakhir, tambahkan >abel yang kedua, dengan cara seperti langkah 9" +etakkan >abel kedua di kanan Futton, seperti gambar di atas"

Pengaturan CelsiusConverter %&'


.engan komponen3 komponen GU yang sudah diletakkan, waktunya sekarang untuk membuat pengaturan akhir" $da beberapa cara untuk menger0akan hal ini, tetapi ini kan di0elaskan satu pendekatan sa0a"

Langkah 1: Set /o

ponen "ek&

%ertama, double3click ;ext3ield dan Futton untuk mengubah teks default yang telah dibuat .," %ada saat anda menghapus teks dari ;ext3ield, ia akan menyusut ukurannya seperti ditun0ukkan dibawah" Ubah teks dari Futton dari 60#utton&6 men0adi 6Convert"6 Ubah 0uga teks 0+abel& men0adi 6Celsius6 dan 0+abel9 men0adi 6Fahrenheit"6

Langkah 2: Set (kuran /o

ponen

Selan0utnya, shift3click komponen ;ext3ield dan Futton" -ight3click sehingga sama ukurannya dan sama lebarnya" Sekarang komponen3 komponen ini punya lebar sama, seperti gambar di bawah"

Langkah 3: 0ilangkan 1uang +k&tra


4erakhir, gerakkan po0ok kanan bawah Frame dan atur ukurannya untuk mengurangi ruang kosong"

#agian GU dari aplikasi ini sekarang sudah lengkap: .ari langkah di atas disimpulkan bahwa dengan ., 2et#eans kita melakukan desain tampilan (user interface! cukup sederhana" Sekarang coba klik tab source, maka akan anda lihat bahwa ., telah membangkitkan se0umlah kode"

Menambah Logika Aplikasi


Langkah 1: (#ah Na a 2aria#el *e3ault

Gambar di bawah menun0ukkan nama3nama variabel default yang muncul dalam nspector" Untuk setiap komponen, nama variabel muncul pertama, diikuti oleh tipe ob0eknya dalam tanda kurung siku" Sebagai contoh, j;ext3ield B5;ext3ieldC artinya bahwa 7j;ext3ield 7 adalah nama variabel dan 75;ext3ield7 adalah tipenya"

2ama default tidak relevan dalam konteks aplikasi, sehingga kita sebaiknya mengubahnya dengan sesuatu yang lebih bermakna" )lik3 kanan setiap nama variabel dan pilih 6Change variable name"6 Ubahlah nama variabel masing3masing ob0ek, sehingga setelah selesai pengubahan akan nampak seperti berikut(

2ama3nama variabel baru adalah 6temp4e1tField6, 6celsius+abel6, 6convert#utton6, dan 6fahrenheit+abel"6 Setiap perubahan dalam nspector otomatis akan merambat ke kode sumber"

Langkah 2: 4en,a3tarkan +vent Li&tener


%ada saat end3user berinteraksi dengan komponen Swing GU (misalnya dengan mengklik tombol Convert!, maka komponen itu akan membangkitkan semacam ob0ek khusus 8 disebut o*ject event 8 yang kemudian akan memancarkan ke ob0ek lain yang telah terdaftar sebelumnya sebagai li&tener& untuk ke0adian (e ent!" ., 2et#eans membuat pendaftaran e ent listener sangat sederhana(

.alam $rea .esign, klik tombol Convert untuk memilihnya" *akinkan bahwa hanya tombol Convert yan terpilih" )lik3kanan tombol Convert dan pilih 9vents 4G (ction 4G (ction?erformed" 5al ini akan membangkitkan kode e ent-!andling yang dibutuhkan, yang akan menyediakan method kosong agar anda menambahkan fungsionalitas yang sesuai dengan kebutuhan(

4erdapat banyak tipe e ent berbeda yang merepresentasikan bermacam3 macam action yang dapat dilakukan oleh end3user (klik mouse memicu sebuah tipe e ent, pengetikan pada keyboard memicu e ent lainnya, memindahkan mouse memicu e ent lain lagi, dan lain3lain!" $plikasi kita hanya dikonsentrasikan dengan (ction9vent"

Langkah 3: "a

#ahkan ko,e /onver&i "e

peratur

+angkah akhir adalah menempelkan kode konversi kedalam bodi method kosong" )ode berikut yang anda butuhkan untuk mengkonversi temperatur dari Celsius ke Fahrenheit(
//>a)u)an parsing derajat Celsius sebagai double dan )onversi)an //)e 3ahrenheit. int temp3ahr 6 (int)((8ouble.parse8ouble(tmpTextField.get;ext())) * .& H I$)* fa ren eit!abel.set;ext(temp3ahr H 7 3ahrenheit7)*

4uliskan kode ini kedalam method convertFutton(ction?erformed seperti ditun0ukkan dibawah(

Langkah !: Jalankan Aplika&i


7en0alankan aplikasi dilakukan dengan memilih -un 3; -un 7ain %ro0ect" %ertama anda men0alankan aplikais ini, anda akan ditanyai dengan dialog yang menanyakan untuk menset CelsiusConverterGU sebagai kelas utama (main class! untuk pro0ect ini" )lik tombol <), dan saat program menyelesaikan kompilasi, anda akan lihat aplikasi akan ber0alan di 0endelanya sendiri"

Questions and Exercises: Learning Swing with the NetBeans IDE


Questions
1. When creating this new project, we left the !reate Main !lass checkbox deselected. Wh"# $. %he &&&&& contains all of the components offered b" the 'wing A(I. ). What is the p*rpose of the +esign Area# ,. Explain the difference between the 'o*rce and +esign tabs. -. .ame some ad/antages to editing an object with the (ropert" Editor 0as opposed to editing it directl" in the so*rce code.1

2. %his lesson *sed 'wing objects of three different t"pes. What were the"# 3. +escribe the process for setting two components to the same width in the +esign Area.

Exercises
1. 4se the propert" editor to change the appearance of this application. Experiment b" changing some /al*es and seeing what effect "o*r changes ha/e.

Answers: Learning Swing with the NetBeans IDE


Questions
Question 1: When creating this new project, we left the !reate Main !lass checkbox deselected. Wh"# Answer 1: We left this checkbox deselected beca*se the CelsiusConverter012 is the application5s main entr" point. Question 2: %he &&&&& contains all of the components offered b" the 'wing A(I. Answer 2: (alette Question 3: What is the p*rpose of the +esign Area# Answer 3: %he +esign Area is where "o* /is*all" arrange the /ario*s components of the application5s 64I. It c*ts de/elopment time beca*se all of the application5s la"o*t code is a*to7generated. Question 4: Explain the difference between the 'o*rce and +esign tabs. Answer 4: %hese tabs pro/ide two different /iews of the same application. %he +esign tab shows what the application act*all" looks like, and the 'o*rce tab shows its so*rce code. 'ome portions of the so*rce tab are a*to7generated and not directl" editable b" the *ser. Question 5: .ame some ad/antages to editing an object with the (ropert" Editor 0as opposed to editing it directl" in the so*rce code.1 Answer 5: 4sing the propert" editor elimates t"ping errors, accidental modification of the wrong code, and pro/ides a listing of all properties exposed b" a partic*lar object.

Question :%his lesson *sed 'wing objects of three different t"pes. What were the"# Answer : 5>abel, 5Futton, and 5;ext3ield Question !:In the +esign Area, describe the process for setting two components to the same width. Answer !: 'hift7click the two target components8 this will highlight each showing that the" are selected. 9ight7click 0control7click for mac *sers1 'ame 'i:e 7; 'ame Width. %he components will now be the same width.

Exercises
1. 4se the propert" editor to change the appearance of this application. Experiment b" changing some /al*es and seeing what effect "o*r changes ha/e. %his is a <*ick and eas" wa" to explore the properties of the /ario*s 'wing components. =elow we5/e modified the application to *se 8ialog2nput font, and ha/e changed the c*rsor to a hand c*rsor.

A modified !elsi*s!on/erter Application.