👩🏼‍🌾 🗿 💰 JavaFX, HelloWorld + CSS + FXML। अंत 👩‍👩‍👧‍👧 😣 🤳🏿

एक विंडोज पीसी पर ओरेकल द्वारा "गेटिंग स्टार्ट विद जावाएफएक्स" द्वारा प्रदान किए गए उदाहरण से हैलोवर्ल्ड। CSS का उपयोग करके लॉगिन और पासवर्ड इनपुट विंडो को बदलना, FXML में एक फॉर्म बनाना, और एक FXML फॉर्म में CSS का उपयोग करना। फिर से कमांड लाइन और सूक्ष्मताएं जो हमें ट्यूटोरियल में नहीं बताई गई थीं।

JavaFX के साथ आरंभ करने का पहला खंड बताता है कि सरलतम JavaFX एप्लिकेशन कैसे बनाया जाए जिसे आप यहाँ कमांड लाइन का उपयोग करके प्राप्त कर सकते हैं । दूसरे खंड में, एक लॉगिन और पासवर्ड प्रविष्टि विंडो बनाने का प्रस्ताव है। इसे यहां पहले आवेदन से बनाया गया है । नतीजतन, कोड आकार में थोड़ा बढ़ गया है।

HelloWorld.java

package helloworld; 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; import javafx.scene.layout.GridPane; import javafx.geometry.*; import javafx.scene.text.*; import javafx.scene.control.*; import javafx.scene.paint.*; import javafx.scene.layout.HBox; public class HelloWorld extends Application { public static void main(String[] args) { launch(args); } @Override public void start(Stage primaryStage) { primaryStage.setTitle("JavaFX Welcome"); GridPane grid = new GridPane(); grid.setAlignment(Pos.CENTER); grid.setHgap(10); grid.setVgap(10); grid.setPadding(new Insets(25, 25, 25, 25)); // grid.setGridLinesVisible(true); Text scenetitle = new Text("Welcome"); scenetitle.setFont(Font.font("Tahoma", FontWeight.NORMAL, 20)); grid.add(scenetitle, 0, 0, 2, 1); Label userName = new Label("User Name:"); grid.add(userName, 0, 1); TextField userTextField = new TextField(); grid.add(userTextField, 1, 1); Label pw = new Label("Password:"); grid.add(pw, 0, 2); PasswordField pwBox = new PasswordField(); grid.add(pwBox, 1, 2); Button btn = new Button("Sign in"); HBox hbBtn = new HBox(10); hbBtn.setAlignment(Pos.BOTTOM_RIGHT); hbBtn.getChildren().add(btn); grid.add(hbBtn, 1, 4); final Text actiontarget = new Text(); grid.add(actiontarget, 1, 6); btn.setOnAction(new EventHandler<ActionEvent>() { @Override public void handle(ActionEvent e) { actiontarget.setFill(Color.FIREBRICK); actiontarget.setText("Sign in button pressed"); } }); Scene scene = new Scene(grid, 300, 275); primaryStage.setScene(scene); scene.getStylesheets().add (HelloWorld.class.getResource("HelloWorld.css").toExternalForm()); primaryStage.show(); } }

संकलन करने, चलाने, जार में पैकेज और जार चलाने के लिए, प्रत्येक अपनी स्वयं की सीएमडी फ़ाइल में आदेश समान रहता है।

कमांड लाइन

 @"C:\Program Files\Java\jdk1.7.0_40\bin\javac" -d out -classpath "C:\Program Files\Java\jre7\lib\jfxrt.jar" src\helloworld\HelloWorld.java @"C:\Program Files\Java\jdk1.7.0_40\bin\java" -classpath "C:\Program Files\Java\jre7\lib\jfxrt.jar;.\out" helloworld.HelloWorld @"C:\Program Files\Java\jdk1.7.0_40\bin\javafxpackager" -createjar -appclass helloworld.HelloWorld -srcdir .\out -outfile HelloWorld -v @"C:\Program Files\Java\jre7\bin\java.exe" -jar HelloWorld.jar @pause

चलो तीसरे खंड से निपटते हैं। ट्यूटोरियल दूसरे खंड से रिक्त का उपयोग करने का सुझाव देता है। और हम यह करेंगे, केवल हम Login.java नहीं है, लेकिन HelloWorld.java। CSS फ़ाइल बनाने का समय आ गया है।

निर्देश (ट्यूटोरियल में) के बिंदुओं को अनदेखा करें जो आईडीई के साथ काम करने से संबंधित हैं। चौथा पैराग्राफ src \ login फ़ोल्डर में एक CSS फ़ाइल बनाने का प्रस्ताव करता है, हमारे मामले में यह src \ helloworld निकला। खैर, अभी के लिए, चलो इसे करते हैं, बस उसे कॉल करें, क्योंकि हम दुनिया को नमस्कार करना जारी रखते हैं, HelloWorld.css। हालांकि यह महत्वपूर्ण नहीं है।

छठा पैराग्राफ बताता है कि जावा कोड में क्या बदलाव करने की जरूरत है: लाइनों के बाद

 Scene scene = new Scene(grid, 300, 275); primaryStage.setScene(scene);

संदर्भ

 scene.getStylesheets().add (HelloWorld.class.getResource("HelloWorld.css").toExternalForm());

(फ़ाइलों और कक्षाओं के नाम के लिए समायोजित), ठीक पहले

 primaryStage.show();

इसके अलावा, ताकि पाठ वस्तुओं को सीएसएस फ़ाइल द्वारा किसी तरह नियंत्रित किया जा सके, आपको इन वस्तुओं को उचित पहचानकर्ता देना होगा। ऐसा करने के लिए, लाइनों को ढूंढें

 scenetitle.setFont(Font.font(“Tahoma”, FontWeight.NORMAL, 20));

और

 actiontarget.setFill(Color.FIREBRICK);

और उन्हें बदलना

 scenetitle.setId("welcome-text");

और

 actiontarget.setId("actiontarget");

क्रमशः। और इसे केवल मामले में बदलने के लिए बेहतर नहीं है, लेकिन इसे एक टिप्पणी के साथ बंद करें, और नीचे सुधार लाइन लिखें।

और, ज़ाहिर है, आपको स्टाइल शीट के साथ फाइल भरने की आवश्यकता है।

HelloWorld.css

 .root { -fx-background-image: url("background.jpg"); } .label { -fx-font-size: 12px; -fx-font-weight: bold; -fx-text-fill: #333333; -fx-effect: dropshadow( gaussian , rgba(255,255,255,0.5) , 0,0,0,1 ); } #welcome-text { -fx-font-size: 32px; -fx-font-family: "Arial Black"; -fx-fill: #818181; -fx-effect: innershadow( three-pass-box , rgba(0,0,0,0.7) , 6, 0.0 , 0 , 2 ); } #actiontarget { -fx-fill: FIREBRICK; -fx-font-weight: bold; -fx-effect: dropshadow( gaussian , rgba(255,255,255,0.5) , 0,0,0,1 ); } .button { -fx-text-fill: white; -fx-font-family: "Arial Narrow"; -fx-font-weight: bold; -fx-background-color: linear-gradient(#61a2b1, #2A5058); -fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.6) , 5, 0.0 , 0 , 1 ); } .button:hover { -fx-background-color: linear-gradient(#2A5058, #61a2b1); }

उन्होंने तुरंत सब कुछ भर दिया कि परिणाम, पृष्ठभूमि छवि, पाठ प्रभाव, बटन प्रभाव की प्रशंसा करते हुए तीसरे खंड का पाठ धीरे-धीरे छड़ी करने का प्रस्ताव है।

अरे हाँ, आपको बैकग्राउंड इमेज के लिए भी एक चित्र की आवश्यकता है ... खैर, मैंने डाउनलोड या ड्रा नहीं किया, लेकिन पहले वाले को कॉपी किया। पहली बार बैकग्राउंड आया (विडंबना, बस जगह में) फ़ोल्डर से "मेरी ड्रॉइंग्स \" नमूने के चित्र "- सूर्यास्त। जेपीजी। इसे Background.jpg का नाम दिया और सीएसएस फ़ाइल के बगल में रख दिया।

संकलित करें। सफलतापूर्वक। चलाएँ। यह काम नहीं करता है! हम त्रुटियों के आउटपुट का अध्ययन करते हैं। अक्सर सामना किया जाने वाला अज्ञात स्रोत, इसलिए, एक अज्ञात स्रोत, खतरनाक है। इसके अलावा, इस अपमान के बीच में सभी परिचित पत्र हैं:

 at helloworld.HelloWorld.start(HelloWorld.java:68)

और साठ-आठवीं पंक्ति में, हम बस CSS फ़ाइल से शैलियों को निकालते हैं। जिसे src \ helloworld के निर्देशों के अनुसार लगाया गया है। इस "शोध" के संदर्भ में, मैं यह भी विचार नहीं करना चाहता कि नेटबिन के लिए स्रोत फ़ोल्डर में इस फ़ाइल की आवश्यकता क्यों है (हालांकि मुझे लगता है)। लेकिन, चूंकि हमने कभी भी कहीं भी स्टाइलशीट के लिए रास्ता नहीं बताया है, इसलिए इसका उपयोग करने वाले के बगल में सीधे लेटना चाहिए। और अनपैक्ड प्रोग्राम को HelloWorld.class फ़ाइल से लॉन्च किया गया है, जो कि out \ helloworld \ में है। चलो वहाँ जाओ और इसे चित्र के साथ फेंक दो।

अब संकलन करता है और चलाता है। सच है, पृष्ठभूमि चित्र ट्यूटोरियल एक से बहुत अलग है, और लाल पृष्ठभूमि पर दबाए गए बटन के बारे में लाल-ईंट संदेश देखने में कठिन है, लेकिन ये ट्रिफ़ल्स हैं, और इसे बदला जा सकता है। एक और बात मज़ेदार है - अब जार पैकिंग कमांड दें और जार फ़ाइल चलाने का प्रयास करें।

भागो मत! और अगर वे एक कंसोल कमांड द्वारा लॉन्च किए गए थे, और फ़ाइल पर क्लिक करके नहीं, तो त्रुटियां दिखाई देती हैं, और उनमें से कुछ परिचित हैं ... चलो जार में चढ़ते हैं, जैसे कि यह एक संग्रह था। फ़ोल्डर संरचना com \ javafx \ main निहित है, जिसकी उपस्थिति javafxpackager उपयोगिता और मैटा-इन्फो द्वारा एक उपस्थिति के साथ सुनिश्चित की गई है, यह अब बहुत दिलचस्प नहीं है। और Helloworld फ़ोल्डर दिलचस्प है, जिसमें कोई HelloWorld.css नहीं है, लेकिन HelloWorld.bss है! यह पता चला है कि पैकर चीकली, हमारी टीम के बिना, सीएसएस को द्विआधारी रूप में निरस्त कर दिया। चेक? आइए .css एक्सटेंशन की .bss को साठवीं पंक्ति में प्रतिस्थापित करते हैं, संकलित करते हैं, लेकिन हम अभी शुरू नहीं करते हैं, लेकिन तुरंत जार पैक करें और चलाएं।

अब यह शुरू होता है। लेकिन, क्या शर्म की बात है, यह HelloWorld.class से शुरू नहीं होता है! विभिन्न मामलों के लिए स्रोत कोड के दो सेट न रखें। इसके अलावा, तेज डाउनलोड के लिए bss की सिफारिश की जाती है। वह कमांड जोड़ें जो हम css2bss.cmd फ़ाइल में लिखते हैं:

 @"C:\Program Files\Java\jdk1.7.0_40\bin\javafxpackager" -createbss -srcdir .\src\helloworld -outdir .\out\helloworld -srcfiles HelloWorld.css -v @pause

हम CSS और पृष्ठभूमि छवि फ़ाइलों को src \ helloworld \ में फेंक देंगे (जैसा कि हमने शुरुआत से ही हमसे मांग की थी), स्रोत फ़ाइल में हम उस पंक्ति में छोड़ देते हैं जहाँ getStylesheets (), एक्सटेंशन .bs है। संकलित करें। हम bss बनाते हैं। हम जार में पैक करते हैं। अब HelloWorld.class और HelloWorld.jar दोनों से चलाएं। और यह पता लगाने के लिए कि कौन सी शैलियों के लिए जिम्मेदार हैं, और उन्हें विभिन्न तरीकों से कैसे बदला जा सकता है, मैं अपने दम पर प्रस्तावित करता हूं। यह विषय सीधे JavaFX से संबंधित नहीं है।

खैर, ट्यूटोरियल का चौथा खंड एफएक्सएमएल है। प्रोग्राम कोड इतना बदल जाता है कि इसे फिर से लिखना आसान हो जाता है। और यहां तक कि पड़ोसी फ़ोल्डर में प्रोजेक्ट की एक प्रति बनाएँ, उदाहरण के लिए, GetStartFXML। वहाँ आपको पहले से ही पाँच बैच की फ़ाइलों की प्रतिलिपि बनाने और आउट और src \ helloworld फ़ोल्डर बनाने और स्रोत को अंतिम में रखने की आवश्यकता है।

HelloWorld.java

 package helloworld; import javafx.application.Application; import javafx.scene.Scene; import javafx.stage.Stage; import javafx.scene.*; import javafx.fxml.*; public class HelloWorld extends Application { public static void main(String[] args) { launch(args); } @Override public void start(Stage stage) throws Exception { Parent root = FXMLLoader.load(getClass().getResource("fxml_example.fxml")); Scene scene = new Scene(root, 300, 275); stage.setTitle("FXML Welcome"); stage.setScene(scene); stage.show(); } }

अगला, आपको चौथे खंड में बिखरे हुए फ़ाइल fxml_example.fxml को इकट्ठा करने की आवश्यकता है। चूंकि इसका डेटा मक्खी पर उठाया जाएगा, साथ ही सीएसएस फ़ाइल से, यह इसे उपयोग करने वाले HelloWorld.class फ़ाइल के बगल में तुरंत बनाने के लायक है, जो अभी तक मौजूद नहीं है। यही कारण है कि, बाहर \ helloworld में, इसलिए, हम पहले संकलन के पहले, अपने आप को स्वयं में एक सबफ़ोल्डर बनाएँगे।

fxml_example.fxml

 <?xml version="1.0" encoding="UTF-8"?> <?import java.net.*?> <?import javafx.geometry.*?> <?import javafx.scene.control.*?> <?import javafx.scene.layout.*?> <?import javafx.scene.text.*?> <GridPane fx:controller="helloworld.FXMLExampleController" xmlns:fx="http://javafx.com/fxml" alignment="center" hgap="10" vgap="10" styleClass="root"> <padding><Insets top="25" right="25" bottom="10" left="25"/></padding> <Text id="welcome-text" text="Welcome" GridPane.columnIndex="0" GridPane.rowIndex="0" GridPane.columnSpan="2"/> <Label text="User Name:" GridPane.columnIndex="0" GridPane.rowIndex="1"/> <TextField GridPane.columnIndex="1" GridPane.rowIndex="1"/> <Label text="Password:" GridPane.columnIndex="0" GridPane.rowIndex="2"/> <PasswordField fx:id="passwordField" GridPane.columnIndex="1" GridPane.rowIndex="2"/> <HBox spacing="10" alignment="bottom_right" GridPane.columnIndex="1" GridPane.rowIndex="4"> <Button text="Sign In" onAction="#handleSubmitButtonAction"/> </HBox> <Text fx:id="actiontarget" GridPane.columnIndex="1" GridPane.rowIndex="6"/> <stylesheets> <URL value="@HelloWorld.css" /> </stylesheets> </GridPane>

इस फ़ाइल में तुरंत CSS के साथ काम करना शामिल है, लेकिन कुछ खींचना क्यों? इसलिए, नए बनाए गए HelloWorld.css और background.jpg के बगल में रखें। अभी भी पर्याप्त बटन ईवेंट हैंडलिंग नहीं है। चौथा खंड एफएक्सएमएल में वर्णित अलग फाइल का उपयोग करने का सुझाव देता है: ग्रिडपेन एफएक्स: कंट्रोलर = "हेलोवर्ल्ड। एफएक्सएमएलएक्सप्लिमेंट कंट्रोलर"।

FXMLExampleController.java

 package helloworld; import javafx.event.ActionEvent; import javafx.fxml.FXML; import javafx.scene.text.Text; public class FXMLExampleController { @FXML private Text actiontarget; @FXML protected void handleSubmitButtonAction(ActionEvent event) { actiontarget.setText("Sign in button pressed"); } }

और हां, इसे भी संकलित करना न भूलें, जिसके लिए हम संकलन करने के लिए एक अतिरिक्त पंक्ति जोड़ते हैं। cmd। इसके अलावा, मैंने संकलन कमांड के सामने "कुत्ता" हटा दिया, यह देखने के लिए कि दोनों ने शुरू किया और काम किया:

 "C:\Program Files\Java\jdk1.7.0_25\bin\javac" -d out -classpath "C:\Program Files\Java\jre7\lib\jfxrt.jar" src\helloworld\HelloWorld.java "C:\Program Files\Java\jdk1.7.0_40\bin\javac" -d out -classpath "C:\Program Files\Java\jre7\lib\jfxrt.jar" src\helloworld\FXMLExampleController.java @pause

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

हालांकि, हालांकि यह काम करता है, चलो जार संग्रह पर एक नज़र डालें। वहाँ, वैसे, कोई HelloWorld.css फ़ाइल नहीं है, लेकिन एक .bs है, जैसा कि तीसरे खंड से उदाहरण में है। Fxml_example.fxml में HelloWorld.css का उल्लेख है। हालाँकि, क्लास और जार दोनों काम करते हैं। चलिए, पिछले उदाहरण के अनुसार, HelloWorld.css और background.jpg को s \ \ _owoworld से src \ helloworld (हम जगह में FXML फ़ाइल छोड़ देंगे) में स्थानांतरित करें। संकलित करें। हम css से bss बनाते हैं। हम जार इकट्ठा करते हैं। हम क्लास शुरू करते हैं, और फिर हम जार लॉन्च करते हैं। फिर यह काम कर रहा है! लेकिन यह क्या है - सामान्य रूप से, या कुछ और, कोई अंतर नहीं है? और चलो, चूंकि स्टाइलशीट फ़ाइल का विस्तार कोई फर्क नहीं पड़ता, fxml_example.fxml में क्या हम इसे साफ मिटा देंगे? के बदले

 <stylesheets> <URL value="@HelloWorld.css" /> </stylesheets>

क्या करेंगे

 <stylesheets> <URL value="@HelloWorld" /> </stylesheets>

लेकिन कार्यक्रम वास्तव में स्टाइलशीट के विस्तार के बारे में बहुत कुछ नहीं देता है - बस इसे अपनी उंगली से दिखाएं और फिर यह पता लगाएगा। अजीब बात है, है ना?

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

मैं jfxpub- सिंहावलोकन पर आधारित JavaFX में HelloWorld थीम को समाप्त करने पर विचार करता हूं।

JavaFX, HelloWorld + CSS + FXML। अंत

More articles: