JAVA chapter17. javaFX. 17.10 JavaFX CSS 스타일(3)

JAVA chapter17. javaFX. 17.10 JavaFX CSS 스타일(3)

17.10.5 font 속성

package sec10.exam07_shadow;
 
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("AppMain");
        primaryStage.setScene(scene);
        primaryStage.show();
    }
    
    public static void main(String[] args) {
        launch(args);
    }
}

<?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="welcome-text" text="Welcome" />   
   </children>
</VBox>

17.10.6 shadow 효과

#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);
}

<?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>

17.10.7 화면 스킨 입히기

<?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="Welcome" />   
        <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>

.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); // 방향이 주어지지 않았으면 to bottom이 생략되어 있음
   -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); // 방향이 주어지지 않았으면 to bottom이 생략되어 있음
    -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); // 방향이 주어지지 않았으면 to bottom이 생략되어 있음
}

.button:pressed {
    -fx-background-color: linear-gradient(yellow, #61a2b1); // 방향이 주어지지 않았으면 to bottom이 생략되어 있음    
}