翻譯自??Titled Pane and Accordion

本章介紹如何在JavaFX應(yīng)用程序中使用accordion和title窗格的組合。

標(biāo)題窗格是帶標(biāo)題的面板。它可以打開和關(guān)閉，它可以封裝任何Node諸如UI控件或圖像以及添加到布局容器的元素組。

標(biāo)題窗格可以使用手風(fēng)琴控件進(jìn)行分組，這使您可以創(chuàng)建多個(gè)窗格并一次顯示一個(gè)窗格。圖21-1顯示了一個(gè)結(jié)合了三個(gè)標(biāo)題窗格的手風(fēng)琴控件。

圖21-1帶有三個(gè)標(biāo)題的折疊窗格

使用JavaFX SDK API中的Accordion和TitledPane類在應(yīng)用程序中實(shí)現(xiàn)這些控件。

?

創(chuàng)建標(biāo)題窗格

創(chuàng)建TitledPane控件定義標(biāo)題和一些內(nèi)容。您可以通過使用類的雙參數(shù)構(gòu)造函數(shù)TitledPane或應(yīng)用setText和setContent方法來完成此操作。兩種方法都顯示在例21-1中。

例21-1聲明TitledPane對(duì)象

//using a two-parameter constructor TitledPane tp = new TitledPane("My Titled Pane", new Button("Button")); //applying methods TitledPane tp = new TitledPane(); tp.setText("My Titled Pane"); tp.setContent(new Button("Button"));

使用任一代碼片段編譯和運(yùn)行應(yīng)用程序?qū)⑸扇鐖D21-2所示的控件。

圖21-2帶按鈕的標(biāo)題窗格

標(biāo)題窗格的大小調(diào)整為適應(yīng)其內(nèi)容的首選大小。您可以添加多行文本并評(píng)估結(jié)果，如圖21-3所示。

圖21-3帶有一些文本的標(biāo)題窗格

不要顯式設(shè)置標(biāo)題窗格的最小高度，最大高度或首選高度，因?yàn)檫@可能會(huì)在打開或關(guān)閉標(biāo)題窗格時(shí)導(dǎo)致意外行為。

例21-2中顯示的代碼片段通過將幾個(gè)控件放入GridPane布局容器中，將幾個(gè)控件添加到標(biāo)題窗格中。

示例21-2帶有GridPane布局容器的標(biāo)題窗格

TitledPane gridTitlePane = new TitledPane(); GridPane grid = new GridPane(); grid.setVgap(4); grid.setPadding(new Insets(5, 5, 5, 5)); grid.add(new Label("First Name: "), 0, 0); grid.add(new TextField(), 1, 0); grid.add(new Label("Last Name: "), 0, 1); grid.add(new TextField(), 1, 1); grid.add(new Label("Email: "), 0, 2); grid.add(new TextField(), 1, 2); gridTitlePane.setText("Grid"); gridTitlePane.setContent(grid);

使用此代碼片段運(yùn)行和編譯應(yīng)用程序時(shí)，將顯示如圖21-4所示的輸出。

圖21-4包含多個(gè)控件的標(biāo)題窗格

您可以定義標(biāo)題窗格的打開和關(guān)閉方式。默認(rèn)情況下，所有標(biāo)題窗格都是可折疊的，并且它們的移動(dòng)是動(dòng)畫的。如果您的應(yīng)用程序禁止關(guān)閉標(biāo)題窗格，請(qǐng)使用setCollapsible帶有false值的方法。您還可以通過應(yīng)用setAnimated帶有false值的方法來禁用動(dòng)畫打開。例21-3中顯示的代碼片段實(shí)現(xiàn)了這些任務(wù)。

例21-3調(diào)整標(biāo)題窗格的樣式

TitledPane tp = new TitledPane(); //prohibit closing tp.setCollapsible(false); //prohibit animating tp.setAnimated(false);

將標(biāo)題窗格添加到折疊中

在您的應(yīng)用程序中，您可以使用標(biāo)題窗格作為獨(dú)立元素，或者可以使用Accordion控件將它們組合在一個(gè)組中。不要明確設(shè)置手風(fēng)琴的最小，最大或首選高度，因?yàn)檫@可能會(huì)在打開其標(biāo)題窗格之一時(shí)導(dǎo)致意外行為。

向手風(fēng)琴添加幾個(gè)標(biāo)題窗格類似于向切換組添加切換按鈕：一次只能在手風(fēng)琴中打開一個(gè)標(biāo)題窗格。例21-4創(chuàng)建了三個(gè)標(biāo)題窗格并將它們添加到手風(fēng)琴中。

例21-4折疊和三個(gè)標(biāo)題窗格

import javafx.application.Application; import javafx.scene.Group; import javafx.scene.Scene; import javafx.scene.control.Accordion; import javafx.scene.control.TitledPane; import javafx.scene.image.Image; import javafx.scene.image.ImageView; import javafx.scene.paint.Color; import javafx.stage.Stage;public class TitledPaneSample extends Application {final String[] imageNames = new String[]{"Apples", "Flowers", "Leaves"};final Image[] images = new Image[imageNames.length];final ImageView[] pics = new ImageView[imageNames.length];final TitledPane[] tps = new TitledPane[imageNames.length];public static void main(String[] args) {launch(args);}@Override public void start(Stage stage) {stage.setTitle("TitledPane");Scene scene = new Scene(new Group(), 80, 180);scene.setFill(Color.GHOSTWHITE);final Accordion accordion = new Accordion (); for (int i = 0; i < imageNames.length; i++) { images[i] = new Image(getClass().getResourceAsStream(imageNames[i] + ".jpg"));pics[i] = new ImageView(images[i]);tps[i] = new TitledPane(imageNames[i],pics[i]); } accordion.getPanes().addAll(tps);accordion.setExpandedPane(tps[0]);Group root = (Group)scene.getRoot();root.getChildren().add(accordion);stage.setScene(scene);stage.show();} }

在循環(huán)內(nèi)創(chuàng)建三個(gè)標(biāo)題窗格。每個(gè)標(biāo)題窗格的內(nèi)容都定義為一個(gè)ImageView對(duì)象。通過使用getPanes和addAll方法將標(biāo)題窗格添加到手風(fēng)琴中。您可以使用該add方法而不是addAll方法添加單個(gè)標(biāo)題窗格。

默認(rèn)情況下，應(yīng)用程序啟動(dòng)時(shí)會(huì)關(guān)閉所有標(biāo)題窗格。例21-4中的setExpandedPane方法指定在運(yùn)行樣本時(shí)將打開帶有蘋果圖片的標(biāo)題窗格，如圖21-5所示。

圖21-5帶有三個(gè)標(biāo)題窗格的折疊

?

處理具有標(biāo)題窗格的折疊的事件

您可以使用標(biāo)題窗格和折疊在應(yīng)用程序中顯示不同的數(shù)據(jù)。例21-5創(chuàng)建了一個(gè)獨(dú)立的標(biāo)題窗格，其中GridPane包含布局容器和使用折疊組合的三個(gè)標(biāo)題窗格。獨(dú)立標(biāo)題窗格包含電子郵件客戶端的UI元素。折疊使圖像的選擇能夠出現(xiàn)在Grid標(biāo)題窗格的Attachment字段中。

例21-5為Accordion實(shí)現(xiàn)ChangeListener

import javafx.application.Application; import javafx.beans.value.ChangeListener; import javafx.beans.value.ObservableValue; import javafx.geometry.Insets; import javafx.scene.Group; import javafx.scene.Scene; import javafx.scene.control.Accordion; import javafx.scene.control.Label; import javafx.scene.control.TextField; import javafx.scene.control.TitledPane; import javafx.scene.image.Image; import javafx.scene.image.ImageView; import javafx.scene.layout.GridPane; import javafx.scene.layout.HBox; import javafx.scene.paint.Color; import javafx.stage.Stage;public class TitledPaneSample extends Application {final String[] imageNames = new String[]{"Apples", "Flowers", "Leaves"};final Image[] images = new Image[imageNames.length];final ImageView[] pics = new ImageView[imageNames.length];final TitledPane[] tps = new TitledPane[imageNames.length];final Label label = new Label("N/A");public static void main(String[] args) {launch(args);}@Override public void start(Stage stage) {stage.setTitle("TitledPane");Scene scene = new Scene(new Group(), 800, 250);scene.setFill(Color.GHOSTWHITE);// --- GridPane containerTitledPane gridTitlePane = new TitledPane();GridPane grid = new GridPane();grid.setVgap(4);grid.setPadding(new Insets(5, 5, 5, 5));grid.add(new Label("To: "), 0, 0);grid.add(new TextField(), 1, 0);grid.add(new Label("Cc: "), 0, 1);grid.add(new TextField(), 1, 1);grid.add(new Label("Subject: "), 0, 2);grid.add(new TextField(), 1, 2); grid.add(new Label("Attachment: "), 0, 3);grid.add(label,1, 3);gridTitlePane.setText("Grid");gridTitlePane.setContent(grid);// --- Accordionfinal Accordion accordion = new Accordion (); for (int i = 0; i < imageNames.length; i++) {images[i] = new Image(getClass().getResourceAsStream(imageNames[i] + ".jpg"));pics[i] = new ImageView(images[i]);tps[i] = new TitledPane(imageNames[i],pics[i]); } accordion.getPanes().addAll(tps); accordion.expandedPaneProperty().addListener(new ChangeListener<TitledPane>() {public void changed(ObservableValue<? extends TitledPane> ov,TitledPane old_val, TitledPane new_val) {if (new_val != null) {label.setText(accordion.getExpandedPane().getText() + ".jpg");}}});HBox hbox = new HBox(10);hbox.setPadding(new Insets(20, 0, 0, 20));hbox.getChildren().setAll(gridTitlePane, accordion);Group root = (Group)scene.getRoot();root.getChildren().add(hbox);stage.setScene(scene);stage.show();} }

當(dāng)用戶在折疊中打開標(biāo)題窗格時(shí)，expandedPaneProperty折疊會(huì)改變。將ChangeListener通知對(duì)象此更改，并且折疊中的擴(kuò)展標(biāo)題窗格用于構(gòu)造附件的文件名。此文件名設(shè)置為相應(yīng)Label對(duì)象的文本。

圖21-6顯示了應(yīng)用程序啟動(dòng)后的外觀。附件標(biāo)簽包含“N / A”，因?yàn)闆]有選擇標(biāo)題窗格。

圖21-6 TitledPaneSample應(yīng)用程序的初始視圖

如果展開Leaves標(biāo)題窗格，Attachment標(biāo)簽將包含“Leaves.jpg”，如圖21-7所示。

圖21-7帶葉子標(biāo)題窗格的TitledPaneSample應(yīng)用程序擴(kuò)展

因?yàn)門itledPane和Accordion類都是類的擴(kuò)展，所以Node可以對(duì)它們應(yīng)用視覺效果或轉(zhuǎn)換。您還可以通過應(yīng)用CSS樣式來更改控件的外觀。

?

相關(guān)的API文檔?

• TitledPane

• Accordion

• Label

• GridPane

• TextField

總結(jié)

以上是生活随笔為你收集整理的JavaFX UI控件教程（二十二）之Titled Pane和Accordion的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。