[JavaFX]따라하기#3 - CSS로 예쁘게 만들기

이 글은 Oracle에서 제공하는 Getting Started with JavaFX 시리즈 3번째 글 "Fancy Forms with JavaFX CSSS"를 번역한 것입니다. 원문은 아래 링크를 확인하세요.
http://docs.oracle.com/javafx/2/get_started/css.htm

이 튜토리얼은 JavaFX 어플리케이션에 CSS(Cascading Style Sheet)를 적용하여 더 예쁘고 매력적으로 보이게 하는 방법을 설명합니다. 디자인을 만들고 .css 파일을 생성한 다음 이 스타일을 적용하면 됩니다.

이 튜토리얼에서는 전 글에서 만들었던 로그인 폼의 기본 스타일에서 시작합니다. 몇몇 간단한 CSS 수정만으로 아래 그림과 같이 외관을 확 바꿀 수 있습니다.

프로젝트의 생성

앞의 튜토리얼을 계속 따라서 해보았다면 이미 Login이라는 프로젝트를 가지고 계실 겁니다. 만일 가지고 있지 않다면 Login.zip 파일을 다운로드 받아 압축을 풀고 Netbeans IDE에서 불러들이면 됩니다.

CSS 파일 만들기

먼저 해야 할 일은 새로운 CSS파일을 만들고 그것을 어플리케이션의 메인 클래스와 같은 디렉토리에 저장하는 것입니다. 다음으로 새로만든 CSS를 JavaFX 어플리케이션이 사용하도록 지정해야 합니다. 다음 순서대로 하세요.

1. NetBeans IDE 프로젝트 창에서 Login 프로젝트의 트리 노드를 열어서 Source Packages 디렉토리 노드를 선택합니다.
2. Source Packages 아래의 login 폴더에 오른쪽 버튼을 클릭하고 New -> Other를 선택합니다.
3. New File 다이얼로그에서 Other를 선택하고 Cascading Style Sheet를 선택한 다음 Next를 클릭합니다.  
4. 파일명은 Login으로 하되 저장되는 디렉토리가 src/login인지 확인합니다.
5. Finish를 클릭합니다.
6. Login.java 파일에서 조금전에 만든 css파일을 읽어들이고 Scene에 적용하는 코드를 다음과 같이 추가합니다.

Scene scene = new Scene(grid, 300, 275);
primaryStage.setScene(scene);
scene.getStylesheets().add(Login.class.getResource("Login.css").toExternalForm());
primaryStage.show();

위와 같이 하면 Login 클래스와 같은 위치에 있는 Login.css파일을 찾게 됩니다.

배경 이미지 추가하기

다이얼로그에 예쁜 배경 이미지를 깔면 보다 근사하게 보일 수 있습니다. 이 튜토리얼에서는 회색톤의 린넨 질감의 배경 이미지를 사용합니다.

먼저 배경 이미지를 여기서 다운로드 받습니다. 그리고 이것을 src/login 폴더에 복사를 복사합니다. 그리고 다음과 같이 CSS파일에 background-image 속성을 추가합니다. 명심해야 할 것은 리소스 파일의 경로는 CSS파일 위치에서의 상대경로로 지정한다는 점입니다. 이 경우 background.jpg 파일이 Login.css파일과 같은 디렉토리에 있는 경우입니다.

.root {
     -fx-background-image: url("background.jpg");
}

배경이미지는 .root 스타일 클래스에 적용되었습니다. 이것은 즉 Scene의 루트노드에 적용된다는 의미입니다. 스타일 정의는 프로퍼티의 이름(-fx-background-image)과 프로퍼티의 값(url("background.jpg"))으로 이루어 집니다.

아래 그림은 스타일이 적용된 결과를 보여줍니다.

라벨의 스타일 정하기

다음으로 개선시켜야 할 컨트롤은 라벨들입니다. 이를 위해 당신은 .label 스타일 클래스를 사용할 겁니다. 이렇게 하면 폼에 있는 모든 라벨에 반영이 됩니다. 다음과 같이 CSS파일에 추가합니다.

.label {
    -fx-font-size: 12px;
    -fx-font-weight: bold;
    -fx-text-fill: #333333;
    -fx-effect: dropshadow( gaussian , rgba(255,255,255,0.5) , 0,0,0,1 );
}

이 예제는 폰트 크기와 두께를 증가시키고 회색(#333333)으로 Drop Shadow 효과를 만듭니다. 그림자를 넣는 이유는 회색 바탕과 진한 회색 글씨의 대조를 더 강하게 하기 위해서 입니다. 그림자 효과를 위한 상세한 파라미터들은 JavaFX의 CSS 레퍼런스 가이드를 참고하세요.

스타일이 적용된 결과는 아래와 같습니다.

텍스트에 스타일 입히기

이제 폼에 있는 두개의 Text 객체에 대해 스타일을 입혀볼 차례입니다. 하나는 "Welcome" 이라는 내용을 가진 scenetitle 객체이고, 다른 하나는 "Sign in" 버튼을 클릭했을 때 피드백을 보여주는 actiontarget이라는 객체입니다. 당신은 이 두개의 객체에 다른 스타일을 적용할 수 있습니다.

먼저 Login.java 파일에서 아래와 같은 두 줄의 인라인 스타일 지정 구문을 제거합니다.

scenetitle.setFont(Font.font(“Tahoma”, FontWeight.NORMAL, 20));

actiontarget.setFill(Color.FIREBRICK);

코드에 스타일에 대한 지정을 하지 말고 CSS파일에서 하는 것이 코드와 뷰를 분리할 수 있어 좋습니다.

그리고 각 텍스트 객체에 setID() 메쏘드를 이용하여 ID를 부여합니다. 이렇게 해야 CSS파일에서 ID별로 다른 스타일을 지정할 수 있습니다.

scenetitle.setId("welcome-text");

actiontarget.setId("actiontarget");

Login.css 파일에는 welcome-text ID와 actiontarget ID에 대한 스타일을 다음과 같이 지정합니다. ID를 지정할 때는 앞에 # 기호를 붙입니다.

#welcome-text {
   -fx-font-size: 32px;
   -fx-font-family: "Arial Black";
   -fx-fill: #818181;
   -fx-effect: innershadow( three-pass-box , rgba(0,0,0,0.7) , 6, 0.0 , 0 , 2 );
}
#actiontarget {
  -fx-fill: FIREBRICK;
  -fx-font-weight: bold;
  -fx-effect: dropshadow( gaussian , rgba(255,255,255,0.5) , 0,0,0,1 );  
}

Welcome 텍스트의 폰트 크기는 32 포인트로 증가되었고 폰트 패밀리는 Arial Black으로 변경되었습니다. 텍스트 색상은 짙은 회색(#818181)으로 변경되었고 엠보싱 처럼 보이게 하는 Inner Shadow 이펙트가 적용되었습니다. Inner Shadow에 대한 자세한 속성은 JavaFX의 CSS 레퍼런스 가이드를 참고하세요.

actiontarget에 대한 스타일은 앞서 코드로 작성했던 것과 유사합니다. 이렇게 CSS를 적용한 결과는 다음과 같습니다.

버튼에 스타일 입히기

다음으로 버튼에 스타일을 입혀봅니다. 특히 마우스 커서가 버튼 위로 올라갔을 때 인지할 수 있도록 hover에 대한 스타일을 지정해 봅니다.

먼저 다음과 같이 버튼 일반에 대한 스타일을 지정합니다. 이 코드는 .button 스타일 클래스를 사용하므로 폼에 사용된 모든 버튼에 적용됩니다.

.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) , 5, 0.0 , 0 , 1 );
}

이제 마우스가 버튼 위로 올라 갔을때 약간 다른 효과를 내 보도록 합니다. 당신은 이를 hover 가상 클래스(pseudo-class)로 지정할 수 있습니다. 가상 클래스는 스타일 클래스 뒤에 콜론(:)을 덧붙여 지정할 수 있습니다. 아래 코드는 버튼의 그래디언트 방향을 뒤집어 준 것입니다.

.button:hover {
    -fx-background-color: linear-gradient(#2A5058, #61a2b1);
}

이렇게 하면 버튼의 초기 상태와 마우스가 올라갔을 때 다음과 같이 달라집니다.

이제 로그인 다이얼로그를 근사하게 완성했습니다. 아래와 같은 모양입니다.

참고할 만한 자료들

CSS에 관련된 다음과 같은 자료들을 추가적으로 확인해 보세요.

  - Skinning JavaFX Application with CSS
  - Styling Charts with CSS
  - JavaFX CSS Reference Guide
  - Skinning with CSS and CSS Analyzer
  - Styling FX Buttons with CSS

관련글 :
  - [JavaFX]따라하기#1 - Hello JavaFX
  - [JavaFX]따라하기#2 - 폼 디자인
  - [JavaFX]따라하기#3 - CSS로 예쁘게 만들기
  - [JavaFX]따라하기#4 - FXML로 UI만들기
  - [JavaFX]따라하기#5 - 시각효과와 애니메이션
  - [JavaFX]따라하기#6 - 배포하기