With GMF, node compartments traditionnaly have list layouts or not layout at all.

The second choice is selected when on want to put the diagram nodes freely in the compartment. The first choice allows to get nodes automatically positionned vertically in the parent node. It is then not possible to move or resize these nodes. For example, we may use this feature if we want to built an UML class diagram editor ; in a class node, two compartments should be inserted vertically, the first accepting attributes, the second accepting operations.

In this tutorial, we will see how to get an horizontal layout which may sometimes fit better one's needs.

The diagram editor will accept one school. In this school, we will be able to add classrooms. Every classroom may accept students. And finally, we will allow students to have friends !

Full code is availabale through :

• SVN : https://gmfsamples.svn.sourceforge.net/svnroot/gmfsamples/School/tags/tuto7-final-diagram
• direct download : https://sourceforge.net/projects/gmfsamples/files/20091212/tuto7-final-diagram.zip/download

This tutorial has been built with :

• Eclipse 3.5.1
• Graphical Modeling Framework SDK 2.2.1
• Eclipse Modeling Framework 2.5.0

• Create a new GMF project named School
• Create a new java package named jfb.examples.gmf.school
• Create theses java interfaces :
  • Our diagram contains one school :

package jfb.examples.gmf.school.model;
 
/**
 * @model
 */
public interface Diagram {
 
	/**
	 * @model containment="true"
	 */
	School getSchool();
 
}

• The school has a name and contains classrooms :

package jfb.examples.gmf.school.model;
 
import java.util.List;
 
/**
 * @model
 */
public interface School {
 
	/**
	 * @model
	 */
	String getName();
 
	/**
	 * @model containment="true"
	 */
	List<Classroom> getClassrooms();
 
}

• Each classroom has a name and contains students :

package jfb.examples.gmf.school.model;
 
import java.util.List;
 
/**
 * @model
 */
public interface Classroom {
 
	/**
	 * @model
	 */
	String getName();
 
 
	/**
	 * @model containment="true"
	 */
	List<Student> getStudents();
 
}

• Each student has a name and may have some friends (students as well)

package jfb.examples.gmf.school.model;
 
/**
 * @model
 */
public interface Student {
 
	/**
	 * @model
	 */
	String getName();
 
	/**
	 * @model
	 */
	List<Student> getFriends();
 
}

• Create a new EMF Generator Model named school.genmodel in the model folder (right click on the School project, select New, choose EMF Generator Model)
• Select the package that you have just created above and click finish
• Optionnaly, you can generate a visual representation of the model by right clicking on the school.ecore file that has been generated above and by selecting Initialize ecore_diagram diagram file
• You should get this :

• In the Dashboard view :
  • select the Domain Gen Model file (school.genmodel)
  • select the Domain Model file (school.ecore)
• Open the school.genmodel file
• Right click on the root element of the diagram and select Generate Model Code
• Right click on the root element of the diagram and select Generate Edit Code
• Right click on the root element of the diagram and select Generate Editor Code

• Click on the derive label on the left of the Tooling Def Model rectangle of the Dashboard view
• Choose school.gmftool as file name and click Next
• Select the Diagram class as Diagram Element and click Next
• In the Node column, only the following entries must be checked : Classroom, Student (School is not checked because, later in this tutorial, we will make it automatically available when a new diagram is initiated).
• In the Links column, only the friends : Student entry must be checked
• You should have :

• Click on the derive label on the left of the Graphical Def Model rectangle of the Dashboard view
• Choose school.gmfgraph as file name and click Next
• Select the Diagram class as Diagram Element and click Next
• In the Node column, only the following entries must be checked : Classroom, School, Student
• In the Links column, only the friends : Student entry must be checked
• In the Label column, only the following entries must be checked : Classroom.name, School.name, Student.name
• You should have :

• Open the school.gmfgraph file
• Delete the Polyline Decoration StudentFriendsTargetDecoration node
• Under the Rectangle ClassroomFigure node :
  • Delete the Flow Layout node
  • Add a Boder Layout node
  • Add a Rectangle node and set its name to ClassroomCompartmentFigure
  • Under the Label ClassroomNameFigure, add a Border Layout Data node and set its properties :
    • Alignment=BEGINNING
    • Vertical=true
  • Under the Rectangle ClassroomCompartmentFigure, add a Border Layout Data node and set its properties :
    • Alignment=CENTER
    • Vertical=true
• Under the Figure Descriptor ClassroomFigure node, add a Child Access and in the property view, select the Rectangle ClassroomCompartmentFigure entry.
• Under the Rectangle SchoolFigure node :
  • Delete the Flow Layout node
  • Add a Boder Layout node
  • Add a Rectangle node and set its name to SchoolCompartmentFigure
  • Under the Label SchoolNameFigure, add a Border Layout Data node and set its properties :
    • Alignment=BEGINNING
    • Vertical=true
  • Under the Rectangle SchoolCompartmentFigure, add a Border Layout Data node and set its properties :
    • Alignment=CENTER
    • Vertical=true
• Under the Figure Descriptor SchoolFigure node, add a Child Access and in the property view, select the Rectangle SchoolCompartmentFigure entry.
• Under the Canvas node :
  • Add a Compartment node and set its properties to :
    • Accessor=Child Access getFigureSchoolCompartmentFigure
    • Figure=Figure Descriptor SchoolFigure
    • Name=SchoolClassroomsCompartment
  • Add another Compartment node and set its properties to :
    • Accessor=Child Access getFigureClassroomCompartmentFigure
    • Figure=Figure Descriptor ClassroomFigure
    • Name=ClassroomStudentsCompartment
• Save the diagram
• Re open the school.gmfgraph file (but as Text file (right click on the file, menu Open with > Text Editor
• Find the xsi:type attribute of the actualFigure node of the ClassroomFigure and set it to gmfgraph:RoundedRectangle :

      <actualFigure
          xsi:type="gmfgraph:RoundedRectangle"
          name="ClassroomFigure">

• Click on the combine label on the left of the Mapping Model rectangle of the Dashboard view
• Choose school.gmfmap as file name and click Next
• Select the Diagram class as Diagram Element and click Next
• In the Select Diagram Palette wizard page, just click next
• In the Select Diagram Canvas wizard page, just click next
• In the Mapping wizard page, remove the Classroom entry from Links zone
• Click Finish
• Open the school.gmfmap file generated above
• Under the Mapping node add a Link Mapping node and set its properties :
  • Target Feature=Student.friends:Student
  • Diagram Link=Connection StudentFriendConnection
  • Tool=Creation Tool Friend
• Select the Node Mapping <School/School> node and unset its Tool property (later in this tutorial, we will make school automatically available when a new diagram is initiated, a creation tool would be unusefull).
• Under the Node Mapping <School/School> node :
  • add a Child Reference node and set its Containment Feature property to School.classrooms:Classroom
  • add a Compartment Mapping node and set its properties :
    • Children=Child Reference <classrooms>
    • Compartment=Compartment SchoolClassroomsCompartment (SchoolFigure)
• Under the Child Reference <classrooms> node, add a Node Mapping node and set its properties :
  • Element=Classroom
  • Diagram Node=Node Classroom (ClassroomFigure)
  • Tool=Creation Tool Classroom
• Under the Node Mapping <Classroom/Classroom> node :
  • add a Featured Label Mapping and set its properties to :
    • Feature to display=Classroom.name:EString
    • Diagram Label=Diagram Label ClassroomName
  • add a Child Reference node and set its Containment Feature property to Classroom.students:Student
  • add a Compartment Mapping node and set its properties :
    • Children=Child Reference <students>
    • Compartment=Compartment ClassroomStudentsCompartment (ClassroomFigure)
• Under the Child Reference <students> node, add a Node Mapping node and set its properties :
  • Element=Student
  • Diagram Node=Node Student (StudentFigure)
  • Tool=Creation Tool Student
• Under the Node Mapping <Student/Student> node, add a Featured Label Mapping and set its properties to :
  • Feature to display=Student.name:EString
  • Diagram Label=Diagram Label StudentName
• Save the file

• Click on the transform label above the Diagram Editor Gen model rectangle of the Dashboard view
• Open the school.gmfgen file
• Select the Gen Compartment SchoolSchoolClassroomsCompartmentEditPart node and set the List Layout property to true
• Select the Gen Compartment ClassroomClassroomStudentsCompartmentEditPart node and set the List Layout property to false
• Save the file
• Click on the Generate diagram editor label in the Diagram Editor Gen model rectangle of the Dashboard view

At this point, if we launch the diagram editor, we will not be able to create classrooms and students because we have chosen not to add a creation button for the School element.

The following steps will allow to automatically add a new school every time a diagram is created :

• Edit the jfb.examples.gmf.school.diagram.part.SchoolDiagramEditorUtil java class
• Modify the createInitialModel method like this (do not forget to add NOT after @generated):

	/**
	 * Create a new instance of domain element associated with canvas.
	 * <!-- begin-user-doc -->
	 * <!-- end-user-doc -->
	 * @generated NOT
	 */
	private static Diagram createInitialModel() {
		Diagram diagram = SchoolFactory.eINSTANCE.createDiagram();
		School school = SchoolFactory.eINSTANCE.createSchool();
		diagram.setSchool(school);
		return diagram;
	}

As we have no creation tool for our school, we want to prevent it from being removed. To do that :

• Edit the jfb.examples.gmf.school.diagram.edit.helpers.SchoolEditHelper java class
• Modify the getDestroyElementCommand method like this (do not forget to add NOT after @generated) ; this will disable the Delete from model popup menu item :

	/**
	 * @generated NOT
	 */
	protected ICommand getDestroyElementCommand(DestroyElementRequest req) {
		// Prevents from removing the figure
		return UnexecutableCommand.INSTANCE;
	}

• Edit the jfb.examples.gmf.school.diagram.edit.parts.SchoolEditPart java class
• Modify the createDefaultEditPolicies method like this (do not forget to add NOT after @generated) ; this will disable the delete action when you type on the delete key :

	/**
	 * @generated NOT
	 */
	protected void createDefaultEditPolicies() {
		installEditPolicy(EditPolicyRoles.CREATION_ROLE,
				new CreationEditPolicy());
		super.createDefaultEditPolicies();
		installEditPolicy(EditPolicyRoles.SEMANTIC_ROLE,
				new SchoolItemSemanticEditPolicy());
		installEditPolicy(EditPolicy.LAYOUT_ROLE, createLayoutEditPolicy());
		installEditPolicy(EditPolicy.COMPONENT_ROLE, new ComponentEditPolicy() {
			public Command getCommand(Request request) {
				// If the user presses the delete key, don't delete
				if (request instanceof GroupRequestViaKeyboard 
						&& RequestConstants.REQ_DELETE.equals(request.getType())) {
					return UnexecutableCommand.INSTANCE;
				}
				return super.getCommand(request);
			}
		});
	}

Now we will modify the School layout behavior in order to get vertical classrooms :

• Edit the jfb.examples.gmf.school.diagram.edit.parts.SchoolSchoolClassroomsCompartmentEditPart java class
• Modify the createFigure method like this (do not forget to add NOT after @generated):

	/**
	 * @generated NOT
	 */
	public IFigure createFigure() {
		ResizableCompartmentFigure result = (ResizableCompartmentFigure) super
				.createFigure();
		result.setTitleVisibility(false);
		// Fix the margins
		Insets insets = result.getContentPane().getInsets();
		insets.top = 5;
		insets.bottom = 5;
		insets.left = 5;
		insets.right = 5;
		// Layout behavior modification : data must be represented horizontally
		ConstrainedToolbarLayout layoutMgr = (ConstrainedToolbarLayout) result
				.getContentPane().getLayoutManager();
		layoutMgr.setVertical(false);
		layoutMgr.setStretchMajorAxis(true); // uses all the avalaible space
		layoutMgr.setStretchMinorAxis(true); // uses all the avalaible space
		layoutMgr.setSpacing(5);
		return result;
	}

We will also make the default school size bigger than 40×40 :

• Edit the jfb.examples.gmf.school.diagram.edit.parts.SchoolEditPart java class
• Modify the createNodePlate method like this (do not forget to add NOT after @generated):

	/**
	 * @generated NOT
	 */
	protected NodeFigure createNodePlate() {
		DefaultSizeNodeFigure result = new DefaultSizeNodeFigure(600, 300);
		return result;
	}

This will allow to use rectilinears edges by default :

• Edit the jfb.examples.gmf.school.diagram.preferences.DiagramConnectionsPreferencePage java class
• Add the following method :

	/**
	 * @generated NOT
	 */
	public static void initDefaults(IPreferenceStore preferenceStore) {
		preferenceStore.setDefault(IPreferenceConstants.PREF_LINE_STYLE,
				Routing.RECTILINEAR);
	}

At this point, our diagram has a default : if you click on a classroom, and click again on the classroom's compartment, the compartment is marked as selected. Iy you right click on it, you can select Delete from model. If you select it, the compartment is deleted from the diagram, but after it is not possible to get it back and the contained students are not deleted from the model !

To diable this, we have to :

• Edit the jfb.examples.gmf.school.diagram.edit.policies.ClassroomClassroomStudentsCompartmentItemSemanticEditPolicy java class
• Add the following method :

	/**
	 * @generated NOT
	 */
	protected Command getSemanticCommand(IEditCommandRequest request) {
		if (request instanceof DestroyRequest) {
			return null;
		}
		return super.getSemanticCommand(request);
	}

At this point, when running the diagram editor, you should get this result :

I hope that this material will be helpful for you. If you want to support it, your help is welcome :