JavaFX CSS (Cascading Style Sheets) একটি শক্তিশালী উপাদান যা JavaFX অ্যাপ্লিকেশনগুলির ইউজার ইন্টারফেসকে স্টাইল এবং কাস্টমাইজ করার জন্য ব্যবহৃত হয়। JavaFX CSS ব্যবহার করে আপনি অ্যাপ্লিকেশনের গ্রাফিক্যাল উপাদানগুলির ডিজাইন এবং লেআউট কাস্টমাইজ করতে পারেন, ঠিক যেমন HTML এ CSS ব্যবহার করা হয়।
JavaFX CSS ব্যবহার করা হয় JavaFX Scene Graph এর বিভিন্ন নোডে, যেমন Button, TextField, Label, HBox, VBox ইত্যাদি উপাদানগুলিতে।
ধরি, আমরা একটি JavaFX অ্যাপ্লিকেশন তৈরি করেছি যেখানে CSS স্টাইলিং ব্যবহার করা হবে।
sample.fxml (FXML ফাইল):<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.layout.StackPane?>
<StackPane xmlns:fx="http://javafx.com/fxml/1" fx:controller="sample.Controller">
<Button text="Click Me!" id="myButton"/>
</StackPane>
এখানে, একটি Button তৈরি করা হয়েছে যার id="myButton" দেওয়া হয়েছে। এই id দিয়ে আমরা CSS ফাইলের মধ্যে বাটনের স্টাইল নির্ধারণ করব।
style.css (CSS ফাইল):/* Button Styling */
#myButton {
-fx-background-color: #3498db;
-fx-text-fill: white;
-fx-font-size: 16px;
-fx-padding: 10px 20px;
-fx-border-radius: 5px;
-fx-background-radius: 5px;
}
/* StackPane Styling */
.root {
-fx-background-color: #ecf0f1;
-fx-alignment: center;
-fx-padding: 20px;
}
ব্যাখ্যা:
-fx-background-color: বাটনের পটভূমির রঙ সেট করেছে (নীল).-fx-text-fill: বাটনের টেক্সটের রঙ সাদা করা হয়েছে।-fx-font-size: বাটনের ফন্ট সাইজ ১৬px নির্ধারণ করা হয়েছে।-fx-padding: বাটনের চারপাশে প্যাডিং যোগ করা হয়েছে।-fx-border-radius এবং -fx-background-radius: বাটনের কোণার রেডিয়াস (পৃথকভাবে ব্যাকগ্রাউন্ড এবং বর্ডার) সেট করা হয়েছে।-fx-background-color: StackPane এর পটভূমির রঙ রাখা হয়েছে হালকা গ্রে।-fx-alignment: স্ট্যাকপেনের কন্টেন্টের অবস্থান কেন্দ্রের মধ্যে রাখা হয়েছে।-fx-padding: স্ট্যাকপেনের চারপাশে প্যাডিং দেওয়া হয়েছে।Controller.java (Controller ক্লাস):package sample;
import javafx.fxml.FXML;
import javafx.scene.control.Button;
public class Controller {
@FXML
private Button myButton;
// Button click handler
@FXML
private void handleButtonClick() {
myButton.setText("Clicked!");
}
}
ব্যাখ্যা:
@FXML অ্যানোটেশন দ্বারা myButton কে FXML ফাইলের সাথে সংযুক্ত করা হয়েছে।handleButtonClick() মেথড বাটনে ক্লিক করলে বাটনের টেক্সট পরিবর্তন করবে।Main.java (Main Application ক্লাস):package sample;
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Scene;
import javafx.stage.Stage;
public class Main extends Application {
@Override
public void start(Stage primaryStage) throws Exception {
// Load FXML file
FXMLLoader loader = new FXMLLoader(getClass().getResource("sample.fxml"));
primaryStage.setTitle("JavaFX CSS Styling Example");
// Create scene and apply CSS
Scene scene = new Scene(loader.load(), 300, 250);
scene.getStylesheets().add(getClass().getResource("style.css").toExternalForm());
// Set scene to stage
primaryStage.setScene(scene);
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}
ব্যাখ্যা:
scene.getStylesheets().add(getClass().getResource("style.css").toExternalForm()): এখানে CSS ফাইলটি Scene-এ যুক্ত করা হয়েছে, যাতে UI উপাদানগুলোর স্টাইল প্রয়োগ করা যায়।project-folder/
|-- src/
| |-- sample/
| |-- Main.java
| |-- Controller.java
| |-- sample.fxml
| |-- style.css
|-- lib/
|-- bin/
Button, Label, TextField, VBox, HBox, GridPane ইত্যাদি CSS ব্যবহার করে স্টাইল করা যায়।#id (ID সিলেক্টর): নির্দিষ্ট ID-এ স্টাইল প্রয়োগ করা হয় (যেমন, #myButton)..class (ক্লাস সিলেক্টর): একই ক্লাসের সমস্ত উপাদানে স্টাইল প্রয়োগ করা হয়।* (Universal Selector): সমস্ত উপাদানে স্টাইল প্রয়োগ করা হয়।-fx-background-color, -fx-text-fill, -fx-border-color-fx-font-size, -fx-font-family, -fx-font-weight-fx-border-width, -fx-border-radius-fx-padding, -fx-margin-fx-alignment-fx-pref-width, -fx-pref-height এবং -fx-min-width, -fx-max-width ইত্যাদি ব্যবহার করে উপাদানগুলির আকার নিয়ন্ত্রণ করতে পারেন।এভাবে JavaFX এর CSS স্টাইলিং ব্যবহার করে আপনি আপনার অ্যাপ্লিকেশনের UI ডিজাইন করতে পারেন এবং সহজেই কাস্টমাইজেশন ও থিম তৈরি করতে পারেন।
JavaFX এ CSS (Cascading Style Sheets) ব্যবহারের মাধ্যমে ইউজার ইন্টারফেস (UI) ডিজাইনকে আরও সুন্দর, আধুনিক এবং কাস্টমাইজ করা যায়। CSS মূলত UI উপাদানগুলির স্টাইলিং বা চেহারা পরিবর্তন করতে ব্যবহৃত হয়, যেমন রঙ, আকার, মার্জিন, প্যাডিং, ফন্ট স্টাইল, ব্যাকগ্রাউন্ড ইত্যাদি।
JavaFX এর সাথে CSS ব্যবহার করার সুবিধা হলো এটি Java কোড থেকে UI এর স্টাইল আলাদা করে রাখে, ফলে UI ডিজাইন এবং লজিকের মধ্যে একটি পরিষ্কার বিচ্ছেদ তৈরি হয়। এর মাধ্যমে ডেভেলপাররা UI উপাদানগুলির স্টাইলিং এবং ডেভেলপাররা লজিকাল কোড পৃথকভাবে কাজ করতে পারেন।
CSS দিয়ে JavaFX অ্যাপ্লিকেশনের দৃশ্যমান অংশের স্টাইল এবং আচরণ নিয়ন্ত্রণ করা সম্ভব। JavaFX-এর UI উপাদানগুলি (যেমন Button, Label, TextField, Pane, Scene ইত্যাদি) CSS দিয়ে কাস্টমাইজ করা যায়।
JavaFX এ CSS ব্যবহার করার দুটি প্রধান উপায় আছে:
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;
public class InlineCSSExample extends Application {
@Override
public void start(Stage primaryStage) {
// বাটন তৈরি করা
Button btn = new Button("Click Me");
// Inline CSS এর মাধ্যমে বাটনের স্টাইল দেওয়া
btn.setStyle("-fx-background-color: #FF6347; -fx-text-fill: white; -fx-font-size: 14px;");
// StackPane তৈরি করা এবং বাটন যোগ করা
StackPane root = new StackPane();
root.getChildren().add(btn);
// সীন এবং স্টেজ সেট করা
Scene scene = new Scene(root, 300, 200);
primaryStage.setTitle("Inline CSS Example");
primaryStage.setScene(scene);
// স্টেজটি শো করা
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}
এখানে আমরা একটি Button তৈরি করেছি এবং setStyle() মেথড ব্যবহার করে Inline CSS দিয়েছি। এই CSS-এ আমরা বাটনের ব্যাকগ্রাউন্ড কালার, টেক্সট কালার এবং ফন্ট সাইজ সেট করেছি।
এখন আমরা একটি বাইরের CSS ফাইল ব্যবহার করে JavaFX অ্যাপ্লিকেশন স্টাইলিং করবো।
styles.css):.button {
-fx-background-color: #4CAF50;
-fx-text-fill: white;
-fx-font-size: 14px;
-fx-padding: 10px 20px;
}
.label {
-fx-font-size: 18px;
-fx-text-fill: darkblue;
}
CSSFileExample.java):import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;
public class CSSFileExample extends Application {
@Override
public void start(Stage primaryStage) {
// বাটন এবং লেবেল তৈরি করা
Button btn = new Button("Click Me");
Label label = new Label("Welcome to JavaFX");
// StackPane তৈরি করা এবং উপাদানগুলো যোগ করা
StackPane root = new StackPane();
root.getChildren().addAll(btn, label);
// সীন তৈরি এবং স্টাইল ফাইল লোড করা
Scene scene = new Scene(root, 300, 200);
scene.getStylesheets().add("file:styles.css");
// স্টেজ সেট করা
primaryStage.setTitle("External CSS Example");
primaryStage.setScene(scene);
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}
এই উদাহরণে, আমরা একটি আলাদা styles.css ফাইল ব্যবহার করেছি, যেখানে বাটন এবং লেবেলের স্টাইল দেওয়া হয়েছে। JavaFX অ্যাপ্লিকেশনটির মধ্যে এই CSS ফাইলটি scene.getStylesheets().add("file:styles.css"); এর মাধ্যমে লোড করা হয়েছে।
JavaFX-এ CSS ব্যবহার করার সময় কিছু নির্দিষ্ট সিনট্যাক্স অনুসরণ করতে হয়:
-fx-background-color, -fx-font-size, -fx-padding, -fx-border-color ইত্যাদি।class এবং id সিলেক্টর ব্যবহার করা হয়। উদাহরণ হিসেবে, .button বা #label ক্লাস সিলেক্টর ব্যবহার করা যেতে পারে।:hover, :pressed, :focused ইত্যাদি ব্যবহার করা হয়।Background Color:
-fx-background-color: #FF6347;
Font Size and Style:
-fx-font-size: 16px;
-fx-font-weight: bold;
Text Color:
-fx-text-fill: white;
Padding and Margin:
-fx-padding: 10px;
-fx-margin: 5px;
Border Styling:
-fx-border-color: black;
-fx-border-width: 2px;
Font Family:
-fx-font-family: "Arial";
JavaFX এ CSS স্টাইলিং ব্যবহার করে অ্যাপ্লিকেশনের গ্রাফিক্যাল ইউজার ইন্টারফেস (GUI) উন্নত করা যায়। এটি UI উপাদানগুলির জন্য একটি পরিষ্কার, শক্তিশালী এবং কার্যকরী কাস্টমাইজেশন সিস্টেম প্রদান করে। CSS এর মাধ্যমে সহজেই গ্রাফিক্স, টেক্সট, রঙ, ফন্ট, মার্জিন এবং প্যাডিং ইত্যাদি পরিবর্তন করা যায়, যা অ্যাপ্লিকেশনের চেহারা উন্নত করতে সহায়তা করে।
JavaFX এ CSS ব্যবহার করলে আপনি ইউজার ইন্টারফেসের উপাদানগুলিকে সুন্দরভাবে স্টাইল করতে পারেন। CSS (Cascading Style Sheets) একটি স্টাইল শীট ল্যাঙ্গুয়েজ যা HTML বা XML ডকুমেন্টের মধ্যে উপাদানগুলির প্রদর্শন নিয়ন্ত্রণ করতে ব্যবহৃত হয়। JavaFX এ আপনি External CSS এবং Inline CSS উভয়ই ব্যবহার করতে পারেন।
External CSS ব্যবহারে আপনি একটি আলাদা CSS ফাইল তৈরি করেন এবং সেই ফাইলটি JavaFX অ্যাপ্লিকেশনকে রেফারেন্স হিসেবে প্রদান করেন। এটি বড় অ্যাপ্লিকেশনগুলিতে স্টাইল ব্যবস্থাপনা সহজ করে তোলে এবং কোডের পুনঃব্যবহারযোগ্যতা বৃদ্ধি করে।
styles.css) যেখানে আপনি JavaFX উপাদানগুলির স্টাইল নির্ধারণ করবেন।/* styles.css */
.button {
-fx-background-color: #3498db;
-fx-text-fill: white;
-fx-font-size: 16px;
-fx-padding: 10px;
}
.label {
-fx-font-size: 20px;
-fx-text-fill: #2c3e50;
}
.root {
-fx-background-color: #ecf0f1;
}
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;
public class ExternalCSSExample extends Application {
@Override
public void start(Stage primaryStage) {
// একটি বাটন এবং লেবেল তৈরি করা
Button btn = new Button("Click Me");
Label lbl = new Label("Hello, JavaFX!");
// StackPane layout তৈরি করা
StackPane root = new StackPane();
root.getChildren().addAll(btn, lbl);
// CSS ফাইল প্রয়োগ করা
Scene scene = new Scene(root, 300, 250);
scene.getStylesheets().add(getClass().getResource("styles.css").toExternalForm());
// Scene এবং Stage সেট করা
primaryStage.setTitle("External CSS Example");
primaryStage.setScene(scene);
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}
এখানে কী হচ্ছে?
scene.getStylesheets().add(getClass().getResource("styles.css").toExternalForm()); এই লাইনটি বাহ্যিক CSS ফাইলটি JavaFX অ্যাপ্লিকেশনে যোগ করে।Inline CSS ব্যবহার করে আপনি JavaFX উপাদানগুলিতে সরাসরি স্টাইল সেট করতে পারেন, CSS ফাইলের প্রয়োজন ছাড়াই। এটি সাধারণত ছোট অ্যাপ্লিকেশন বা একক UI উপাদানের স্টাইল পরিবর্তনের জন্য ব্যবহৃত হয়।
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;
public class InlineCSSExample extends Application {
@Override
public void start(Stage primaryStage) {
// একটি বাটন তৈরি করা
Button btn = new Button("Click Me");
// Inline CSS প্রয়োগ করা
btn.setStyle("-fx-background-color: #3498db; -fx-text-fill: white; -fx-font-size: 16px;");
// একটি লেবেল তৈরি করা
Label lbl = new Label("Hello, JavaFX!");
// Inline CSS প্রয়োগ করা
lbl.setStyle("-fx-font-size: 20px; -fx-text-fill: #2c3e50;");
// StackPane layout তৈরি করা
StackPane root = new StackPane();
root.getChildren().addAll(btn, lbl);
// Scene তৈরি এবং সেট করা
Scene scene = new Scene(root, 300, 250);
primaryStage.setTitle("Inline CSS Example");
primaryStage.setScene(scene);
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}
এখানে কী হচ্ছে?
btn.setStyle(...) এবং lbl.setStyle(...) এর মাধ্যমে সরাসরি Inline CSS প্রয়োগ করা হয়েছে। এটি ইউজার ইন্টারফেস উপাদানগুলির স্টাইল পরিবর্তন করে।-fx-background-color: ব্যাকগ্রাউন্ড রঙ সেট করতে ব্যবহৃত হয়।-fx-text-fill: টেক্সটের রঙ নিয়ন্ত্রণ করে।-fx-font-size: ফন্ট সাইজ সেট করতে ব্যবহৃত হয়।-fx-padding: উপাদানটির চারপাশে প্যাডিং (অন্তর্বর্তী ফাঁকা স্থান) যোগ করে।.button, .label ইত্যাদি।/* Button Styling */
.button {
-fx-background-color: #3498db;
-fx-text-fill: white;
-fx-font-size: 16px;
-fx-padding: 10px;
}
/* Label Styling */
.label {
-fx-font-size: 20px;
-fx-text-fill: #2c3e50;
}
/* Root Layout Styling */
.root {
-fx-background-color: #ecf0f1;
}
JavaFX এ External CSS এবং Inline CSS দুই ধরনের CSS ব্যবহৃত হয়। External CSS আপনাকে একাধিক ফাইল ব্যবহার করে বড় অ্যাপ্লিকেশনে স্টাইলিং সুবিধা দেয়, যেখানে Inline CSS ছোট স্কেলে বা একক UI উপাদানগুলির জন্য ব্যবহার করা হয়। JavaFX এর CSS সমর্থন উন্নত এবং শক্তিশালী, যা ইউজার ইন্টারফেসের দৃশ্যমানতা এবং ব্যবহারের অভিজ্ঞতা উন্নত করে।
JavaFX এ, CSS ব্যবহার করে আপনি আপনার UI উপাদানগুলোর স্টাইল কাস্টমাইজ করতে পারেন। JavaFX CSS এর মাধ্যমে আপনি বিভিন্ন Selectors এবং Pseudo-classes ব্যবহার করে UI উপাদানগুলোর স্টাইল করতে পারেন। CSS এর এই ফিচারগুলো JavaFX অ্যাপ্লিকেশনের রূপ এবং অনুভূতি উন্নত করতে সাহায্য করে।
Selectors হল CSS-এর অংশ যা নির্দিষ্ট HTML বা JavaFX উপাদানগুলোর জন্য স্টাইল নির্ধারণ করে। JavaFX CSS এর Selectors আপনাকে UI উপাদানগুলোকে চিহ্নিত করতে এবং তাদের স্টাইল প্রয়োগ করতে সাহায্য করে।
এটি CSS এর সবচেয়ে সাধারণ ধরনের সিলেক্টর যা একটি নির্দিষ্ট উপাদানকে লক্ষ্য করে।
Button {
-fx-background-color: lightblue;
-fx-text-fill: black;
}
ব্যাখ্যা:
Button উপাদানের জন্য প্রযোজ্য। এটি বাটনের ব্যাকগ্রাউন্ড কালার lightblue এবং টেক্সট কালার black করে।ID সিলেক্টর ব্যবহার করে আপনি নির্দিষ্ট ID সহ উপাদানগুলোকে স্টাইল করতে পারেন।
#myButton {
-fx-background-color: yellow;
}
ব্যাখ্যা:
#myButton একটি ID সিলেক্টর যা শুধুমাত্র myButton ID সহ বাটনগুলোর জন্য স্টাইল প্রয়োগ করবে।ক্লাস সিলেক্টর ব্যবহার করে আপনি এক বা একাধিক উপাদানের জন্য স্টাইল প্রয়োগ করতে পারেন।
.button-style {
-fx-font-size: 14px;
-fx-padding: 10px;
}
ব্যাখ্যা:
.button-style ক্লাস সিলেক্টরটি সব বাটনগুলোর জন্য একটি স্টাইল প্রয়োগ করবে যেগুলোর ক্লাস button-style হবে।এটি একটি উপাদানের ভিতরে থাকা অন্য উপাদানগুলোকে লক্ষ্য করে।
VBox Button {
-fx-background-color: green;
}
ব্যাখ্যা:
VBox Button সিলেক্টরটি সব বাটনগুলোর জন্য প্রযোজ্য হবে যা VBox লেআউটের ভিতরে রয়েছে।Pseudo-classes হল CSS-এর একটি শক্তিশালী ফিচার, যা UI উপাদানের বিভিন্ন স্টেট (যেমন, হোভার, অ্যাকটিভ, ইনপুট ফোকাস) এর ভিত্তিতে স্টাইল পরিবর্তন করতে ব্যবহৃত হয়। JavaFX তে কিছু প্রচলিত Pseudo-classes ব্যবহার করা যায়।
:hover Pseudo-classএই পসুডো-ক্লাসটি তখন ব্যবহৃত হয় যখন ইউজার মাউস পয়েন্টারকে একটি UI উপাদান (যেমন, বাটন) এর উপর রাখে।
Button:hover {
-fx-background-color: darkgreen;
-fx-text-fill: white;
}
ব্যাখ্যা:
darkgreen এবং টেক্সট কালার white হবে।:pressed Pseudo-classএই পসুডো-ক্লাসটি তখন ব্যবহৃত হয় যখন UI উপাদানটি প্রেস করা হয়, যেমন বাটন ক্লিক করা।
Button:pressed {
-fx-background-color: red;
-fx-text-fill: white;
}
ব্যাখ্যা:
red এবং টেক্সট কালার white হবে।:focused Pseudo-classএই পসুডো-ক্লাসটি তখন ব্যবহৃত হয় যখন কোনো UI উপাদান (যেমন, টেক্সটফিল্ড) ফোকাস হয়।
TextField:focused {
-fx-border-color: blue;
}
ব্যাখ্যা:
TextField ফোকাসে থাকে, তখন এর বর্ডারের কালার blue হবে।:disabled Pseudo-classএই পসুডো-ক্লাসটি তখন ব্যবহৃত হয় যখন একটি UI উপাদান অক্ষম (disabled) থাকে।
Button:disabled {
-fx-background-color: gray;
-fx-text-fill: lightgray;
}
ব্যাখ্যা:
gray এবং টেক্সট কালার lightgray হবে।:selected Pseudo-classএই পসুডো-ক্লাসটি তখন ব্যবহৃত হয় যখন কোনো UI উপাদান নির্বাচিত থাকে, যেমন চেকবক্স বা রেডিও বাটন।
RadioButton:selected {
-fx-background-color: yellow;
}
ব্যাখ্যা:
RadioButton নির্বাচিত (selected) থাকবে, তখন এর ব্যাকগ্রাউন্ড কালার yellow হবে।এখানে একটি উদাহরণ দেওয়া হলো যেখানে আমরা CSS সিলেক্টর এবং পসুডো-ক্লাস ব্যবহার করে JavaFX অ্যাপ্লিকেশন ডিজাইন করব।
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;
public class JavaFXCSSExample extends Application {
@Override
public void start(Stage primaryStage) {
// বাটন তৈরি
Button button = new Button("Click Me");
// StackPane লেআউট তৈরি
StackPane root = new StackPane();
root.getChildren().add(button);
// Scene তৈরি এবং CSS স্টাইল সেট করা
Scene scene = new Scene(root, 300, 200);
scene.getStylesheets().add(getClass().getResource("style.css").toExternalForm());
primaryStage.setTitle("JavaFX CSS Example");
primaryStage.setScene(scene);
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}
style.css (CSS ফাইল):
/* Button Styling */
Button {
-fx-background-color: lightblue;
-fx-text-fill: black;
-fx-font-size: 14px;
}
/* Hover effect */
Button:hover {
-fx-background-color: darkgreen;
-fx-text-fill: white;
}
/* Pressed effect */
Button:pressed {
-fx-background-color: red;
-fx-text-fill: white;
}
/* Disabled Button */
Button:disabled {
-fx-background-color: gray;
-fx-text-fill: lightgray;
}
Button তৈরি করা হয়েছে এবং এর CSS স্টাইলিং করা হয়েছে style.css ফাইলে।Button:hover এবং Button:pressed পসুডো-ক্লাস ব্যবহার করে বাটনের হোভার এবং প্রেস অবস্থায় ব্যাকগ্রাউন্ড এবং টেক্সট কালার পরিবর্তন করা হয়েছে।JavaFX এর CSS সিলেক্টর এবং পসুডো-ক্লাস ব্যবহার করে আপনি UI উপাদানগুলোর স্টাইলিং খুব সহজে কাস্টমাইজ করতে পারেন। CSS সিলেক্টর এবং পসুডো-ক্লাস যেমন :hover, :pressed, :focused, এবং :disabled আপনাকে ইন্টারেক্টিভ এবং দৃষ্টিনন্দন ইউজার ইন্টারফেস ডিজাইন করতে সাহায্য করে। JavaFX এ CSS এর মাধ্যমে আপনি অ্যাপ্লিকেশনের রূপ এবং অনুভূতি উন্নত করতে পারবেন।
JavaFX অ্যাপ্লিকেশনগুলিতে কাস্টম স্টাইলিং করার জন্য CSS (Cascading Style Sheets) ব্যবহার করা হয়। JavaFX CSS আপনাকে Scene এবং তার উপাদানগুলির জন্য কাস্টম স্টাইল তৈরি করার সুবিধা দেয়, যেমন বাটন, টেক্সটফিল্ড, লেবেল, গ্রিড, এবং অন্যান্য UI কন্ট্রোলের রং, আকার, প্যাডিং, মার্জিন ইত্যাদি।
এখানে আমরা দেখব কীভাবে JavaFX-এ Custom CSS তৈরি এবং Scene-এ প্রয়োগ করা যায়।
style.css (Custom CSS ফাইল):/* Root container styling */
.root {
-fx-background-color: #f4f4f9;
-fx-padding: 20px;
}
/* Button styling */
.myButton {
-fx-background-color: #3498db;
-fx-text-fill: white;
-fx-font-size: 16px;
-fx-padding: 10px 20px;
-fx-border-radius: 5px;
-fx-background-radius: 5px;
}
/* Button hover effect */
.myButton:hover {
-fx-background-color: #2980b9;
}
/* Label styling */
.myLabel {
-fx-font-size: 18px;
-fx-text-fill: #2c3e50;
-fx-font-weight: bold;
}
/* TextField styling */
.myTextField {
-fx-background-color: #ecf0f1;
-fx-border-color: #bdc3c7;
-fx-border-radius: 5px;
-fx-padding: 5px 10px;
}
/* StackPane background color */
.stackPane {
-fx-background-color: #ffffff;
-fx-border-radius: 10px;
-fx-padding: 10px;
}
ব্যাখ্যা:
.root: এটি পুরো Scene এর জন্য স্টাইলিং, যেখানে ব্যাকগ্রাউন্ড রঙ এবং প্যাডিং নির্ধারণ করা হয়েছে।.myButton: একটি বাটন কাস্টম ক্লাসের জন্য স্টাইল। এর মধ্যে বাটনের ব্যাকগ্রাউন্ড, টেক্সট রঙ, ফন্ট সাইজ, প্যাডিং এবং বর্ডার রেডিয়াস নির্ধারণ করা হয়েছে।.myButton:hover: বাটনের উপর মাউস রেখে গেলে, রঙ পরিবর্তন করার জন্য হোভার প্রভাব।.myLabel: লেবেলের জন্য স্টাইলিং, যা ফন্ট সাইজ, রঙ এবং বোল্ড ফন্ট ব্যবহার করে।.myTextField: টেক্সটফিল্ডের ব্যাকগ্রাউন্ড, বর্ডার রঙ, প্যাডিং ইত্যাদি।.stackPane: StackPane এর জন্য ব্যাকগ্রাউন্ড রঙ এবং প্যাডিং।sample.fxml (FXML ফাইল):<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.layout.StackPane?>
<?import javafx.scene.layout.VBox?>
<?import javafx.scene.control.TextField?>
<StackPane xmlns:fx="http://javafx.com/fxml/1" fx:controller="sample.Controller" fx:id="root">
<VBox alignment="CENTER" spacing="20">
<Label text="Welcome to JavaFX!" fx:id="myLabel" styleClass="myLabel"/>
<TextField fx:id="myTextField" promptText="Enter something..." styleClass="myTextField"/>
<Button text="Click Me!" fx:id="myButton" styleClass="myButton" onAction="#handleButtonClick"/>
</VBox>
</StackPane>
ব্যাখ্যা:
styleClass="myLabel", styleClass="myTextField", এবং styleClass="myButton": FXML-এ আমরা স্টাইল ক্লাস অ্যাট্রিবিউট ব্যবহার করে CSS স্টাইলিং ক্লাসগুলি যুক্ত করেছি।onAction="#handleButtonClick": এটি একটি ইভেন্ট হ্যান্ডলার যা বাটন ক্লিক হলে Java কোডে একটি মেথড কল করবে।Controller.java (Controller ক্লাস):package sample;
import javafx.fxml.FXML;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.control.TextField;
public class Controller {
@FXML
private Button myButton;
@FXML
private TextField myTextField;
@FXML
private Label myLabel;
@FXML
private void handleButtonClick() {
myLabel.setText("You entered: " + myTextField.getText());
}
}
ব্যাখ্যা:
@FXML অ্যানোটেশন দ্বারা, FXML ফাইল থেকে UI উপাদানগুলি (Button, Label, TextField) কন্ট্রোলারের সাথে যুক্ত করা হয়েছে।handleButtonClick() মেথড বাটনে ক্লিক করলে টেক্সটফিল্ডের ভিতরের টেক্সটটি লেবেলে দেখাবে।Main.java (Main Application ক্লাস):package sample;
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Scene;
import javafx.stage.Stage;
public class Main extends Application {
@Override
public void start(Stage primaryStage) throws Exception {
// Load FXML file
FXMLLoader loader = new FXMLLoader(getClass().getResource("sample.fxml"));
primaryStage.setTitle("JavaFX Custom CSS Example");
// Create scene and apply CSS
Scene scene = new Scene(loader.load(), 300, 250);
scene.getStylesheets().add(getClass().getResource("style.css").toExternalForm());
// Set scene to stage
primaryStage.setScene(scene);
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}
ব্যাখ্যা:
FXMLLoader দ্বারা FXML ফাইলটি লোড করা হচ্ছে।scene.getStylesheets().add(getClass().getResource("style.css").toExternalForm()) এর মাধ্যমে CSS ফাইলটি Scene-এ যোগ করা হচ্ছে।project-folder/
|-- src/
| |-- sample/
| |-- Main.java
| |-- Controller.java
| |-- sample.fxml
| |-- style.css
|-- lib/
|-- bin/
এভাবে আপনি JavaFX অ্যাপ্লিকেশনগুলিতে Custom CSS তৈরি এবং প্রয়োগ করে সুন্দর এবং ইন্টারেকটিভ ইউজার ইন্টারফেস ডিজাইন করতে পারেন।
Read more
or
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
