JavaFx学习以及小demo的实现

   心得体会:

             刚开始学的时候感觉JavaFx跟swing确实有很大的不一样，swing的样式太过于死板并且加载界面的时候会时不时出现一些不可预知的bug，比如说一个组件加载不出来，说实话那个界面也是真的丑，导致用户体验感极差。不布过javafx不能直接用布局写在java文件中，为了界面更加美观,javafx的另一面则展现了强大的功能，就是用fxml文件结合css样式文件，思想跟网页布局差不多，最后在java文件里加载fxml文件和css文件，就可以展示好看的界面了。

  

 具体看下面的demo

  1.第一步，写出fxml文件

 

<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.geometry.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.effect.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.text.*?>
<?import javafx.scene.image.ImageView?>
<?import javafx.scene.image.Image?>
<BorderPane
       styleClass="green-theme"
       xmlns:fx="http://javafx.com/fxml"
       fx:controller="com.soft1841.book.controller.MainController">
   <top>
       <AnchorPane prefHeight="80.0">
           <Label text="图书后台管理系统" styleClass="font-gray" onMouseClicked="#listDefault"
                  AnchorPane.topAnchor="20" AnchorPane.leftAnchor="10">
               <effect>
                   <Reflection bottomOpacity="0.2" fraction="0.5" topOffset="-5.0"/>
               </effect>
               <font>
                   <Font name="System Bold" size="26.0"/>
               </font>
           </Label>
           <ImageView fitWidth="45" fitHeight="45" AnchorPane.topAnchor="15" AnchorPane.rightAnchor="120">
               <Image url="/img/me.png"/>
           </ImageView>
           <Button text="退出系统" styleClass="btn-radius-large,blue-theme"
                   AnchorPane.topAnchor="20" AnchorPane.rightAnchor="20"/>
       </AnchorPane>
   </top>
   <center>
       <SplitPane>
           <AnchorPane styleClass="dark-gray-theme" minWidth="200">
               <Accordion AnchorPane.leftAnchor="0.0"
                          AnchorPane.rightAnchor="0.0"
                          AnchorPane.topAnchor="0.0">
                   <panes>
                       <TitledPane alignment="TOP_LEFT" text="类别管理">
                           <VBox minHeight="100" spacing="10" styleClass="dark-theme">
                               <Button styleClass="menu-btn" text="图书类别" onAction="#listType"/>
                               <Button styleClass="menu-btn" text="分类统计"/>
                           </VBox>
                       </TitledPane>
                       <TitledPane alignment="TOP_LEFT" text="图书管理">
                           <VBox minHeight="100" spacing="10" styleClass="dark-theme">
                               <Button styleClass="menu-btn" text="图书信息" onAction="#listBook"/>
                               <Button styleClass="menu-btn" text="统计分析"/>
                           </VBox>
                       </TitledPane>
                       <TitledPane alignment="TOP_LEFT" text="用户管理">
                           <VBox minHeight="130" spacing="10" styleClass="dark-theme">
                               <Button styleClass="menu-btn" text="管理员信息"/>
                               <Button styleClass="menu-btn" text="读者信息"/>
                               <Button styleClass="menu-btn" text="统计分析"/>
                           </VBox>
                       </TitledPane>
                       <TitledPane alignment="TOP_LEFT" text="借阅管理">
                           <VBox minHeight="130" spacing="10" styleClass="dark-theme">
                               <Button styleClass="menu-btn" text="借阅查询"/>
                               <Button styleClass="menu-btn" text="统计分析"/>
                           </VBox>
                       </TitledPane>
                       <TitledPane alignment="TOP_LEFT" text="系统维护">
                           <VBox minHeight="130" spacing="10" styleClass="dark-theme">
                               <Button styleClass="menu-btn" text="系统初始化"/>
                               <Button styleClass="menu-btn" text="数据备份"/>
                               <Button styleClass="menu-btn" text="主题设置"/>
                           </VBox>
                       </TitledPane>
                   </panes>
               </Accordion>
           </AnchorPane>

           <!--中间内容面板-->
           <StackPane fx:id="mainContainer" styleClass="default-theme" minWidth="1060">
               <padding>
                   <Insets top="10" left="30" bottom="5" right="10"/>
               </padding>
           </StackPane>
           <padding>
               <Insets top="10"/>
           </padding>
       </SplitPane>
   </center>
</BorderPane>

第二步，写出css的样式文件

/*全局字体样式*/
.root {
   -fx-font-size: 14px;
}

/*按钮基础样式*/
.btn-basic {
   /*文本对齐方式*/
   -fx-text-alignment: center;
   /*合适高度*/
   -fx-pref-height: 38px;
   /*内边距*/
   -fx-padding: 0 18px;
   /*无边框*/
   -fx-border-style: none;
   /*鼠标样式*/
   -fx-cursor: pointer;
}

/*鼠标覆盖按钮效果*/
.btn-basic:hover {
   /*粗体*/
   -fx-font-weight: bold;
   /*透明度*/
   -fx-opacity: 0.8;
}

/*边框正常弧度按钮*/
.btn-radius-normal {
   -fx-border-radius: 2px;
   -fx-background-radius: 2px;
}

/*边框圆角按钮*/
.btn-radius-large {
   -fx-border-radius: 50px;
   -fx-background-radius: 50px;
}

/*默认主题*/
.default-theme {
   -fx-background-color: #fff;
   -fx-border-color: rgb(230, 230, 230);
   -fx-text-fill: rgb(110, 110, 110);
}
/*深灰色主题*/
.dark-gray-theme {
   -fx-background-color: rgb(58, 61, 73);
}
/*深色主题*/
.dark-theme {
   -fx-background-color: rgb(40, 43, 51);
}

/*绿色主题*/
.green-theme {
   -fx-background-color: #009688;
   -fx-text-fill: #fff;
}

/*灰色主题*/
.gray-theme {
   -fx-background-color: rgb(210, 210, 210);
   -fx-text-fill: #fff;
}

/*警告色主题*/
.warning-theme {
   -fx-background-color: rgb(254, 87, 34);
   -fx-text-fill: #fff;
}

/*暖色主题*/
.warm-theme {
   -fx-background-color: rgb(254, 184, 0);
   -fx-text-fill: #fff;
}

/*蓝色主题*/
.blue-theme {
   -fx-background-color: rgb(30, 158, 255);
   -fx-text-fill: #fff;
}

/*内容盒子样式，设置一下圆角和内边距*/
.box {
   -fx-border-color: rgb(162, 162, 162);
   -fx-border-radius: 5px;
   -fx-background-radius: 5px;
   -fx-padding: 5 5 5 5;
}

/*输入框样式*/
.input-group {
   /*对齐方式*/
   -fx-text-alignment: left;
   /*内容显示方式*/
   -fx-content-display: inline-block;
   /*合适高度*/
   -fx-pref-height: 30px;
   /*边框色*/
   -fx-border-color: rgb(230, 230, 230);
   /*提示文字颜色*/
   -fx-prompt-text-fill: rgb(162, 162, 162);
   /*输入文字颜色*/
   -fx-text-fill: rgb(110, 110, 110);
   /*边框圆角*/
   -fx-border-radius: 2px;
   -fx-background-radius: 2px;
   /*内边距*/
   -fx-padding: 5 5 5 5;
   /*鼠标形状*/
   -fx-cursor: pointer;
}

/*白色字体*/
.font-white {
   -fx-text-fill: #fff;
}

/*灰色字体*/
.font-gray {
   -fx-text-fill: rgb(110, 110, 110);
}

/*标题字体*/
.font-title {
   -fx-font-size: 18px;
   -fx-font-weight: bold;
}

/*复选框样式*/
.check-box .box {
   -fx-background-color: #fff;
   -fx-border-color: rgb(230, 230, 230);
   -fx-border-radius: 3px;
}

/*复选框选中后标记的颜色*/
.check-box:selected .mark {
   -fx-background-color: #fff;
}

/*复选框选中后背景色*/
.check-box:selected .box {
   -fx-background-color: rgb(95, 184, 120);
}

/*单选按钮样式*/
.radio-button .radio {
   -fx-background-color: #fff;
   -fx-border-color: rgb(230, 230, 230);
   -fx-border-radius: 100;
}

/*单选按钮中间点的颜色*/
.radio-button:selected .dot {
   -fx-background-color: #fff;
}

/*单选按钮选中后背景色*/
.radio-button:selected .radio {
   -fx-background-color: rgb(95, 184, 120);
}

/*表格内容居中显示*/
.table-view .table-column {
   -fx-alignment: center;
}

/*左侧导航菜单按钮样式*/
.menu-btn {
   -fx-pref-width: 300px;
   -fx-pref-height: 35px;
   -fx-background-color: rgb(40, 43, 51);
   -fx-text-fill: rgb(191, 192, 194);
}

/*左侧导航菜单按钮鼠标悬停效果*/
.menu-btn:hover {
   -fx-background-color: rgb(95, 184, 120);
   -fx-text-fill: #fff;
}

/*风琴标题面板字体颜色*/
.titled-pane {
   -fx-text-fill: rgb(174, 175, 180);
}

/*风琴标题面板背景色*/
.titled-pane > .title {
   -fx-background-color: rgb(58, 61, 73);
   -fx-padding: 30 10 10 10;
}

最后看一下运行的效果