javafx的示例分析

小編給大家分享一下javafx的示例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

創(chuàng)新互聯(lián)公司始終堅(jiān)持【策劃先行，效果至上】的經(jīng)營(yíng)理念，通過多達(dá)10余年累計(jì)超上千家客戶的網(wǎng)站建設(shè)總結(jié)了一套系統(tǒng)有效的全網(wǎng)營(yíng)銷解決方案，現(xiàn)已廣泛運(yùn)用于各行各業(yè)的客戶，其中包括：成都門簾等企業(yè)，備受客戶稱譽(yù)。

JavaFX 介紹

一提到Java的圖形界面庫(kù)，我們通常聽到的都是Swing，或者更老一點(diǎn)的AWT，包括很多書上面介紹的也都是這兩種。很多學(xué)校、培訓(xùn)班教學(xué)的也是這兩種技術(shù)。但是其實(shí)這兩種技術(shù)都已經(jīng)過時(shí)很長(zhǎng)時(shí)間了。Swing雖然學(xué)起來(lái)也不算很難，但是用它來(lái)寫界面其實(shí)也很不好寫。因?yàn)樗慕缑婧痛a沒有做到分離，所以在編寫的時(shí)候，代碼中肯定充斥著大量坐標(biāo)，修改極其不易。這方面做的比較好的就是微軟的WPF，只能說誰(shuí)用誰(shuí)知道。

當(dāng)然，雖然編寫客戶端圖形程序是Java的弱項(xiàng)，但是Java并沒有放棄這方面的努力。今天介紹的JavaFX就是Java在編寫圖形界面程序的最新技術(shù)。如果你準(zhǔn)備使用Java編寫圖形界面程序，又沒有歷史包袱，那么強(qiáng)烈推薦使用JavaFX。

這是Oracle官網(wǎng)關(guān)于JavaFX的資源和文檔。

這是官方的示例程序，我們可以參考JavaFX的部分來(lái)學(xué)習(xí)如何使用。下面是其中一個(gè)分形的JavaFX程序，點(diǎn)擊上面的數(shù)字可以進(jìn)入不同的微觀展示，感覺有一種看病毒微觀世界的感覺，很震撼。

javafx的示例分析

如何安裝

只要你安裝了最新版本的JDK 8，那么就可以使用JavaFX庫(kù)了。如果沒有安裝的話，那么趕快開始安裝吧。

快速上手

第一個(gè)程序

新建一個(gè)項(xiàng)目，然后編寫如下的類，然后編譯運(yùn)行，即可看到結(jié)果。關(guān)于這個(gè)程序不用做解釋吧。如果有學(xué)習(xí)過Swing以及其他圖形界面框架的經(jīng)驗(yàn)的話，應(yīng)該非常容易理解這段代碼。當(dāng)然由于JavaFX是新東西，所以我也順便使用Java 8的新特性——lambda表達(dá)式。

package yitian.javafxsample;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;
public class HelloJavaFX extends Application {
	@Override
	  public void start(Stage primaryStage) throws Exception {
		Button btn = new Button();
		btn.setText("你好啊，世界");
		btn.setOnAction(event -> {
			System.out.println("你好，世界!");
		}
		);
		StackPane root = new StackPane();
		root.getChildren().add(btn);
		Scene scene = new Scene(root, 300, 250);
		primaryStage.setTitle("Hello World!");
		primaryStage.setScene(scene);
		primaryStage.show();
	}
	public static void main(String[] args) {
		launch(args);
	}
}

運(yùn)行截圖如下。

javafx的示例分析

用戶輸入

這個(gè)程序可以用來(lái)處理用戶登錄的情況，代碼如下，重要部分都添加了注釋。代碼的最后一部分使用setOnAction函數(shù)為按鈕添加了點(diǎn)擊事件，當(dāng)點(diǎn)擊按鈕的時(shí)候會(huì)顯示文本。

public class UserInput extends Application {
	@Override
	  public void start(Stage primaryStage) throws Exception {
		//網(wǎng)格布局
		GridPane grid = new GridPane();
		grid.setAlignment(Pos.CENTER);
		//網(wǎng)格垂直間距
		grid.setHgap(10);
		//網(wǎng)格水平間距
		grid.setVgap(10);
		grid.setPadding(new Insets(25, 25, 25, 25));
		//新建場(chǎng)景
		Scene scene = new Scene(grid, 300, 275);
		primaryStage.setScene(scene);
		//添加標(biāo)題
		Text scenetitle = new Text("Welcome");
		scenetitle.setFont(Font.font("Tahoma", FontWeight.NORMAL, 20));
		grid.add(scenetitle, 0, 0, 2, 1);
		//添加標(biāo)簽及文本框
		Label userName = new Label("用戶名:");
		grid.add(userName, 0, 1);
		TextField userTextField = new TextField();
		grid.add(userTextField, 1, 1);
		//添加標(biāo)簽及密碼框
		Label pw = new Label("密碼:");
		grid.add(pw, 0, 2);
		PasswordField pwBox = new PasswordField();
		grid.add(pwBox, 1, 2);
		//添加提交按鈕
		Button btn = new Button("登錄");
		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(event -> {
			actiontarget.setFill(Color.FIREBRICK);
			actiontarget.setText("已經(jīng)登錄");
		}
		);
		primaryStage.setTitle("JavaFX Welcome");
		primaryStage.show();
	}
	public static void main(String[] args) {
		launch(args);
	}
}

程序運(yùn)行截圖如下。

javafx的示例分析

這個(gè)程序其實(shí)也沒什么難點(diǎn)，就是使用了網(wǎng)格布局，然后將每個(gè)元素添加到網(wǎng)格中。關(guān)于網(wǎng)格布局的屬性意義可以參考官方的圖。

javafx的示例分析

用FXML設(shè)計(jì)用戶界面

現(xiàn)代圖形界面框架都支持將界面和代碼分離開，而且比較常用的描述語(yǔ)言是XML，例如QT的QML、WPF的XAML，當(dāng)然JavaFX也有類似的語(yǔ)言，叫做FXML。如果需要詳細(xì)了解FXML，可以參考Oracle官網(wǎng)的文章Introduction to FXML。

下面用FXML重寫一下上面那個(gè)小例子，每個(gè)部分都做了注釋。如果學(xué)習(xí)過其他類似描述語(yǔ)言的話，會(huì)發(fā)現(xiàn)這些其實(shí)都差不多。唯一需要注意的就是布局里面的fx:controller屬性，它指定一個(gè)控制器，控制器的作用就是編寫界面對(duì)應(yīng)的代碼。

<?xml version="1.0" encoding="UTF-8"?>
<!--導(dǎo)入類-->
<?import javafx.geometry.Insets?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.text.Font?>
<?import javafx.scene.text.Text?>
<!--設(shè)置布局-->
<GridPane xmlns="http://javafx.com/javafx"
     xmlns:fx="http://javafx.com/fxml"
     fx:controller="yitian.javafxsample.Controller"
     prefHeight="400.0" prefWidth="600.0"
     alignment="center" hgap="10" vgap="10">
  <padding>
    <Insets top="25" right="25" bottom="10" left="25"/>
  </padding>
  <!--歡迎文本-->
  <Text text="Welcome"
     GridPane.columnIndex="0" GridPane.rowIndex="0"
     GridPane.columnSpan="2">
    <font>
      <Font name="Consolas" size="20"/>
    </font>
  </Text>

  <Label text="用戶名:"
      GridPane.columnIndex="0" GridPane.rowIndex="1"/>

  <TextField
      GridPane.columnIndex="1" GridPane.rowIndex="1"/>

  <Label text="密碼:"
      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="顯示密碼"
        onAction="#showPasswordButton"/>
  </HBox>

  <Text fx:id="hintText"
     GridPane.columnIndex="0" GridPane.columnSpan="2"
     GridPane.halignment="RIGHT" GridPane.rowIndex="6"/>
</GridPane>

下面就是這個(gè)FXML文件對(duì)應(yīng)的控制器，它是一個(gè)標(biāo)準(zhǔn)的Java類。在FXML中用fx:id屬性指定的ID，可以在控制器中聲明為一個(gè)類字段，通過這個(gè)字段就可以和界面組件進(jìn)行交互。同樣道理，onAction聲明的事件處理程序，在控制器中就是一個(gè)方法。注意這些字段和方法都需要使用@FXML注解進(jìn)行標(biāo)注。

import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.scene.control.PasswordField;
import javafx.scene.text.Text;
public class Controller {
	@FXML
	  private Text hintText;
	@FXML
	  private PasswordField passwordField;
	@FXML
	  protected void showPasswordButton(ActionEvent event) {
		hintText.setText("顯示密碼:" + passwordField.getText());
	}
}

最后要做修改的就是主程序了。在主程序中需要使用FXMLLoader來(lái)加載FXML資源，其他部分沒有太大變化。

public class UseFxml extends Application {
	@Override
	  public void start(Stage primaryStage) throws Exception {
		Parent root = FXMLLoader.load(getClass().getResource("ui.fxml"));
		Scene scene = new Scene(root, 300, 275);
		primaryStage.setTitle("使用FXML");
		primaryStage.setScene(scene);
		primaryStage.show();
	}
	public static void main(String[] args) {
		launch(args);
	}
}

程序運(yùn)行截圖如下。

javafx的示例分析

如果希望修改組件樣式，JavaFX提供了CSS接口，讓我們可以直接使用CSS文件修改樣式。首先需要在FXML文件中添加相應(yīng)樣式表的引用。文件名前面的@表示這個(gè)CSS文件和FXML文件在同一目錄下。

<GridPane>
  <stylesheets>
    <URL value="@style.css"/>
  </stylesheets>
<GridPane/>

樣式表和普通的樣式表差不多，只不過需要添加JavaFX特有的前綴-fx-。

#btnShowPassword {
  -fx-background-color: deeppink;
}

上面用了ID選擇器，所以對(duì)應(yīng)地，在FXML中也需要ID屬性。

<Button id="btnShowPassword" text="顯示密碼"
        onAction="#showPasswordButton"/>

自定義之后的程序如圖所示。這里只簡(jiǎn)單修改了一下按鈕的背景色，其實(shí)可以更改的樣式有很多，包括程序背景等等，有興趣的同學(xué)可以自行嘗試。

javafx的示例分析

以上是“javafx的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)頁(yè)題目：javafx的示例分析
文章位置：http://muchs.cn/article8/jojoop.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供靜態(tài)網(wǎng)站、網(wǎng)站內(nèi)鏈、網(wǎng)站策劃、企業(yè)網(wǎng)站制作、企業(yè)建站、域名注冊(cè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)

網(wǎng)站托管運(yùn)營(yíng)