javaFX - CSS 스타일 (font 속성 / shadow 효과 / 화면 스킨 입히기)

예제)

자바

package thisisjava;



import javafx.application.Application;

import javafx.fxml.FXMLLoader;

import javafx.scene.Parent;

import javafx.scene.Scene;

import javafx.stage.Stage;



public class AppMain extends Application {

@Override

public void start(Stage primaryStage) throws Exception {

Parent root = FXMLLoader.load(getClass().getResource("root.fxml"));

Scene scene = new Scene(root);

scene.getStylesheets().add(getClass().getResource("app.css").toString());


primaryStage.setTitle("font");

primaryStage.setScene(scene);

primaryStage.show();

}


public static void main(String[] args) {

launch(args);

}

}



 

FXML

<?xml version="1.0" encoding="UTF-8"?>



<?import javafx.scene.layout.*?>

<?import javafx.geometry.*?>

<?import javafx.scene.control.*?>



<VBox id="root" xmlns:fx="http://javafx.com/fxml" >

   <children>

      <Label id="name-text" text="My name is 부르곰" />   

   </children>

</VBox>



 

CSS

#root {

-fx-padding: 10;

}



#name-text {

   -fx-font-size: 35;

   -fx-font-family: "Arial Black";

   -fx-font-weight: bold;

   -fx-text-fill: linear-gradient(to bottom, blue, white);

 

---

shadow 효과

 

JavaFX CSS 는 그림자 효과를 주기 위해 -fx-effect 속성 제공.

 

속성 값

 

1. dropshadow() : 바깥 그림자를 주어 튀어 나오는 느낌

 

2. innershadow() : 안쪽 그림자를 주어 움푹 들어간 느낌

 

자바

package thisisjava;



import javafx.application.Application;

import javafx.fxml.FXMLLoader;

import javafx.scene.Parent;

import javafx.scene.Scene;

import javafx.stage.Stage;



public class AppMain extends Application {

@Override

public void start(Stage primaryStage) throws Exception {

Parent root = FXMLLoader.load(getClass().getResource("root.fxml"));

Scene scene = new Scene(root);

scene.getStylesheets().add(getClass().getResource("app.css").toString());


primaryStage.setTitle("shadow");

primaryStage.setScene(scene);

primaryStage.show();

}


public static void main(String[] args) {

launch(args);

}

}



 

FXML

<?xml version="1.0" encoding="UTF-8"?>



<?import javafx.scene.layout.*?>

<?import javafx.geometry.*?>

<?import javafx.scene.control.*?>



<HBox prefWidth="300" prefHeight="150" xmlns:fx="http://javafx.com/fxml"  spacing="50" fillHeight="false" alignment="CENTER">

<padding>

<Insets topRightBottomLeft="10"/>

</padding>

   <children>

      <Button id="btn1" prefWidth="100" prefHeight="50" text="DropShadow"/>

      <Button id="btn2" prefWidth="100" prefHeight="50" text="InnerShadow"/>

   </children>

</HBox>


 

CSS

#btn1 {

-fx-effect: dropshadow(three-pass-box , rgba(0,0,0,0.7) , 10, 0 , 5 , 5);

}



#btn2 {

-fx-effect: innershadow(three-pass-box , rgba(0,0,0,0.7) , 10, 0 , 3, 3);

}

 

---

화면 스킨 입히기 

 

 - 지금 까지 공부한 css 총정리

 

 오라클 JavaFX CSS 샘플 예제)

자바

package thisisjava;



import javafx.application.Application;

import javafx.fxml.FXMLLoader;

import javafx.scene.Parent;

import javafx.scene.Scene;

import javafx.stage.Stage;



public class AppMain extends Application {

@Override

public void start(Stage primaryStage) throws Exception {

Parent root = FXMLLoader.load(getClass().getResource("root.fxml"));

Scene scene = new Scene(root);

scene.getStylesheets().add(getClass().getResource("app.css").toString());


primaryStage.setTitle("total");

primaryStage.setScene(scene);

primaryStage.show();

}


public static void main(String[] args) {

launch(args);

}

}



 

FXML

<?xml version="1.0" encoding="UTF-8"?>



<?import javafx.scene.layout.*?>

<?import javafx.scene.control.*?>



<AnchorPane styleClass="root"  xmlns:fx="http://javafx.com/fxml"

prefHeight="194.0" prefWidth="300.0" >

<children>

<Label id="welcome-text" layoutX="40.0" layoutY="14.0" text="오라클 예제" />   

<Label layoutX="42.0" layoutY="80.0" text="아이디" />

<Label layoutX="42.0" layoutY="118.0" text="패스워드" />

<TextField layoutX="120.0" layoutY="76.0" />

<PasswordField layoutX="120.0" layoutY="114.0" />

<Button layoutX="97.0" layoutY="158.0" styleClass="button" text="로그인" />

<Button layoutX="164.0" layoutY="158.0" styleClass="button" text="취소" />

</children>

</AnchorPane>


 

CSS

.root {

     -fx-background-image: url("images/background.jpg");

}



Label {

    -fx-font-size: 12px;

    -fx-font-weight: bold;

    -fx-text-fill: #333333;

}



#welcome-text {

   -fx-font-size: 35px;

   -fx-font-family: "Arial Black";

   -fx-text-fill: linear-gradient(darkgray, lightgray);

   -fx-effect: innershadow( three-pass-box , rgba(0,0,0,0.7) , 3, 0 , 2 , 2.1 );

}



.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) , 10, 0 , 2 , 2 );

}



.button:hover {

    -fx-background-color: linear-gradient(#2A5058, #61a2b1);

}



.button:pressed {

    -fx-background-color: linear-gradient(yellow, #61a2b1);

}