몇 주 전의 라운드업에서는 기존의 Swing JFlubber 애플리케이션을 JavaFX로 다시 작성했습니다. PhotoShop에서 전혀 새로운 그래픽 디자인을 만든 다음 그 기능에 근사한 효과를 주었습니다. 그에 관한 글을 한 번 더 올릴 생각입니다.
하지만 텍스트 표시와 관련된 문제가 있었습니다. Flubber 애플리케이션에서는 flub 시간이 자동으로 삽입되고 사용자가 의견을 추가할 수 있는 편집 가능한 텍스트 영역이 있어야 합니다. JavaFX를 사용하면 디자인에 간단한 텍스트를 손쉽게 넣을 수 있지만 편집, 스크롤 등은 아직 가능하지 않습니다.
JavaFX에 적합한 GUI 구성 요소가 곧 제공될 것입니다. 그 때까지는 몇 가지 비법을 활용할 수 있습니다. 간단히 말하자면, Swing처럼 보이지 않는 방법으로 Swing 텍스트 영역을 사용할 수 있습니다. 그 방법은 이렇습니다. 먼저 Swing 텍스트 구성 요소를 위한 JavaFX scenegraph 노드를 만듭니다.
var textPane = new JTextPane();
var scrollPane = new JScrollPane(textPane);
var text: SwingComponent = SwingComponent.wrap(scrollPane);
그러면 다음과 같은 모양이 됩니다.
맙소사!! 우리가 원했던 모양이 아니군요. 분명히, 텍스트 영역이 Swing처럼 생기지 않았으면 합니다. PhotoShop 디자인으로 멋진 배경을 만들었으니 텍스트 아래에 이 배경을 사용하고 싶습니다. 하지만 어렵지 않게 고칠 수 있습니다. Java 색상에는 불투명도를 조절하는 알파 채널이 있습니다. 텍스트 영역에 완전히 투명한 배경을 사용하여 그 배경을 바로 통과하게 할 수 있습니다. 물론 스크롤 창도 투명하게 만들어야 합니다.
textPane.setBackground(new java.awt.Color(0,0,0,0)); // 0 opacity => 100% transparent!
textPane.setForeground(java.awt.Color.WHITE);
textPane.setCaretColor(java.awt.Color.WHITE);
scrollPane.setOpaque(false);
다시 해보겠습니다.
훨씬 낫군요! 하지만 그래픽 위에 회색 직사각형이 아직 남아 있고 그 주위로 스크롤 창의 테두리가 있습니다. 그것도 없앨 수 있습니다.
scrollPane.setBorder(new EmptyBorder(new Insets(0,0,0,0)));
이제 썩 괜찮은데요! 하지만 글꼴이 너무 작습니다. Dick이 Courier 글꼴을 사용하고 싶다고 했으니 이렇게 해보겠습니다.
textPane.setFont(new java.awt.Font("American Typewriter", 0, 14));
결과는 아래와 같습니다.
이런! 글꼴이 안티앨리어싱 처리가 되지 않았군요. 이 문제를 해결하기 위해 구성 요소 자체에 안티앨리어스 렌더링 힌트를 설정하거나 aa 시스템 등록 정보를 설정하는 등의 여러 가지 방법을 시도해 봤습니다. 래핑된 Swing 구성 요소에 대해 렌더링 힌트가 제대로 선택되지 않은 걸 보니 버그가 있는 듯합니다. 하지만 효과적인 해결 방법을 찾았습니다. 그래픽 개체에 직접 안티앨리어싱 렌더링 힌트를 설정하면 됩니다. 그러면 구성 요소 자체의 페인팅에 관여해야 하는데, 다행히 그건 별 것 아닙니다. 새 JTextPane을 만들지 않고, paint 메소드를 재정의하여 렌더링 힌트를 추가하는 곳에 간단한 하위 클래스를 만듭니다.
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.RenderingHints;
import javax.swing.JTextPane;
public class AntiAliasedTextArea extends JTextPane
{
@Override
public void paint(Graphics g)
{
Graphics2D g2d = (Graphics2D) g;
g2d.setRenderingHint(RenderingHints.KEY_TEXT_ANTIALIASING,
RenderingHints.VALUE_TEXT_ANTIALIAS_ON);
super.paint(g);
}
}
이제 다음을
var textPane = new JTextPane();
다음과 같이 바꾸면
var textPane = new AntiAliasedTextPane();
아래와 같이 됩니다.
짜잔!
하지만 한 가지 문제가 더 남아 있군요. 텍스트를 많이 추가하면
스크롤바가 생기네요! 이건 원치 않습니다. 이 텍스트 창에 많은 텍스트가 들어가지는 않을 것이므로, 텍스트 필드에서처럼 단지 캐럿만 움직여서 나머지 내용을 탐색할 수 있습니다. 그러므로 스크롤바를 꺼 봅시다.
scrollPane.setVerticalScrollBarPolicy(JScrollPane.VERTICAL_SCROLLBAR_NEVER);
scrollPane.setHorizontalScrollBarPolicy(JScrollPane.HORIZONTAL_SCROLLBAR_NEVER);
그러면 우리가 원하는 대로 정확히 텍스트 창이 작동합니다. 이제 평소의 방법으로 텍스트를 조작할 수 있습니다. 즉,
textPane.setText(string), textPane.getText() 등과 같이 할 수 있습니다. 그러면 선택 색상도 수정하여 텍스트를 선택할 때 telltale Swing 라이트가 파란색이 되지 않게 해봅시다.
textPane.setSelectionColor(new Color(255, 255, 255, 50));
textPane.setSelectedTextColor(new Color(255, 255, 255, 255));
이 색상에서도 투명도를 사용하여 선택 시 멋진 유리 효과를 줄 수 있습니다. 글꼴 크기도 늘렸습니다.
진짜 JavaFX 구성 요소를 완성할 때까지 필요한 텍스트를 디자인하는 데 이 방법이 도움이 되길 바랍니다.
이 글의 영문 원본은
JavaFX Text Component
에서 보실 수 있습니다.
"Java FX" 카테고리의 다른 글
- 학습 곡선 일지 2편: 선언적 사용자 인터페이스 (댓글 0개 / 트랙백 0개) 2008/08/27
- 학습 곡선 일지 1편: JavaFX 스크립트 탐구 (댓글 0개 / 트랙백 0개) 2008/08/27
- 학습 곡선 일지 3편: JavaFX 스크립트 함수 (댓글 0개 / 트랙백 0개) 2008/08/27
- 학습 곡선 일지 4편: 웹 서비스 액세스 (댓글 0개 / 트랙백 0개) 2008/08/27
- JavaFX 기술 - FAQ (댓글 0개 / 트랙백 0개) 2009/02/02
- JavaFX 참조(레퍼런스) (댓글 1개 / 트랙백 0개) 2009/02/02
- JavaFX 1.2의 5가지 주요 기능 (댓글 2개 / 트랙백 0개) 2009/06/26
- JavaFX 기술의 주요 특징 살펴보기 (댓글 0개 / 트랙백 1개) 2009/02/02
- [JavaFX.com] Get Your Tech Tips Here Series - 5... (댓글 0개 / 트랙백 0개) 2009/04/06
- JavaFX 스크립트 학습, 1부: Java 프로그래머를 위한 JavaFX 스트립트 소개 (댓글 33개 / 트랙백 9개) 2007/08/20
댓글을 달아 주세요