1 / 67

Java Swing

Java Swing. Mohammad Iqbal. Macam GUI pada Java. AWT (Abstract Window Toolkit) – SUN Microsystem -> Oracle Product

kermit
Download Presentation

Java Swing

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Java Swing Mohammad Iqbal

  2. Macam GUI pada Java • AWT (Abstract Window Toolkit) – SUN Microsystem -> Oracle Product • AWT adalah GUI Toolkit pertama pada bahasa pemrograman Java, sayang-nya AWT ini sangat-sangat kekurangan komponen yang biasa digunakan untuk membangun sebuah aplikasi desktop secara lengkap (komponen tabel saja tidak ada ) • Aplikasi yang dibangun menggunakan AWT (Abstract Window Toolkit) akan tampak seperti aplikasi native yaitu, jika aplikasi yang dibangun menggunakan AWT ini dijalankan pada Sistem Operasi Windows. Maka aplikasi ini akan terlihat seperti aplikasi Windows pada umum-nya, dan begitu juga jika dijalankan pada Sistem Operasi Mac ataupun GNU/Linux. Kenapa ini bisa terjadi, karena AWT (Abstract Window Toolkit) ini benar-benar memanggil native subrutin untuk menggambar setiap komponen-nya ke layar. • Java Swing – SUN Microsystem -> Oracle • Adalah GUI Toolkit dalam Pemrograman GUI di Java, • Banyak dikenal dikarenakan dukungan tutorialnya banyak di Internet, dan juga merupakan standart dari Java sehingga tidak perlu melakukan penambahan library lagi kalau ingin menggunakan GUI Toolkit ini. • Terdapat 2 IDE besar yang menggunakan GUI Toolkit Java Swing yaitu NetBeans IDE(OpenSource) dan IntelliJ IDEA (mempunyai versi OpenSource dan Komersial) • Dibandingkan dengan AWT, Swing mempunyai lebih banyak komponen pendukung untuk membangun sebuah aplikasi yang lengkap untuk keperluan desktop. • Swing ini 100 % ditulis dengan bahasa pemrograman Java tanpa adanya sebuah wrapper untuk memanggil rutin-rutin native code via JNI (Java Native Interface). Seluruh komponen yang terdapat pada Swing, semuanya murni digambar sendiri menggunakan API (Application Programming Interface) 2D untuk memanggil rutin-rutin dasar penggambaran komponen-nya. Dengan model seperti ini, memungkinkan sekali aplikasi yang dibangun menggunakan Swing tampak sama persis di berbagai macam Sistem Operasi. • Swing juga mempunyai kemampuan untuk berganti-ganti tampilan menggunakan LAF (Look And Feel) atau themes Sayang-nya, jika kita menginginkan tampilan GUI yang native (tampilan-nya sama seperti aplikasi-aplikasi lain pada sistem operasi target) Swing seperti-nya masih terasa kurang smooth terutama dukungan pada font rendering-nya .

  3. Macam GUI pada Java SWT (Standart Widget Tookit) – IBM Product -> Eclipse Foundation SWT (Standart Widget Toolkit) ini adalah sebuah GUI Toolkit yang dikeluaran oleh IBM sebagai alternatif dari AWT/Java Swing milik SUN Microsystem, yang membedakan antara SWT (Standart Widget Toolkit) dan AWT/Java Swing adalah SWT ini benar-benar mengakses native GUI library yang terdapat pada Sistem Operasi melalui JNI (Java Native Interface). Dengan model seperti ini, memungkinkan tampilan aplikasi yang dibangun menggunakan GUI Toolkit SWT menjadi sama persis dengan aplikasi native lain-nya. Kekurangan dari model pemanggilan native GUI library seperti ini adalah kita harus menyediakan library untuk tiap-tiap Sistem Operasi target aplikasi kita. QtJambi – Trolltech -> Nokia Product -> Stopped and Taken By Community • Pernah menggunakan Desktop Environment KDE ? Ingin membuat aplikasi yang tampilan-nya mirip dengan KDE menggunakan bahasa java sebagai dasar-nya, maka QtJambi adalah pilihan yang tepat. Karena QtJambi ini merupakan binding Qt Framework dengan bahasa Java, tetapi sayang-nya proyek QtJambi sudah tidak disupport oleh Nokia dan secara resmi telah ditutup Untung-nya, awal tahun ini ada beberapa developer yang peduli dengan kelangsungan proyek ini dan akhir-nya membuat sebuah komunitas untuk melanjutkan pengembangan proyek QtJambi, sekarang teman-teman bisa melihat perkembangan proyek QtJambi ini pada halaman QtJambi Community JavaGNOME – Community Product • Kalau QtJambi diatas ditujukan untuk teman-teman yang sudah akrab dengan API (Application Programming Interface) Qt Framework, berbeda dengan JavaGNOME Proyek ini lebih dikhususkan untuk teman-teman pecinta GTK atau yang paling banyak dikenal yaitu GNOMESama seperti GUI Toolkit SWT dan QTJambi, JavaGNOME ini juga mengakses native library tetapi API yang digunakan adalah API dari GTK. Untuk teman-teman yang sudah terbiasa membangun aplikasi menggunakan Glade, maka teman-teman bisa men-design form-nya menggunakan Glade dan memanggil-nya menggunakan bahasa java melalui JavaGNOME

  4. Apakah Swing? • Grup 14 packages untuk GUI • 451 class • Bagian dari JFC (Java Foundation Classes)

  5. Swing dan AWT • AWT = Abstract Windows Toolkit (cross platform) • AWT = Versi lama Java GUI  'heavyweight‘ (elemennya terhubung dengan UI OS), • Contoh : Frame AWT bukan JFrame Swing • Hampir semua komponen Swing 'lightweight' (ringan, tdk terhubung dgn OS UI elemen) • Jangan gabung AWT dan Swing, Gunakan Swing saja

  6. Dari AWT ke Swing • AWT: Abstract Windowing Toolkit • import java.awt.* • Swing: new with Java2 • import javax.swing.* • Merupakan Perluasan dari AWT • Banyak komponen baru yang improved. • Standard dialog boxes, tooltips, … • Look-and-feel, skins • Event listeners • API: • http://java.sun.com/j2se/1.3/docs/api/index.html

  7. API Komponen GUI Java: GUI komponen = class • Properties • Methods • Events JButton

  8. Menggunakan Komponen GUI • Create it (Buat) • Instantiate object: b = new JButton(“press me”); • Configure it (Atur) • Properties: b.text = “press me”; • Methods: b.setText(“press me”); • Add it (Tambahkan) • panel.add(b); • Listen to it (dengarkan) • Events: Listeners JButton

  9. Anatomi Aplikasi GUI GUI Internal structure JFrame JFrame JPanel containers JPanel JButton JButton JLabel JLabel

  10. Menggunakan Komponen GUI • Create it • Configure it • Add children (jika container) • Add to parent (kalau bukan menggunakan JFrame) • Listen to it Urutan sangat Penting diperhatikan

  11. Membuat GUI dari bottom up Listener • Create: • Frame • Panel • Components • Listeners • Add: (bottom up) • listeners into components • components into panel • panel into frame JButton JLabel JPanel JFrame

  12. Contoh Langkah Program JFrame f = new JFrame(“title”); JPanel p = new JPanel( ); JButton b = new JButton(“press me”); p.add(b); // add button to panel f.setContentPane(p); // add panel to frame f.show(); press me

  13. Contoh kode Aplikasi import javax.swing.*; class hello { public static void main(String[] args){ JFrame f = new JFrame(“title”); JPanel p = new JPanel(); JButton b = new JButton(“press me”); p.add(b); // add button to panel f.setContentPane(p); // add panel to frame f.show(); } } press me

  14. Swing dan threads • Thread termasuk dalam proses lightweight • Kebanyakan komponen Swing tidak thread-safe • Solusinya adalah harus yakin bahwa semua kode yang men-create dan memodifikasi komponen Swing dieksekusi dalam thread 'event-dispatching‘ yang sama

  15. Swing dan Threads Contoh Aplikasi Swing : Starting-up public static void main(String[] args) { SwingUtilities.invokeLater(new Runnable() { public void run() { createAndShowGUI(); // << methode untuk memulai Swing } }); }

  16. createAndShowGUI private static void createAndShowGUI() { //Create and set up the window. JFrame frame = new JFrame("Hi.."); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); //Add a label. JLabel label = new JLabel("Hello World"); frame.getContentPane().add(label); //Display the window. frame.pack(); frame.setVisible(true); } Silahkan coba Kode ini !

  17. Layout Manager • Swing UI menggunakan LayoutManager untuk mengontrol posisi item • Ini adalah pilihan untuk dapat bekerja dalam cara yang berbeda tapi lebih mudah : • frame.setLayout(null);

  18. Posisi Absolut JFrame frame = new JFrame("I am a JFrame"); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); frame.setBounds(20,30,300,100); frame.setLayout(null); JButton butt=new JButton("Click me"); frame.getContentPane().add(butt); butt.setBounds(20, 20, 200,20); frame.setVisible(true); Silahkan coba Kode ini ! - Mulai dengan contoh sebelumnya dan tulis kode ini di bagian CreateandShowGUI()

  19. Respon pada user actions • Berdasarkan model event-handling • Komponen baru seperti button harus memiliki Listener khusus • Obyek Listener diprogram untuk merespon Event objects yang tiba dari komponen • Obyek Listener harus diimplementasikan pada interface yang tepat

  20. Mekanisme Event-handling Interface, mis: ActionListener Event object Listener, mis : JFrame Ketika di klik Komponen, mis: button Saat inisialisasi, komponen akan memilih obyek lain mis: JFrame, untuk menjadi listener Eksekusi method interface yang tepat, mis: actionPerformed

  21. Interface • Interface adalah kumpulan methods • Misalnya : interface ActionListener memiliki satu method – public void actionPerformed(ActionEvent e) • Class dapat mendeklarasikan method ini sebagai implements, misalnya : public class Main implements ActionListener • Harus didefenisikan mthod dalam interface ini atau compiler akan gagal mengkompilasinya. • Suatu Class dapat mengimplementasikan multiple interface.

  22. Demo klik Button • JButton dan JLabel • clickCounts akan mengingat jumlah klik • Class implements ActionListener • Buat JFrame, JButton dan JLabel • Instantiate obyek aplikasi • Set untuk menjadi listener dari button

  23. Demo klik Button * Main.java * * demonstrasi respon klik button */ package swingprogs; import javax.swing.*; import java.awt.event.*; public class Main implements ActionListener { private static void createAndShowGUI() { // make frame.. JFrame frame = new JFrame("I am a JFrame"); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); frame.setBounds(20,30,300,100); frame.getContentPane().setLayout(null); // make a button JButton butt=new JButton("Click me"); frame.getContentPane().add(butt); butt.setBounds(20, 20, 200,20); // instantiate an application object Main app = new Main(); // make the label app.label = new JLabel("0 clicks"); app.label.setBounds(20,40, 200,20); frame.getContentPane().add(app.label); // set the application object to be the thing which // listens to the button butt.addActionListener(app); frame.setVisible(true); }

  24. Demo klik Button public void actionPerformed(ActionEvent e) { // Ini akan dieksekusi ketika button diklik clickCount++; label.setText("Clicks = "+clickCount); } public static void main(String[] args) { // Memulai Swing GUI SwingUtilities.invokeLater(new Runnable() { public void run() { createAndShowGUI(); } }); } // application object fields int clickCount=0; JLabel label; }

  25. Button yang mana yang diklik? • Jika menggunakan banyak button, setiap button harus me-link ke actionPerformed • Bagaimana mengetahui button yang mana yang diklik? • Gunakan method .getSource pada obyek ActionEvent

  26. Contoh mendeteksi button yang diklik butt1=new JButton("Button 1"); .. butt2 = new JButton("Button 2"); .. public void actionPerformed(ActionEvent e) { if (e.getSource()==butt1) label.setText("Butt1 clicked"); else label.setText("Butt2 clicked"); } Silahkan coba Kode ini !

  27. Perhatikan dan RasakanLook and Feel (LaF) JTatto CDE/Motif Windows Metal Quaqua Tampilan ini tergantung pada implementasi library LaF, Contoh library lain untuk melakukan make over tampilan aplikasi yang menggunakan bahasa pemrograman java : Substance, Quaqua, JTatto, serta MacWidgets. Baca di : http://blog.fastncheap.com/look-feel-java-swing/#ixzz1xqVFSgC0

  28. Setting LaF (Look and Feel) try { UIManager.setLookAndFeel( "com.sun.java.swing.plaf.motif.MotifLookAndFeel" ); } catch (Exception e) { System.out.println("Cant get laf"); } .. JFrame frame = new JFrame(); This in main() - set laf as first step try .. catch.. because could fail UIManager is in java.lang

  29. Menemukan LaF yang terinstall dalam Sistem Object a[]= UIManager.getInstalledLookAndFeels(); for (int i=0; i<a.length; i++) System.out.println(a[i]);

  30. Dekorasi Frame JFrame.setDefaultLookAndFeelDecorated(true); .. Tinggal panggil JFrame constructor

  31. Swing memiliki banyak Class Internal structure Containers Sesuatu tempat yang mengumpulkan sesuatu lainnya Mis: JFRame, JPanel JFrame containers JPanel Controls User I/O widget Mis: Jbutton, JLabel JButton JLabel

  32. Container top level containers - JFrame JApplet JDialog • General purpose containers - • panel • scroll pane • split pane • tabbed pane • tool bar

  33. JPanel ( pada createAndShowGUI) JFrame.setDefaultLookAndFeelDecorated(true); JFrame frame = new JFrame("I am a JFrame"); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); frame.setBounds(20,30,300,100); frame.setLayout(null); //Create a panel JPanel myPanel = new JPanel(); myPanel.setBackground(new Color(255,3,25)); myPanel.setOpaque(true); //Make it the content panel frame.setContentPane(myPanel); frame.setVisible(true);

  34. JPanel • adalah subclass dari JComponent • Merupakan komponen Swing yang bukan bagian dari top-level container, tapi digunakan sebagai general purpose container • Kita dapat menambahkan border dan tool-tip di sini.

  35. Tool-tip dan border .. myPanel.setOpaque(true); myPanel.setToolTipText("I'm a JPanel"); myPanel.setBorder(BorderFactory.createLineBorder(Color.white)); frame.setContentPane(myPanel); ..

  36. JSplitPane .. setLayout(null); //Create a split pane JSplitPane myPane = new JSplitPane(); myPane.setOpaque(true); frame.setContentPane(myPane); frame.setVisible(true);

  37. JSplitPane menggunakan JPanels //Create a split pane JSplitPane myPane = new JSplitPane(); myPane.setOpaque(true); myPane.setDividerLocation(150); // make two panels JPanel right = new JPanel(); right.setBackground(new Color(255,0,0)); JPanel left = new JPanel(); left.setBackground(new Color(0,255,0)); // set as left and right in split myPane.setRightComponent(right); myPane.setLeftComponent(left);

  38. Latihan • Buatlah Program • Buttons set the colour of the left hand pane

  39. JTextField • Untuk satu baris input teks • Methods : getText, setText • Dapat menggunakan ActionListener, yang dipicu ketika tombol Enter ditekan

  40. Contoh JTextField • Cek Main object fields untuk label dan field teks • Buat panel, set sebagai content pane • Buat dan tambahkan field teks • Tambahkan actionlistener • Buat dan tambahkan label • Program actionPerformed

  41. Contoh JTextField // make a text field app.textField = new JTextField("Type here",20); myPanel.add(app.textField); // set up action listener app.textField.addActionListener(app); // make and add label app.label = new JLabel("Result"); myPanel.add(app.label); frame.setContentPane(myPanel); frame.setVisible(true); } import javax.swing.*; import java.awt.event.*; import java.awt.*; public class Main implements ActionListener { private static void createAndShowGUI() { Main app=new Main(); // make frame.. JFrame.setDefaultLookAndFeelDecorated(true); JFrame frame = new JFrame("I am a JFrame"); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); frame.setBounds(20,30,300,120); frame.setLayout(null); // make a panel JPanel myPanel = new JPanel();

  42. Contoh JTextField SwingUtilities.invokeLater(new Runnable() { public void run() { createAndShowGUI(); } }); } // application object fields JLabel label; JTextField textField; } public void actionPerformed(ActionEvent e) { // this happens when Enter hit on the text field label.setText(textField.getText()); } public static void main(String[] args) { // start off.. try { UIManager.setLookAndFeel( "javax.swing.plaf.metal.MetalLookAndFeel" ); } catch (Exception e) { System.out.println("Cant get laf"); }

  43. JTextArea JPanel myPanel = new JPanel(); app.textArea = new JTextArea("Type here",5, 20); myPanel.add(app.textArea); TextArea expands rows and columns as needed

  44. JScrollPane JTextArea textArea = new JTextArea("Type here",5, 20); JScrollPane scrollPane = new JScrollPane(textArea); frame.setContentPane(scrollPane);

  45. Latihan • Buat Program • Gunakan selectAll dan cut methods dari JTextComponent, dengan JTextArea.

  46. Timer .. Timer t = new Timer(1000, app); t.start(); app.label = new JLabel("Time"); app.label.setBounds(20,20,200,20); frame.getContentPane().add(app.label); .. public void actionPerformed(ActionEvent e) { String now = (new java.util.Date()).toString(); label.setText(now); }

  47. Citra Icon JFrame frame = new JFrame("I am Celsius"); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); frame.setBounds(20,30,200,200); frame.getContentPane().setLayout(null); ImageIcon icon = new ImageIcon("c:/celsius.jpg", "Celsius"); JLabel label = new JLabel(icon); label.setBounds(20,20,150,150); frame.getContentPane().add(label); frame.setVisible(true);

  48. JScrollBar Gunakan : • JScrollBar dan JLabel • Constructor argumen • Implementasikan AdjustmentListener • adjustmentValueChanged • e.getValue()

  49. JScrollBar import javax.swing.*; import java.awt.event.*; public class Main implements AdjustmentListener { private static void createAndShowGUI() { // make frame.. JFrame frame = new JFrame("JScrollBar"); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); frame.setBounds(20,30,200,200); frame.getContentPane().setLayout(null); Main app = new Main(); app.sbar = new JScrollBar(java.awt.Adjustable.VERTICAL, 127, 1,0,255); app.sbar.setBounds(20,20, 20, 200); app.sbar.addAdjustmentListener(app); frame.getContentPane().add(app.sbar); app.label = new JLabel(); app.label.setBounds(50,20,100,20); frame.getContentPane().add(app.label); frame.setVisible(true); } public void adjustmentValueChanged(AdjustmentEvent e) { label.setText("Value = "+e.getValue()); } public static void main(String[] args) { // start off.. SwingUtilities.invokeLater(new Runnable() { public void run() { createAndShowGUI(); } }); } // application object fields JScrollBar sbar; JLabel label; }

  50. Latihan • Buat Program • Scroll bars determine the red, green and blue components of the background of the panel

More Related