JavaFX文档(5)开始JavaFX之旅——3 使用CSS

声明：如需转载，请注明出处:http://blog.csdn.net/originer

原文出处：http://docs.oracle.com/javase/8/javafx/get-started-tutorial/css.htm

本教程描述如何使用层叠样式表（CSS）来使得JavaFX 应用程序看起来更具魅力。说起来是很简单的事儿：开发一个界面，创建一个.css文件，然后应用样式。

下面展示了应用样式的界面前后对比：

创建工程

用你熟悉的IDE创建工程，可使用之前的代码或在官网下载Login.zip.

创建CSS文件

在代码中增加初始化CSS代码：

primaryStage.setScene(scene);
scene.getStylesheets().add(this.getClass().getResource("Login.css").toExternalForm());

在当前类所在包下，创建Login.css文件

增加背景图

先下载背景图background.jpg，将其保存到当前类所在的文件夹下，然后在Login.css文件中添加样式增加背景图：

.root {
     -fx-background-image: url("background.jpg");/* 设置背景图 */
}

将背景图应用到.root样式上，表示将会将样式应用到Scene实例的root 节点上。

运行后界面如下：

改变Label样式

 下面使用.label样式类来将样式应用到label控件上：

.label {
	/* 设置字体 */
    -fx-font-size: 12px;
    -fx-font-weight: bold;
    -fx-text-fill: #333333;
    /* 设置阴影 */
    -fx-effect: dropshadow( gaussian , rgba(255,255,255,0.5) , 0,0,0,1 );
}

其中的阴影特效用于在深灰色文字和浅灰色背景之间增加一定的对比度。关于特效请参考JavaFX CSS Reference Guide。
运行之后效果如下：

改变Text样式

1.首先，将这两句代码删除，去除scenetitle和actiontarget对象的内联样式：

scenetitle.setFont(Font.font(”Tahoma”, FontWeight.NORMAL, 20));

actiontarget.setFill(Color.FIREBRICK);

2.使用setID()方法为文本节点创建ID，在代码中增加：

...
Text scenetitle = new Text("Welcome");
scenetitle.setId("welcome-text");
...
...
grid.add(actiontarget, 1, 6);
actiontarget.setId("actiontarget");
..

3. 在Login.css文件中为welcome-text和actiontarget ID增加样式。在文件中的ID之前增加#前缀。

#welcome-text {
   -fx-font-size: 32px;
   -fx-font-family: "Arial Black";
   -fx-fill: #818181;
   -fx-effect: innershadow( three-pass-box , rgba(0,0,0,0.7) , 6, 0.0 , 0 , 2 );
}
#actiontarget {
  -fx-fill: FIREBRICK;
  -fx-font-weight: bold;
  -fx-effect: dropshadow( gaussian , rgba(255,255,255,0.5) , 0,0,0,1 );  
}

运行效果如图：

改变Button样式

下面改变按钮的样式，当鼠标移上去时改变其外观，使得用户能感知到按钮当前是否被激活，这是一个常见的设计实践。

首先是用.button样式类来创建初始样式：

.button {
    -fx-text-fill: white;
    -fx-font-family: "Arial Narrow";
    -fx-font-weight: bold;
    -fx-background-color: linear-gradient(#61a2b1, #2A5058);
    -fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.6) , 5, 0.0 , 0 , 1 );
}

然后创建鼠标移过时的样式，使用hover伪类（pseudo-class）来实现。伪类由类选择器、分号以及伪类名称构成，如下所示：

.button:hover {
    -fx-background-color: linear-gradient(#2A5058, #61a2b1);
}

按钮两种状态的对比如下：

最终效果如下：

最终的代码如下：

package helloworld;

import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.control.PasswordField;
import javafx.scene.control.TextField;
import javafx.scene.layout.GridPane;
import javafx.scene.layout.HBox;
import javafx.scene.paint.Color;
import javafx.scene.text.Font;
import javafx.scene.text.FontWeight;
import javafx.scene.text.Text;
import javafx.stage.Stage;

public class HelloWorld extends Application {

	@Override
	public void start(Stage primaryStage) throws Exception {
		GridPane grid = new GridPane();
		grid.setAlignment(Pos.CENTER);
		grid.setHgap(10);
		grid.setVgap(10);
		grid.setPadding(new Insets(25, 25, 25, 25));
		createContent(grid);
		Scene scene = new Scene(grid);
		primaryStage.setScene(scene);

		//增加样式
		scene.getStylesheets().add(this.getClass().getResource("Login.css").toExternalForm());

		primaryStage.setTitle("Login");
		primaryStage.show();
	}

	private void createContent(GridPane grid) {
		Text scenetitle = new Text("Welcome");//创建不可编辑的文本对象
//		scenetitle.setFont(Font.font("Tahoma", FontWeight.NORMAL, 20));//使用内联方式设置字体、字重、字号；将来使用CSS是更好的选择
		scenetitle.setId("welcome-text");

		grid.add(scenetitle, 0, 0, 2, 1);//添加到第到第0列、第0行，最后两个参数分别表示跨列和跨行数目


		//创建Label对象，放到第0列，第1行
		Label userName = new Label("User Name:");
		grid.add(userName, 0, 1);

		//创建文本输入框，放到第1列，第1行
		TextField userTextField = new TextField();
		grid.add(userTextField, 1, 1);

		Label pw = new Label("Password:");
		grid.add(pw, 0, 2);

		PasswordField pwBox = new PasswordField();
		grid.add(pwBox, 1, 2);

		//如果将网格线显示出来，在调试时会看得更为清晰
//		grid.setGridLinesVisible(true);

		Button btn = new Button("Sign in");//创建按钮，其上显示文字
		HBox hbBtn = new HBox(10);//创建一个HBox布局pane
		hbBtn.setAlignment(Pos.BOTTOM_RIGHT);//设置对齐方式为靠右下对齐
		hbBtn.getChildren().add(btn);//将按钮控件作为子节点
		grid.add(hbBtn, 1, 4);//将HBox pane放到grid中的第1列，第4行

		final Text actiontarget=new Text();//增加用于显示信息的文本
		grid.add(actiontarget, 1, 6);
		actiontarget.setId("actiontarget");

		btn.setOnAction(new EventHandler<ActionEvent>() {//注册事件handler
		    @Override
		    public void handle(ActionEvent e) {
//		        actiontarget.setFill(Color.FIREBRICK);//将文字颜色变成 firebrick red
		        actiontarget.setText("Sign in button pressed");
		    }
		});


	}

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