GUI Nimbus. Prepared by Viska Mutiawani. 1

Transkripsi

1 GUI Nimbus Prepared by Viska Mutiawani 1 viska@unsyiah.ac.id

2 Subtopik GUI Nimbus Netbeans GUI Builder GUI dan Look & Feel Nimbus 2 viska@unsyiah.ac.id

3 Netbeans GUI Builder 3 viska@unsyiah.ac.id

4 Permasalahan mendesign GUI tanpa IDE Penggunaan Swing API dan layout manager sebetulnya kompleks karena harus disusun agar rapi dan sesuai dengan kaedah HCI Resizing dan alignment juga repot Menyediakan Look and Feel sesuai OS juga repot 4 viska@unsyiah.ac.id

5 Netbeans GUI Builder Nama lainnya: Matisse Membuat form tanpa perlu pemahaman detil mengenai Swing Good looking by default spacing is handled according to underlying OS's Look and Feel Komponen GUI ditambah dan dipindah dengan drag & drop Komponen GUI dikelompokkan dan akan bereaksi jika ada perubahan pada lingkungan Form behaves intelligently when resized GUI components alignment can be easily 5 viska@unsyiah.ac.id

6 Fitur Matisse Simple and intuitive layout of GUIs without the complexity of Swing layout managers Drag and drop capability Automatic form alignment Visual guidelines for optimal spacing between components and alignment of components Support for both visual and non-visual forms 6 viska@unsyiah.ac.id

7 Fitur Matisse Component Inspector showing a components tree and properties Support for null layout In-place editing of text labels of components (labels, buttons, textfields, etc) Full JavaBeans support - installing, using and customizing (properties, events, customizers) Visual JavaBean customization - ability to create forms from any JavaBean classes 7 viska@unsyiah.ac.id

8 Cara kerja Matisse? Mirip seperti Visual Studio pada Windows, Interface Builder pada Mac Supports multiple OS'es New layout manager GroupLayout layout manager This layout manager can be used separately 8 viska@unsyiah.ac.id

9 GUI dan Look & Feel 9 viska@unsyiah.ac.id

10 GUI Untuk membuat aplikasi GUI bisa menggunakan AWT dan Swing Untuk menambah interaktivitas, tampilan GUI tadi akan ditambahkan event dengan metode event delegation model 10

11 Look and Feel The "look" of an application refers to its appearance. The "feel" refers to how the widgets behave. You can choose to use the default Swing look and feel (e.g. the Ocean theme for the Metal look and feel), or the look and feel of the native platform (e.g. Windows, GTK+), or you can customize your own look and feel. 11

12 Sun s JRE menyediakan beberapa L&F CrossPlatformLookAndFeel merupakan "Java L&F" (nama lainnya "Metal") yang tampilannya mirip pada semua platform OS. Ada di Java API (javax.swing.plaf.metal) dan merupakan setting L&F default. SystemLookAndFeel merupakan L&F yang mengikuti tampilan OS tempat aplikasi berjalan. Sistem L&F ditentukan saat runtime. Synth L&F yang dapat dimodifikasi sendiri dengan file XML. Multiplexing cara method UI untuk mendelegasikan ke beberapa L&F pada waktu yang sama. 12 viska@unsyiah.ac.id

13 SystemLookAndFeel Platform Solaris, Linux with GTK+ 2.2 or later Other Solaris, Linux IBM UNIX HP UX Classic Windows Windows XP Windows Vista Macintosh Look and Feel GTK+ Motif IBM* HP* Windows Windows XP Windows Vista Macintosh* 13

14 Tema Ocean pada cross-platform Java (Metal) L&F 14

15 Tema Steel pada cross-platform Java (Metal) L&F 15

16 16 Nimbus

17 Nimbus Look & Feel Nimbus merupakan polished cross-platform look and feel yang diperkenalkan di rilis Java SE 6 Update 10 (6u10). 17 viska@unsyiah.ac.id

18 Nimbus L&F Nimbus menggunakan grafis vector Java 2D untuk menggambar User Interface (UI). Jadi tampilan UI menjadi lebih cantik pada resolusi berapapun. Nimbus dapat diubah-ubah. Namun anda dapat menggunakan Nimbus L&F default juga. 18

19 Scalable components Vector based di Nimbusvs bitmap base di Metal L&F 19

20 Cara menggunakan Nimbus Waktu runtime java -Dswing.defaultlaf=javax.swing.plaf.nimbus.NimbusLookAndFeel MyApp Dalam coding, tambahkan sebelum membuat komponen GUI import javax.swing.uimanager.*; try { for (LookAndFeelInfo info : UIManager.getInstalledLookAndFeels()) { if ("Nimbus".equals(info.getName())) { UIManager.setLookAndFeel(info.getClassName()); break; } } } catch (Exception e) { // If Nimbus is not available, you can set the GUI to another look and feel. } 20 viska@unsyiah.ac.id

21 Mengubah tampilan Nimbus Tampilan Nimbus dapat dimodifikasi, seperti: Resizing a component: ada 4 size yaitu mini, small, regular, large Changing the color theme Skinning a component 21 viska@unsyiah.ac.id