JavaFX two first Blood (a small example, pick up a weapon and dash)

Never thought, last written JavaFX one, response so fierce, I am a little excited ah, here thank you so enthusiastic, everyone's support is my biggest motivation, let us progress together, learn together. Topic return, today I want to tell you about JavaFX's first small example, by the way, by example, Tell us something about JavaFX's code writing. Not much nonsense, the show is about to begin ...

The last time I talked about novice development is fxml, and then write code, we first see how to use JavaFX Scene Builder 2.0 to design the interface we want, first of all, I introduce the tool interface of some small knowledge,

First we recognize this visual development tool for FX:

1. Top first line of the menu bar, this is nothing to say

2. The upper left corner is a toolbar for us to design the interface drag control, divided into several categories, right under the Internet are: Containers ( container ), controls ( Controller ), menu, Miscellaneous (Miscellaneous fees), Shapes (graphics), Charts ( chart ), 3D

3. The lower left corner is the composition structure of our design interface.

4. The middle black area is the area where we design the interface

5. The right side of the local area is our selection of the corresponding composition control settings information, divided into three categories of display: properties (attributes), layout, code (event)

It's basically just this, it's simple, easy, and easy to use and design. I also draw a very simple example, his structure is as shown in the lower left corner, the outermost is a pane, I used the VBox layout (simple understanding is from top to bottom), insert three most commonly used small controls, From top to bottom are Textfiel (text box), lable ( label ) and button (button), and then set a property in their respective, such as size, height width and so on, this is not introduced here. Then after I finish the design, click Save, We get a file with a suffix of *.fxml, here I named Lv_1.fxml.

I have contributed to the code page I have designed for your reference:

<?xml version= "1.0" encoding= "UTF-8"? ><?import javafx.scene.text.*?><?import javafx.geometry.*?> <?import Javafx.scene.control.*?><?import Java.lang.*?><?import javafx.scene.layout.*?>< Anchorpane maxheight= "-infinity" maxwidth= "-infinity" minheight= "-infinity" minwidth= "-Infinity" prefHeight= "300.0" Prefwidth= "500.0" xmlns= "HTTP://JAVAFX.COM/JAVAFX/8" xmlns:fx= "HTTP://JAVAFX.COM/FXML/1" > <children> < VBox layoutx= "153.0" layouty= "94.0" prefheight= "400.0" prefwidth= "600.0" anchorpane.bottomanchor= "50.0"            Anchorpane.leftanchor= "50.0" anchorpane.rightanchor= "50.0" anchorpane.topanchor= "50.0" > <children>                  <textfield fx:id= "MyTextField" prompttext= "I am a Textfiel, your first boss" > <font>  <font size= "18.0"/> </font> </TextField> <label fx:id= "MyLabel" maxheight= "40.0" minheight= "40.0" prefheight= "40.0" prefwidth= "502.0" text= "I am a label little monster, one of your practice class objects" > <font> <font size= "18.0"/> &lt               ;/font> </Label> <button fx:id= "MyButton" mnemonicparsing= "false" text= "I am the button, your weapon Oh" > <VBox.margin> <insets left= "100.0" top= "50.0"/> </vbox.margin > <font> <font size= "18.0"/> </font> </bu tton> </children> </VBox> </children></AnchorPane>

Then we open NetBeans, right-click on a new project, choose JavaFX for the category, Project JavaFX FXML application, project name: Lv_1, complete.:

PS:JDK, and Java environment I will not say, online search is more, here filter, my thing JDK8.0

Then double-click the project default generated by the Fxmldocument.fxml file, we just designed to complete the Lv_1.fxml code, copy and paste in, click to save it, click to run, you can see our design interface

Since we do not do the code logic processing, so you see just the interface, and can not complete the operation, then we will let the interface move, come with me

Open Lv_1.java, the system generates the following code by default:

/* * To change This license header, choose License Headers in Project Properties. * To change this template file, choose Tools | Templates * and open the template in the editor. */package lv_1;import javafx.application.application;import Javafx.fxml.fxmlloader;import javafx.scene.Parent;        Import Javafx.scene.scene;import javafx.stage.stage;/** * * @author Edao */public class Lv_1 extends application { @Override public void Start (stage stage) throws Exception {//start method, default method Parent root = Fxmlloader.load (getcl (). GetResource ("Fxmldocument.fxml"));                Here is the load our fxml file scene scene = new scene (root);        Stage.setscene (Scene);       Stage.show ();           Then it is rendered, displayed}/** * @param args the command line arguments */public static void main (string[] args) {    Main method, everyone is very familiar with, here is the program of the entrance launch (args); }    }

Since we are only dealing with a few sides, there is no need to add and modify the code here, just put it on the line.

Open the Fxmldocumentcontroller.java file with the following code:

/* License header, choose License Headers in Project Properties. * To change this template file, choose Tools | Templates * and open the template in the editor. */package lv_1;import java.net.url;import Java.util.resourcebundle;import javafx.event.actionevent;import Javafx.fxml.fxml;import javafx.fxml.initializable;import javafx.scene.control.label;/** * * @author Edao */public Class Fxmldocumentcontroller implements Initializable {        @FXML    private label label;        @FXML    private void Handlebuttonaction (ActionEvent event) {    }        @Override public    void Initialize (URL url , ResourceBundle RB) {        //TODO    }        }

This method is responsible for manipulating the fxmldocument.fxml (that is, we designed the Lv_1fxml, just copied the code, and did not change the name of the file) inside the controller of each space, in theory, each of the fxml corresponds to a controllers, Let's see what's special about this method, let me explain it in one by one:

Note @fxml, which is a unique annotated way for JavaFX, is to facilitate the development of the control used in this call to FXMl, as opposed to the Fx:id attribute in FXMl.

Handlebuttonaction, trigger event for a button (default generated by the system)

Initialize initialization method, this temporarily do not speak, and so on when used to tell everyone

Let's change the code to this:

/* License header, choose License Headers in Project Properties. * To change this template file, choose Tools | Templates * and open the template in the editor. */package lv_1;import java.net.url;import Java.util.resourcebundle;import javafx.event.actionevent;import Javafx.fxml.fxml;import Javafx.fxml.initializable;import Javafx.scene.control.button;import Javafx.scene.control.label;import javafx.scene.control.textfield;/** * * @author Edao */public class    Fxmldocumentcontroller implements initializable {@FXML private Label MyLabel;    @FXML private TextField MyTextField;        @FXML private Button MyButton;        @FXML private void Mybuttonaction (ActionEvent event) {Mybutton.settext ("My sword, is Your Sword");        Mylabel.settext ("I lost, I'll come back ...");    Mytextfield.settext ("~ Victory ~"); } @Override public void Initialize (URL url, resourcebundle rb) {//TODO}}

Then, modify the following in the corresponding Fxml file:

<?xml version= "1.0" encoding= "UTF-8"? ><?import javafx.scene.text.*?><?import javafx.geometry.*?> <?import Javafx.scene.control.*?><?import Java.lang.*?><?import javafx.scene.layout.*?>< Anchorpane fx:controller= "Lv_1.fxmldocumentcontroller" maxheight= "-infinity" maxwidth= "-Infinity" minHeight= "- Infinity "minwidth="-infinity "prefheight=" 300.0 "prefwidth=" 500.0 "xmlns=" HTTP://JAVAFX.COM/JAVAFX/8 "xmlns:fx=" HTTP://JAVAFX.COM/FXML/1 "> <children> <vbox layoutx=" 153.0 "layouty=" 94.0 "prefheight=" 400.0 "prefwidth = "600.0" anchorpane.bottomanchor= "50.0" anchorpane.leftanchor= "50.0" anchorpane.rightanchor= "50.0" Anchorpane.topanchor= "50.0" > <children> <textfield fx:id= "MyTextField" prompttext= "I am a text            Fiel, your first boss "> <font> <font size=" 18.0 "/> </font> </TextField> <label fx:id= "MyLabel" maxheight= "40.0" Minheight= "40.0" prefheight= "40.0" prefwidth= "502.0" text= "I am a label little monster, one of your practice class objects" > <font> <font size= "18.0"/> </font> </Label> <button fx:id= "MyButton" on                  action= "#myButtonAction" mnemonicparsing= "false" text= "I am the button, your weapon oh" > <VBox.margin> <insets left= "100.0" top= "50.0"/> </VBox.margin> <font> & Lt    Font size= "18.0"/> </font> </Button> </children> </VBox> </children></AnchorPane>

Good to here, our small example is basically completed, run, click the button, as we write the script as shown;

Let me explain to you the following notes:

1. The corresponding controller path should be marked in each fxml: fx:controller= "Lv_1.fxmldocumentcontroller" with the attribute, as shown in the appeal code, or the corresponding controller cannot be found. Control cannot be manipulated

2. In the Fxml file, we want to annotate each control with an important display identity attribute: For example the button's fx:id= "MyButton", which is somewhat similar to HTML inside <input id= "su" type= "button" value= "buttons" The id attribute of >,

Only the FX here ID is specifically provided to the controller call, as long as the fxml marked with Fx:id, you can declare the variable in the corresponding controller, and add @fxml annotations as follows:

@FXMLprivate Button MyButton;

You can use this control in the controller

3. Event triggering is also to be tagged in fxml, such as an example of a button event in the Fxml tag as follows

onaction= "#myButtonAction"

Remember that there is a # in the front, meaning is in the development of the controller to find a method named: Mybuttonaction control method

@FXML    private void Mybuttonaction (ActionEvent event) {        mybutton.settext ("My sword, is Your Sword");        Mylabel.settext ("I lost, I'll come back ...");        Mytextfield.settext ("~ Victory ~");    }

Of course, the note @fxml, the meaning ibid.

OK, today is about here, if you do not understand can be in the bottom of the message, I will take the time to give you a reply, once again thank you for my support, your enthusiasm, is I write down the power, thank you! We'll see you next time.

JavaFX two first Blood (a small example, pick up a weapon and dash)