지니가 GEF를 만났을때2(Viewer)

이번 기사에서는 GEF 개발에 있어서 GEF의 요소들을 프레임워크 개발자의 시점으로 보고, GEF 켄버스에 모델을 그리는 예제를 통해 GEF의 Viewer 기본요소에 대해 알아 본다.

이전 기사에서 예제는 canvas, pallete 모두 아무것도 안보이는 상태였다. 생성 초기화 과정이 없었기 때문이다. 일단 켄버스에 우리가 정의한 모델이 보일 수 있게 해보자. GEF 켄버스에 모델이 그려지는 과정은 다음과 같다.

1. 뷰어 컨텐트의 모델을 가져 온다.

-이것이 모든 모델을 가지고 있는 최상위 모델이다.

2. 해당 모델의 에디트 파트를 찾는다.

-각 모델의 각각의 에디트 파트를 가진다. 같은 에디터 파트를 사용해도 된다.

3. 에디트 파트를 참조하여 모델을 그린다.

-에디트 파트는 어떻게 보일지의 Viewer의 역할과 편집의 제한 이라는 Control의 요소를 가지고 있다.

과정을 정리해 보면 GEF canvas에 모델을 그리기 위해서는 Model, Edit Part, 2번의 역할을 하는 중개자가 필요하다.(GEF에서는 이 중개자를 Edit Part Factory라 부른다)

Model

기사에 사용할 예제를 살펴 보자. 매우 간단한 모델로 기본이 되는 모델과 모델과 모델을 연결할 수 있는 연결 모델, 모델들을 포함할 최상위 모델, 이렇게 3가지로 구성 되어 있다.


package net.jlab.get.example.editor.model;



import java.util.ArrayList;

import java.util.List;





public class SimpleDiagram {

  private List SimpleModelList = new ArrayList();



   public boolean addChild(SimpleModel s) {

    if (s != null && SimpleModelList.add(s)) {

      return true;

    }

    return false;

  }



  public List getChildren() {

    return SimpleModelList;

  }



  public boolean removeChild(SimpleModel s) {

    if (s != null && SimpleModelList.remove(s)) {

      return true;

    }

    return false;

  }

}

SimpleDiagram.java

모든 모델 들을 포함하고 있는 최상위 모델 이다.


package net.jlab.get.example.editor.model;



public class SimpleModel {

  private int type;

  public void setType(int type) {

    this.type = type;

  }

  public int getType() {

    return type;

  }

  

  private String content;

  public String getContent() {

    return content;

  }

  public void setContent(String content) {

    this.content = content;

  }

}

SimpleModel.java

실제 기사에서 사용할 모델로써 모델 타입을 저장할 type 필드 내용을 저장할 content필드등으로 이루어져 있다.


package net.jlab.get.example.editor.model;



public class SimpleConnection extends SimpleModel {

  private SimpleModel startPoint;



  public SimpleModel getStartPoint() {

    return startPoint;

  }



  public void setStartPoint(SimpleModel startPoint) {

    this.startPoint = startPoint;

  }



  private SimpleModel endPoint;



  public SimpleModel getEndPoint() {

    return endPoint;

  }



  public void setEndPoint(SimpleModel endPoint) {

    this.endPoint = endPoint;

  }



}

SimpleConnection.java

모델과 모델을 연결할 연결자 이다. 실제 모델 설계에 있어서는 모델안에 다른 모델에 대한 레퍼런스 리스트를 삽입하면 되지만 기사 진행상 이렇게 별도의 모델로 정의 했다.

Edit Part

여러분들이 실제 GEF를 사용할때 가장 많은 코드를 작성하게 되는 부분이다. MVC중 V와 C의 요소를 모두 가지고 있기 때문이다. 하지만 Viewer의 역할은 GEF의 그래픽 라이브러리인 Draw2D의 Figure에 중개 하는 역할 만 함으로 MVC의 C 역할인 Controller에 치중된다. Controller역할은 다음 기사에서 다루 겠다 Viewer 중심으로 보자.


package net.jlab.get.example.editor.edit;



import net.jlab.get.example.editor.model.SimpleModel;



import org.eclipse.draw2d.ColorConstants;

import org.eclipse.draw2d.Ellipse;

import org.eclipse.draw2d.IFigure;

import org.eclipse.draw2d.PolygonDecoration;

import org.eclipse.draw2d.PolylineConnection;

import org.eclipse.draw2d.RectangleFigure;

import org.eclipse.draw2d.geometry.Point;

import org.eclipse.draw2d.geometry.Rectangle;

import org.eclipse.gef.EditPolicy;

import org.eclipse.gef.commands.Command;

import org.eclipse.gef.editparts.AbstractGraphicalEditPart;

import org.eclipse.gef.editpolicies.ConnectionEditPolicy;

import org.eclipse.gef.editpolicies.ConnectionEndpointEditPolicy;

import org.eclipse.gef.requests.GroupRequest;



public class SimpleModelEditPart extends AbstractGraphicalEditPart {



  @Override

  /*

   * (non-Javadoc)

   * 

   * @see org.eclipse.gef.editparts.AbstractGraphicalEditPart#createFigure()

   */

  protected IFigure createFigure() {

    SimpleModel model = (SimpleModel) this.getModel();

    IFigure f = null;

    if (model.getType() == 1) {

      f = new Ellipse();

      f.setOpaque(true); // non-transparent figure

      f.setBackgroundColor(ColorConstants.green);

      f.setLocation(new Point(100, 100));

      f.setSize(100, 100);

    }



    if (model.getType() == 2) {

      f = new RectangleFigure();

      f.setOpaque(true); // non-transparent figure

      f.setBackgroundColor(ColorConstants.yellow);

      f.setLocation(new Point(250, 100));

      f.setSize(100, 100);

    }

    return f;

  }



  @Override

  protected void createEditPolicies() {

    // TODO Auto-generated method stub



  }



}

SimpleModelEditPart.java

EditPart의 오버라이드 메소드는 크게 2가지 이다.

protected IFigure createFigure()

모델을 어떻게 보여줄지 결정할 메소드 이다. 위 코드에서는 지정된 영역에 보여주는 코드를 삽입했다.

protected void createEditPolicies()

편집에 제한을 주는 메소드 이다. 제한 뿐만 아니라 방법 또한 정해 주는 메소드로 이 메소드가 그냥 Stub으로 남아 있는 위 예제에서는 아무런 편집을 할 수 없게 된다.


package net.jlab.get.example.editor.edit;



import net.jlab.get.example.editor.model.SimpleConnection;



import org.eclipse.draw2d.Graphics;

import org.eclipse.draw2d.IFigure;

import org.eclipse.draw2d.PolygonDecoration;

import org.eclipse.draw2d.Polyline;

import org.eclipse.draw2d.PolylineConnection;

import org.eclipse.draw2d.geometry.Point;

import org.eclipse.draw2d.geometry.Rectangle;

import org.eclipse.gef.EditPolicy;

import org.eclipse.gef.editparts.AbstractConnectionEditPart;

import org.eclipse.gef.editparts.AbstractGraphicalEditPart;

import org.eclipse.gef.editpolicies.ConnectionEndpointEditPolicy;



public class SimpleConnectionEditPart extends AbstractGraphicalEditPart {



  /*

   * (non-Javadoc)

   * 

   * @see org.eclipse.gef.editparts.AbstractEditPart#createEditPolicies()

   */

  protected void createEditPolicies() {



  }



  /*

   * (non-Javadoc)

   * 

   * @see org.eclipse.gef.editparts.AbstractGraphicalEditPart#createFigure()

   */

  protected IFigure createFigure() {

    Polyline connection = new Polyline();

    connection.setLineWidth(3);

    connection.setLineStyle(Graphics.LINE_SOLID); // line drawing style



    connection.addPoint(new Point(200, 150));

    connection.addPoint(new Point(250, 150));

    return connection;

  }



  private SimpleConnection getCastedModel() {

    return (SimpleConnection) getModel();

  }



}

SimpleConnectionEditPart.java

모델과 모델의 관계를 표시할 연결선의 에디트 파트 이다.


package net.jlab.get.example.editor.edit;



import java.util.List;



import net.jlab.get.example.editor.model.SimpleDiagram;



import org.eclipse.draw2d.Figure;

import org.eclipse.draw2d.FreeformLayer;

import org.eclipse.draw2d.FreeformLayout;

import org.eclipse.draw2d.IFigure;

import org.eclipse.draw2d.MarginBorder;

import org.eclipse.gef.editparts.AbstractGraphicalEditPart;



public class SimpleDiagramEditPart extends AbstractGraphicalEditPart {



  @Override

  protected IFigure createFigure() {

    Figure f = new FreeformLayer();

    f.setBorder(new MarginBorder(3));

    f.setLayoutManager(new FreeformLayout());



    return f;

  }



  @Override

  protected void createEditPolicies() {



  }

  

  private SimpleDiagram getCastedModel() {

    return (SimpleDiagram) getModel();

  }



  /* (non-Javadoc)

   * @see org.eclipse.gef.editparts.AbstractEditPart#getModelChildren()

   */

  protected List getModelChildren() {

    return getCastedModel().getChildren(); // return a list of shapes

  }



}

SimpleDiagramEditPart.java

모델을 그려줄 켄버스 역할을 할 SimpleDiagram의 EditPart이다. 실제 모델들은 이 위에서 그려지므로 다른 에디트 파트와는 다르게 Layout이 필요하다.


package net.jlab.get.example.editor.edit;



import net.jlab.get.example.editor.model.SimpleConnection;

import net.jlab.get.example.editor.model.SimpleDiagram;

import net.jlab.get.example.editor.model.SimpleModel;



import org.eclipse.gef.EditPart;

import org.eclipse.gef.EditPartFactory;



public class SimpleEditPartFactory implements EditPartFactory {



  @Override

  public EditPart createEditPart(EditPart context, Object model) {

    EditPart part = null;

    

    if (model instanceof SimpleDiagram) {

      part = new SimpleDiagramEditPart();

    }

    if (model instanceof SimpleModel) {

      part = new SimpleModelEditPart();

    }

    if (model instanceof SimpleConnection) {

      part = new SimpleConnectionEditPart();

    }

    part.setModel(model);

    return part;

  }



}

SimpleEditPartFactory.java

어떠한 모델을 어떠한 에디트 파트로 연결할지 중개자 역할을 하는 EditPartFactory이다.

Editor


package net.jlab.get.example.editor;



import net.jlab.get.example.editor.edit.SimpleEditPartFactory;

import net.jlab.get.example.editor.model.SimpleConnection;

import net.jlab.get.example.editor.model.SimpleDiagram;

import net.jlab.get.example.editor.model.SimpleModel;



import org.eclipse.core.runtime.IProgressMonitor;

import org.eclipse.gef.DefaultEditDomain;

import org.eclipse.gef.GraphicalViewer;

import org.eclipse.gef.commands.CommandStack;

import org.eclipse.gef.editparts.ScalableFreeformRootEditPart;

import org.eclipse.gef.palette.PaletteRoot;

import org.eclipse.gef.ui.parts.GraphicalEditorWithFlyoutPalette;

import org.eclipse.gef.ui.parts.GraphicalViewerKeyHandler;



public class SimpleEditor extends GraphicalEditorWithFlyoutPalette {

  CommandStack command;

  DefaultEditDomain domain;

  SimpleDiagram diagram;



  public SimpleEditor() {

    super();

    domain = new DefaultEditDomain(this);

    this.setEditDomain(domain);



    command = new CommandStack();

    this.getEditDomain().setCommandStack(command);

    this.createModelMap();

  }



  /**

   * 모델 객체를 생성하고 이들의 관계를 만든다.

   */

  private void createModelMap() {

    System.err.println("** createModelMap. **");

    diagram = new SimpleDiagram();



    SimpleModel model1 = new SimpleModel();

    model1.setContent("Model1");

    model1.setType(1);

    diagram.addChild(model1);



    SimpleModel model2 = new SimpleModel();

    model2.setContent("Model2");

    model2.setType(2);

    diagram.addChild(model2);



    SimpleConnection connection = new SimpleConnection();

    connection.setType(1);

    connection.setStartPoint(model1);

    connection.setEndPoint(model2);

    diagram.addChild(connection);

  }



  protected void configureGraphicalViewer() {

    System.err.println("** configureGraphicalViewer. **");

    super.configureGraphicalViewer();



    GraphicalViewer viewer = getGraphicalViewer();

    viewer.setEditPartFactory(new SimpleEditPartFactory());

    viewer.setRootEditPart(new ScalableFreeformRootEditPart());

    viewer.setKeyHandler(new GraphicalViewerKeyHandler(viewer));



  }



  @Override

  protected void initializeGraphicalViewer() {

    System.err.println("** initializeGraphicalViewer. **");

    super.initializeGraphicalViewer();

    GraphicalViewer viewer = getGraphicalViewer();

    viewer.setContents(diagram);



  }



  @Override

  protected PaletteRoot getPaletteRoot() {

    // TODO Auto-generated method stub

    return null;

  }



  @Override

  public void doSave(IProgressMonitor monitor) {

    // TODO Auto-generated method stub



  }



}

SimpleEditor.java

GEF에서 모델 간의 관계는 저장된 파일을 읽거나 기존의 모델을 분석 하여 생성하게 된다. 기사 진행상 모델간의 관계를 임의로 만들었다. 생성된 모델을 최상의 모델에 넣는 코드는 GEF 프레임워크상 필요한 코드이다. GEF가 모델을 Viewer에 출력하기 위해서 모델의 분석을 최초로 시작할 타겟이 필요한데 이것을 컨테이너 역할을 하는 모델이 담당하게 된다.

뷰어를 구성하기 위한 준비 코드이다. GEF 개발시 거이 이 코드 그대로 고정적으로 쓰게 된다. 이곳에 EditPartFactory를 등록해야 한다.

뷰어를 초기화 하고 뷰어에 분석을 시작할 최초의 모델을 알려준다.

여기 까지가 모델을 뷰어에 보이기 위한 최소 코드 전부 이다.

Simple Graphical Editor

이 코드를 실행하면 모델을 보여주기만 할뿐, 팔랫트도 동작하지 않고 켄버스에 그려진 모델도 편집 할 수 없다. 이유는 여기 까지 기사를 주의 깊게 읽어 보았다면 쉽게 알 수 있을 것이다. 다음 기사에서는 EditPartPolicy와 Pallete 기능을 추가해 보자.

제이랩 대표 운영자, Total Eclipse 대표 저자, Eclipse Consultant, Juliet Scandal Project Leader. 이클립스 프로젝트들을 적극 이용해서 저비용으로 쾌속개발을 하는데 관심이 많다. Contact

이 컨텐츠는 JPL에 의해서 보호 받습니다. 오탈 자나 건의는 이곳에 해주십시오

관련 제이랩 기사
지니가 GEF를 만났을 때 1	http://www.jlab.net/news/20051107/news.htm
지니가 GEF를 만났을 때 2	http://www.jlab.net/news/20051206/news.htm
지니가 GEF를 만났을 때 1 (Renewer)	http://www.jlab.net/news/20081023/news.htm

Model	Memory Block
View(Draw2D Figure)	Cavas
Controller	Controller
Tool	Pallete

	문자
	도형
	도형