JavaFX - सीएसएस

Cascading Style Sheets, जिसे सीएसएस के रूप में भी जाना जाता है, एक सरल डिजाइन भाषा है जिसका उद्देश्य वेब पृष्ठों को प्रस्तुत करने की प्रक्रिया को सरल बनाना है।

CSS वेब पेज का लुक और फील हिस्सा संभालती है। CSS का उपयोग करके, आप टेक्स्ट के रंग, फोंट की शैली, पैराग्राफ के बीच रिक्ति, कॉलम का आकार और लेआउट को नियंत्रित कर सकते हैं। इनके अलावा, आप उपयोग की जाने वाली पृष्ठभूमि छवियों या रंगों को भी नियंत्रित कर सकते हैं, लेआउट डिज़ाइन, विभिन्न उपकरणों के प्रदर्शन में भिन्नता और स्क्रीन आकार के साथ-साथ कई अन्य प्रभाव भी।

JavaFX में सीएसएस

JavaFX आपको एप्लीकेशन के रंगरूप को बढ़ाने के लिए CSS का उपयोग करने की सुविधा प्रदान करता है। पैकेजjavafx.css JavaFX अनुप्रयोगों के लिए CSS लागू करने के लिए उपयोग की जाने वाली कक्षाएं शामिल हैं।

CSS में स्टाइल नियम शामिल होते हैं जो ब्राउज़र द्वारा व्याख्या किए जाते हैं और फिर आपके दस्तावेज़ में संबंधित तत्वों पर लागू होते हैं।

एक शैली नियम तीन भागों से बना है, जो हैं -

• Selector- एक चयनकर्ता एक HTML टैग है जिस पर एक शैली लागू की जाएगी। यह किसी भी टैग की तरह हो सकता है<h1> या <table>, आदि।

• Property- एक संपत्ति HTML टैग की विशेषता का एक प्रकार है। सरल शब्दों में, सभी HTML विशेषताएँ CSS गुणों में परिवर्तित हो जाती हैं। वे रंग हो सकते हैं,border, आदि।

• Value- मान संपत्तियों को सौंपा गया है। उदाहरण के लिए, एक रंग संपत्ति का मान भी हो सकता हैred या #F1F1F1, आदि।

आप सीएसएस स्टाइल नियम सिंटैक्स को इस प्रकार रख सकते हैं -

selector { property: value }

JavaFX द्वारा उपयोग की जाने वाली डिफ़ॉल्ट शैली शीट है modena.css। यह जावाएफएक्स रनटाइम जार में पाया जाता है।

अपनी खुद की स्टाइल शीट जोड़ना

आप जावाएफएक्स में एक दृश्य में अपनी खुद की स्टाइल शीट जोड़ सकते हैं -

Scene scene = new Scene(new Group(), 500, 400); 
scene.getStylesheets().add("path/stylesheet.css");

इनलाइन स्टाइल शीट्स जोड़ना

आप इन-लाइन शैलियों का उपयोग करके भी जोड़ सकते हैं setStyle()तरीका। इन शैलियों में केवल कुंजी-मूल्य जोड़े शामिल हैं और वे उन नोड्स पर लागू होते हैं जिन पर वे सेट होते हैं। इनलाइन स्टाइल शीट को एक बटन पर सेट करने का एक नमूना कोड निम्नलिखित है।

.button { 
   -fx-background-color: red; 
   -fx-text-fill: white; 
}

उदाहरण

मान लें कि हमने एक JavaFX एप्लिकेशन विकसित किया है जो एक टेक्स्ट फील्ड, पासवर्ड फील्ड, दो बटन के साथ एक फॉर्म प्रदर्शित करता है। डिफ़ॉल्ट रूप से, यह फ़ॉर्म निम्न स्क्रीनशॉट में दिखाया गया है -

निम्नलिखित कार्यक्रम एक उदाहरण है जो दर्शाता है कि JavaFX में उपरोक्त एप्लिकेशन में शैलियों को कैसे जोड़ा जाए।

इस कोड को नाम वाली फ़ाइल में सहेजें CssExample.java

import javafx.application.Application; 
import static javafx.application.Application.launch; 
import javafx.geometry.Insets; 
import javafx.geometry.Pos; 
import javafx.scene.Scene; 
import javafx.scene.control.Button; 
import javafx.scene.control.PasswordField; 
import javafx.scene.layout.GridPane; 
import javafx.scene.text.Text; 
import javafx.scene.control.TextField; 
import javafx.stage.Stage;  

public class CssExample extends Application { 
   @Override 
   public void start(Stage stage) {      
      //creating label email 
      Text text1 = new Text("Email");       
      
      //creating label password 
      Text text2 = new Text("Password"); 
       
      //Creating Text Filed for email        
      TextField textField1 = new TextField();       
      
      //Creating Text Filed for password        
      PasswordField textField2 = new PasswordField();  
       
      //Creating Buttons 
      Button button1 = new Button("Submit"); 
      Button button2 = new Button("Clear");  
      
      //Creating a Grid Pane 
      GridPane gridPane = new GridPane();    
      
      //Setting size for the pane 
      gridPane.setMinSize(400, 200);
      
      //Setting the padding  
      gridPane.setPadding(new Insets(10, 10, 10, 10)); 
      
      //Setting the vertical and horizontal gaps between the columns 
      gridPane.setVgap(5); 
      gridPane.setHgap(5);       
      
      //Setting the Grid alignment 
      gridPane.setAlignment(Pos.CENTER); 
       
      //Arranging all the nodes in the grid 
      gridPane.add(text1, 0, 0); 
      gridPane.add(textField1, 1, 0); 
      gridPane.add(text2, 0, 1);       
      gridPane.add(textField2, 1, 1); 
      gridPane.add(button1, 0, 2); 
      gridPane.add(button2, 1, 2); 
       
      //Styling nodes  
      button1.setStyle("-fx-background-color: darkslateblue; -fx-text-fill: white;"); 
      button2.setStyle("-fx-background-color: darkslateblue; -fx-text-fill: white;"); 
       
      text1.setStyle("-fx-font: normal bold 20px 'serif' "); 
      text2.setStyle("-fx-font: normal bold 20px 'serif' ");  
      gridPane.setStyle("-fx-background-color: BEIGE;"); 
       
      // Creating a scene object 
      Scene scene = new Scene(gridPane); 
       
      // Setting title to the Stage   
      stage.setTitle("CSS Example"); 
         
      // Adding scene to the stage 
      stage.setScene(scene);
      
      //Displaying the contents of the stage 
      stage.show(); 
   } 
   public static void main(String args[]){ 
      launch(args); 
   } 
}

निम्न कमांड का उपयोग करके कमांड प्रॉम्प्ट से सहेजे गए जावा फ़ाइल को संकलित और निष्पादित करें।

javac CssExample.java 
java CssExample

निष्पादित करने पर, उपरोक्त कार्यक्रम एक JavaFX विंडो बनाता है जैसा कि नीचे दिखाया गया है।