位置：首頁 > Java技術 > JavaFX教學 > JavaFX - CSS樣式

JavaFX - CSS樣式

 上一篇 下一篇  

Screenshot AddressApp Part 4

第4部分主題

  • CSS樣式表
  • 添加應用程序圖標

CSS樣式表

在JavaFX中，你能使用層疊樣式表修飾你的用戶接口。這非常好！自定義Java應用界麵從來不是件簡單的事情。

在本教學中，我們將創建一個DarkTheme主題，靈感來自於Windows 8 Metro設計。按鈕的CSS來至於Pedro Duque Vieia的博客Java中JMetro-Windows 8 Metro控件。

熟悉CSS

如果你希望修飾你的JavaFX應用，通常你應該對CSS有一個基本的了解。一個好的起點是CSS教學.

關於CSS更多JavaFX指定信息:

缺省的JavaFX CSS

在JavaFX 8中缺省的CSS風格源碼是一個稱為modena.css文件。該CSS文件可以在JavaFX jar文件jfxrt.jar中找到，它位於Java目錄/jdk1.8.x/jre/lib/ext/jfxrt.jar。

解壓jfxrt.jar，你應該能在com/sun/javafx/scene/control/skin/modena/目錄下找到modena.css。

缺省的樣式表總是應用到JavaFX應用上。通過添加自定義樣式表，你能覆蓋modena.css中缺省的樣式。

提示：查看缺省的CSS文件能夠讓你模板你需要覆蓋掉那些樣式。

添加CSS樣式表

添加下麵的CSS文件DarkTheme.css到view包中。

DarkTheme.css
.background {
    -fx-background-color: #1d1d1d;
}

.label {
    -fx-font-size: 11pt;
    -fx-font-family: "Segoe UI Semibold";
    -fx-text-fill: white;
    -fx-opacity: 0.6;
}

.label-bright {
    -fx-font-size: 11pt;
    -fx-font-family: "Segoe UI Semibold";
    -fx-text-fill: white;
    -fx-opacity: 1;
}

.label-header {
    -fx-font-size: 32pt;
    -fx-font-family: "Segoe UI Light";
    -fx-text-fill: white;
    -fx-opacity: 1;
}

.table-view {
    -fx-base: #1d1d1d;
    -fx-control-inner-background: #1d1d1d;
    -fx-background-color: #1d1d1d;
    -fx-table-cell-border-color: transparent;
    -fx-table-header-border-color: transparent;
    -fx-padding: 5;
}

.table-view .column-header-background {
    -fx-background-color: transparent;
}

.table-view .column-header, .table-view .filler {
    -fx-size: 35;
    -fx-border-width: 0 0 1 0;
    -fx-background-color: transparent;
    -fx-border-color: 
        transparent
        transparent
        derive(-fx-base, 80%) 
        transparent;
    -fx-border-insets: 0 10 1 0;
}

.table-view .column-header .label {
    -fx-font-size: 20pt;
    -fx-font-family: "Segoe UI Light";
    -fx-text-fill: white;
    -fx-alignment: center-left;
    -fx-opacity: 1;
}

.table-view:focused .table-row-cell:filled:focused:selected {
    -fx-background-color: -fx-focus-color;
}

.split-pane:horizontal > .split-pane-divider {
    -fx-border-color: transparent #1d1d1d transparent #1d1d1d;
    -fx-background-color: transparent, derive(#1d1d1d,20%);
}

.split-pane {
    -fx-padding: 1 0 0 0;
}

.menu-bar {
    -fx-background-color: derive(#1d1d1d,20%);
}

.context-menu {
    -fx-background-color: derive(#1d1d1d,50%);
}

.menu-bar .label {
    -fx-font-size: 14pt;
    -fx-font-family: "Segoe UI Light";
    -fx-text-fill: white;
    -fx-opacity: 0.9;
}

.menu .left-container {
    -fx-background-color: black;
}

.text-field {
    -fx-font-size: 12pt;
    -fx-font-family: "Segoe UI Semibold";
}

/* 
 * Metro style Push Button
 * Author: Pedro Duque Vieira
 * http://pixelduke.wordpress.com/2012/10/23/jmetro-windows-8-controls-on-java/
 */
.button {
    -fx-padding: 5 22 5 22;   
    -fx-border-color: #e2e2e2;
    -fx-border-width: 2;
    -fx-background-radius: 0;
    -fx-background-color: #1d1d1d;
    -fx-font-family: "Segoe UI", Helvetica, Arial, sans-serif;
    -fx-font-size: 11pt;
    -fx-text-fill: #d8d8d8;
    -fx-background-insets: 0 0 0 0, 0, 1, 2;
}

.button:hover {
    -fx-background-color: #3a3a3a;
}

.button:pressed, .button:default:hover:pressed {
  -fx-background-color: white;
  -fx-text-fill: #1d1d1d;
}

.button:focused {
    -fx-border-color: white, white;
    -fx-border-width: 1, 1;
    -fx-border-style: solid, segments(1, 1);
    -fx-border-radius: 0, 0;
    -fx-border-insets: 1 1 1 1, 0;
}

.button:disabled, .button:default:disabled {
    -fx-opacity: 0.4;
    -fx-background-color: #1d1d1d;
    -fx-text-fill: white;
}

.button:default {
    -fx-background-color: -fx-focus-color;
    -fx-text-fill: #ffffff;
}

.button:default:hover {
    -fx-background-color: derive(-fx-focus-color,30%);
}

現在我們需要把CSS添加到我們的場景中。我們能在Java代碼中編程完成，但是我們將使用SceneBuilder來添加它到fxml文件中。

添加CSS到RootLayout.fxml

  1. 在Scene Builder中打開RootLayout.fxml

  2. 在Hierarchy視圖中選擇根節點BorderPan。在Properties組中添加DarkTheme.css作為樣式表。

DarkTheme for RootLayout

添加CSS到PersonEditDialog.fxml

  1. 在Scene Builder中打開PersonEditDialog.fxml。選擇根節點AnchorPane，並且在Properties組中選擇DarkTheme.css作為樣式表。

  2. 背景仍然是白色的，因此添加樣式類background到根節點AnchorPane。

Add Style Class

  1. 選擇OK按鈕，在Properties視圖中選擇Default Button單選框。這將修改它的顏色，當用戶輸入關鍵詞時，使用它作為缺省的按鈕。

添加CSS到PersonOverview.fxml

  1. 在Scene Builder中打開文件PersonOverview.fxml。在Hierarchy組中選擇根節點AnchorPane。在Properties下麵添加DarkTheme.css文件作為樣式表。

  2. 你現在應該已經看到一些修改，表和按鈕是黑色的。來自modena.css中所有類樣式.table-view和.button應用到表和按鈕。因為我們已經在自定義CSS中重定義(因此覆蓋掉)一些樣式。新的樣式自動應用。

  3. 你可能需要調整按鈕的大小，以便顯示所有的文本。

  4. 選擇SplitPane中右邊的AnchorPane。 Background Style Select

  5. 進入到Properties組，並且選擇background作為樣式表。背景現在應該變為黑色。 Background Style

使用不同樣式的標簽

現在，在左邊的所有的標簽都有相同的大小。這裡已經有一些樣式定義在CSS文件中，稱為.label-header和.label-bright。我們將使用更多樣式的標簽Label。

  1. 選擇Person Detail標簽，添加label-header作為樣式類。 Label Header Style

  2. 為了讓右邊欄的每個Label(顯示實際人員的詳情)，添加CSS樣式類label-bright。 Label Bright Style

添加應用圖標

現在，在標題欄和任務欄中，我們的應用隻有一個缺省圖標:

Default Icon

使用自定義圖標看起來更好了。

Custom Icon

圖標文件

獲取圖標的一個可能地方是Icon Finder。我下載了一個地址本的圖標.

通常在你的AddressApp項目中創建一個目錄稱為resources，在它中子目錄稱為images。把你選擇的圖標放入到images目錄中。現在，你的目錄結構應該看上去如下所示：

Custom Icon File

設置圖標到場景

為了給你場景設置圖標，添加下麵一行到MainApp.jar的start(…)方法中。

MainApp.java
this.primaryStage.getIcons().add(new Image("file:resources/images/address_book_32.png"));

現在，整個start(…)方法看上去應該是這樣的。:

public void start(Stage primaryStage) {
    this.primaryStage = primaryStage;
    this.primaryStage.setTitle("AddressApp");

    // Set the application icon.
    this.primaryStage.getIcons().add(new Image("file:resources/images/address_book_32.png"));

    initRootLayout();

    showPersonOverview();
}

當然，你也應該添加圖標到人員編輯對話框的Stage中。



 上一篇 下一篇  
極客書 © 2015-2020 . Email:   關於我們