JavaFX桌面应用开发-Button(按钮)与事件

1:Button样式的操作

原始代码:

package application;

import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.paint.Paint;
import javafx.stage.Stage;

public class Main extends Application {

	@Override
	public void start(Stage primaryStage) throws Exception {
		
		//创建button类
		//注意:Group容器组会自适应调节node节点的高、宽 以容纳node节点的内容 例如:如果下面Button的text内容比较多 那么对应的Button会相应加长
		Button button = new Button("Button1");
		button.setLayoutX(10); //设置起始点的X轴坐标
		button.setLayoutY(10); //设置起始的Y轴坐标		
		//设置button的宽度 高度
		button.setPrefWidth(100);
		button.setPrefHeight(100);
		
		//设置字体颜色
		button.setTextFill(Paint.valueOf("red"));
		//设置Button的风格
		//button.setStyle(" -fx-background-color: red;");
		
		//设置Group
		Group group = new Group();
		group.getChildren().add(button);
		
		//创建场景Scene
		Scene scene = new Scene(group);
		
		primaryStage.setScene(scene);
		//设置stage的宽度 高度
		primaryStage.setHeight(500);
		primaryStage.setWidth(500);		
		primaryStage.show();
		
		
	}

	public static void main(String[] args) {
		launch(args);
	}
}

1.1:设置字体颜色

1.1.1:设置字体颜色的操作

方法一:写颜色的名称

//设置字体颜色
button.setTextFill(Paint.valueOf("red"));

方法二:写颜色对应的代码(比如红色对应#ff0000)

//设置字体颜色
button.setTextFill(Paint.valueOf("#ff0000"));

运行结果:

1.1.2:颜色的Value值表

2:Button对象的setStyle方法设置CSS样式

官方参考文档:https://docs.oracle.com/javase/8/javafx/api/javafx/scene/doc-files/cssref.html#typefont

文档中对Button的CSS很少 我可以看Button父类Region(Ctrl+T可以看到Button的Tree继承关系)

2.1:查看文档 Region的CSS样式如下

Region

Style class: empty by default

A Region is a Node (extending from Parent) with backgrounds and borders that are styleable via CSS. A Region is typically a rounded rectangle, though this can be modified through CSS to be an arbitrary shape. Regions can contain other Region objects (sub-regions) or they can contain sub-controls. All Regions have the same set of CSS properties as described below.

Each Region consists of several layers, painted from bottom to top, in this order:

  1. background fills
  2. background images
  3. border strokes
  4. border images
  5. contents

The background and border mechanisms are patterned after the CSS 3 draft backgrounds and borders module. See [4] for a detailed description.

Background fills are specified with the properties -fx-background-color, -fx-background-radius and -fx-background-insets. The -fx-background-color property is a series of one or more comma-separated <paint> values. The number of values in the series determines the number of background rectangles that are painted. Background rectangles are painted in the order specified using the given <paint> value. Each background rectangle can have different radii and insets. The -fx-background-radius and -fx-background-insets properties are series of comma-separated values (or sets of values). The radius and insets values used for a particular background are the found in the corresponding position in the -fx-background-radius and -fx-background-insets series. For example, suppose a series of three values is given for the -fx-background-color property. A series of three values should also be specified for the -fx-background-radius and -fx-background-insets properties. The first background will be painted using the first radius value and first insets value, the second background will be painted with the second radius value and second insets value, and so forth.

Note also that properties such as -fx-background-radius and -fx-background-insets can contain a series of values or sets of four values. A set of values is separated by whitespace, whereas the values or sets-of-values in a series are separated by commas. For -fx-background-radius, a single value indicates that the value should be used for the radius of all four corners of the background rectangle. A set of four values indicates that different radius values are to be used for the top-left, top-right, bottom-right, and bottom-left corners, in that order. Similarly, the -fx-background-insets property can also contain a series of values or sets of values. A set of four values for -fx-background-insets indicates that different insets are to be used for the top, right, bottom, and left edges of the rectangle, in that order.

Background images are specified with the properties -fx-background-image, -fx-background-repeat, -fx-background-position and -fx-background-size. The number of images in the series of -fx-background-image values determines the number of background images that are painted. The -fx-background-repeat, -fx-background-position, and -fx-background-size properties each can contain a series of values. For each item in the -fx-background-image series, the corresponding items in the -fx-background-repeat, -fx-background-position, and -fx-background-size properties are applied to that background image.

Stroked borders are specified with the properties -fx-border-color, -fx-border-style, -fx-border-width, -fx-border-radius and -fx-border-insets. Each property contains a series of items. The maximum number of items in the -fx- border-color or -fx-border-style property determines the number of border layers that are painted.. Each border in the series is painted using information from the corresponding series item of the -fx-border-color, -fx-border-style, -fx-border-width, -fx-border-radius, and -fx-border-insets properties. If there is no -fx-border-color, the default color is black. if there is no -fx-border-style, the default style is solid.

Image borders are specified with the properties -fx-border-image-source, -fx-border-image-repeat, -fx-border-image-slice, -fx-border-image-width and -fx-border-image-insets. Each property contains a series of items. The number of items in the -fx-border-image-source property determines the number of images that are painted. Each image in the series is painted using information from the corresponding series items of the -fx-border-image-repeat, -fx-border-image-slice, -fx-border-image-width, and -fx-border-image-insets properties.

The region's contents are a sequence of nodes, like any other container. The contents are set programmatically and cannot be set via CSS.

CSS PropertyValuesDefaultComments
BACKGROUND FILLS (see CSS Backgrounds and Borders Module Level 3: Backgrounds)
-fx-region-backgroundjavafx.scene.layout.BackgroundnullThis cannot be set directly from CSS but is created from the property values of -fx-background-color, -fx-background-image, -fx-background-insets, -fx-background-position, -fx-background-radius, -fx-background-repeat, -fx-background-size
-fx-background-color<paint> [ , <paint> ]*transparentA series of paint values separated by commas.
-fx-background-insets<size> | <size> <size> <size><size> [ , [ <size> | <size><size> <size> <size>] ]*0 0 0 0

A series of size values or sets of four size values, separated by commas. A single size value means all insets are the same. Otherwise, the four values for each inset are given in the order top, right, bottom, left. Each comma-separated value or set of values in the series applies to the corresponding background color.

-fx-background-radius[<size>]{1,4} [ / [<size>]{1,4} ]? [ , [<size>]{1,4} [ / [<size>]{1,4} ]? ]*0 0 0 0

The same syntax and semenatics as CSS Backgrounds and Borders Module Level 3: Curve Radii applies to -fx-background-radius. Note that JavaFX supports only the short-hand syntax.

Each comma-separated value or set of values in the series applies to the corresponding background color.

BACKGROUND IMAGES (see CSS Backgrounds and Borders Module Level 3: Background Image)
-fx-background-image<uri> [ , <uri> ]*nullA series of image URIs separated by commas.
-fx-background-position

<bg-position> [ , <bg-position> ]*
where <bg-position> = [
    [ [ <size> | left | center | right ] [ <size> | top | center | bottom ]? ]
    | [ [ center | [ left | right ] <size>? ] || [ center | [ top | bottom ] <size>? ]
]

0% 0%

A series of <bg-position> values separated by commas. Each bg-position item in the series applies to the corresponding image in the background-image series.

-fx-background-repeat<repeat-style> [ , <repeat-style> ]*
where <repeat-style> = repeat-x | repeat-y | [repeat | space | round | stretch | no-repeat]{1,2}
repeat repeat

A series of <repeat-style> values separated by commas. Each repeat-style item in the series applies to the corresponding image in the background-image series.

-fx-background-size<bg-size> [ , <bg-size> ]*
<bg-size> = [ <size> | auto ]{1,2} | cover | contain | stretch
auto auto

A series of <bg-size> values separated by commas. Each bg-size item in the series applies to the corresponding image in the background-image series.

STROKED BORDERS (see CSS Backgrounds and Borders Module Level 3: Borders)

BORDER IMAGES (see CSS Backgrounds and Borders Module Level 3: Border Images)

-fx-region-borderjavafx.scene.layout.BordernullThis cannot be set directly from CSS but is created from the property values of -fx-border-color, -fx-border-insets, -fx-border-radius, -fx-border-style, -fx-border-width, -fx-border-image-insets, -fx-border-image-repeat, -fx-border-image-slice, -fx-border-image-source, -fx-border-image-width
-fx-border-color<paint> | <paint> <paint><paint> <paint> [ , [<paint> | <paint> <paint> <paint><paint>] ]*null

A series of paint values or sets of four paint values, separated by commas. For each item in the series, if a single paint value is specified, then that paint is used as the border for all sides of the region; and if a set of four paints is specified, they are used for the top, right, bottom, and left borders of the region, in that order. If the border is not rectangular, only the first paint value in the set is used.

-fx-border-insets<size> | <size> <size> <size><size> [ , [ <size> | <size><size> <size> <size>] ]*null

A series of inset or sets of four inset values, separated by commas. For each item in the series, a single inset value means that all insets are the same; and if a set of four inset values is specified, they are used for the top, right, bottom, and left edges of the region, in that order. Each item in the series of insets applies to the corresponding item in the series of border colors.

-fx-border-radius[<size>]{1,4} [ / [<size>]{1,4} ]? [ , [<size>]{1,4} [ / [<size>]{1,4} ]? ]*null

Refer to CSS Backgrounds and Borders Module Level 3: Curve Radii. JavaFX supports only the short-hand syntax.

Each comma-separated value or set of values in the series applies to the corresponding border color.

-fx-border-style

<border-style> [ , <border-style> ]*
where <border-style> = <dash-style> [phase <number>]? [centered | inside | outside]? [line-join [miter <number> | bevel | round]]? [line-cap [square | butt | round]]?
where <dash-style> = [ none | solid | dotted | dashed | segments( <number>, <number> [, <number>]*) ]

null

A series of border style values, separated by commas. Each item in the series applies to the corresponding item in the series of border colors.

The segments dash-style defines a sequence representing the lengths of the dash segments. Alternate entries in the sequence represent the lengths of the opaque and transparent segments of the dashes. This corresponds to the strokeDashArray variable of Shape.

The optional phase parameter defines the point in the dashing pattern that will correspond to the beginning of the stroke. This corresponds to the strokeDashOffset variable of Shape.

-fx-border-width<size> | <size> <size> <size><size> [ , [ <size> | <size><size> <size> <size>] ]*null

A series of width or sets of four width values, separated by commas. For each item in the series, a single width value means that all border widths are the same; and if a set of four width values is specified, they are used for the top, right, bottom, and left border widths, in that order. If the border is not rectangular, only the first width value is used. Each item in the series of widths applies to the corresponding item in the series of border colors.

-fx-border-image-source<uri> [ , <uri> ]*null

A series of image URIs, separated by commas.

-fx-border-image-insets<size> | <size> <size> <size><size> [ , [ <size> | <size><size> <size> <size>] ]*0 0 0 0

A series of inset or sets of four inset values, separated by commas. For each item in the series, a single inset value means that all insets are the same; and if a set of four inset values is specified, they are used for the top, right, bottom, and left edges of the region, in that order. Each item in the series of insets applies to the corresponding image in the series of border images.

-fx-border-image-repeat<repeat-style> [ , <repeat-style> ]*
where <repeat-style> = repeat-x | repeat-y | [repeat | space | round | no-repeat]{1,2}
repeat repeat

A series of repeat-style values, separated by commas. Each item in the series applies to the corresponding image in the series of border images.

-fx-border-image-slice

[<size> | <size> <size> <size><size> ] fill? [ , [ <size> | <size> <size> <size> <size><size> ] fill? ]*

100%

A series of image slice values or sets of four values, separated by commas. Each item in the series applies to the corresponding image in the series of border images. For each item in the series, if four values are given, they specify the size of the top, right, bottom, and left slices. This effectively divides the image into nine regions: an upper left corner, a top edge, an upper right corner, a right edge, a lower right corner, a bottom edge, a lower left corner, a left edge and a middle. If one value is specified, this value is used for the slice values for all four edges. If 'fill' is present, the middle slice is preserved, otherwise it is discarded. Percentage values may be used here, in which case the values are considered proportional to the source image.

-fx-border-image-width<size> | <size> <size> <size><size> [ , [ <size> | <size><size> <size> <size>] ]*1 1 1 1

A series of width or sets of four width values, separated by commas. For each item in the series, a single width value means that all border widths are the same; and if a set of four width values is specified, they are used for the top, right, bottom, and left border widths, in that order. If the border is not rectangular, only the first width value is used. Each item in the series of widths applies to the corresponding item in the series of border images. Percentage values may be used here, in which case the values are considered proportional to the border image area.

OTHER
-fx-padding<size> | <size> <size> <size><size>0 0 0 0

A sets of four padding values, separated by commas. For each item in the series, a single padding value means that all padding are the same; and if a set of four padding values is specified, they are used for the top, right, bottom, and left edges of the region, in that order.

-fx-position-shape<boolean>trueIf true means the shape centered within the region's width and height, otherwise the shape is positioned at its source position. Has no effect if a shape string is not specified.
-fx-scale-shape<boolean>trueIf true means the shape is scaled to fit the size of the region, otherwise the shape is at its source size, and its position depends on the value of the position-shape property. Has no effect if a shape string is not specified.
-fx-shape"<string>"nullAn SVG path string. By specifying a shape here the region takes on that shape instead of a rectangle or rounded rectangle. The syntax of this path string is specified in [3].
-fx-snap-to-pixel<boolean>trueDefines whether this region rounds position/spacing and ceils size values to pixel boundaries when laying out its children.
-fx-region-background nullThis property is set by specifying -fx-background-color and/or -fx-background-image. Optionally, the properties -fx-background-insets, -fx-background-radius, -fx-background-position, -fx-background-repeat, and -fx-background-size may also be set. In order to set the Region background to null, specify the style "-fx-background-color: null; -fx-background-image: null;". There is no shorthand notation for -fx-region-background at this time.
-fx-region-border nullThis property is set by specifying -fx-border-color and/or -fx-border-image. Optionally -fx-border-insets, -fx-border-radius, -fx-border-style, -fx-border-width, -fx-border-image-insets, -fx-border-image-repeat, -fx-border-image-slice and -fx-border-image-width may be specified. In order to set the Region background to null, specify the style "-fx-border-color: null; -fx-border-image: null;". There is no shorthand notation for -fx-region-border at this time.
-fx-min-height, -fx-pref-height, -fx-max-height<number>-1Percentage values are not useful since the actual value would be computed from the width and/or height of the Regions's parent before the parent is laid out.
-fx-min-width, -fx-pref-width, -fx-max-width<number>-1Percentage values are not useful since the actual value would be computed from the width and/or height of the Region's parent before the parent is laid out.
Also has all properties of Parent

2.2:编写Button的样式

原始代码在本文的开始已经附上了

 

button的样式需要以拼接字符串的方式拼接起来

//设置Button的风格
button.setStyle("-fx-background-color:Green;"+
			"-fx-background-insets:5;"+
			"-fx-border-color:Red;");

3:Button的点击事件

3.1:setOnAction对与button的基本操作事件

运行想象就是我们鼠标点击一下button按钮 控制台打印一句 Buttion点击一下 打印一下

//button的点击事件
button.setOnAction(new EventHandler<ActionEvent>() {
			
	@Override
	public void handle(ActionEvent event) {
				
		System.out.println("Buttion点击一下 打印一下");
				
	}
});

3.2:event对象获取button对象

3.2.1:点击button打印button上的text文本

//button的点击事件
button.setOnAction(new EventHandler<ActionEvent>() {
			
	@Override
	public void handle(ActionEvent event) {
		//event.getSource()获取一个Object对象 实际就是这个button 这里我们需要强制转行
		Button bu = (Button) event.getSource();
		//打印button的text文本信息可以验证
		System.out.println(bu.getText());
	
	}
});

3.2.2:点击button对button进行修改

//button的点击事件
button.setOnAction(new EventHandler<ActionEvent>() {
			
	@Override
	public void handle(ActionEvent event) {
		//event.getSource()获取一个Object对象 实际就是这个button 这里我们需要强制转行
		Button bu = (Button) event.getSource();
		bu.setText("点点点");
		bu.setPrefHeight(200);
				
	}
});

 

 

  • 3
    点赞
  • 63
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Kotlin是一种静态类型的编程语言,具有JVM的可移植性和Java的互操作性。Spring Boot是一个用于创建独立的、基于Spring框架的Java应用程序的框架,它提供了快速开发应用程序所需的所有功能。JavaFX是一个用于创建丰富客户端应用程序的框架,它提供了丰富的UI组件和布局管理器。 要使用Kotlin Spring Boot和JavaFX开发桌面应用程序,需要完成以下步骤: 1. 创建一个Kotlin Spring Boot项目。可以使用Spring Initializr创建项目,选择Kotlin和Spring Web依赖项。 2. 添加JavaFX依赖项。可以在pom.xml文件中添加以下依赖项: ``` <dependency> <groupId>org.openjfx</groupId> <artifactId>javafx-controls</artifactId> <version>16</version> </dependency> <dependency> <groupId>org.openjfx</groupId> <artifactId>javafx-fxml</artifactId> <version>16</version> </dependency> ``` 3. 创建一个JavaFX应用程序类。可以使用JavaFX的Application类作为应用程序的入口点。在这个类中,可以创建UI组件,处理事件和管理应用程序的状态。以下是一个简单的JavaFX应用程序类的示例: ```kotlin import javafx.application.Application import javafx.fxml.FXMLLoader import javafx.scene.Parent import javafx.scene.Scene import javafx.stage.Stage class MyApplication : Application() { override fun start(primaryStage: Stage?) { val root: Parent = FXMLLoader.load(javaClass.getResource("/fxml/main.fxml")) primaryStage?.title = "My Application" primaryStage?.scene = Scene(root) primaryStage?.show() } companion object { @JvmStatic fun main(args: Array<String>) { launch(MyApplication::class.java, *args) } } } ``` 4. 创建FXML布局文件。FXML是一种XML格式的文件,用于定义UI组件和布局。可以使用Scene Builder或手动创建FXML文件。以下是一个简单的FXML布局文件的示例: ```xml <?xml version="1.0" encoding="UTF-8"?> <?import javafx.scene.control.Button?> <?import javafx.scene.layout.AnchorPane?> <AnchorPane xmlns:fx="http://javafx.com/fxml/1" fx:id="root" prefHeight="400" prefWidth="600"> <Button fx:id="button" text="Click me" layoutX="250" layoutY="180" /> </AnchorPane> ``` 5. 在JavaFX应用程序类中加载FXML布局文件。可以使用FXMLLoader类加载FXML布局文件,并将其添加到应用程序的场景图中。以下是一个示例: ```kotlin val root: Parent = FXMLLoader.load(javaClass.getResource("/fxml/main.fxml")) primaryStage?.title = "My Application" primaryStage?.scene = Scene(root) primaryStage?.show() ``` 6. 处理UI事件。可以在JavaFX应用程序类中添加事件处理程序,以响应UI组件的事件。以下是一个处理按钮单击事件的示例: ```kotlin button.setOnAction { event -> println("Button clicked!") } ``` 7. 使用Spring Boot管理应用程序的状态。可以使用Spring Boot的依赖注入和管理功能来管理应用程序的状态和依赖关系。可以在Spring Boot的配置类中定义bean,然后在JavaFX应用程序类中使用它们。以下是一个简单的Spring Boot配置类的示例: ```kotlin @Configuration class AppConfig { @Bean fun myService(): MyService { return MyService() } } ``` 8. 在JavaFX应用程序类中使用Spring Boot的依赖注入功能。可以在JavaFX应用程序类的构造函数中注入Spring Boot管理的bean。以下是一个示例: ```kotlin class MyApplication : Application() { @Autowired lateinit var myService: MyService // ... } ``` 这就是使用Kotlin Spring Boot和JavaFX开发桌面应用程序的基本步骤。当然,还有很多其他的细节和技术,可以根据需要进行学习和应用。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值