[JavaFX] JavaFX CSS 파일 적용하는 방법

JavaFX에 CSS 파일 적용하는 방법

 

 이번 시간에는 JavaFX에서 FXML 파일을 꾸밀수 있는 CSS 파일을 만들고 적용하는 방법에 대해서 알아보겠습니다. 

 방법은 이전에 보았던 볼품없는(?) UI 를 가지고 간단하게 진행 해보겠습니다.

 목표하는 바는 아래 와 같습니다.

 텍스트 필드와 버튼이 클릭 되고 Focus가 됬을 때 원래는 파란색으로 테두리색이 바뀌지만 위 처럼 초록색으로 바꾸는 간단한 프로그램을

 

 작성해 보겠습니다. 

 

 일단 CSS 파일을 하나 만들어 봅시다.

 

 이렇게 만들어줍니다. 

 

 FXML 파일은 이전과 같습니다. 그래도 한번 더 보시죠.

sample.fxml

<?xml version="1.0" encoding="UTF-8"?>
 
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.control.ToolBar?>
<?import javafx.scene.image.Image?>
<?import javafx.scene.image.ImageView?>
<?import javafx.scene.layout.BorderPane?>
 
<BorderPane stylesheets="@style.css"  prefHeight="200" prefWidth="300" 
     xmlns="http://javafx.com/javafx/8.0.101" xmlns:fx="http://javafx.com/fxml/1"
     fx:controller="sample.Controller">
    <top>
        <ToolBar>
            <items>
                <TextField fx:id="txtField" prefWidth="240" style="-fx-cursor: red;" />
                <Button fx:id="btn" onAction="#handleButtonActoin" prefWidth="40" />
            </items>
        </ToolBar>
    </top>
    <center>
        <ImageView fx:id="imageView">
            <image>
                <Image url="@imgres.png" />
            </image>
        </ImageView>
    </center>
    <bottom>
        <Label fx:id="resultLabel" alignment="CENTER" prefWidth="300" />
    </bottom>
</BorderPane>

 여기서 중요하게 봐야 할 것은 BorderPane에서 stylesheets = "@style.css" 라는 속성이 있는데 여기서 바로 css 파일의 경로를 지정합니다.

 우리는 CSS 파일을 src 디렉터리에 만들었기 때문에 파일명만 적어줘도 상관이 없습니다. 

 그리고 봐야 할 것은 TextField 와 Button 에 id 값을 보시면 됩니다.

 이제 CSS 의 코드를 보시죠.

style.css

#txtField:focused{
     -fx-focus-color : green;
 }
#btn:focused{
     -fx-focus-color : green;
}

d

 아주 간단합니다. 텍스트 필드와 버튼의 텍스트 값을 가지고 속성을 주고 있습니다. pseudo 클래스를 이용해서 주고 있습니다.

 그럼 결과는 아래와 같습니다. CSS 에 선택자는 CSS와 동일한 원리로 element, class, id 로 줄 수 있습니다.

                    

 CSS 관련된 여러가지 속성은 이 곳 에 가시면 많은 도움이 될 것입니다. 수고하셨습니다.