Styling dengan CSS Java FX

-

Styling dengan CSS Java FX

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: 25;
  font-family: “Times New Roman”
}
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 softwareseperti 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. Savedan 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.

Komentar

Posting Komentar

Postingan populer dari blog ini

Javafx Scene Builder

-
Gambar
Javafx Screen Builder itu apa sih? Bagi yang mengetahui Javafx, ia insya Allah mengetahui Javafx Scene Builder. Saya tidak berani mengatakan pasti loh :D. Javafx screen builder atau lebih singkatnya screen builder adalah semacam tool yang dapat digunakan untuk membuat design UI dari sebuah aplikasi. Javafx adalah penerus dari Java Swing, digunakan untuk membuat aplikasi java berbasis Graphical User Interface (GUI). Ya, aplikasi dengan user interface yang ciamik. Dengan screen builder, saya rasa sangat mudah sekali membuat layout aplikasi hanya tinggal drag and drop. Tak perlu pusing memikirkan fxml, karena screen builder ini seketika membuat secara otomatis file fxml. Seperti diketahui, fxml adalah file yang berformat xml, yang isinya adalah layout dari aplikasi Javafx. Wah, maaf kalau kata-katanya muter-muter.  Berikut saya berikan tampilan dari screen builder. Saya menggunakan screen builder versi 1.1. Gambar di atas adalah penampakan screen builder yang saya gunakan. ...
Baca selengkapnya

Hello JavaFX

-
Gambar
Hello JavaFX “1000 langkah bermula dari satu langkah pertama” Macam biasa, jika kita jumpa teknologi baru kita akan cuba bina program yang paling simple iaitu memaparkan  Hello, World! . Untuk membuat program JavaFX menggunakan Netbeans, klik  File  kemudian  New Project . Pilih kategori  JavaFX  dan pilih projek  JavaFX Application . Selepas klik  Next , kita diberi pilihan untuk menamakan nama projek kita. Namakan projek tersebut apa-apa sahaja, jadi sebagai contoh kita namakan projek ini sebagai  HelloJavaFX . Setelah selesai, kita akan dapat projek dengan file seperti ini: package hellojavafx; import javafx.application.Application; import javafx.event.ActionEvent; import javafx.event.EventHandler; import javafx.scene.Scene; import javafx.scene.control.Button; import javafx.scene.layout.StackPane; import javafx.stage.Stage; public class HelloJavaFX extends Application { @Override public void ...
Baca selengkapnya

FXML injection

-
Gambar
FXML injection Sekarang kita akan tambah fungsi kepada button tersebut menggunakan  FXML injection . Buka  HomeController.java  dan tambah code seperti berikut: package hellojavafx.view; import java.net.URL; import java.util.ResourceBundle; import javafx.event.ActionEvent; import javafx.fxml.FXML; import javafx.fxml.Initializable; public class HomeController implements Initializable { @FXML private void tulisHelloWorld (ActionEvent event) { System.out.println( "Hello World!" ); } /** * Initializes the controller class. */ @Override public void initialize (URL url, ResourceBundle rb) { // TODO } } Tips: Untuk  import  secara automatik menggunakan Netbeans, tekan Ctrl+Shift+I . Pastikan juga anda import dari package  javafx . FXML injection  ialah tanda  @FXML  yang kita letakkan pada method tulisHelloWorld() . Jika kita tidak letak  ...
Baca selengkapnya