Draw2D

Eclipse Draw2D

ECLIPSE DRAW2D
조현종(v.05, 12/12/09)
http://cafe.naver.com/eclipseplugin
http://hangumkj.blogspot.com/
hangum@gmail.com

목 차
 Draw2D란?
 Draw2D 살펴보기
 실행 환경
 HelloWorld Draw2D
 Figures 종류
 Painting of Figures
 Layout
 Locator Anchors Routers
 실습

Draw2D란?

 그래픽 생성, 편집, 조작가능
 SWT에 의존
 경량 Widget
 www.eclipse.org/gef

Draw2D 살펴보기

 LightweightSystem?
 SWT Canvas와 Draw2D를 연결 .
 SWT Control 위에서 발생한 이벤트를 Draw2D이
벤트로 변경
 SWT의 Display와 비슷한 역할을 함

Draw2D 살펴보기

 EventDispatcher?
 SWT Event to Draw2D router
 UpdateManager?

Draw2D 살펴보기

 Figure?
 Draw2D에서 표현 되어 지는 것.
 반드시 하나의 Root Figure가 존재해야함.
 부모 자식과의 관계가 가능 하며, 마우스 이벤트
등의 이벤트 가능
 SWT의 Shell, Control, Composite등과 비슷함.

Class는 org.eclipse.draw2d.IFigurer

실행환경

 Eclipse 4.2 SR1
 GEF SDK3.8.1 (update manager
http://download.eclipse.org/tools/gef/updates/releases/)

HelloWorld Draw2D
.

ps) com.ibm.icu?? 추가하세요

Figure

 Figure?
 Draw2D에서 표현 되어 지는 것.
 반드시 하나의 Root Figure가 존재해야함.
 부모 자식과의 관계가 가능 하며, 마우스 이벤트
등의 이벤트 가능
 SWT의 Shell, Control, Composite등과 비슷함.

Class는 org.eclipse.draw2d.IFigurer

Figure – Common Figures

 Shapes – rectangle, triangles, ellipse
 Clickables – buttons, checkboxes
 Containers – Panel, ScrollPane
 Connections – figure간의 line
 Layered – figure 들을 layer
 Other – ImageFigure, Label등

Figure Border

 CompoundBorder
 FramBorder
 GroupBoxBorder
 LineBorder
 SimpleEtchedBorder
 SimpleLoweredBorder
 SimpleRaisedBorder

 TitleBarBorder

Figures Z-Order

 Figures들은 tree형식을 취합니다
 (Root Figure 존재)
 자식 Figure를 만들 수 있고, 부모와 자식 관
계를 가집니다
 마지막에 그린 것이 제일위에 표시됩니다.

Event

Listener Description
FocusListener 포커스를 얻거나 잃었을때
KeyListener
MouseListener Mouse 클릭, 클릭 후, 버블클릭
MouseMotionListener Mouse 가 움직일때
(mouse enter, mouse hover, mouse move)

Genealogy 예제

 Figure
 RectangleFigure
 PolygonShape
 PolylineConnection
 ChopboxAnchor
 Event
 MouseListener
 MouseMotionListener

BorderLayout
Canvas canvas = new Canvas(parent, SWT.NONE);
LightweightSystem lws = new LightweightSystem(canvas);

IFigure panel = new Figure();
BorderLayout layout = new BorderLayout();
panel.setLayoutManager(layout);

Button btnLeft = new Button("Left Button");
panel.setBorder(new LineBorder());
panel.add(btnLeft, BorderLayout.LEFT);

Button btnRight = new Button("right Button");
panel.add(btnRight, BorderLayout.RIGHT);

Button btnTOP = new Button("TOP Button");
panel.add(btnTOP, BorderLayout.TOP);

lws.setContents(panel);

FlowLayout
Canvas canvas = new Canvas(parent,
SWT.NONE);
LightweightSystem lws = new
LightweightSystem(canvas);


FlowLayout layout = new FlowLayout();
layout.setHorizontal(true);

for (int i = 0; i < 10; i++) {
panel.add(new Button("button" + i));
}


XYLayout
Canvas canvas = new
Canvas(parent, SWT.NONE);


XYLayout layout = new XYLayout();

Button btn = new Button("btn");
Rectangle rect = new Rectangle(10, 10, 50, 50);
panel.add(btn);
panel.setConstraint(btn, rect);


ToolbarLayout
Canvas canvas = new
Canvas(parent, SWT.NONE);


ToolbarLayout layout = new ToolbarLayout();
layout.setVertical(true);

for (int i = 0; i < 10; i++) {
panel.add(new Button("button" + i));
}


ParagraphTextLayout
private TextFlow makeTextFlow(String text) {
TextFlow textFlow = new TextFlow();
textFlow.setLayoutManager(new
ParagraphTextLayout(textFlow,
ParagraphTextLayout.WORD_WRAP_HARD));
textFlow.setFont(this.getFont());
textFlow.setText("rn"+text);

return textFlow;
}

Connections

 Anchors : Figure간의 선 연결
 Decorations : 선의 끝을 장식
 Routers : 선의 방향을 어떻게 할 것인지~
 Locator : 텍스트를 선의 어느 위치에 놓을
것인지~

Anchors

 figure들 간에 선 연결
 ChopboxAnchor

 EllipseAnchor

 LabelAnchor

 XYAnchor

Decorations

 선의 끝 모양을 장식

 Default Decorations
 PolylineDecoration
 PolygonDecoration
 RotatableDecoration

Routers

 Router
 NullConnectionRouter

 BendpointConnectionRouter

 MantattanConnectionRouter

Router

 BendpointConnectionRouter
 AbsoluteBendpoint : 절대 좌표 리턴
 AbsoluteBendpoint(350, 10);
 RelativeBendpoint :
 RelativeBendpoint bp2 = new RelativeBendpoint(firstConnection);
 bp2.setRelativeDimensions(new Dimension(-50, 20), new
Dimension(10, -40));

Connection Labels(Locator)
Locator

이 름 종 류
BendpointLocator BendpointConnectionRoutter의
텍스트
ConnectionEndpointLocator 선의 양끝 텍스트
MidpointLocator 선의 중앙 텍스트
ConnectionLocator
RelativeLocator

PolylineConnection ManhattanConnectionRouter
PolylineConnection connection = new PolylineConnection();
..

// source label decoration
ConnectionEndpointLocator locator = new
ConnectionEndpointLocator (connection, false);
Label label = new Label("Source");
connection.add(label, locator);

// target label decoration
locator = new ConnectionEndpointLocator (connection, true);
label = new Label("Target");
connection.add(label, locator);

//
ManhattanConnectionRouter router = new
ManhattanConnectionRouter ();
connection.setConnectionRouter (router);

// rootFigure에 추가합니다.
rootFigure.add(connection);

참고자료

 Addison Wesely The Eclipse Graphical Editing Framework
 Eclipse Help(http://help.eclipse.org/ganymede/index.jsp) – Draw2D
 Eclipse coon 2005 GEF in dept ppt
 SWT/Jface 인 액션(이선아/제갈호준/에이콘)
 http://www13.plala.or.jp/observe/draw2d/draw2d_overview.html
 Eclipse Plug-in & RCP café의 번역문
 http://eclipse-articles.springnote.com/pages/3666185
 http://eclipse-articles.springnote.com/pages/3683263
 http://eclipse.org/articles/Article-GEF-Draw2d/GEF-Draw2d.html
 Eclipse Development using the Graphical Editing Framework and the
Eclipse Modeling Framework(IBM)

Draw2D

More Related Content

What's hot (13)

Viewers also liked (20)

More from cho hyun jong (20)

Recently uploaded (20)

Draw2D