Summary

• Page properties (1 modified, 0 added, 0 removed)
• Objects (1 modified, 0 added, 0 removed)
  • Confluence.Code.ConfluencePageClass[0]

Details

Page properties

Content

...	...	@@ -2,9 +2,15 @@
2	2	This tutorial is still being worked on. Don't start working on it just yet.
3	3	{{/warning}}
4	4
5		-Welcome to the second tutorial! We will work our way through installing a proper Eclipse setup and developing a first very basic layout algorithm. The layout algorithm will integrate with KIML (KIELER Infrastructure for Meta-Layout), our very own framework that connects graphical editors with layout algorithms. Once you're finished, you should be able to create new Eclipse plug-ins and know how to write layout algorithms for KIML.
	5	+Welcome to the second tutorial! We will work our way through installing a proper Eclipse setup and developing a first very basic layout algorithm. The layout algorithm will integrate with KIML (KIELER Infrastructure for Meta-Layout), our very own framework that connects graphical editors with layout algorithms. Once you're finished, you should be able to create new Eclipse plug-ins and know how to write layout algorithms for KIML. And you should have a running Eclipse-based application that should look something like this:
6	6
	7	+
	8	+
7	7	{{warning title="ToDo"}}
	10	+Insert screen shot of final application.
	11	+{{/warning}}
	12	+
	13	+{{warning title="ToDo"}}
8	8	Insert link to presentation slides.
9	9	{{/warning}}
10	10
...	...	@@ -56,29 +56,32 @@
56	56
57	57	== Preparing the Repository ==
58	58
59		-We have created a Git repository for everyone to do his tutorials in. You can access the repository online through our Stash tool [[over here>>url:http://git.rtsys.informatik.uni-kiel.de:7990/projects/PRAK/repos/12ws-eclipse-tutorials/browse||shape="rect"]]. You will first have to configure your Stash account:
	65	+We have created a Git repository for everyone to do his tutorials in. You can access the repository online through our Stash tool [[over here>>url:http://git.rtsys.informatik.uni-kiel.de:7990/projects/PRAK/repos/12ws-eclipse-tutorials/browse||shape="rect"]]. (% style="font-size: 10.0pt;line-height: 13.0pt;" %)Clone that repository:
60	60
61		-1. Login with your Rtsys account information.
62		-1. Through the button in the top right corner, access your profile.
63		-1. Switch to the //SSH keys// tab.
64		-1. Click //Add Key// and upload a public SSH key that you want to use to access the repository.
65		-
66		-You should now be able to access the repository. Clone it:
67		-
68	68	1. Open a console window and navigate to an empty directory that the repository should be placed in.
69		-1. Enter the command [[ssh:~~/~~/git@git.rtsys.informatik.uni-kiel.de:7999/PRAK/13ss-layout-tutorials.git>>url:ssh://git@git.rtsys.informatik.uni-kiel.de:7999/PRAK/13ss-layout-tutorials.git||shape="rect"]]{{code language="none"}} .{{/code}} (including the final dot, which tells git to clone the repository into the current directory instead of a subdirectory).
	68	+1. Enter the command [[ssh:~~/~~/git@git.rtsys.informatik.uni-kiel.de:7999/PRAK/13ss-layout-tutorials.git>>url:ssh://git@git.rtsys.informatik.uni-kiel.de:7999/PRAK/13ss-layout-tutorials.git||shape="rect"]]{{code language="none"}}git clone  .{{/code}}  (including the final dot, which tells git to clone the repository into the current directory instead of a subdirectory)
70	70	1. You should now have a clone of the repository in the current directory.
71	71
72	72	You will use this repository for all your tutorial work, along with everyone else. To make sure that you don't interfere with each other, everyone will work on a different branch. This is not exactly how people usually use Git, but goes to demonstrate Git's flexibility... Add a branch for you to work in:
73	73
74		-1. Enter {{code language="none"}}git checkout -b login_name{{/code}}
	73	+1. Enter {{code language="none"}}git checkout -b login_name{{/code}}
75	75
76	76	You have just added and checked out a new branch. Everything you commit will go to this branch. To push your local commits to the server (which you will need to do so we can access your results), do the following:
77	77
78		-1. Enter {{code language="none"}}git push origin login_name{{/code}}
	77	+1. Enter {{code language="none"}}git push origin login_name{{/code}}
79	79
80	80	You would usually have to enter {{code language="none"}}git pull{{/code}} first, but since nobody will mess with your branch anyway this won't be necessary. By the way, you only need to mention {{code language="none"}}origin login_name{{/code}} with the first {{code language="none"}}git push{{/code}}, since Git doesn't know where to push the branch yet. After the first time, Git remembers the information and it will be enough to just enter {{code language="none"}}git push{{/code}}.
81	81
	81	+== Finding the KIML Sources ==
	82	+
	83	+If you want to develop a layout algorithm using KIML, you will have to get your hands at the KIML source code first. Of course, the code is available through a Git repository.
	84	+
	85	+1. Open a console window and navigate to an empty directory that the repository should be placed in.
	86	+1. Enter the command [[ssh:~~/~~/git@git.rtsys.informatik.uni-kiel.de:7999/KIELER/pragmatics.git>>url:ssh://git@git.rtsys.informatik.uni-kiel.de:7999/KIELER/pragmatics.git||shape="rect"]]{{code language="none"}}git clone  .{{/code}}
	87	+1. You should now have a clone of the repository in the current directory.
	88	+
	89	+KIML is implemented as an Eclipse plug-in that you will have to import into your Eclipse workspace. We won't do this now; it will be one of the first steps in the development of your layout algorithm.
	90	+
82	82	= Developing Your First Layout Algorithm =
83	83
84	84	Now that the preliminaries are out of the way, it's time to develop your first layout algorithm! It will, however, be a very simple one. This tutorial focuses on creating Eclipse plug-ins and on learning how to develop with KIML; thinking of and implementing cool layout algorithms is what the rest of the practical will focus on, and that is where the fun will be had!
...	...	@@ -87,40 +87,117 @@
87	87	Remember to replace each occurrence of {{code language="none"}}login_name{{/code}} with your own login name (e.g. {{code language="none"}}msp{{/code}}), and each occurrence of {{code language="none"}}Login_name{{/code}} with your capitalized login name (e.g. {{code language="none"}}Msp{{/code}}).
88	88	{{/note}}
89	89
90		-
	99	+== Setting Up Your Workspace ==
91	91
92		-
	101	+You will start by importing the plug-ins necessary to program with KIML.
93	93
94		-
	103	+1. Start Eclipse and create a new workspace.
	104	+1. Setup your workspace as explained in [[this guide>>doc:KIELER.Configuring Eclipse]].
	105	+1. We will now make the two local clones of our Git repositories known to Eclipse. To that end, open the //Git Repository Exploring// perspective through //Window// -> //Open Perspective// -> //Other//.
	106	+1. Click on //Add an existing local Git repository// and choose the location of the tutorial repository. Note that when you open the repository entry, the branch you previously checked out is marked as the current branch under //Branches// -> //Local//.
	107	+1. Add the KIML repository.
	108	+1. We will now import the projects required for KIML development to your workspace. Right-click on the KIML repository and choose //Import Projects//.
	109	+1. Choose //Import existing projects//, and select the //plugins// folder from the //Working Directory//. Then click //Next//.
	110	+1. Import the following plug-ins. This consitutes a basic configuration for the development of layout algorithms.\\
	111	+1*. de.cau.cs.kieler.core
	112	+1*. de.cau.cs.kieler.core.kgraph
	113	+1*. de.cau.cs.kieler.kiml
	114	+1*. de.cau.cs.kieler.kiml.gmf
	115	+1*. de.cau.cs.kieler.kiml.service
	116	+1*. de.cau.cs.kieler.kiml.ui
	117	+1*. de.cau.cs.kieler.klay.layered
	118	+1. To actually test your layout algorithms, you will need some kind of simple graph editor. The following plug-ins will add our KEG editor to your installation, which is just that.\\
	119	+1*. de.cau.cs.kieler.core.annotations
	120	+1*. de.cau.cs.kieler.core.kgraph.edit
	121	+1*. de.cau.cs.kieler.core.kivi
	122	+1*. de.cau.cs.kieler.core.model
	123	+1*. de.cau.cs.kieler.core.model.gmf
	124	+1*. de.cau.cs.kieler.core.ui
	125	+1*. de.cau.cs.kieler.karma
	126	+1*. de.cau.cs.kieler.keg
	127	+1*. de.cau.cs.kieler.keg.diagram
	128	+1*. de.cau.cs.kieler.keg.diagram.custom
	129	+1*. de.cau.cs.kieler.keg.edit
95	95
96		-
	131	+== Adding a New Plug-in ==
97	97
98		-
	133	+We need to create a new plug-in to implement the layout algorithm in. Switch back to the Java or Plug-in Development perspective and follow these steps:
99	99
	135	+1. Click //File// > //New// > //Other...// > //Plug-in Development// > //Plug-in Project//.
	136	+1. Enter {{code language="none"}}de.cau.cs.rtprak.login_name.tutorial2{{/code}} as the project name. Uncheck //Use default location// and use {{code language="none"}}tutorial_repository_path/de.cau.cs.rtprak.login_name.tutorial2{{/code}} as the location. Click //Next//.
	137	+1. Set the version to {{code language="none"}}0.1.0.qualifier{{/code}}, vendor to {{code language="none"}}Christian-Albrechts-Universität zu Kiel{{/code}}, and execution environment to //J2SE-1.5//. (do this for all plug-ins that you create!)
	138	+1. Uncheck all checkboxes in the //Options// group and click //Finish//.
	139	+1. If Eclipse asks you whether the //Plug-in Development// perspective should be opened, choose either //Yes// or //No//. It doesn't make much of a difference anyway.
	140	+
	141	+You should now commit your new, empty project to the Git repository. We will do that from within Eclipse.
	142	+
	143	+1. Right-click your project in the //Package Explorer// and click //Team// > //Share Project...//
	144	+1. As the repository type, select //Git// and click //Next//.
	145	+1. Tell Eclipse what repository to add the project to. The repository you placed the project in is already preselected. Simply click //Finish//.
	146	+1. Since Git support is now enabled for the project, right-click it again and click //Team// > //Commit...//
	147	+1. Select all files, enter a (meaningful) commit message, and click //Commit//.
	148	+
	149	+== Writing the Layout Algorithm ==
	150	+
	151	+When writing our layout algorithm, we are going to need to be able to access code defined in several other plug-ins. To do that, we need to add dependencies to those plug-ins:
	152	+
	153	+1. In your new plug-in, open the file {{code language="none"}}META-INF/MANIFEST.MF{{/code}}. The plug-in manifest editor will open. Open its //Dependencies// tab.
	154	+1. Add dependencies to the following plug-ins:\\
	155	+1*. {{code language="none"}}de.cau.cs.kieler.core{{/code}}
	156	+1*. {{code language="none"}}de.cau.cs.kieler.core.kgraph{{/code}}
	157	+1*. {{code language="none"}}de.cau.cs.kieler.kiml{{/code}}
	158	+1. Save the editor.
	159	+
	160	+Layout algorithms interface with KIML by means of a layout provider class that has to be created and registered with KIML.
	161	+
	162	+1. Right-click the source folder of your plug-in and click //New// > //Class//.
	163	+1. Set the package to {{code language="none"}}de.cau.cs.rtprak.login_name.tutorial2{{/code}}, enter {{code language="none"}}Login_nameLayoutProvider{{/code}} as the class name, and select {{code language="none"}}de.cau.cs.kieler.kiml.AbstractLayoutProvider{{/code}} as the superclass. (This will only be available through the //Browse// dialog if you have saved the plug-in manifest editor; if you haven't, Eclipse won't know about the new dependencies yet.)
	164	+1. Select //Generate comments// and click //Finish//.
	165	+
	166	+Implement the layout provider class:
	167	+
	168	+1. (((
	169	+Add the following constants:
	170	+
	171	+{{code language="java"}}
	172	+/** default value for spacing between nodes. */
	173	+private static final float DEFAULT_SPACING = 15.0f;
	174	+{{/code}}
	175	+)))
	176	+1. (((
	177	+Use the following code as the skeleton of the {{code language="none"}}doLayout(...){{/code}} method:
	178	+
	179	+{{code language="java"}}
	180	+progressMonitor.begin("Login_name layouter", 1);
	181	+KShapeLayout parentLayout = layoutNode.getData(KShapeLayout.class);
	182	+
	183	+float objectSpacing = parentLayout.getPRoperty(LayoutOptions.SPACING);
	184	+if (objectSpacing < 0) {
	185	+ objectSpacing = DEFAULT_SPACING;
	186	+}
	187	+
	188	+float borderSpacing = parentLayout.getProperty(LayoutOptions.BORDER_SPACING);
	189	+if (borderSpacing < 0) {
	190	+ borderSpacing = DEFAULT_SPACING;
	191	+}
	192	+
	193	+// TODO: Insert actual layout code.
	194	+
	195	+progressMonitor.done();
	196	+{{/code}}
	197	+)))
	198	+1. (((
	199	+Put the following code at the end of the {{code language="none"}}doLayout(...){{/code}} method:
	200	+
	201	+{{code language="java"}}
	202	+progressMonitor.done();
	203	+{{/code}}
	204	+)))
	205	+
100	100
101	101
102	102	This exercise will introduce the usage of the Eclipse Plugin Development Environment for developing new layout algorithms to be used in Eclipse diagram editors. Replace each <login> by your own login name (e.g. msp), and each <Login> by your login name with capitalized first letter (e.g. Msp). For any questions contact msp.
103	103
104		-1. Install and set up Eclipse ((% style="color: rgb(255,0,0);" %)TODO: describe steps to install and set up Eclipse(%%))
105		-1. Import the following KIELER plugins: ((% style="color: rgb(255,0,0);" %)TODO: describe steps to access and import the KIELER plugins and update the list(%%))\\
106		-1*. de.cau.cs.kieler.core
107		-1*. de.cau.cs.kieler.core.kgraph
108		-1*. (% style="font-size: 10.0pt;line-height: 13.0pt;" %)de.cau.cs.kieler.kiml
109		-1*. (% style="font-size: 10.0pt;line-height: 13.0pt;" %)de.cau.cs.kieler.kiml.service
110		-1*. de.cau.cs.kieler.kiml.ui
111		-1*. (% style="font-size: 10.0pt;line-height: 13.0pt;" %)de.cau.cs.kieler.klay.layered
112		-1. Create a new plugin\\
113		-11. //File → New →// Other... //→// Plug-in Development //→// Plug-in Project
114		-11. Project name: de.cau.cs.rtprak.<login>.tutorial2
115		-11. //Next// //→// set version to //0.1.0.qualifier//, provider to //Christian-Albrechts-Universität zu Kiel//, and execution environment to //J2SE-1.5// (do this for all plugins that you create!)
116		-11. The checkboxes in the //Options// group can be deactivated -> //Finish//
117		-1. Commit the new plugin project ((% style="color: rgb(255,0,0);" %)TODO: describe steps to commit plugin projects(%%))
118		-1. (% style="font-size: 10.0pt;line-height: 13.0pt;" %)Open the file META-INF/MANIFEST.MF //→// //Dependencies// tab(%%)\\
119		-1*. Add the plugins de.cau.cs.kieler.core and de.cau.cs.kieler.kiml to the list of dependencies, then save the file.
120		-1. Create a //layout provider// class with the //New →// Class wizard\\
121		-1*. Package: de.cau.cs.rtprak.<login>.tutorial2
122		-1*. Name: <Login>LayoutProvider
123		-1*. Superclass: de.cau.cs.kieler.kiml.AbstractLayoutProvider
124	124	1. (((
125	125	Implement the layout provider class
126	126	1. (% style="font-size: 10.0pt;line-height: 13.0pt;" %)Add the following constant to the class:

Confluence.Code.ConfluencePageClass[0]

Id

...	...	@@ -1,1 +1,1 @@
1		-6160457
	1	+6160474

URL

...	...	@@ -1,1 +1,1 @@
1		-https://rtsys.informatik.uni-kiel.de/confluence//wiki/spaces/SS13LayPract/pages/6160457/KIML
	1	+https://rtsys.informatik.uni-kiel.de/confluence//wiki/spaces/SS13LayPract/pages/6160474/KIML