불친절한자수씨

Delete 를 처리하기 위해서는 다음과 같은 처리가 필요합니다.
  - toolbar 에 delete 버튼 추가
  - delete command 추가
  - delete command 를 사용할 새로운 edit policy 구현
  - policy 를 edit part 에 적용
  - 이벤트 발생 시 자식요소 추가/삭제 로직 구현하고 edit part 에 변경을 통지


Delete Action 추가

Action 을 추가하고 툴바에도 버튼을 추가합니다.
public class FormWizardEditorActionBarContributor extends ActionBarContributor { @Override protected void buildActions() { ... addRetargetAction(new DeleteRetargetAction()); } @Override public void contributeToToolBar(IToolBarManager toolBarManager) { ..toolBarManager. toolBarManager.add(getAction(ActionFactory.DELETE.getId())); } }



Delete Command 추가

삭제를 지시하는 DeleteCommand 클래스를 생성합니다.
package kr.co.vicki.formwizard.model.commands; import kr.co.vicki.formwizard.model.ElementBase; import org.eclipse.gef.commands.Command; public class DeleteCommand extends Command { private ElementBase model; private ElementBase parentModel; public void execute() { parentModel.removeChild(model); } public void setModel(Object model) { this.model = (ElementBase) model; } public void setParentModel(Object parentModel) { this.parentModel = (ElementBase) parentModel; } public void undo() { parentModel.addChlid(model); } }



Delete EditPolicy 추가
package kr.co.vicki.formwizard.edit.policies; import kr.co.vicki.formwizard.model.commands.DeleteCommand; import org.eclipse.gef.commands.Command; import org.eclipse.gef.editpolicies.ComponentEditPolicy; import org.eclipse.gef.requests.GroupRequest; public class ElementDeletePolicy extends ComponentEditPolicy { @Override protected Command createDeleteCommand(GroupRequest deleteRequest) { DeleteCommand command = new DeleteCommand(); command.setModel(getHost().getModel()); command.setParentModel(getHost().getParent().getModel()); return command; } }


이제 EditPart 들에 EditPolicy 를 적용시킵니다. 하지만 삭제는 SimpleElement 만 할 것이기 때문에 SimpleElementPart 에만 적용을 시킵니다.
public class SimpleElementPart extends ElementPartBase { ... @Override protected void createEditPolicies() { super.createEditPolicies(); installEditPolicy(EditPolicy.COMPONENT_ROLE, new ElementDeletePolicy()); } ... }


이벤트가 발생했으면 모델이 처리를 수행하고 EditPart 에 통지를 해야겠죠?
public class ElementBase { ... public static final String PROPERTY_ADD = "element add child"; public static final String PROPERTY_REMOVE = "element remove child"; ... public boolean addChlid(ElementBase child) { boolean b = children.add(child); if (b) { child.setParent(this); getListeners().firePropertyChange(PROPERTY_ADD, null, child); } return b; } public boolean removeChild(ElementBase child) { boolean b = children.remove(child); if (b) getListeners().firePropertyChange(PROPERTY_REMOVE, child, null); return b; } ... }


자식 요소의 추가/삭제가 발생되면 refreshChilren() 메소드를 호출합니다.
(refreshVisuals() 메소드가 아닙니다. 이것 때문에 2시간 삽질했네요 -_ㅜ)
abstract class ElementPartBase extends AbstractGraphicalEditPart implements PropertyChangeListener { ... @Override public void propertyChange(PropertyChangeEvent evt) { ... if (evt.getPropertyName().equals(ElementBase.PROPERTY_ADD)) refreshChildren(); if (evt.getPropertyName().equals(ElementBase.PROPERTY_REMOVE)) refreshChildren(); } ... }

ActionBarContributor 의 추가

action을 설정하거나 툴바, 메뉴 등을 설정하는 부분입니다.

org.eclipse.gef.ui.actions.ActionBarContributor 를 상속받는 클래스를 하나 추가합니다.

FormWizardEditorActionBarContributor class
  : 현재는 하는 일이 없습니다. 그냥 존재만으로서 가치를 갖는다는~
package kr.co.vicki.formwizard; import org.eclipse.gef.ui.actions.ActionBarContributor; public class FormWizardEditorActionBarContributor extends ActionBarContributor { @Override protected void buildActions() { } @Override protected void declareGlobalActionKeys() { } }


다시 plugin.xml 을 열고 Extensions 탭에 FormWizardEditor 설정에서 contributorClass 부분에 위의 클래스를 설정합니다.

Command 와 EditPolicy

이 부분에 대해서는 아직까지 짧은 지식으로는 설명이 어렵습니다. 나중에 더 알게된다면 추가적으로 설명을 달아놓겠습니다.

우선 layout 이 변경될 경우를 처리하는 command 클래스를 하나 생성합니다.

ElementChangeLayoutCommand:
  ElementBase의 layout 의 변경을 명령??
package kr.co.vicki.formwizard.model.commands; import kr.co.vicki.formwizard.model.ElementBase; import org.eclipse.draw2d.geometry.Rectangle; import org.eclipse.gef.commands.Command; public class ElementChangeLayoutCommand extends Command { private ElementBase model; private Rectangle layout; public void execute() { model.setLayout(layout); } public void setConstraint(Rectangle rect) { this.layout = rect; } public void setModel(Object model) { this.model = (ElementBase) model; } }


위의 command 를 관리하는 EditPolicy 를 생성합니다.

ElementEditLayoutPolicy:
  실행할 command 를 반환해주는 createChangeConstraintCommand() 메소드를 구현합니다.
package kr.co.vicki.formwizard.edit.policies; import kr.co.vicki.formwizard.model.commands.ElementChangeLayoutCommand; import org.eclipse.draw2d.geometry.Rectangle; import org.eclipse.gef.EditPart; import org.eclipse.gef.commands.Command; import org.eclipse.gef.editpolicies.XYLayoutEditPolicy; import org.eclipse.gef.requests.CreateRequest; public class ElementEditLayoutPolicy extends XYLayoutEditPolicy { @Override protected Command createChangeConstraintCommand(EditPart child, Object constraint) { ElementChangeLayoutCommand command = new ElementChangeLayoutCommand(); command.setModel(child.getModel()); command.setConstraint((Rectangle) constraint); return command; } @Override protected Command getCreateCommand(CreateRequest request) { return null; } }


이러한 정책을 등록을 해야하는데 EditPart 의 createEditPolicies() 메소드에서 등록을 합니다.
abstract class ElementPartBase extends AbstractGraphicalEditPart implements PropertyChangeListener { @Override protected void createEditPolicies() { installEditPolicy(EditPolicy.LAYOUT_ROLE, new ElementEditLayoutPolicy()); } ... }


이 상태에서 테스트 application 을 띄우게 되면 SimpleElementFIgure 를 선택할 수 있고 이동이나 사이즈 조절을 할 수 있게 되는데 실제로는 변경이 되지 않습니다.




PropertyChangeSupport 의 이용

layout 변경만 처리할 뿐이지 실제로 변경에 대한 통지를 받지 못하는 것인데 다음과 같은 간단한 구현으로 해당 사항을 처리할 수 있습니다.

ElementBase 클래스에서 PropertyChangeSupport 를 이용해서 리스너들을 관리하고 실제로 모델의 layout 에 변경이 있을 경우 리스너에 프로퍼티의 변경을 통지하여 figure 가 다시 그려질 수 있도록 하는 것입니다.

ElementBase 클래스에 리스너 관리자와 프로퍼티를 추가합니다.
public class ElementBase { /** * 레이아웃의 변경시 사용하는 프로퍼티 */ public static final String PROPERTY_LAYOUT = "elementbase layout change"; private PropertyChangeSupport listeners; ... public ElementBase() { ... listeners = new PropertyChangeSupport(this); } ... public void setLayout(Rectangle newLayout) { Rectangle oldLayout = layout; layout = newLayout; getListeners().firePropertyChange(PROPERTY_LAYOUT, oldLayout, newLayout); } ... public void addPropertyChangeListener(PropertyChangeListener listener) { listeners.addPropertyChangeListener(listener); } public void removePropertyChangeListener(PropertyChangeListener listener) { listeners.removePropertyChangeListener(listener); } public PropertyChangeSupport getListeners() { return listeners; } }


실제로 변경을 통지받고 처리를 할 EditPart 에 PropertyChangeListener 를 구현하고 약간의 로직을 추가합니다.
ElementPartBase 클래스를 수정합니다.
abstract class ElementPartBase extends AbstractGraphicalEditPart implements PropertyChangeListener { ... @Override public void propertyChange(PropertyChangeEvent evt) { if (evt.getPropertyName().equals(ElementBase.PROPERTY_LAYOUT)) refreshVisuals(); } @Override public void activate() { super.activate(); ((ElementBase) getModel()).addPropertyChangeListener(this); } @Override public void deactivate() { ((ElementBase) getModel()).removePropertyChangeListener(this); super.deactivate(); } }
활성화시(activate 메소드) 리스너를 추가해서 프로퍼티의 변경이 이루어질 경우(propertyChange 메소드) 다시 그려주게(refreshVisuals 메소드) 됩니다. 비활성화(deactivate 메소드) 시에는 모델에서 리스너를 제거합니다.


여기까지 작성이 완료되게 되면 돌려봐야겠죠~

Model 의 생성

이 튜토리얼에서 만들 모델은 BodyElement 와 SimpleElement 를 만들어볼 예정입니다.
BodyElement 는 최상위 모델이고 SimpleElement 들을 자식요소로 갖게됩니다.

일단 가장 기본이 되는 모델을 생성합니다.

model 패키지를 추가하여 ElementBase 클래스를 생성합니다.
좌표와 위치를 저장하는 layout 과 자식요소, 부모요소를 저장하는 변수를 갖게됩니다.
package kr.co.vicki.formwizard.model; import java.util.ArrayList; import java.util.List; import org.eclipse.draw2d.geometry.Rectangle; public class ElementBase { /** * 좌표의 위치와 크기를 저장하는 변수 */ private Rectangle layout; private List<ElementBase> children; private ElementBase parent; public ElementBase() { layout = new Rectangle(10, 10, 100, 100); children = new ArrayList<ElementBase>(); } public Rectangle getLayout() { return layout; } public void setLayout(Rectangle layout) { this.layout = layout; } public boolean addChlid(ElementBase child) { child.setParent(this); return children.add(child); } public boolean removeChild(ElementBase child) { return children.remove(child); } public List<ElementBase> getChildrenArray() { return children; } public ElementBase getParent() { return parent; } public void setParent(ElementBase parent) { this.parent = parent; } }

이번에는 BodyElement 클래스를 생성합니다. 아직까지는 구현할게 없네요~
package kr.co.vicki.formwizard.model; public class BodyElement extends ElementBase { }

자식요소로 사용할 SimpleElement 클래스를 생성합니다.
package kr.co.vicki.formwizard.model; import org.eclipse.draw2d.ColorConstants; import org.eclipse.swt.graphics.Color; public class SimpleElement extends ElementBase { private Color foregroundColor; private Color backgroundColor; private int border; private String text; public SimpleElement() { super(); setForegroundColor(ColorConstants.black); setBackgroundColor(ColorConstants.white); } public Color getForegroundColor() { return foregroundColor; } public void setForegroundColor(Color foregroundColor) { this.foregroundColor = foregroundColor; } public Color getBackgroundColor() { return backgroundColor; } public void setBackgroundColor(Color backgroundColor) { this.backgroundColor = backgroundColor; } public int getBorder() { return border; } public void setBorder(int border) { this.border = border; } public String getText() { return text; } public void setText(String text) { this.text = text; } }



Figure 의 생성

model 이 데이터를 저장하는 부문이라면 figure 는 화면에 그려지는 역할을 한다고 보면 될 것 같습니다.

마찬가지로 model 별로 figure 클래스를 생성합니다.

BodyElement 를 처리할 BodyElementFigure 를 생성합니다.
모델도 데이터가 별로 없으므로 간단하게 선 굵기를 2로 하고 선 색을 회색으로 설정했습니다.
package kr.co.vicki.formwizard.figure; import org.eclipse.draw2d.ColorConstants; import org.eclipse.draw2d.Figure; import org.eclipse.draw2d.LineBorder; import org.eclipse.draw2d.XYLayout; import org.eclipse.draw2d.geometry.Rectangle; public class BodyElementFigure extends Figure { private XYLayout layout; public BodyElementFigure() { layout = new XYLayout(); setLayoutManager(layout); setForegroundColor(ColorConstants.gray); setBorder(new LineBorder(2)); } public void setLayout(Rectangle rect) { setBounds(rect); } }

이번에는 SimpleElement 를 처리할 SimpleElementFigure 를 생성합니다.
폰트를 설정해보려고 했는데 폰트 크기외에는 설정이 잘 안되었습니다 (-_ㅜ)
setOpaque() 메소드는 투명하게 하는 것으로 생각됩니다만.. 정확하게는...
SWT 개발하듯이 draw2d 를 이용하게 화면을 구성하면 그대로 표시가 되네요~~~
package kr.co.vicki.formwizard.figure; import org.eclipse.draw2d.Figure; import org.eclipse.draw2d.Label; import org.eclipse.draw2d.ToolbarLayout; import org.eclipse.draw2d.XYLayout; import org.eclipse.draw2d.geometry.Rectangle; import org.eclipse.swt.SWT; import org.eclipse.swt.graphics.Font; public class SimpleElementFigure extends Figure { private Label label; public SimpleElementFigure() { XYLayout layout = new XYLayout(); setLayoutManager(layout); label = new Label(); label.setFont(new Font(null, "malgun", 10, SWT.NONE)); add(label, ToolbarLayout.ALIGN_CENTER); setConstraint(label, new Rectangle(5, 5, -1, -1)); setOpaque(true); } public void setLayout(Rectangle rect) { getParent().setConstraint(this, rect); } public void setText(String text) { label.setText(text); } }



EditPart 의 생성

figure 를 생성하고 model 의 편집을 지원하는 EditPart 를 추가할 차례입니다.

model 과 마찬가지로 editpart 들이 같은 기능들을 처리하므로 base 클래스를 만듭니다.

ElementPartBase class
  : 처리하는 일은 자식요소들을 반환하는 정도??
  (20080719 추가) ㅎㅎ;; createEditPolicies() 메소드를 빼먹었었네요;;;
package kr.co.vicki.formwizard.edit; import java.util.List; import kr.co.vicki.formwizard.model.ElementBase; import org.eclipse.gef.editparts.AbstractGraphicalEditPart; abstract class ElementPartBase extends AbstractGraphicalEditPart { @Override protected List<ElementBase> getModelChildren() { return ((ElementBase) getModel()).getChildrenArray(); } @Override protected void createEditPolicies() { } }

BodyElementPart class
  : BodyElement 를 관리하는 EditPart 입니다. BodyElementFigure 를 생성하는 기능 외에는...
package kr.co.vicki.formwizard.edit; import kr.co.vicki.formwizard.figure.BodyElementFigure; import org.eclipse.draw2d.IFigure; public class BodyElementPart extends ElementPartBase { @Override protected IFigure createFigure() { IFigure figure = new BodyElementFigure(); return figure; } @Override protected void refreshVisuals() { // 별로 할일이 없으므로 주석처리~ // BodyElementFigure figure = (BodyElementFigure) getFigure(); // BodyElement model = (BodyElement) getModel(); } }

SimpleElementPart class
  : SimpleElementFigure 를 생성하고 SimpleElement 를 통해서 그려주는 로직을 처리합니다.
package kr.co.vicki.formwizard.edit; import kr.co.vicki.formwizard.figure.SimpleElementFigure; import kr.co.vicki.formwizard.model.SimpleElement; import org.eclipse.draw2d.IFigure; import org.eclipse.draw2d.LineBorder; public class SimpleElementPart extends ElementPartBase { @Override protected IFigure createFigure() { IFigure figure = new SimpleElementFigure(); return figure; } @Override protected void refreshVisuals() { SimpleElementFigure figure = (SimpleElementFigure) getFigure(); SimpleElement model = (SimpleElement) getModel(); figure.setForegroundColor(model.getForegroundColor()); figure.setBackgroundColor(model.getBackgroundColor()); figure.setLayout(model.getLayout()); figure.setBorder(new LineBorder(model.getBorder())); figure.setText(model.getText()); } }


이러한 EditPart 를 생성해주는 Factory 클래스를 생성합니다. (Factory 클래스를 등록하면 자동으로 연결이 되는 구조입니다.)
ElementEditPartFactory class
  : EditPartFactory 를 생성합니다. createEditPart() 메소드 에서 모델에 따른 EditPart 를 생성합니다.
package kr.co.vicki.formwizard.edit; import kr.co.vicki.formwizard.model.BodyElement; import kr.co.vicki.formwizard.model.SimpleElement; import org.eclipse.gef.EditPart; import org.eclipse.gef.EditPartFactory; import org.eclipse.gef.editparts.AbstractGraphicalEditPart; public class ElementEditPartFactory implements EditPartFactory { @Override public EditPart createEditPart(EditPart context, Object model) { AbstractGraphicalEditPart part = null; if (model instanceof BodyElement) { part = new BodyElementPart(); } else if (model instanceof SimpleElement) { part = new SimpleElementPart(); } part.setModel(model); return part; } }



GraphicalEditor 의 수정

EditPartFactory 를 등록하고 기본적으로 화면에 그려질 EditPart 를 설정합니다.
public class FormWizardEditor extends GraphicalEditor { ... @Override protected void configureGraphicalViewer() { super.configureGraphicalViewer(); GraphicalViewer viewer = getGraphicalViewer(); viewer.setEditPartFactory(new ElementEditPartFactory()); } @Override protected void initializeGraphicalViewer() { GraphicalViewer viewer = getGraphicalViewer(); BodyElement element = new BodyElement(); SimpleElement sElem = new SimpleElement(); sElem.setLayout(new Rectangle(20, 20, 150, 150)); sElem.setBorder(1); sElem.setText("안녕하세요."); element.addChlid(sElem); viewer.setContents(element); } ... }



이래해서 다시 테스트로 띄워보면~

Dependencies 설정

프로젝트에서 사용할 플러그인을 선택합니다. 일반 자바 프로젝트라면 빌드 패스에 jar를 추가하는 것과 같다고 보면 되겠네요...

plugin.xml 을 더블클릭하면 Plug-in Manifest Editor 로 열리게 됩니다.

하단 탭에 있는 Dependencies 탭을 열고 Required Plug-ins 에 Add… 버튼을 클릭하여 org.eclipse.gef (3.4.0~~) 를 추가합니다.

Custom Editor 생성

추가가 되었으면 저장을 하고 org.eclipse.gef.ui.parts.GraphicalEditor 를 상속받은 클래스를 하나 생성합니다.

package kr.co.vicki.formwizard; import org.eclipse.core.runtime.IProgressMonitor; import org.eclipse.gef.DefaultEditDomain; import org.eclipse.gef.ui.parts.GraphicalEditor; public class FormWizardEditor extends GraphicalEditor { public static final String ID = "kr.co.vicki.formwizard.formwizardeditor"; public FormWizardEditor() { setEditDomain(new DefaultEditDomain(this)); } @Override protected void initializeGraphicalViewer() { } @Override public void doSave(IProgressMonitor monitor) { } }

클래스를 하나 더 생성합니다. 이번에는 org.eclipse.ui.IEditorInput 인터페이스를 구현하는 클래스입니다.

package kr.co.vicki.formwizard; import org.eclipse.jface.resource.ImageDescriptor; import org.eclipse.ui.IEditorInput; import org.eclipse.ui.IPersistableElement; public class FormWizardEditorInput implements IEditorInput { public String name; public FormWizardEditorInput(String name) { this.name = name; } @Override public boolean exists() { return (this.name != null); } @Override public boolean equals(Object o) { if (!(o instanceof FormWizardEditorInput)) return false; return ((FormWizardEditorInput) o).getName().equals(getName()); } @Override public ImageDescriptor getImageDescriptor() { return ImageDescriptor.getMissingImageDescriptor(); } @Override public String getName() { return name; } @Override public IPersistableElement getPersistable() { return null; } @Override public String getToolTipText() { return name; } @Override public Object getAdapter(Class adapter) { return null; } }

Extention 설정

이제 확장을 설정해 보겠습니다. 확장이란… 아직 저도 잘 모릅니다.

plugin.xml 을 열고 Extentions 탭에서 All Extentions의 Add… 버튼을 클릭하여 org.eclipse.ui.editors 를 추가한 후 Extentions Element Details 를 다음과 같이 입력한 후 저장을 합니다.

id는 FormWizardEditor 의 ID 로 설정하시면 되고, class 의 경우에는 FormWizardEditor 로 설정을 합니다.

ApplicationWorkbenchAdvisor 를 열어서 postStartup() 메소드를 오버라이딩합니다.

public class ApplicationWorkbenchAdvisor extends WorkbenchAdvisor { ... @Override public void postStartup() { try { IWorkbenchPage page = PlatformUI.getWorkbench().getActiveWorkbenchWindow().getActivePage(); page.openEditor(new FormWizardEditorInput("FormWizard"), FormWizardEditor.ID, false); } catch (Exception e) { e.printStackTrace(); } } }

테스팅

실제로 돌려봐야지 무엇을 하고 있는지 알겠죠??

plugin.xml 의 Overview 탭에서 Testing 항목에 Launch an Eclipse application 을 클릭하면 실행시킬 수 있습니다.

(한번 실행시키면 Run 항목에 추가가 되네요~)

밍숭맹숭한 실행화면~

Plug-in Project 생성

이클립스를 띄운 후 New – File – Project 에서 Plug-in Project 를 선택합니다.

그림 1 Plugin-Project 생성

프로젝트 이름을 설정합니다.

그림 2 Project 기본 설정

중간에 하나가 빠졌었네요;;; (20080719 추가!!!)
Rich Client Application 을 Yes 로 설정합니다.
이유는... 저도 잘~ ㅋㅋㅋ (아직 시작한지 얼마 안되서...)

그림 3 Templates 선택

윈도우 타이틀을 변경합니다. 저는 제 맘대로 FormWizard 라고 설정했습니다.

(캡쳐가 오타네요… -_ㅜ)

그림 4 RCP application 설정

프로젝트를 생성하면 다음과 같은 구조가~

그림 5 프로젝트 구조

이번 파트는 여기까지 하고 다음에는 실제로 약간의 구현을 해보겠습니다.

이클립스 설치

이클립스는 가장 최신 버전인 ganymede 버전으로 선택하였습니다. 이유는... 제가 신상주의자이므로...

http://www.eclipse.org/downloads/packages/ 

해당 페이지로 이동하여 Eclipse for RCP/Plug-inDevelopers 를 다운 받습니다. 기존 이클립스에 하면 안되냐고 하시는 분들은... GEF 가 다른 프레임워크와 호환성을 많이 타는 것 같습니다. 신상환경에서 해보시는게 최고입니다.

다운로드를 받으신 후 적당한 위치에 압축을 풀고 대기 시켜놓습니다.

다운로드가 완료되면 이클립스 플러그인 설치하듯이 이클립스 폴더에 압축을 풀면 끝입니다.

[그림 2] GEF 다운로드 페이지