21
GUI Nimbus Prepared by Viska Mutiawani 1 [email protected]

GUI Nimbus - Jurusan Informatikainformatika.unsyiah.ac.id/~viska/pjl/P2-1 GUI Nimbus.pdf · 2015-03-11 · Netbeans GUI Builder ... Penggunaan Swing API dan layout manager sebetulnya

Embed Size (px)

Citation preview

Page 1: GUI Nimbus - Jurusan Informatikainformatika.unsyiah.ac.id/~viska/pjl/P2-1 GUI Nimbus.pdf · 2015-03-11 · Netbeans GUI Builder ... Penggunaan Swing API dan layout manager sebetulnya

GUI Nimbus

Prepared by Viska Mutiawani

1 [email protected]

Page 2: GUI Nimbus - Jurusan Informatikainformatika.unsyiah.ac.id/~viska/pjl/P2-1 GUI Nimbus.pdf · 2015-03-11 · Netbeans GUI Builder ... Penggunaan Swing API dan layout manager sebetulnya

Subtopik GUI Nimbus

Netbeans GUI Builder

GUI dan Look & Feel

Nimbus

2 [email protected]

Page 3: GUI Nimbus - Jurusan Informatikainformatika.unsyiah.ac.id/~viska/pjl/P2-1 GUI Nimbus.pdf · 2015-03-11 · Netbeans GUI Builder ... Penggunaan Swing API dan layout manager sebetulnya

Netbeans GUI Builder

3 [email protected]

Page 4: GUI Nimbus - Jurusan Informatikainformatika.unsyiah.ac.id/~viska/pjl/P2-1 GUI Nimbus.pdf · 2015-03-11 · Netbeans GUI Builder ... Penggunaan Swing API dan layout manager sebetulnya

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]

Page 5: GUI Nimbus - Jurusan Informatikainformatika.unsyiah.ac.id/~viska/pjl/P2-1 GUI Nimbus.pdf · 2015-03-11 · Netbeans GUI Builder ... Penggunaan Swing API dan layout manager sebetulnya

Netbeans GUI Builder

Nama lainnya: Matisse

Membuat form tanpa perlu pemahaman detil mengenai Swing

Good looking by default – spacing ishandled according to underlying OS's Lookand 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 easily5 [email protected]

Page 6: GUI Nimbus - Jurusan Informatikainformatika.unsyiah.ac.id/~viska/pjl/P2-1 GUI Nimbus.pdf · 2015-03-11 · Netbeans GUI Builder ... Penggunaan Swing API dan layout manager sebetulnya

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]

Page 7: GUI Nimbus - Jurusan Informatikainformatika.unsyiah.ac.id/~viska/pjl/P2-1 GUI Nimbus.pdf · 2015-03-11 · Netbeans GUI Builder ... Penggunaan Swing API dan layout manager sebetulnya

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]

Page 8: GUI Nimbus - Jurusan Informatikainformatika.unsyiah.ac.id/~viska/pjl/P2-1 GUI Nimbus.pdf · 2015-03-11 · Netbeans GUI Builder ... Penggunaan Swing API dan layout manager sebetulnya

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 [email protected]

Page 9: GUI Nimbus - Jurusan Informatikainformatika.unsyiah.ac.id/~viska/pjl/P2-1 GUI Nimbus.pdf · 2015-03-11 · Netbeans GUI Builder ... Penggunaan Swing API dan layout manager sebetulnya

GUI dan Look & Feel

9 [email protected]

Page 10: GUI Nimbus - Jurusan Informatikainformatika.unsyiah.ac.id/~viska/pjl/P2-1 GUI Nimbus.pdf · 2015-03-11 · Netbeans GUI Builder ... Penggunaan Swing API dan layout manager sebetulnya

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]

Page 11: GUI Nimbus - Jurusan Informatikainformatika.unsyiah.ac.id/~viska/pjl/P2-1 GUI Nimbus.pdf · 2015-03-11 · Netbeans GUI Builder ... Penggunaan Swing API dan layout manager sebetulnya

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]

Page 12: GUI Nimbus - Jurusan Informatikainformatika.unsyiah.ac.id/~viska/pjl/P2-1 GUI Nimbus.pdf · 2015-03-11 · Netbeans GUI Builder ... Penggunaan Swing API dan layout manager sebetulnya

Sun’s JRE menyediakan beberapa L&F

CrossPlatformLookAndFeel—merupakan "Java L&F" (nama lainnya "Metal") yang tampilannya mirip padasemua platform OS. Ada di Java API (javax.swing.plaf.metal) dan merupakan setting L&F default.

SystemLookAndFeel—merupakan L&F yang mengikutitampilan 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 kebeberapa L&F pada waktu yang sama.

12 [email protected]

Page 13: GUI Nimbus - Jurusan Informatikainformatika.unsyiah.ac.id/~viska/pjl/P2-1 GUI Nimbus.pdf · 2015-03-11 · Netbeans GUI Builder ... Penggunaan Swing API dan layout manager sebetulnya

SystemLookAndFeel

Platform Look and Feel

Solaris, Linux with GTK+ 2.2 or later

GTK+

Other Solaris, Linux Motif

IBM UNIX IBM*

HP UX HP*

Classic Windows Windows

Windows XP Windows XP

Windows Vista Windows Vista

Macintosh Macintosh*

13 [email protected]

Page 14: GUI Nimbus - Jurusan Informatikainformatika.unsyiah.ac.id/~viska/pjl/P2-1 GUI Nimbus.pdf · 2015-03-11 · Netbeans GUI Builder ... Penggunaan Swing API dan layout manager sebetulnya

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

14 [email protected]

Page 15: GUI Nimbus - Jurusan Informatikainformatika.unsyiah.ac.id/~viska/pjl/P2-1 GUI Nimbus.pdf · 2015-03-11 · Netbeans GUI Builder ... Penggunaan Swing API dan layout manager sebetulnya

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

15 [email protected]

Page 16: GUI Nimbus - Jurusan Informatikainformatika.unsyiah.ac.id/~viska/pjl/P2-1 GUI Nimbus.pdf · 2015-03-11 · Netbeans GUI Builder ... Penggunaan Swing API dan layout manager sebetulnya

Nimbus

16 [email protected]

Page 17: GUI Nimbus - Jurusan Informatikainformatika.unsyiah.ac.id/~viska/pjl/P2-1 GUI Nimbus.pdf · 2015-03-11 · Netbeans GUI Builder ... Penggunaan Swing API dan layout manager sebetulnya

Nimbus Look & Feel

Nimbus merupakan ‘polished’ cross-platform look and feel yang diperkenalkan di rilis Java SE 6 Update 10 (6u10).

17 [email protected]

Page 18: GUI Nimbus - Jurusan Informatikainformatika.unsyiah.ac.id/~viska/pjl/P2-1 GUI Nimbus.pdf · 2015-03-11 · Netbeans GUI Builder ... Penggunaan Swing API dan layout manager sebetulnya

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]

Page 19: GUI Nimbus - Jurusan Informatikainformatika.unsyiah.ac.id/~viska/pjl/P2-1 GUI Nimbus.pdf · 2015-03-11 · Netbeans GUI Builder ... Penggunaan Swing API dan layout manager sebetulnya

Scalable components

Vector based di Nimbusvs bitmap base di Metal L&F

19 [email protected]

Page 20: GUI Nimbus - Jurusan Informatikainformatika.unsyiah.ac.id/~viska/pjl/P2-1 GUI Nimbus.pdf · 2015-03-11 · Netbeans GUI Builder ... Penggunaan Swing API dan layout manager sebetulnya

Cara menggunakan Nimbus Waktu runtime

java -Dswing.defaultlaf=javax.swing.plaf.nimbus.NimbusLookAndFeelMyApp

Dalam coding, tambahkan sebelum membuat komponen GUIimport 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]

Page 21: GUI Nimbus - Jurusan Informatikainformatika.unsyiah.ac.id/~viska/pjl/P2-1 GUI Nimbus.pdf · 2015-03-11 · Netbeans GUI Builder ... Penggunaan Swing API dan layout manager sebetulnya

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 [email protected]