🍘 🛸 🎗️ जावाएफ़एक्स 2.0 बीटा - जावा में क्लाइंट एप्लिकेशन लिखना। मैक शैली मेनू उदाहरण ⛺️ 👩🏽‍🔧 🤽🏽

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

लेकिन 100 बार सुनने की बजाय एक बार देखना बेहतर है।
आइए एक साथ मैक-शैली बटन के साथ एक टास्कबार लिखने की कोशिश करें

पहला कदम JavaFX को इंस्‍टॉल करना है। सबसे आसान तरीका नेटबीन्स प्लगइन ( http://www.oracle.com/technetwork/java/javafx/downloads/index.html ) डाउनलोड करना है, जिसमें JavaFX2.0, उदाहरण और टेम्पलेट शामिल होंगे। यदि आप NetBeans का उपयोग नहीं करते हैं, तो बस उसी लिंक से SDK डाउनलोड करें और jfxrt.jar को अपने प्रोजेक्ट में लाइब्रेरी के रूप में कनेक्ट करें।

तो, हम माउस के एक सेट के साथ सबसे सरल विंडो बनाते हैं। विवरण टिप्पणियों में वर्णित हैं:

//    JavaFX     Application public class FXUIDemo extends Application { public static void main(String[] args) { //     --    FX       Application.launch(args); } private HBox taskbar; @Override public void start(Stage stage) { //     stage    stage.setTitle("FX Demo"); //    ,      layout manager   BorderPane root = new BorderPane(); Scene scene = new Scene(root, 720, 550, Color.LIGHTGRAY); stage.setScene(scene); //   layout  - -- horizontal box taskbar = new HBox(10); taskbar.setPadding(new Insets(10, 30, 50, 30)); taskbar.setPrefHeight(150); taskbar.setAlignment(Pos.CENTER); root.setBottom(taskbar); //        for (int i = 0; i < 5; i++) { ImageView node = new ImageView(new Image(getClass().getResource("icon-" + i + ".png").toString())); taskbar.getChildren().add(node); } stage.setVisible(true); } }

यहाँ इस कोड का परिणाम है:

अब बटन को रिवाइज करें।

ऐसा करने के लिए, एक अलग विधि में उनके निर्माण का चयन करें, माउस को पकड़े जाने पर एनीमेशन जोड़ें, बटन पर क्लिक करने का एनीमेशन और प्रतिबिंब।

इस मामले में, एनीमेशन स्केलट्रांसिशन वर्ग द्वारा किया जाएगा। यह इस तरह दिखता है:

 ScaleTransition animationGrow = new ScaleTransition(Duration.valueOf(300), node); animationGrow.setToX(1.3); animationGrow.setToY(1.3); animationGrow.play();

इस कोड में, हम ScaleTransiton को संकेत देते हैं कि 300ms में नोड ऑब्जेक्ट प्रारंभिक एक की तुलना में 1.3 गुना बड़ा हो जाना चाहिए। अधिक कुछ भी आवश्यक नहीं है, स्केलट्रांसिशन वर्ग सभी मध्यवर्ती मूल्यों की गणना करेगा और नोड को ऑब्जेक्ट पर लागू करेगा। यदि वांछित है, तो आप मूल्य, एफपीएस और अन्य मापदंडों में परिवर्तन की चिकनाई को नियंत्रित कर सकते हैं।
इसी तरह के संक्रमण वर्गों का एक सेट जावाएफएक्स वस्तुओं के अन्य गुणों के आधार पर एनीमेशन के लिए उपलब्ध है: आकार, स्थान, झुकाव कोण, पारदर्शिता, आदि।

अब प्रतिबिंब जोड़ें:

 node.setEffect(new Reflection());

मूल सेटिंग्स हमें पूरी तरह से सूट करेंगे, इसलिए प्रभाव निर्माता के अलावा कुछ भी कॉल करने की आवश्यकता नहीं है।
माउस हैंडलर जोड़ने के बाद, CreateButton () फ़ंक्शन इस तरह दिखेगा:

 private static final double SCALE = 1.3; //   private static final double DURATION = 300; //     private Node createButton(String iconName, final Runnable action) { //   final ImageView node = new ImageView(new Image(getClass().getResource(iconName).toString())); //     final ScaleTransition animationGrow = new ScaleTransition(Duration.valueOf(DURATION), node); animationGrow.setToX(SCALE); animationGrow.setToY(SCALE); //   final ScaleTransition animationShrink = new ScaleTransition(Duration.valueOf(DURATION), node); animationShrink.setToX(1); animationShrink.setToY(1); //    final Reflection effect = new Reflection(); node.setEffect(effect); //    node.setOnMouseClicked(new EventHandler<MouseEvent>() { public void handle(MouseEvent event) { action.run(); } }); //         node.setOnMouseEntered(new EventHandler<MouseEvent>() { public void handle(MouseEvent event) { node.toFront(); animationShrink.stop(); animationGrow.playFromStart(); } }); //    --    node.setOnMouseExited(new EventHandler<MouseEvent>() { public void handle(MouseEvent event) { animationGrow.stop(); animationShrink.playFromStart(); } }); return node; }

अब एक बटन क्लिक हैंडलर जोड़ें। मैक टास्कबार में, इसे थोड़े समय के लिए काला कर दिया जाता है। इस व्यवहार को लागू करने के लिए, हम ColorAdjust प्रभाव और टाइमलाइन वर्ग का उपयोग करते हैं। आमतौर पर, टाइमलाइन का उपयोग एनिमेशन समस्याओं को हल करने के लिए किया जाता है जिसमें संक्रमण कार्यक्षमता की कमी होती है। टाइमलाइन का उपयोग करके, एक डेवलपर चुन सकता है कि समय के साथ वस्तुओं के कौन से गुण बदल जाएंगे, प्रमुख बिंदुओं को सेट करना। लेकिन अभी के लिए, हमने प्रभाव को रद्द करने के लिए समयरेखा के रूप में समयरेखा का उपयोग करने के लिए खुद को प्रतिबंधित कर लिया है:

 //    final ColorAdjust effectPressed = new ColorAdjustBuilder().brightness(-0.5).build(); node.setOnMouseReleased(new EventHandler<MouseEvent>() { public void handle(MouseEvent event) { //     .    :      , //      ,   input    effect.setInput(effectPressed); //  Timeline,   300   . new TimelineBuilder().keyFrames(new KeyFrame(Duration.valueOf(300), new EventHandler<ActionEvent>() { public void handle(ActionEvent event) { effect.setInput(null); } })).build().play(); action.run(); } });

यह ध्यान देने योग्य है कि समयरेखा और ColorAdjust बिल्डर टेम्पलेट का उपयोग करके बनाए गए थे। लगभग सभी JavaFX2.0 ऑब्जेक्ट के लिए समान बिल्डरों को जोड़ा गया है, जो आपको अधिक कॉम्पैक्ट कोड लिखने और अनावश्यक चर का उपयोग करने से बचने की अनुमति देता है।

हमें यही मिला है। छवि में, कर्सर चौथे बटन के ऊपर है। दुर्भाग्य से, स्क्रीनशॉट एनीमेशन नहीं दिखाता है, इसलिए मुझे आशा है कि आपके पास स्वयं इसे आज़माने का अवसर और इच्छा होगी।

लेकिन हम वहां नहीं रुकेंगे। बटन के लिए आइकन बेतरतीब ढंग से चयनित नहीं थे, और आगे प्रत्येक बटन पर मैं संबंधित JavaFX घटकों को जोड़ूंगा।

शुरू करने के लिए, हमारे दृश्य को नए घटकों को रखने के लिए जगह में जोड़ें।

 // StackPane --  layout manager,         StackPane view = new StackPane(); root.setCenter(view); view.getChildren().add(new Text("Hello from JavaFX..."));

इसके बाद, हम बटन निर्माण चक्र को मिटा देते हैं, अब हम उन्हें सार्थक क्लिक हैंडलर के साथ एक बार बनाएंगे।

तो, पहला बटन एक मीडिया फ़ाइल है।

प्रारंभ () फ़ंक्शन के शरीर में, मीडिया प्लेयर बनाने के लिए एक पंक्ति जोड़ें और इसे शुरू करने के लिए createButton () फ़ंक्शन को कॉल करें।

 mediaPlayer = new MediaPlayer(new Media("http://webcast-west.sun.com/oow2010.flv")); taskbar.getChildren().add(createButton("icon-0.png", new Runnable() { public void run() { changeView(new MediaView(mediaPlayer)); mediaPlayer.play(); } }));

बाद के बटनों पर क्लिक करने के लिए हैंडलर के कोड को कम करने के लिए, चेंज व्यू () फ़ंक्शन को जोड़ा गया था और मीडियाप्लेयर और व्यू चर का प्रतिपादन किया गया था।

 private StackPane view; private MediaPlayer mediaPlayer; private void changeView(Node node) { view.getChildren().clear(); //  view mediaPlayer.stop(); //  ,    view.getChildren().add(node); //   view   }

हमें मिलता है

दूसरा बटन ग्राफिक्स है।

JavaFX2.0 में, 6 विभिन्न प्रकार के ग्राफ जोड़े गए हैं। विवरण एसडीके के साथ जहाजों कि ChartsSampler डेमो आवेदन में पाया जा सकता है।
दूसरे बटन पर क्लिक करके हम एक लाइन चार्ट बनाएंगे।
इसके लिए मीडिया प्लेयर की तुलना में थोड़ा अधिक कोड की आवश्यकता होगी। आपको समन्वय अक्षों को समायोजित करने की आवश्यकता है, ग्राफ़ के सभी तत्वों को नाम दें, और निश्चित रूप से, ग्राफ़ के लिए डेटा बनाएं।
फिर भी, यह सब कोड की 15-20 लाइनों में फिट बैठता है।

 taskbar.getChildren().add(createButton("icon-1.png", new Runnable() { public void run() { //   NumberAxis xAxis = new NumberAxis(); NumberAxis yAxis = new NumberAxis(); //  LineChart<Number, Number> chart = new LineChart<Number, Number>(xAxis, yAxis); chart.setTitle("Basic LineChart"); xAxis.setLabel("X Axis"); yAxis.setLabel("Y Axis"); //    XYChart.Series<Number, Number> series = new XYChart.Series<Number, Number>(); series.setName("Random Data"); Random random = new Random(); for (int i = 0; i < 10 + random.nextInt(20); i++) { series.getData().add(new XYChart.Data<Number, Number>(10 * i + 5, random.nextDouble() * 120)); } chart.getData().add(series); changeView(chart); } }));

यद्यपि हम इसका उपयोग नहीं करते हैं, यह ध्यान देने योग्य है कि रेखांकन पहले से ही एनिमेटेड हैं और नए तत्वों को जोड़ने से पुराने डेटा की एक सुचारू पारी हो जाएगी।

अगले बटन पर हम मजाकिया नाम अकॉर्डियन के साथ एक और नया नियंत्रण लटकाएंगे। यह स्लाइडिंग पैनलों का एक सेट है, हाल ही में एक काफी सामान्य इंटरफ़ेस तत्व है।

 taskbar.getChildren().add(createButton("icon-2.png", new Runnable() { public void run() { Accordion accordion = new Accordion(); for (int i = 0; i <= 4; i++) { TitledPane t1 = new TitledPane(new Label("Image " + i), new ImageView(new Image(getClass().getResource("icon-" + i + ".png").toString()))); accordion.getPanes().add(t1); } changeView(accordion); } }));

स्क्रीनशॉट में, दुर्भाग्य से, एनीमेशन फिर से दिखाई नहीं देता है: पैनल अचानक नहीं खुलते हैं, लेकिन सुचारू रूप से और खूबसूरती से।

चौथा बटन: WebView - एक एम्बेडेड ब्राउज़र। यह घटक संपूर्ण WebKit- आधारित ब्राउज़र प्रदान करता है जो CSS, JavaScript, DOM और HTML5 का समर्थन करता है।

जोड़ा जा रहा है

 taskbar.getChildren().add(createButton("icon-3.png", new Runnable() { public void run() { WebView web = new WebView(new WebEngine("http://habrahabr.ru")); changeView(web); } }));

और JavaFX के अंदर habrahabr.ru देखें।

अंत में, आखिरी, पांचवें बटन के लिए, मैंने JavaFX2.0 की दो और शानदार विशेषताओं को छोड़ दिया - बंधन और सीएसएस शैलियों।

बाइंडिंग आपको लगभग किसी भी दो जावाएफएक्स वस्तुओं के गुणों को एक साथ बांधने की अनुमति देता है। डेवलपर्स को श्रोताओं को बनाने और सिंक्रनाइज़ेशन के बारे में चिंता करने की ज़रूरत नहीं है, बस गुणों को बांधने के लिए कोड की एक पंक्ति लिखें। उदाहरण के लिए, इस तरह:

 Slider slider = new Slider(); Circle circle = new Circle(); circle.radiusProperty().bind(slider.valueProperty());

अब जब आप स्लाइडर कंट्रोल स्लाइडर की स्थिति बदलते हैं, तो सर्कल सर्कल की त्रिज्या स्वचालित रूप से बदल जाएगी, और सर्कल को फिर से तैयार किया जाएगा।
बेशक, बाइंडिंग सीधे प्रत्यक्ष बंधन तक सीमित नहीं है। आप सूत्र बना सकते हैं, डेटा प्रकार बदल सकते हैं, दो-तरफ़ा बाइंडिंग लागू कर सकते हैं, लेकिन यह एक अलग लेख के लिए एक विषय है।

प्रत्येक जावाएफएक्स दृश्य तत्व में ऐसी शैलियाँ भी हैं जिन्हें कक्षाओं में जोड़ा जा सकता है और सीएसएस फाइलों में परिभाषित किया जा सकता है या सीधे सेट किया जा सकता है।
पांचवें बटन के लिए घटक में, हम इन दो कार्यात्मकताओं को जोड़ते हैं: हम घटक के लिए विभिन्न शैलियों के साथ एक सूची घटक बनाएंगे और, बाध्यकारी के माध्यम से, हमारे टास्कबार की शैली को चयनित सूची आइटम के साथ जोड़ देंगे।

 taskbar.getChildren().add(createButton("icon-4.png", new Runnable() { public void run() { //   ListView listView = new ListView(); //    listView.setItems(FXCollections.observableArrayList( "-fx-background-color: green;", "-fx-background-color: linear (0%,0%) to (100%,100%) stops (0.0,aqua) (1.0,red);", "-fx-background-color: transparent;", "-fx-opacity: 0.3;", "-fx-opacity: 1;")); //  binding         taskbar.styleProperty().bind(listView.getSelectionModel().selectedItemProperty()); changeView(listView); } }));

यहां, उदाहरण के लिए, पृष्ठभूमि में एक ढाल के साथ एक टास्कबार जैसा दिखेगा।

वह सब है। हमने 200 से कम लाइनों के कोड लिखे और एक बहुत अच्छा यूआई नमूना बनाया।

निष्कर्ष में, कुछ लिंक:
- लेख से आवेदन कोड: http://www.javaone.ru/data/FXUIDemo.zip
- कार्रवाई में आवेदन के साथ वीडियो: http://www.youtube.com/watch?v=IHhA8G-0C9M
- http://download.oracle.com/javafx/ पर मुख्य कार्यक्षमता के अवलोकन के साथ लेख हैं
- इसके अलावा, SDK और Netbeans बंडल में स्रोत के साथ डेमो एप्लिकेशन भी शामिल हैं। विशेष रूप से दिलचस्प होना चाहिए:
- कलाकारों की टुकड़ी - अंतर्निहित javadoc और कोड दृश्य के साथ उदाहरणों का एक विशाल संग्रह।
- चार्टसैंपलर - चार्ट की क्षमताओं का एक प्रदर्शन, और काफी असामान्य।

यह लेख सर्गेई ग्रिनेव और अलेक्जेंडर बेलोक्रिलोव द्वारा तैयार किया गया था

जावाएफ़एक्स 2.0 बीटा - जावा में क्लाइंट एप्लिकेशन लिखना। मैक शैली मेनू उदाहरण

More articles: