javaFx 学习--之组件篇1(边框与布局管理1)

       编写了前面几小程序,大家对javaFx程序以有初步认识,下面我们一起来学习javaFx的组件, 这些组件包括,1.边框与布局管理;2.菜单;3.标签;4.面板组,简单标签,文本框,5.按钮;6.列表框;7.分割面板;8.单选按钮,单选按钮组,触发按钮,按钮组;9.多选按钮;10.树形;11.表;12文本框;13.微调与滑动组件.

      这次我们学习第一个组件,边框与布局管理,(暂不上传代码)

布局管理:

JavaFX Widget	Layout Manager
GridPanel	GridLayout
GridBagPanel	GridBagLayout
FlowPanel	FlowLayout
BorderPanel	BorderLayout
Box	BoxLayout
StackPanel	Romain Guy's StackLayout
CardPanel	CardLayout
GroupPanel	org.jdesktop.layout.GroupLayout

边框:

JavaFX Border	Swing Border
EmptyBorder	EmptyBorder
LineBorder	LineBorder
BevelBorder	BevelBorder
SoftBevelBorder	SoftBevelBorder
MatteBorder	MatteBorder
TitledBorder	TitledBorder

代码如下:

class ButtonClickModel {//定义类
            attribute numClicks: Number;//定义属性numClicks,数字类型
        }

        var model = new ButtonClickModel();//创建一个类

        var win = Frame {//建一个图形框
            width: 200 //宽
            height:100 //高
            content: GridPanel {//容器网格布局
                border: EmptyBorder {//空边框
                   top: 30    //顶边距
                   left: 30   //左边距
                   bottom: 30 //中边距
                   right: 30  //右边距
                }
                rows: 2//二行
                columns: 1//一列
                vgap: 10 //垂直间隙10像素
                cells://单玩格
                [Button {//按钮
                     text: "I'm a button!"//文本内容I'm a button
                     mnemonic: I  //I记忆属性 I
                     action: operation() {//动作或操作
                         model.numClicks++;//每单击一次自加
                    }
                },
                Label {//标签
                    text: bind "Number of button clicks: {model.numClicks}"
                     //文本是{model.numClicks}的值
                }]
            }
            visible: true//可见
        };

运行后效果: