（翻译）第二十六回 JavaFX2.0 标题窗格TitledPane和手风琴控件Accordion

原文地址http://download.oracle.com/javafx/2.0/ui_controls/accordion-titledpane.htm#CACGBAHI

 

 

 

标题窗格就是带有标题的面板，可以被打开和关闭，也可以被包进任何

Node元素，诸如UI控件、图片、计入布局容器的元素组。

标题窗格可以用手风琴控件来形成组。手风琴控件能创建多个窗格而每次只显示一个。Figure 20-1 是带有3个标题窗格的手风琴控件。

 

Figure 20-1 Accordion with Three Titled Panes



Description of "Figure 20-1 Accordion with Three Titled Panes" 

 

JavaFX SDK API中的 

Accordion

 和 

TitledPane

 类用来实现这样的控件。

创建Titled Panes

创建

TitledPane

 控件要定义一个标题和一些内容。可以使用

TitledPane

 类的带有两个参数的构造方法，或者单独使用

setText

 

和setContent

 方法也行。两种方法都在Example
20-1 中 .

Example 20-1 Declaring a TitledPane Object

//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"));

它们的效果系统，都是 Figure 20-2 .

Figure 20-2 Titled Pane with a Button



Description of "Figure 20-2 Titled Pane with a Button"

标题窗格可以改变大小来适应它的内容。可以添加多行文本，结果见Figure 20-3 .

Figure 20-3 Titled Pane with Some Text



Description of "Figure 20-3 Titled Pane with Some Text" 

不要明确指定标题窗格的最小、最大和优先的高度值，这样在打开关闭时可能导致难以预料的行为。

 Example 20-2 在的代码添加了几个控件到标题窗格，然后加入到了

GridPane

 布局容器。

 

Example 20-2 Titled Pane with the GridPane Layout Container

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);

 

运行的结果是 Figure 20-4 。

Figure 20-4 Titled Pane that Contains Several Controls



Description of "Figure 20-4 Titled Pane that Contains Several Controls" 

可以定义标题窗格打开关闭的方式。默认地，标题窗格是可伸缩的，它们的移动也是动画。如果要阻止标题窗格关闭，

将setCollapsible方法

 设为

false。

 也可以将 

setAnimated

 方法设为

false来关闭动画打开效果。

Example
20-3 中的代码实现了该任务。

 

Example 20-3 Adjusting the Style of a Titled Pane

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

 

将Titled Panes加入到Accordion

在应用中，可以单独使用标题窗格，也可以使用

Accordion

 把控件编组。同样也不要指定手风琴控件的高度值。

将几个标题窗格加入到手风琴很类似把开关按钮加入到开关组：每次只能打开手风琴中的一个标题窗格。Example 20-4 创建了3个标题窗格并加入到了手风琴中。

 

Example 20-4 Accordion and Three Titled Panes

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();
}
}

 

用循环创建了3个标题窗格，每个的内容都是

ImageView

 对象。把标题窗格加入到手风琴中要使用

getPanes

和addAll

 方法。可以用

add

 方法代替

addAll

 方法来加入单个标题窗格。

默认地，应用启动后所有窗格都关着。

setExpandedPane方法指定了带有苹果图片的窗格要打开。见

 Figure
20-5 .

Figure 20-5 Accordion with Three Titled Panes



Description of "Figure 20-5 Accordion with Three Titled Panes" 

处理Accordion事件

可以使用标题窗格和手风琴程序不同的数据。Example 20-5 创建了一个单独的标题窗格放进

GridPane

 悲剧容器和三个标题窗格放进手风琴中。单独的窗格包含了一个email客户端元素，手风琴使得选择窗格会显示相应的图片。

 

Example 20-5 Implementing ChangeListener for an Accordion

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 container
TitledPane 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);

// --- Accordion
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.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();
}
}

 

当打开手风琴中的标题窗格时，手风琴的 

expandedPaneProperty

 属性就会改变。

ChangeListener对象通报了该变化，而手风琴中打开的标题窗格就构建一个文件名，该文件名就作为相应

Label对象的文本。

Figure 20-6 是应用启动后的样子，Attachment标签是"N/A,"因为没有窗格被选中。

 

Figure 20-6 Initial View of the TitledPaneSample Application



Description of "Figure 20-6 Initial View of the TitledPaneSample Application" 

 

如果打开的是Leaves标题窗格，Attachment标签就变成"Leaves.jpg,"见Figure 20-7 .

Figure 20-7 TitledPaneSample Application with the Leaves Titled Pane Expanded



Description of "Figure 20-7 TitledPaneSample Application with the Leaves Titled
Pane Expanded" 

TitledPane

 和

Accordion

 类都继承了

Node类，所以可以应用特效和使用CSS。