Kita boleh menggunakan Cascading Style Sheets (CSS) untuk menghias program kita. CSS selalunya digunakan untuk menghias website. Selalu kita nampak setiap website mempunyai button, menu, dan background yang lain daripada website lain. Sebenarnya CSS yang menghias website tersebut.

Format CSS adalah seperti berikut:

<selector> {
    <property>: <value>;
    <property>: <value>;
}

Contohnya,

.button {
  background-color: black;
  font-size: 20;
  font-family: “Arial”
}

Untuk JavaFX ada sedikit tambahan pada nama property, iaitu ‘-fx-‘, contohnya,

.button {
    -fx-background-color: black
}

Sekarang kita akan menghias program kita sebelum ini, iaitu program HelloJavaFX.

Create file CSS

Sebelum itu, seperti biasa kita akan membuat package baru untuk menyimpan semua file CSS dan gambar-gambar (jika ada).

Klik kanan pada package hellojavafx, kemudian New, dan klik Java Package. Kita namakan package ini sebagai hellojavafx.style. Klik Finish.

Untuk create file CSS, klik kanan pada package style, kemudian New, dan klik Empty File. Namakan apa-apa sahaja jadi kita namakan file tersebut sebagai home.css. Klik Finish.

Background

Kita boleh menggunakan gambar sebagai background. Di sini saya menggunakan gambar dari FreeDigitalPhotos.net. Terpulang kepada anda untuk menggunakan gambar apa.

Hati-hati jika anda mengambil mana-mana gambar dari internet kerana gambar tersebut merupakan hak milik orang lain. Jika ada gambar-gambar yang boleh digunakan tanpa royalti seperti gambar yang saya gunakan itu, pastikan betul-betul yang gambar itu boleh digunakan. Gambar yang saya gunakan itu boleh digunakan secara free dengan syarat dinyatakan sumber gambar tersebut diambil.

Cara alternatif adalah dengan membuat gambar sendiri menggunakan software seperti GIMP atau Photoshop.

Setelah dapat gambar untuk digunakan, letakkan gambar tersebut di dalam folder yang sama dengan file CSS. Kita boleh namakan file tersebut sebagai background.jpg.

Button

Saya tidak berapa mahir sangat dalam designing, jadi saya search mana-mana CSS generator secara online. Untuk button, saya menggunakan CSS Button Generator, jumpa di Google dengan keyword ‘css button’.

Kelebihan menggunakan CSS ialah kita dapat menukar sesuatu style mengikut apa yang user lakukan. Contohnya, kita mahu button bertukar warna sebaik sahaja user klik pada button tersebut. Berikut ialah selector yang boleh digunakan pada button untuk tujuan ini:

  • :hover – tukar style jika user meletakkan mouse di atas button

  • :pressed – tukar style jika user klik pada button

File ‘home.css’

Setelah mengambil kira semua perkara di atas, akhirnya file home.css kita akan jadi seperti ini:

.root {
    -fx-background-image: url("background.jpg");
}

.button {
    -fx-background-color: linear-gradient(to bottom, #3498db, #2980b9);
    -fx-background-radius: 28;
    -fx-text-fill: white;
    -fx-font-family: sans-serif;
    -fx-opacity: 0.6;
}

.button:hover {
    -fx-opacity: 1.0;
}

.button:pressed {
    -fx-background-color: linear-gradient(to bottom, #3cb0fd, #3498db);
}

.label {
    -fx-font-family: sans-serif;
    -fx-font-weight: bold;
    -fx-text-fill: green;
}

Scene Builder

Selepas siap file CSS, kita perlu memberitahu file FXML untuk menggunakan file CSS tersebut. Salah satu cara adalah dengan menggunakan Scene Builder.

Double-click Home.fxml untuk membuka Scene Builder. Klik pada Pane yang di bawah sekali iaitu AnchorPane dan tetapkan file CSS di menu sebelah kanan bahagian Properties.

Gambar menetapkan file CSS pada FXML menggunakan Scene Builder

Sekarang kita boleh nampak preview kepada program kita sudah bertukar. Save dan tutup Scene Builder.

Kita boleh run program kita untuk melihat hasilnya.

Gambar demo HelloJavaFX dengan CSS

CSS Analyzer

Semasa kita menulis CSS, ada masa kita tidak tahu apa property yang boleh ditukar untuk sesuatu control. Jangan khuatir kerana kita boleh menggunakan CSS Analyzer di Scene Builder.

Untuk membuka CSS Analyzer, klik View di menu atas dan klik Show CSS Analyzer.

Gambar Show CSS Analyzer

Setelah selesai, CSS Analyzer akan terpapar di bawah.

Nama selector untuk sesebuah control juga boleh dilihat di Styleable Path:

Gambar menunjukkan nama selector untuk control

Edit secara live

Scene Builder juga boleh digunakan untuk melihat secara live sesuatu style yang kita tukar. Fungsi ini terletak di menu sebelah kanan bahagian Properties:

Gambar edit CSS secara live

Cuma kekurangannya CSS yang kita tulis di Scene Builder tidak disimpan di file CSS, sebaliknya disimpan di dalam file FXML. Kita asingkan file CSS dengan file FXML supaya projek lebih tersusun, dan juga supaya designer mudah mencari file tersebut.