4부 주제
CSS 꾸미기여러분은 JavaFX에서 캐스케이딩 스타일 시트 (CSS)로 사용자 인터페이스를 꾸밀 수 있습니다. 정말 멋집니다! 왜냐하면 Java 애플리케이션의 외관을 입맛대로 바꾸기란 어려웠으니까요. 우리는 이 튜토리얼에서 Windows 8 메트로 디자인에서 영감을 받은 다크 테마를 만들 겁니다. 버튼 CSS는 Pedro Duque Vieira의 블로그 포스트인 JMetro - Windows 8 Metro controls on Java에 기반을 둡니다. CSS와 친해지기JavaFX 애플리케이션을 꾸미려면 먼저 CSS가 무엇인지 알아야 합니다. CSS tutorial이 시작하기에 좋습니다. JavaFX CSS에 관한 정보:
디폴트 JavaFX CSSJavaFX 8의 디폴트 CSS 스타일은
이 디폴트 스타일 시트는 JavaFX 애플리케이션에만 적용됩니다. 커스텀 스타일 시트를 추가해서 힌트: 디폴트 CSS 파일을 살펴보면 여러분이 어떤 스타일을 덮어쓰고 싶은지 도움이 됩니다. CSS 스타일 시트다음 내용을 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%); } 이제 필요한 것은 Scene에 CSS 추가하는 일입니다. 우리는 이를 Java로 프로그래밍할 수 있지만, Scene Builder를 사용해서 fxml 파일에 추가할 겁니다: RootLayout.fxml에 CSS 추가하기
PersonEditDialog.fxml에 CSS 추가하기
PersonOverview.fxml에 CSS 추가하기
서로 다른 스타일의 라벨들이제 오른쪽에 있는 모든 라벨은 같은 크기로 되었습니다. CSS 파일에는
애플리케이션 아이콘 추가하기현재 우리 애플리케이션의 타이틀바와 태스크바에는 디폴트 아이콘을 가지고 있습니다: 하지만 커스텀 아이콘이 더 좋아 보입니다: 아이콘 파일Icon Finder는 무료 아이콘을 내려받을 수 있는 곳입니다. 저는 여기서 작은 address book icon을 내려받았습니다. 여러분의 주소록 프로젝트 밑에 resources 디렉토리를 만들고 나서 이 아래에 images 라는 하위 디렉토리를 만듭니다 (일반적인 디렉토리). 디렉토리 구조는 다음과 같습니다: Scene에 아이콘 설정하기Scene에 아이콘을 설정하려면 다음 코드를 MainApp.javathis.primaryStage.getIcons().add(new Image("file:resources/images/address_book_32.png")); 이제 public void start(Stage primaryStage) { this.primaryStage = primaryStage; this.primaryStage.setTitle("AddressApp"); // 애플리케이션 아이콘을 설정한다. this.primaryStage.getIcons().add(new Image("file:resources/images/address_book_32.png")); initRootLayout(); showPersonOverview(); } 물론 연락처 변경 다이얼로그의 Stage에도 아이콘을 추가할 수 있습니다. 다음 할 일은?튜토리얼 5부에서는 데이터를 유지하기 위해 XML 스토리지를 추가할 겁니다. 흥미로운 자료들
|