Java開發筆記（一百三十九）JavaFX的輸入框

循着Swing的舊例，JavaFX仍然提供了三種文本輸入框，分別是單行輸入框TextField、密碼輸入框PasswordField、多行輸入框TextArea。這些輸入框都由抽象類TextInputControl派生而來，所以擁有共同的編輯方法，經常使用的主要有下列兩個：
setEditable：設置輸入框可否編輯。爲true表示可以編輯，爲false表示不能編輯。
setPromptText：設置輸入框的提示語，用來提示用戶能夠輸入什麼樣的文本。
文本輸入框與文本標籤的區別在於，輸入框內的文字容許編輯，而標籤文字不容許編輯。儘管如此，輸入框依舊要在界面上顯示文字，故而它擁有如下與Label控件一樣的方法：
setPrefSize：設置輸入框的推薦寬高。
setText：設置輸入框的文本。
setFont：設置輸入框的字體。
setBackground：設置輸入框的背景。
至於Label控件的其它方法如setAlignment、setTextFill、setWrapText、setGraphic，因爲涉及到具體細節，所以TextInputControl類並未提供。除此以外，JavaFX的三種輸入框各有千秋，接下來將對它們分別予以詳細說明。

一、單行輸入框TextField
TextField控件對應Swing的JTextField，它只能輸入一行的文字，另外提供了下列兩個專屬方法：
setAlignment：設置輸入框的對齊方式。該方法等同於Label控件的同名方法。
setPrefColumnCount：設置輸入框的推薦列數。
下面是在界面上添加單行輸入框的代碼片斷：

		Button btn1 = new Button("單行輸入框"); // 建立一個按鈕
		btn1.setOnAction(new EventHandler<ActionEvent>() { // 設置按鈕的單擊事件
			@Override
			public void handle(ActionEvent arg0) { // 處理單擊事件
				HBox hbox = new HBox(); // 建立一個水平箱子
				Label label = new Label("請輸入手機號碼："); // 建立一個標籤
				TextField field = new TextField(); // 建立一個單行輸入框
				field.setPrefSize(200, 50); // 設置單行輸入框的推薦寬高
				field.setEditable(true); // 設置單行輸入框可否編輯
				field.setPromptText("請輸入手機號碼"); // 設置單行輸入框的提示語
				field.setAlignment(Pos.CENTER_LEFT); // 設置單行輸入框的對齊方式
				field.setPrefColumnCount(11); // 設置單行輸入框的推薦列數
				hbox.getChildren().addAll(label, field); // 給水平箱子添加一個單行輸入框
				borderPane.setCenter(hbox); // 把水平箱子放到邊界窗格的中央
			}
		});
		flowPane.getChildren().add(btn1); // 往流式窗格上添加按鈕

 

運行包含以上測試代碼的應用程序，單擊按鈕後的窗口界面以下圖所示，可見在TextField中填寫的文字以明文顯示。

 

二、密碼輸入框PasswordField
PasswordField控件對應Swing的JPasswordField，它實際上繼承自TextField，惟一區別是輸入的文字以圓點代替，連回顯字符的設置方法都未提供。下面是在界面上添加密碼輸入框的代碼片斷：

		Button btn2 = new Button("密碼輸入框"); // 建立一個按鈕
		btn2.setOnAction(new EventHandler<ActionEvent>() { // 設置按鈕的單擊事件
			@Override
			public void handle(ActionEvent arg0) { // 處理單擊事件
				HBox hbox = new HBox(); // 建立一個水平箱子
				Label label = new Label("請輸入密碼："); // 建立一個標籤
				PasswordField field = new PasswordField(); // 建立一個密碼輸入框
				field.setPrefSize(200, 50); // 設置密碼輸入框的推薦寬高
				field.setEditable(true); // 設置密碼輸入框可否編輯
				field.setPromptText("請輸入密碼"); // 設置密碼輸入框的提示語
				field.setAlignment(Pos.CENTER_LEFT); // 設置密碼輸入框的對齊方式
				field.setPrefColumnCount(11); // 設置密碼輸入框的推薦列數
				hbox.getChildren().addAll(label, field); // 給水平箱子添加一個密碼輸入框
				borderPane.setCenter(hbox); // 把水平箱子放到邊界窗格的中央
			}
		});
		flowPane.getChildren().add(btn2); // 往流式窗格上添加按鈕

 

運行包含以上測試代碼的應用程序，單擊按鈕後的窗口界面以下圖所示，可見在PasswordField中填寫的文字以密文顯示。

 

三、多行輸入框TextArea
TextArea控件對應Swing的JTextArea，它容許輸入多行文本，且文字固定朝左上角對齊，因此該控件沒有setAlignment方法，反而多出了setWrapText換行方法。TextArea額外多出的幾個方法說明以下：
setWrapText：設置輸入框文本是否支持自動換行。該方法等同於Label控件的同名方法。
setPrefColumnCount：設置輸入框的推薦列數。
setPrefRowCount：設置輸入框的推薦行數。
下面是在界面上添加多行輸入框的代碼片斷：

		Button btn3 = new Button("多行輸入框"); // 建立一個按鈕
		btn3.setOnAction(new EventHandler<ActionEvent>() { // 設置按鈕的單擊事件
			@Override
			public void handle(ActionEvent arg0) { // 處理單擊事件
				HBox hbox = new HBox(); // 建立一個水平箱子
				hbox.setPrefSize(300, 80); // 設置水平箱子的推薦寬高
				Label label = new Label("請輸入評價："); // 建立一個標籤
				TextArea area = new TextArea(); // 建立一個多行輸入框
				area.setMaxHeight(85); // 設置多行輸入框的最大高度
				//area.setMaxWidth(300); // 設置多行輸入框的最大寬度
				area.setPrefSize(200, 50); // 設置多行輸入框的推薦寬高
				area.setEditable(true); // 設置多行輸入框可否編輯
				area.setPromptText("請輸入評價"); // 設置多行輸入框的提示語
				area.setWrapText(true); // 設置多行輸入框是否支持自動換行。true表示支持，false表示不支持。
				area.setPrefColumnCount(11); // 設置多行輸入框的推薦列數
				area.setPrefRowCount(3); // 設置多行輸入框的推薦行數
				hbox.getChildren().addAll(label, area); // 給水平箱子添加一個多行輸入框
				borderPane.setCenter(hbox); // 把水平箱子放到邊界窗格的中央
			}
		});
		flowPane.getChildren().add(btn3); // 往流式窗格上添加按鈕

 

運行包含以上測試代碼的應用程序，單擊按鈕後的窗口界面以下圖所示，可見TextArea的確支持輸入多行文本。

繼續在多行輸入框中填寫文字，一旦文字總高度超過輸入框的高度，輸入框右側就會自動顯示滾動條，此時窗口界面以下圖所示。

由圖示可見JavaFX的TextArea默認集成了滾動條控件，無需像Swing的JTextArea那樣得程序員手工操做。

 

更多Java技術文章參見《Java開發筆記（序）章節目錄》