在代码和事件处理程序上更改 JavaFX 的样式
Changing styles on JavaFX on the code and event handler
我有两个问题让我疑惑。
1Q: 假设我有一个按钮，通过 SceneBuilder 我将按钮的样式设置为 "-fx-border-color: #FFFFFF" 它在 fxml 文件中。假设我也添加了其他样式。
我在鼠标进入按钮时创建了一个事件。如果我想创建一个效果，例如当鼠标进入和退出时边框的颜色发生变化，我必须通过放置 setStyle[=29 来实现=] 在事件和参数中，我放置了我已经拥有的所有样式并仅更改我想要的样式？例如：在 Button 中我有样式 a, b, c, -fx-border-color: #FFFFFF, d, e。为了达到这种效果，我必须这样做：Button.setStyle("a,b,c,-fx-border-color: #AAAAAA, d, e") 或者有更好的方法吗？
2Q: 在类似的情况下，如果我想让按钮在悬停时在 Y 轴上稍微上升一点，我是否必须为每个按钮创建一个不同的事件按钮并通过 SceneBuilder 关联它们？例如：
@FXML
void onMouseEnterEvent(MouseEvent event) {
button_NewProject.setLayoutY(button_NewProject.getLayoutY()-8);
}
我创建了上面的代码，然后意识到我实际上无法为所有按钮处理同一个事件，因为如果我这样做，当悬停一个按钮时所有按钮都会上升。我错了？我需要在这里做什么？
这是一个希望能有所帮助的演示。如果您有一个按钮处理程序可以处理多个按钮，则需要使用 event.getSource。 event.getSource 将 return 接收操作的按钮。
handleBtnOnAction Demo's this.
@FXML
public void handleBtnOnAction(ActionEvent event) {
Button tempButton = ((Button)event.getSource());
System.out.println("You pressed button " + tempButton.getText() + " - ID: " + tempButton.getId());
}
完整代码
主要
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;
/**
*
* @author sedrick (sedj601)
*/
public class JavaFXApplication6 extends Application {
@Override
public void start(Stage stage) throws Exception {
Parent root = FXMLLoader.load(getClass().getResource("FXMLDocument.fxml"));
Scene scene = new Scene(root);
stage.setScene(scene);
stage.show();
}
/**
* @param args the command line arguments
*/
public static void main(String[] args) {
launch(args);
}
}
控制器
import java.net.URL;
import java.util.ArrayList;
import java.util.Collections;
import java.util.List;
import java.util.ResourceBundle;
import java.util.concurrent.atomic.AtomicInteger;
import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.control.Button;
import javafx.scene.layout.GridPane;
/**
*
* @author sedrick (sedj601)
*/
public class FXMLDocumentController implements Initializable {
@FXML GridPane gpMain;
int turn = 0;
List<String> styles = new ArrayList();
@FXML
public void handleBtnOnAction(ActionEvent event) {
Button tempButton = ((Button)event.getSource());
System.out.println("You pressed button " + tempButton.getText() + " - ID: " + tempButton.getId());
}
@FXML
public void handleStartDemoBtnOnAction(ActionEvent event) {
Button tempStartDemoButton = (Button)event.getSource();
tempStartDemoButton.setText("Change Buttons' ID");
Collections.shuffle(styles);//Changes the styles location in the list.
AtomicInteger counter = new AtomicInteger();
gpMain.getChildren().forEach((node) -> {//get gridpane buttons
System.out.println(((Button)node).getText() + ": " + styles.get(counter.get()));
node.setId(styles.get(counter.getAndIncrement()));//Set the buttons CSS ID.
});
}
@Override
public void initialize(URL url, ResourceBundle rb) {
// TODO
styles.add("green");
styles.add("round-red");
styles.add("bevel-grey");
styles.add("glass-grey");
styles.add("shiny-orange");
styles.add("dark-blue");
styles.add("record-sales");
styles.add("rich-blue");
styles.add("big-yellow");
styles.add("iphone");
styles.add("ipad-dark-grey");
styles.add("ipad-grey");
styles.add("lion-default");
styles.add("lion");
styles.add("windows7-default");
styles.add("windows7");
styles.add("green");
}
}
FXML
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.layout.ColumnConstraints?>
<?import javafx.scene.layout.GridPane?>
<?import javafx.scene.layout.RowConstraints?>
<?import javafx.scene.layout.VBox?>
<VBox maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" spacing="10.0" xmlns="http://javafx.com/javafx/8.0.171" xmlns:fx="http://javafx.com/fxml/1" fx:controller="javafxapplication6.FXMLDocumentController">
<children>
<GridPane fx:id="gpMain" hgap="5.0" maxHeight="-Infinity" maxWidth="-Infinity" stylesheets="@main.css" vgap="5.0">
<columnConstraints>
<ColumnConstraints hgrow="SOMETIMES" maxWidth="200.0" minWidth="200.0" prefWidth="200.0" />
<ColumnConstraints hgrow="SOMETIMES" maxWidth="200.0" minWidth="200.0" prefWidth="200.0" />
<ColumnConstraints hgrow="SOMETIMES" maxWidth="200.0" minWidth="200.0" prefWidth="200.0" />
</columnConstraints>
<rowConstraints>
<RowConstraints maxHeight="200.0" minHeight="200.0" prefHeight="200.0" vgrow="SOMETIMES" />
<RowConstraints maxHeight="200.0" minHeight="200.0" prefHeight="200.0" vgrow="SOMETIMES" />
<RowConstraints maxHeight="200.0" minHeight="200.0" prefHeight="200.0" vgrow="SOMETIMES" />
</rowConstraints>
<children>
<Button maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" onAction="#handleBtnOnAction" text="1" />
<Button maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" onAction="#handleBtnOnAction" text="2" GridPane.columnIndex="1" />
<Button maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" onAction="#handleBtnOnAction" text="3" GridPane.columnIndex="2" />
<Button maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" onAction="#handleBtnOnAction" text="4" GridPane.rowIndex="1" />
<Button maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" onAction="#handleBtnOnAction" text="5" GridPane.columnIndex="1" GridPane.rowIndex="1" />
<Button maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" onAction="#handleBtnOnAction" text="6" GridPane.columnIndex="2" GridPane.rowIndex="1" />
<Button maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" onAction="#handleBtnOnAction" text="7" GridPane.rowIndex="2" />
<Button maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" onAction="#handleBtnOnAction" text="8" GridPane.columnIndex="1" GridPane.rowIndex="2" />
<Button maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" onAction="#handleBtnOnAction" text="9" GridPane.columnIndex="2" GridPane.rowIndex="2" />
</children>
</GridPane>
<Button maxWidth="1.7976931348623157E308" mnemonicParsing="false" onAction="#handleStartDemoBtnOnAction" prefHeight="100.0" text="Start Demo" />
</children>
</VBox>
CSS
/*
Code from http://fxexperience.com/2011/12/styling-fx-buttons-with-css/
*/
#green {
-fx-background-color:
linear-gradient(#f0ff35, #a9ff00),
radial-gradient(center 50% -40%, radius 200%, #b8ee36 45%, #80c800 50%);
-fx-background-radius: 6, 5;
-fx-background-insets: 0, 1;
-fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.4) , 5, 0.0 , 0 , 1 );
-fx-text-fill: #395306;
}
#round-red {
-fx-background-color: linear-gradient(#ff5400, #be1d00);
-fx-background-radius: 30;
-fx-background-insets: 0;
-fx-text-fill: white;
}
#bevel-grey {
-fx-background-color:
linear-gradient(#f2f2f2, #d6d6d6),
linear-gradient(#fcfcfc 0%, #d9d9d9 20%, #d6d6d6 100%),
linear-gradient(#dddddd 0%, #f6f6f6 50%);
-fx-background-radius: 8,7,6;
-fx-background-insets: 0,1,2;
-fx-text-fill: black;
-fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.6) , 5, 0.0 , 0 , 1 );
}
#glass-grey {
-fx-background-color:
#c3c4c4,
linear-gradient(#d6d6d6 50%, white 100%),
radial-gradient(center 50% -40%, radius 200%, #e6e6e6 45%, rgba(230,230,230,0) 50%);
-fx-background-radius: 30;
-fx-background-insets: 0,1,1;
-fx-text-fill: black;
-fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.6) , 3, 0.0 , 0 , 1 );
}
#shiny-orange {
-fx-background-color:
linear-gradient(#ffd65b, #e68400),
linear-gradient(#ffef84, #f2ba44),
linear-gradient(#ffea6a, #efaa22),
linear-gradient(#ffe657 0%, #f8c202 50%, #eea10b 100%),
linear-gradient(from 0% 0% to 15% 50%, rgba(255,255,255,0.9), rgba(255,255,255,0));
-fx-background-radius: 30;
-fx-background-insets: 0,1,2,3,0;
-fx-text-fill: #654b00;
-fx-font-weight: bold;
-fx-font-size: 14px;
-fx-padding: 10 20 10 20;
}
#dark-blue {
-fx-background-color:
#090a0c,
linear-gradient(#38424b 0%, #1f2429 20%, #191d22 100%),
linear-gradient(#20262b, #191d22),
radial-gradient(center 50% 0%, radius 100%, rgba(114,131,148,0.9), rgba(255,255,255,0));
-fx-background-radius: 5,4,3,5;
-fx-background-insets: 0,1,2,0;
-fx-text-fill: white;
-fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.6) , 5, 0.0 , 0 , 1 );
-fx-font-family: "Arial";
-fx-text-fill: linear-gradient(white, #d0d0d0);
-fx-font-size: 12px;
-fx-padding: 10 20 10 20;
}
#dark-blue Text {
-fx-effect: dropshadow( one-pass-box , rgba(0,0,0,0.9) , 1, 0.0 , 0 , 1 );
}
#record-sales {
-fx-padding: 8 15 15 15;
-fx-background-insets: 0,0 0 5 0, 0 0 6 0, 0 0 7 0;
-fx-background-radius: 8;
-fx-background-color:
linear-gradient(from 0% 93% to 0% 100%, #a34313 0%, #903b12 100%),
#9d4024,
#d86e3a,
radial-gradient(center 50% 50%, radius 100%, #d86e3a, #c54e2c);
-fx-effect: dropshadow( gaussian , rgba(0,0,0,0.75) , 4,0,0,1 );
-fx-font-weight: bold;
-fx-font-size: 1.1em;
}
#record-sales:hover {
-fx-background-color:
linear-gradient(from 0% 93% to 0% 100%, #a34313 0%, #903b12 100%),
#9d4024,
#d86e3a,
radial-gradient(center 50% 50%, radius 100%, #ea7f4b, #c54e2c);
}
#record-sales:pressed {
-fx-padding: 10 15 13 15;
-fx-background-insets: 2 0 0 0,2 0 3 0, 2 0 4 0, 2 0 5 0;
}
#record-sales Text {
-fx-fill: white;
-fx-effect: dropshadow( gaussian , #a30000 , 0,0,0,2 );
}
#rich-blue {
-fx-background-color:
#000000,
linear-gradient(#7ebcea, #2f4b8f),
linear-gradient(#426ab7, #263e75),
linear-gradient(#395cab, #223768);
-fx-background-insets: 0,1,2,3;
-fx-background-radius: 3,2,2,2;
-fx-padding: 12 30 12 30;
-fx-text-fill: white;
-fx-font-size: 12px;
}
#rich-blue Text {
-fx-effect: dropshadow( one-pass-box , rgba(0,0,0,0.8) , 0, 0.0 , 0 , 1);
}
#big-yellow {
-fx-background-color:
#ecebe9,
rgba(0,0,0,0.05),
linear-gradient(#dcca8a, #c7a740),
linear-gradient(#f9f2d6 0%, #f4e5bc 20%, #e6c75d 80%, #e2c045 100%),
linear-gradient(#f6ebbe, #e6c34d);
-fx-background-insets: 0,9 9 8 9,9,10,11;
-fx-background-radius: 50;
-fx-padding: 15 30 15 30;
-fx-font-family: "Helvetica";
-fx-font-size: 18px;
-fx-text-fill: #311c09;
-fx-effect: innershadow( three-pass-box , rgba(0,0,0,0.1) , 2, 0.0 , 0 , 1);
}
#big-yellow Text {
-fx-effect: dropshadow( one-pass-box , rgba(255,255,255,0.5) , 0, 0.0 , 0 , 1);
}
#iphone-toolbar {
-fx-background-color: linear-gradient(#98a8bd 0%, #8195af 25%, #6d86a4 100%);
}
#iphone {
-fx-background-color:
#a6b5c9,
linear-gradient(#303842 0%, #3e5577 20%, #375074 100%),
linear-gradient(#768aa5 0%, #849cbb 5%, #5877a2 50%, #486a9a 51%, #4a6c9b 100%);
-fx-background-insets: 0 0 -1 0,0,1;
-fx-background-radius: 5,5,4;
-fx-padding: 7 30 7 30;
-fx-text-fill: #242d35;
-fx-font-family: "Helvetica";
-fx-font-size: 12px;
-fx-text-fill: white;
}
#iphone Text {
-fx-effect: dropshadow( one-pass-box , rgba(0,0,0,0.8) , 0, 0.0 , 0 , -1 );
}
#ipad-dark-grey {
-fx-background-color:
linear-gradient(#686868 0%, #232723 25%, #373837 75%, #757575 100%),
linear-gradient(#020b02, #3a3a3a),
linear-gradient(#9d9e9d 0%, #6b6a6b 20%, #343534 80%, #242424 100%),
linear-gradient(#8a8a8a 0%, #6b6a6b 20%, #343534 80%, #262626 100%),
linear-gradient(#777777 0%, #606060 50%, #505250 51%, #2a2b2a 100%);
-fx-background-insets: 0,1,4,5,6;
-fx-background-radius: 9,8,5,4,3;
-fx-padding: 15 30 15 30;
-fx-font-family: "Helvetica";
-fx-font-size: 18px;
-fx-font-weight: bold;
-fx-text-fill: white;
-fx-effect: dropshadow( three-pass-box , rgba(255,255,255,0.2) , 1, 0.0 , 0 , 1);
}
#ipad-dark-grey Text {
-fx-effect: dropshadow( one-pass-box , black , 0, 0.0 , 0 , -1 );
}
#ipad-grey {
-fx-background-color:
linear-gradient(#686868 0%, #232723 25%, #373837 75%, #757575 100%),
linear-gradient(#020b02, #3a3a3a),
linear-gradient(#b9b9b9 0%, #c2c2c2 20%, #afafaf 80%, #c8c8c8 100%),
linear-gradient(#f5f5f5 0%, #dbdbdb 50%, #cacaca 51%, #d7d7d7 100%);
-fx-background-insets: 0,1,4,5;
-fx-background-radius: 9,8,5,4;
-fx-padding: 15 30 15 30;
-fx-font-family: "Helvetica";
-fx-font-size: 18px;
-fx-font-weight: bold;
-fx-text-fill: #333333;
-fx-effect: dropshadow( three-pass-box , rgba(255,255,255,0.2) , 1, 0.0 , 0 , 1);
}
#ipad-grey Text {
-fx-effect: dropshadow( one-pass-box , white , 0, 0.0 , 0 , 1 );
}
#lion-default {
-fx-background-color:
rgba(0,0,0,0.08),
linear-gradient(#5a61af, #51536d),
linear-gradient(#e4fbff 0%,#cee6fb 10%, #a5d3fb 50%, #88c6fb 51%, #d5faff 100%);
-fx-background-insets: 0 0 -1 0,0,1;
-fx-background-radius: 5,5,4;
-fx-padding: 3 30 3 30;
-fx-text-fill: #242d35;
-fx-font-size: 14px;
}
#lion {
-fx-background-color:
rgba(0,0,0,0.08),
linear-gradient(#9a9a9a, #909090),
linear-gradient(white 0%, #f3f3f3 50%, #ececec 51%, #f2f2f2 100%);
-fx-background-insets: 0 0 -1 0,0,1;
-fx-background-radius: 5,5,4;
-fx-padding: 3 30 3 30;
-fx-text-fill: #242d35;
-fx-font-size: 14px;
}
#windows7-default {
-fx-background-color:
#3c7fb1,
linear-gradient(#fafdfe, #e8f5fc),
linear-gradient(#eaf6fd 0%, #d9f0fc 49%, #bee6fd 50%, #a7d9f5 100%);
-fx-background-insets: 0,1,2;
-fx-background-radius: 3,2,1;
-fx-padding: 3 30 3 30;
-fx-text-fill: black;
-fx-font-size: 14px;
}
#windows7 {
-fx-background-color:
#707070,
linear-gradient(#fcfcfc, #f3f3f3),
linear-gradient(#f2f2f2 0%, #ebebeb 49%, #dddddd 50%, #cfcfcf 100%);
-fx-background-insets: 0,1,2;
-fx-background-radius: 3,2,1;
-fx-padding: 3 30 3 30;
-fx-text-fill: black;
-fx-font-size: 14px;
}
我有两个问题让我疑惑。
1Q: 假设我有一个按钮，通过 SceneBuilder 我将按钮的样式设置为 "-fx-border-color: #FFFFFF" 它在 fxml 文件中。假设我也添加了其他样式。
我在鼠标进入按钮时创建了一个事件。如果我想创建一个效果，例如当鼠标进入和退出时边框的颜色发生变化，我必须通过放置 setStyle[=29 来实现=] 在事件和参数中，我放置了我已经拥有的所有样式并仅更改我想要的样式？例如：在 Button 中我有样式 a, b, c, -fx-border-color: #FFFFFF, d, e。为了达到这种效果，我必须这样做：Button.setStyle("a,b,c,-fx-border-color: #AAAAAA, d, e") 或者有更好的方法吗？
2Q: 在类似的情况下，如果我想让按钮在悬停时在 Y 轴上稍微上升一点，我是否必须为每个按钮创建一个不同的事件按钮并通过 SceneBuilder 关联它们？例如：
@FXML
void onMouseEnterEvent(MouseEvent event) {
button_NewProject.setLayoutY(button_NewProject.getLayoutY()-8);
}
我创建了上面的代码，然后意识到我实际上无法为所有按钮处理同一个事件，因为如果我这样做，当悬停一个按钮时所有按钮都会上升。我错了？我需要在这里做什么？
这是一个希望能有所帮助的演示。如果您有一个按钮处理程序可以处理多个按钮，则需要使用 event.getSource。 event.getSource 将 return 接收操作的按钮。
handleBtnOnAction Demo's this.
@FXML
public void handleBtnOnAction(ActionEvent event) {
Button tempButton = ((Button)event.getSource());
System.out.println("You pressed button " + tempButton.getText() + " - ID: " + tempButton.getId());
}
完整代码
主要
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;
/**
*
* @author sedrick (sedj601)
*/
public class JavaFXApplication6 extends Application {
@Override
public void start(Stage stage) throws Exception {
Parent root = FXMLLoader.load(getClass().getResource("FXMLDocument.fxml"));
Scene scene = new Scene(root);
stage.setScene(scene);
stage.show();
}
/**
* @param args the command line arguments
*/
public static void main(String[] args) {
launch(args);
}
}
控制器
import java.net.URL;
import java.util.ArrayList;
import java.util.Collections;
import java.util.List;
import java.util.ResourceBundle;
import java.util.concurrent.atomic.AtomicInteger;
import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.control.Button;
import javafx.scene.layout.GridPane;
/**
*
* @author sedrick (sedj601)
*/
public class FXMLDocumentController implements Initializable {
@FXML GridPane gpMain;
int turn = 0;
List<String> styles = new ArrayList();
@FXML
public void handleBtnOnAction(ActionEvent event) {
Button tempButton = ((Button)event.getSource());
System.out.println("You pressed button " + tempButton.getText() + " - ID: " + tempButton.getId());
}
@FXML
public void handleStartDemoBtnOnAction(ActionEvent event) {
Button tempStartDemoButton = (Button)event.getSource();
tempStartDemoButton.setText("Change Buttons' ID");
Collections.shuffle(styles);//Changes the styles location in the list.
AtomicInteger counter = new AtomicInteger();
gpMain.getChildren().forEach((node) -> {//get gridpane buttons
System.out.println(((Button)node).getText() + ": " + styles.get(counter.get()));
node.setId(styles.get(counter.getAndIncrement()));//Set the buttons CSS ID.
});
}
@Override
public void initialize(URL url, ResourceBundle rb) {
// TODO
styles.add("green");
styles.add("round-red");
styles.add("bevel-grey");
styles.add("glass-grey");
styles.add("shiny-orange");
styles.add("dark-blue");
styles.add("record-sales");
styles.add("rich-blue");
styles.add("big-yellow");
styles.add("iphone");
styles.add("ipad-dark-grey");
styles.add("ipad-grey");
styles.add("lion-default");
styles.add("lion");
styles.add("windows7-default");
styles.add("windows7");
styles.add("green");
}
}
FXML
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.layout.ColumnConstraints?>
<?import javafx.scene.layout.GridPane?>
<?import javafx.scene.layout.RowConstraints?>
<?import javafx.scene.layout.VBox?>
<VBox maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" spacing="10.0" xmlns="http://javafx.com/javafx/8.0.171" xmlns:fx="http://javafx.com/fxml/1" fx:controller="javafxapplication6.FXMLDocumentController">
<children>
<GridPane fx:id="gpMain" hgap="5.0" maxHeight="-Infinity" maxWidth="-Infinity" stylesheets="@main.css" vgap="5.0">
<columnConstraints>
<ColumnConstraints hgrow="SOMETIMES" maxWidth="200.0" minWidth="200.0" prefWidth="200.0" />
<ColumnConstraints hgrow="SOMETIMES" maxWidth="200.0" minWidth="200.0" prefWidth="200.0" />
<ColumnConstraints hgrow="SOMETIMES" maxWidth="200.0" minWidth="200.0" prefWidth="200.0" />
</columnConstraints>
<rowConstraints>
<RowConstraints maxHeight="200.0" minHeight="200.0" prefHeight="200.0" vgrow="SOMETIMES" />
<RowConstraints maxHeight="200.0" minHeight="200.0" prefHeight="200.0" vgrow="SOMETIMES" />
<RowConstraints maxHeight="200.0" minHeight="200.0" prefHeight="200.0" vgrow="SOMETIMES" />
</rowConstraints>
<children>
<Button maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" onAction="#handleBtnOnAction" text="1" />
<Button maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" onAction="#handleBtnOnAction" text="2" GridPane.columnIndex="1" />
<Button maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" onAction="#handleBtnOnAction" text="3" GridPane.columnIndex="2" />
<Button maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" onAction="#handleBtnOnAction" text="4" GridPane.rowIndex="1" />
<Button maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" onAction="#handleBtnOnAction" text="5" GridPane.columnIndex="1" GridPane.rowIndex="1" />
<Button maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" onAction="#handleBtnOnAction" text="6" GridPane.columnIndex="2" GridPane.rowIndex="1" />
<Button maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" onAction="#handleBtnOnAction" text="7" GridPane.rowIndex="2" />
<Button maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" onAction="#handleBtnOnAction" text="8" GridPane.columnIndex="1" GridPane.rowIndex="2" />
<Button maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" onAction="#handleBtnOnAction" text="9" GridPane.columnIndex="2" GridPane.rowIndex="2" />
</children>
</GridPane>
<Button maxWidth="1.7976931348623157E308" mnemonicParsing="false" onAction="#handleStartDemoBtnOnAction" prefHeight="100.0" text="Start Demo" />
</children>
</VBox>
CSS
/*
Code from http://fxexperience.com/2011/12/styling-fx-buttons-with-css/
*/
#green {
-fx-background-color:
linear-gradient(#f0ff35, #a9ff00),
radial-gradient(center 50% -40%, radius 200%, #b8ee36 45%, #80c800 50%);
-fx-background-radius: 6, 5;
-fx-background-insets: 0, 1;
-fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.4) , 5, 0.0 , 0 , 1 );
-fx-text-fill: #395306;
}
#round-red {
-fx-background-color: linear-gradient(#ff5400, #be1d00);
-fx-background-radius: 30;
-fx-background-insets: 0;
-fx-text-fill: white;
}
#bevel-grey {
-fx-background-color:
linear-gradient(#f2f2f2, #d6d6d6),
linear-gradient(#fcfcfc 0%, #d9d9d9 20%, #d6d6d6 100%),
linear-gradient(#dddddd 0%, #f6f6f6 50%);
-fx-background-radius: 8,7,6;
-fx-background-insets: 0,1,2;
-fx-text-fill: black;
-fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.6) , 5, 0.0 , 0 , 1 );
}
#glass-grey {
-fx-background-color:
#c3c4c4,
linear-gradient(#d6d6d6 50%, white 100%),
radial-gradient(center 50% -40%, radius 200%, #e6e6e6 45%, rgba(230,230,230,0) 50%);
-fx-background-radius: 30;
-fx-background-insets: 0,1,1;
-fx-text-fill: black;
-fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.6) , 3, 0.0 , 0 , 1 );
}
#shiny-orange {
-fx-background-color:
linear-gradient(#ffd65b, #e68400),
linear-gradient(#ffef84, #f2ba44),
linear-gradient(#ffea6a, #efaa22),
linear-gradient(#ffe657 0%, #f8c202 50%, #eea10b 100%),
linear-gradient(from 0% 0% to 15% 50%, rgba(255,255,255,0.9), rgba(255,255,255,0));
-fx-background-radius: 30;
-fx-background-insets: 0,1,2,3,0;
-fx-text-fill: #654b00;
-fx-font-weight: bold;
-fx-font-size: 14px;
-fx-padding: 10 20 10 20;
}
#dark-blue {
-fx-background-color:
#090a0c,
linear-gradient(#38424b 0%, #1f2429 20%, #191d22 100%),
linear-gradient(#20262b, #191d22),
radial-gradient(center 50% 0%, radius 100%, rgba(114,131,148,0.9), rgba(255,255,255,0));
-fx-background-radius: 5,4,3,5;
-fx-background-insets: 0,1,2,0;
-fx-text-fill: white;
-fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.6) , 5, 0.0 , 0 , 1 );
-fx-font-family: "Arial";
-fx-text-fill: linear-gradient(white, #d0d0d0);
-fx-font-size: 12px;
-fx-padding: 10 20 10 20;
}
#dark-blue Text {
-fx-effect: dropshadow( one-pass-box , rgba(0,0,0,0.9) , 1, 0.0 , 0 , 1 );
}
#record-sales {
-fx-padding: 8 15 15 15;
-fx-background-insets: 0,0 0 5 0, 0 0 6 0, 0 0 7 0;
-fx-background-radius: 8;
-fx-background-color:
linear-gradient(from 0% 93% to 0% 100%, #a34313 0%, #903b12 100%),
#9d4024,
#d86e3a,
radial-gradient(center 50% 50%, radius 100%, #d86e3a, #c54e2c);
-fx-effect: dropshadow( gaussian , rgba(0,0,0,0.75) , 4,0,0,1 );
-fx-font-weight: bold;
-fx-font-size: 1.1em;
}
#record-sales:hover {
-fx-background-color:
linear-gradient(from 0% 93% to 0% 100%, #a34313 0%, #903b12 100%),
#9d4024,
#d86e3a,
radial-gradient(center 50% 50%, radius 100%, #ea7f4b, #c54e2c);
}
#record-sales:pressed {
-fx-padding: 10 15 13 15;
-fx-background-insets: 2 0 0 0,2 0 3 0, 2 0 4 0, 2 0 5 0;
}
#record-sales Text {
-fx-fill: white;
-fx-effect: dropshadow( gaussian , #a30000 , 0,0,0,2 );
}
#rich-blue {
-fx-background-color:
#000000,
linear-gradient(#7ebcea, #2f4b8f),
linear-gradient(#426ab7, #263e75),
linear-gradient(#395cab, #223768);
-fx-background-insets: 0,1,2,3;
-fx-background-radius: 3,2,2,2;
-fx-padding: 12 30 12 30;
-fx-text-fill: white;
-fx-font-size: 12px;
}
#rich-blue Text {
-fx-effect: dropshadow( one-pass-box , rgba(0,0,0,0.8) , 0, 0.0 , 0 , 1);
}
#big-yellow {
-fx-background-color:
#ecebe9,
rgba(0,0,0,0.05),
linear-gradient(#dcca8a, #c7a740),
linear-gradient(#f9f2d6 0%, #f4e5bc 20%, #e6c75d 80%, #e2c045 100%),
linear-gradient(#f6ebbe, #e6c34d);
-fx-background-insets: 0,9 9 8 9,9,10,11;
-fx-background-radius: 50;
-fx-padding: 15 30 15 30;
-fx-font-family: "Helvetica";
-fx-font-size: 18px;
-fx-text-fill: #311c09;
-fx-effect: innershadow( three-pass-box , rgba(0,0,0,0.1) , 2, 0.0 , 0 , 1);
}
#big-yellow Text {
-fx-effect: dropshadow( one-pass-box , rgba(255,255,255,0.5) , 0, 0.0 , 0 , 1);
}
#iphone-toolbar {
-fx-background-color: linear-gradient(#98a8bd 0%, #8195af 25%, #6d86a4 100%);
}
#iphone {
-fx-background-color:
#a6b5c9,
linear-gradient(#303842 0%, #3e5577 20%, #375074 100%),
linear-gradient(#768aa5 0%, #849cbb 5%, #5877a2 50%, #486a9a 51%, #4a6c9b 100%);
-fx-background-insets: 0 0 -1 0,0,1;
-fx-background-radius: 5,5,4;
-fx-padding: 7 30 7 30;
-fx-text-fill: #242d35;
-fx-font-family: "Helvetica";
-fx-font-size: 12px;
-fx-text-fill: white;
}
#iphone Text {
-fx-effect: dropshadow( one-pass-box , rgba(0,0,0,0.8) , 0, 0.0 , 0 , -1 );
}
#ipad-dark-grey {
-fx-background-color:
linear-gradient(#686868 0%, #232723 25%, #373837 75%, #757575 100%),
linear-gradient(#020b02, #3a3a3a),
linear-gradient(#9d9e9d 0%, #6b6a6b 20%, #343534 80%, #242424 100%),
linear-gradient(#8a8a8a 0%, #6b6a6b 20%, #343534 80%, #262626 100%),
linear-gradient(#777777 0%, #606060 50%, #505250 51%, #2a2b2a 100%);
-fx-background-insets: 0,1,4,5,6;
-fx-background-radius: 9,8,5,4,3;
-fx-padding: 15 30 15 30;
-fx-font-family: "Helvetica";
-fx-font-size: 18px;
-fx-font-weight: bold;
-fx-text-fill: white;
-fx-effect: dropshadow( three-pass-box , rgba(255,255,255,0.2) , 1, 0.0 , 0 , 1);
}
#ipad-dark-grey Text {
-fx-effect: dropshadow( one-pass-box , black , 0, 0.0 , 0 , -1 );
}
#ipad-grey {
-fx-background-color:
linear-gradient(#686868 0%, #232723 25%, #373837 75%, #757575 100%),
linear-gradient(#020b02, #3a3a3a),
linear-gradient(#b9b9b9 0%, #c2c2c2 20%, #afafaf 80%, #c8c8c8 100%),
linear-gradient(#f5f5f5 0%, #dbdbdb 50%, #cacaca 51%, #d7d7d7 100%);
-fx-background-insets: 0,1,4,5;
-fx-background-radius: 9,8,5,4;
-fx-padding: 15 30 15 30;
-fx-font-family: "Helvetica";
-fx-font-size: 18px;
-fx-font-weight: bold;
-fx-text-fill: #333333;
-fx-effect: dropshadow( three-pass-box , rgba(255,255,255,0.2) , 1, 0.0 , 0 , 1);
}
#ipad-grey Text {
-fx-effect: dropshadow( one-pass-box , white , 0, 0.0 , 0 , 1 );
}
#lion-default {
-fx-background-color:
rgba(0,0,0,0.08),
linear-gradient(#5a61af, #51536d),
linear-gradient(#e4fbff 0%,#cee6fb 10%, #a5d3fb 50%, #88c6fb 51%, #d5faff 100%);
-fx-background-insets: 0 0 -1 0,0,1;
-fx-background-radius: 5,5,4;
-fx-padding: 3 30 3 30;
-fx-text-fill: #242d35;
-fx-font-size: 14px;
}
#lion {
-fx-background-color:
rgba(0,0,0,0.08),
linear-gradient(#9a9a9a, #909090),
linear-gradient(white 0%, #f3f3f3 50%, #ececec 51%, #f2f2f2 100%);
-fx-background-insets: 0 0 -1 0,0,1;
-fx-background-radius: 5,5,4;
-fx-padding: 3 30 3 30;
-fx-text-fill: #242d35;
-fx-font-size: 14px;
}
#windows7-default {
-fx-background-color:
#3c7fb1,
linear-gradient(#fafdfe, #e8f5fc),
linear-gradient(#eaf6fd 0%, #d9f0fc 49%, #bee6fd 50%, #a7d9f5 100%);
-fx-background-insets: 0,1,2;
-fx-background-radius: 3,2,1;
-fx-padding: 3 30 3 30;
-fx-text-fill: black;
-fx-font-size: 14px;
}
#windows7 {
-fx-background-color:
#707070,
linear-gradient(#fcfcfc, #f3f3f3),
linear-gradient(#f2f2f2 0%, #ebebeb 49%, #dddddd 50%, #cfcfcf 100%);
-fx-background-insets: 0,1,2;
-fx-background-radius: 3,2,1;
-fx-padding: 3 30 3 30;
-fx-text-fill: black;
-fx-font-size: 14px;
}