开发者社区> davelet> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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

简介: 原文地址http://download.oracle.com/javafx/2.0/ui_controls/accordion-titledpane.htm#CACGBAHI       标题窗格就是带有标题的面板,可以被打开和关闭,也可以被包进任何Node元素,诸如UI控件、图片、计入布局容器的元素组。
+关注继续查看

原文地址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 follows
Description of "Figure 20-1 Accordion with Three Titled Panes"

 

JavaFX SDK API中的 AccordionTitledPane 类用来实现这样的控件。

创建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

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

Figure 20-3 Titled Pane with Some Text

Description of Figure 20-3 follows
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 follows
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 follows
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 follows
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 follows
Description of "Figure 20-7 TitledPaneSample Application with the Leaves Titled Pane Expanded"

TitledPaneAccordion 类都继承了Node类,所以可以应用特效和使用CSS。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
JavaFX使用maven-shade-plugin打成Jar包
JavaFX使用maven-shade-plugin打成Jar包
42 0
企业级java springcloud b2bc商城系统开源源码二次开发-负载均衡策略
简单轮询负载均衡以轮询的方式依次将请求调度不同的服务器,即每次调度执行i=(i+1) mod n 随机负载均衡随机选择状态为UP的server 加权响应时间负载均衡根据响应时间分配一个weight,响应时间越长,weight越小,被选中的可能性越低。
1033 0
《JavaScript和jQuery实战手册(原书第2版)》——2.5节操作数据类型和变量
本节书摘来自华章社区《JavaScript和jQuery实战手册(原书第2版)》一书中的第2章,第2.5节操作数据类型和变量,作者:David Sawyer McFarland,更多章节内容可以访问云栖社区“华章社区”公众号查看
1147 0
通向架构师的道路(第二十一天)万能框架spring(三)之SSH
一、前言 我们有了Spring+JdbcTemplate和Spring+iBatis并结合maven的基础,搭建一个SSX这样的框架现在就和玩一样的简单了,今天我们将搭建一个使用Struts1.3,Srping3, Hibernate3的SSH1的开发框架,大家跟着我一步步走,会发觉在程序跑通后自己再动手搭建一遍这个框架,只需要30分钟。
1015 0
jQuery EasyUI API 中文文档 - 手风琴(Accordion)
Accordion 手风琴 用 $.fn.accordion.defaults 重写了 defaults。 依赖 panel 用法示例 创建 Accordion 经由标记创建 accordion, 添加 'easyui-accordion' 类到 标记。
897 0
(翻译)第二十七回 JavaFX2.0 文本Text及其特效
原文地址http://download.oracle.com/javafx/2.0/text/jfxpub-text.htm   文本讲述如何在JavaFX2.0应用中加入文本和如何为文本提供花俏的效果。
1508 0
+关注
davelet
擅长java开发,喜欢数学和物理。 现供职于永辉云创。
200
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载