Eclipse Forms로 애플리케이션에 새로운 활력을
임베디드 브라우저를 사용하지 않고 웹 효과 나타내기
Eclipse Forms를 사용하여 Eclipse 애플리케이션의 사용자 경험을 향상시킬 수 있습니다. 임베디드 브라우저를 사용하지 않고 애플리케이션에 "웹과 같은" 효과를 나타낼 수 있습니다. 본 기술자료에서는 사용자 인터페이스(UI) 툴킷으로서의 Eclipse Forms를 간략히 소개하고, 사용하기 쉬운 예제도 제공합니다.
배경
Eclipse Forms란 무엇인가 이 질문에 답을 하기 전에, Eclipse Forms의 사용 방법을 설명하도록 하겠다. 여러분은 Eclipse에 플러그인을 구현해 본 적 있는가 그렇다면, 이것이 다음과 같은 깔끔한 UI라는 것을 아마 알 수 있을 것이다.
그림 1. PDE의 에디터 
이 에디터는 Eclipse의 Plug-in Development Environment (PDE)의 일부이다. 이것은 Eclipse Forms를 최초로 채택한 것이고, Eclipse Forms가 무엇을 할 수 있는지를 대표적으로 보여주고 있는 것이기도 하다. 이제 여러분은 Eclipse Forms가 어떤 모습인지를 보았으니, 이것이 어떤 것인지를 알아보자.
Eclipse는 Eclipse에서 구현된 애플리케이션들이 네이티브 애플리케이션과 같은 룩앤필을 갖추도록 하는 것으로 유명하다. 이것은 아마도, Eclipse의 구현 기반인 Standard Widget Toolkit (SWT) 덕택일 것이다. SWT는 다양한 플랫폼에서 실행되는 이식성 있고, 경량의 네이티브 위젯 세트를 제공한다. Eclipse Forms는 원래 HTML 작성 툴에서 일반적으로 보았던, 새로운 사용자 인터랙션을 추가할 용도로 디자인되었다. Eclipse Forms의 사명은 모든 Eclipse 프로젝트에 이식성 있는 웹 스타일의 UI 생성을 지원하는 것이다.
Eclipse Forms의 역사
Eclipse Forms의 역사를 구체적으로 알고 싶다면, Dejan Glozic(Eclipse Forms의 아버지)의 " Eclipse Forms: 리치(Rich) 클라이언트를 위한 풍부한 UI "를 읽어 보기 바란다. (Eclipse Corner) |
이제 전형적인 Hello World 예제로 시작하여, 다양한 Eclipse Forms 위젯을 설명하고, 보다 구체적인 실제 예제로 끝을 맺도록 하겠다.
Hello, Forms
뭐니뭐니해도 새로운 무엇인가를 쉽게 배우는 데는 Hello World 유형의 예제 밖에 없는 것 같다. Eclipse Forms에 대해 이해해야 할 것은 SWT 위젯을 사용할 수 있는 곳 어디에서나 위젯을 사용할 수 있다는 점이다. 우리의 간단한 예제에서, Eclipse 뷰 내에서 Eclipse Forms를 사용 할 것이다.
그림 2. Hello World 
Listing 1. Hello World Eclipse Forms 에디션 (Snippet1.java)
public class FormView extends ViewPart {
private FormToolkit toolkit;
private ScrolledForm form;
public FormView() {}
public void createPartControl(Composite parent) {
toolkit = new FormToolkit(parent.getDisplay());
form = toolkit.createScrolledForm(parent);
form.setText("Hello World");
}
public void setFocus() {
form.setFocus();
}
public void dispose() {
toolkit.dispose();
super.dispose();
}
} |
Listing 1은 ( ViewPart 를 확장한) 전형적인 Eclipse 뷰이다. 하지만, createPartControl(...) 메소드에서, FormToolkit 의 새로운 인스턴스를 만든다. FormToolkit 은 SWT 컨트롤을 만들고, 이것이 Eclipse Forms에서 작동할 수 있도록 조정하는 역할을 한다. Eclipse Forms로 작업을 하다 보면, 이 유틸리티 클래스를 자주 사용하게 된다는 것을 알 수 있다. 다음 줄에서, 폼 관련 콘텐트용 컨테이너로서 작동하는 새로운 폼( ScrolledForm 기반)을 만들었다. 이것이 Eclipse Forms의 진정한 마법이다. 위 리스팅에 사용된 코드는 미래의 Eclipse Forms를 위한 템플릿으로서 작용한다.
Forms 투어
Eclipse Forms 여행의 다음 목적지는 실제 위젯이다. 이들 각각의 위젯과 사용법을 코드 스니펫을 통해 보여주겠다. 마지막으로, 기존 위젯을 Eclipse Forms 기반 애플리케이션과 혼합하는 방법도 설명하겠다.
이 글에서 제공되는 샘플 코드에서, Eclipse User Assistance 팀은 최상의 Forms 플러그인을 관리하고 있는데, 폼을 배우기 시작할 때 매우 유용하다. Eclipse의 CVS 저장소는 org.eclipse.ui.forms.examples
이다. 많은 샘플 코드 가 들어있다. |
폼과 ScrolledForm
우리가 가장 먼저 논할 두 개의 위젯은 폼의 유형들이다: Form 과 ScrolledForm 이 바로 그것이다. 이 폼 위젯들은 Eclipse Forms의 토대로 간주되며, 콘텐트용 컨테이너로서 작동한다. (그림 3) 타이틀, 옵션 이미을 갖고 있다. (Listing 2).
그림 3. 폼 예제 
Listing 2. 폼 예제 (Snippet2.java)
...
public void createPartControl(Composite parent) {
toolkit = new FormToolkit(parent.getDisplay());
form = toolkit.createForm(parent);
form.setText("Snippet2");
TableWrapLayout layout = new TableWrapLayout();
form.getBody().setLayout(layout);
toolkit.createLabel(form.getBody(), "Snippet2");
}
... |
ExpandableComposite
이 위젯은 자식을 보여주거나 숨길 수 있는 간단한 합성물이다. (collapsed 또는 expanded). 필요에 따라 사용될 수 있는 확장 토글(twistie 또는 tree)용 스타일 옵션이 있다. (그림 4와 Listing 3)
그림 4. ExpandableComposite 예제 
Listing 3. ExpandableComposite 예제 (Snippet3.java)
...
public void createPartControl(Composite parent) {
toolkit = new FormToolkit(parent.getDisplay());
form = toolkit.createScrolledForm(parent);
form.setText("Snippet3");
TableWrapLayout layout = new TableWrapLayout();
form.getBody().setLayout(layout);
ExpandableComposite composite =
toolkit.createExpandableComposite(
form.getBody(),
ExpandableComposite.TREE_NODE|
ExpandableComposite.CLIENT_INDENT);
composite.setText("Expand Me");
String text = "Lots of text, Lots of text," +
Lots of text, Lots of text, Lots of text," +
Lots of text, Lots of text, Lots of text," +
Lots of text, Lots of text";
Label label = toolkit.createLabel(composite, text, SWT.WRAP);
composite.setClient(label);
TableWrapData td = new TableWrapData();
td.colspan = 1;
composite.setLayoutData(td);
composite.addExpansionListener(new ExpansionAdapter() {
public void expansionStateChanged(ExpansionEvent e) {
form.reflow(true);
}
});
}
... |
섹션
섹션( section )은 특별한 유형의 확장 가능한 합성물로서 타이틀 아래에 옵션 디스크립션을 추가한다. 섹션은 Eclipse Forms에서 사용되어 정보를 그룹핑 하고, 아마도 Eclipse Forms에서 가장 일반적으로 사용되는 위젯일 것이다. 디스크립션 영역에 이미지나 하이퍼링크가 필요하면, 디스크립션 영역에 있는 컨트롤을 사용할 수 있다.
그림 5. 섹션 예제 
Listing 4. 섹션 예제 (Snippet4.java)
...
public void createPartControl(Composite parent) {
toolkit = new FormToolkit(parent.getDisplay());
form = toolkit.createScrolledForm(parent);
form.setText("Snippet4");
TableWrapLayout layout = new TableWrapLayout();
form.getBody().setLayout(layout);
Section section = new Section(form.getBody(), Section.TITLE_BAR | Section.TWISTIE);
|-------10--------20--------30--------40--------50--------60--------70--------80--------9|
|-------- XML error: The previous line is longer than the max of 90 characters ---------|
section.setText("Snippet4");
Label label = toolkit.createLabel(section, "Snippet4", SWT.WRAP);
section.setClient(label);
TableWrapData td = new TableWrapData();
td.colspan = 1;
td.grabHorizontal = true;
section.setLayoutData(td);
}
...
|
하이퍼링크와 ImageHyperlink
하이퍼링크 위젯은 텍스트를 사용자가 클릭했는지 지나쳤는지 여부에 따라 액션을 취한다. HTML을 다루어보았다면, <a> 태그의 개념과 매우 비슷하다. Eclipse Forms에서, 하이퍼링크는 보통 색상과 활성화 색상 같은 것을 관리하는 HyperlinkGroup 과 제휴될 수 있다.
그림 6. 하이퍼링크 예제 
Listing 5. 하이퍼링크 예제 (Snippet5.java)
...
public void createPartControl(Composite parent) {
toolkit = new FormToolkit(parent.getDisplay());
form = toolkit.createScrolledForm(parent);
form.setText("Snippet5");
TableWrapLayout layout = new TableWrapLayout();
form.getBody().setLayout(layout);
HyperlinkGroup group = new HyperlinkGroup(parent.getDisplay());
Hyperlink link = new Hyperlink(form.getBody(), SWT.NONE);
link.setBackground(form.getBackground());
link.setText("Snippet5");
link.addHyperlinkListener(new HyperlinkAdapter() {
public void linkActivated(HyperlinkEvent e) {
System.out.println("Snippet5");
}
});
ImageHyperlink imageLink = new ImageHyperlink(form.getBody(), SWT.NONE);
imageLink.setBackground(form.getBackground());
imageLink.setText("Snippet5");
imageLink.setImage(Activator.getImageDescriptor("icons/sample.gif").createImage());
|-------10--------20--------30--------40--------50--------60--------70--------80--------9|
|-------- XML error: The previous line is longer than the max of 90 characters ---------|
imageLink.addHyperlinkListener(new HyperlinkAdapter() {
public void linkActivated(HyperlinkEvent e) {
System.out.println("Snippet5");
}
});
group.add(link);
group.add(imageLink);
}
... |
FormText와 ScrolledFormText
이 위젯은 특화된 XML 태그들(HTML과 비슷함)을 파싱함으로써 래핑된 텍스트를 랜더링 할 수 있는 읽기 전용 컨트롤이다. 게다가, 원한다면 링크들을(http://www.eclipse.org) 자동으로 하이퍼링크로 파싱할 수도 있다.
그림 7. FormText 예제 
Listing 6. FormText 예제 (Snippet6.java)
...
public void createPartControl(Composite parent) {
toolkit = new FormToolkit(parent.getDisplay());
form = toolkit.createScrolledForm(parent);
form.setText("Snippet6");
TableWrapLayout layout = new TableWrapLayout();
form.getBody().setLayout(layout);
FormText text = toolkit.createFormText(form.getBody(), true);
text.setText("Read http://planet.eclipse.org", false, true);
TableWrapData td = new TableWrapData(TableWrapData.FILL);
td.colspan = 1;
text.setLayoutData(td);
}
... |
FormDialog
이 위젯은 폼을 저장하고 있는 범용 다이얼로그이다. 다이얼로그 내에서 Eclipse Forms를 사용하려면, 이 클래스가 도움이 된다. (그림 8과 Listing 7)
그림 8. FormDialog 예제 
Listing 7. FormDialog 예제
...
MyFormDialog dialog = new MyFormDialog(shell);
dialog.create();
dialog.getShell().setSize(800, 600);
dialog.getShell
dialog.open();
... |
기존 위젯 고치기
Eclipse Forms의 원래 디자인 목표 중 하나는 기존 SWT 컨트롤을 재사용 하는 것이었다. Eclipse Forms의 폼 바디에는 특별한 것이 없다. 이것은 합성물일 뿐이다.
SWT 위젯을 사용하려면( FormToolkit 을 사용하여 쉽게 생성되지 않는다면), adapt 를 고치면 된다. FormToolkit 클래스를 사용하여 위젯을 고칠 수 있다. (그림 9와 Listing 8)
그림 9. 위젯 고치기 예제 
Listing 8. 위젯 고치기 예제 (Snippet7.java)
...
public void createPartControl(Composite parent) {
toolkit = new FormToolkit(parent.getDisplay());
form = toolkit.createScrolledForm(parent);
form.setText("Snippet7");
TableWrapLayout layout = new TableWrapLayout();
form.getBody().setLayout(layout);
Label label1 = new Label(form.getBody(), SWT.NONE);
label1.setText("Snippet7 (not adapted)");
// note, we could've just used toolkit.createLabel(...)
Label label2 = new Label(form.getBody(), SWT.None);
label2.setText("Snippet7 (adapted)");
toolkit.adapt(label2, true, true);
}
... |
폼 예제
보다 구체적인 예제로서, 필자가 작업하고 있는 Eclipse 프로젝트들 중 하나를 사용할 것이다. Eclipse Communications Framework (ECF) 프로젝트에서, 온라인 연락처를 디스플레이 하는 UI를 갖고 있다. 이 UI에서, 훌륭한 툴 팁을 지원하고 싶다. Eclipse Forms를 사용하는 것 말고 더 나은 방법이 있는가 Listing 9는 Eclipse Forms를 사용하여 커스텀 툴 팁을 생성하는 방법을 보여주고 있다.
그림 10. Forms ToolTip 예제 
Listing 9. Forms ToolTip 예제 (Snippet8.java)
...
public void createPartControl(Composite parent) {
toolkit = new FormToolkit(parent.getDisplay());
form = toolkit.createScrolledForm(parent);
form.setText("Snippet8");
TableWrapLayout layout = new TableWrapLayout();
form.getBody().setLayout(layout);
Label label1 = new Label(form.getBody(), SWT.NONE);
label1.setText("Snippet8");
// create a tooltip
ToolTip tooltip = new MyTooltip(label1);
tooltip.setPopupDelay(200);
}
...
private class MyTooltip extends ToolTip {
public MyTooltip(Control control) {
super(control);
}
protected Composite createToolTipContentArea(Event event,
Composite parent) {
FormToolkit toolkit = new FormToolkit(parent.getDisplay());
FormColors colors = toolkit.getColors();
Color top = colors.getColor(IFormColors.H_GRADIENT_END);
Color bot = colors.getColor(IFormColors.H_GRADIENT_START);
// create the base form
Form form = toolkit.createForm(parent);
form.setText("Snippet8");
form.setTextBackground(new Color[] { top, bot }, new int[] { 100 }, true);
GridLayout layout = new GridLayout();
layout.numColumns = 3;
form.getBody().setLayout(layout);
// create the text for user information
FormText text = toolkit.createFormText(form.getBody(), true);
GridData td = new GridData();
td.horizontalSpan = 2;
td.heightHint = 100;
td.widthHint = 200;
text.setLayoutData(td);
text.setText(
"snippet8 ",
true,
false);
// create the picture representing the user
td = new GridData();
td.horizontalSpan = 1;
td.heightHint = 100;
td.widthHint = 64;
FormText formImage =
toolkit.createFormText(form.getBody(), false);
formImage.setText(
""" |
