GUI Nimbus Prepared by Viska Mutiawani
1
[email protected]
Subtopik GUI Nimbus Netbeans GUI Builder GUI dan Look & Feel Nimbus
2
[email protected]
Netbeans GUI Builder
3
[email protected]
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
[email protected]
Netbeans GUI Builder
5
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
[email protected]
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
[email protected]
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
[email protected]
Cara kerja Matisse? Mirip seperti Visual Studio pada Windows, Interface Builder pada Mac
Supports multiple OS'es
New layout manager – GroupLayout layout manager
8
This layout manager can be used separately
[email protected]
GUI dan Look & Feel
9
[email protected]
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
[email protected]
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
[email protected]
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
[email protected]
SystemLookAndFeel Platform
Look and Feel
Solaris, Linux with GTK+ 2.2 or GTK+ later
13
Other Solaris, Linux
Motif
IBM UNIX
IBM*
HP UX
HP*
Classic Windows
Windows
Windows XP
Windows XP
Windows Vista
Windows Vista
Macintosh
Macintosh*
[email protected]
Tema Ocean pada cross-platform Java (Metal) L&F
14
[email protected]
Tema Steel pada cross-platform Java (Metal) L&F
15
[email protected]
Nimbus
16
[email protected]
Nimbus Look & Feel
Nimbus merupakan ‘polished’ cross-platform look and feel yang diperkenalkan di rilis Java SE 6 Update 10 (6u10).
17
[email protected]
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
[email protected]
Scalable components
Vector based di Nimbusvs bitmap base di Metal L&F
19
[email protected]
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
[email protected]
Mengubah tampilan Nimbus
Tampilan Nimbus dapat dimodifikasi, seperti:
21
Resizing a component: ada 4 size yaitu mini, small, regular, large Changing the color theme Skinning a component
[email protected]