Minimal Example HowTo

1

These instructions should guide you if you'd like to try out using KLighD for visualizing your own models or data structures. A minimal example is shown where a trivial data structure is visualized with KLighD.

2

3

== Step-By-Step Guide ==

4

5

In order to get this example working, please follow the instructions below:

6

7

1. Download Eclipse Kepler (Modeling Edition):

8

Windows x64: [[http:~~/~~/www.eclipse.org/downloads/download.php?file=/technology/epp/downloads/release/kepler/SR1/eclipse-modeling-kepler-SR1-win32-x86_64.zip&mirror_id=546>>url:http://www.eclipse.org/downloads/download.php?file=/technology/epp/downloads/release/kepler/SR1/eclipse-modeling-kepler-SR1-win32-x86_64.zip&mirror_id=546||shape="rect"]]

9

Mac x64: [[http:~~/~~/www.eclipse.org/downloads/download.php?file=/technology/epp/downloads/release/kepler/SR1/eclipse-modeling-kepler-SR1-macosx-cocoa-x86_64.tar.gz>>url:http://www.eclipse.org/downloads/download.php?file=/technology/epp/downloads/release/kepler/SR1/eclipse-modeling-kepler-SR1-macosx-cocoa-x86_64.tar.gz||shape="rect"]]

10

Other: [[http:~~/~~/www.eclipse.org/downloads/packages/eclipse-modeling-tools/keplersr1>>url:http://www.eclipse.org/downloads/packages/eclipse-modeling-tools/keplersr1||shape="rect"]]

11

1. Add the KIELER Pragmatics Nightly update site to your Eclipse (Help -> Install New Software ... -> Add)[[:

12

>>url:http://rtsys.informatik.uni-kiel.de/~~kieler/updatesite/||shape="rect"]][[http:~~/~~/rtsys.informatik.uni-kiel.de/~~~~kieler/updatesite/nightly/pragmatics/>>url:http://rtsys.informatik.uni-kiel.de/~~kieler/updatesite/nightly/pragmatics/||shape="rect"]]

13

1. Select

14

[x] Layout,

15

[x] Lightweight Diagrams, and

16

[x] Sources

17

to be installed into your Eclipse. You may need to re-start Eclipse after finishing the installation process.

18

1. Download the following file, unzip it and import it as an existing project into your Eclipse workspace:

19

[[attach:de.cau.cs.kieler.klighd.example.mydata.zip]]

20

1. You may now create a new run configuration and run everything as an Eclipse Application.

21

1. Once you click on the red-circled button, you should see the synthesized diagram as follows:

22

[[image:attach:klighd-minimal-example.png]]

== The Details ==

Mainly there a three classes involved:

29

30

1. **MyData.java** : It contains a trivial hierarchical data model, in reality you can use your own data structures or models instead.

31

1. **MyDataDiagrammSynthesisAction.java** : This is an Eclipse Action implementation for triggering the diagram synthesis, in reality you can use your own code in order to synthesize or update your data/model visualization.

32

1. **MyDataDiagramSynthesis.xtend** : This ist the most essential part, it is the transformation from your data/model to the view model (the diagram). You can use this as a bare bone example and extend it as you like. Note that it already uses several KLighD extension libraries that are included. These libraries can be inspected also if you are searching for further features that you want to use, they contain the most common features already.

== The Files ==

public class MyData {

38

39

public String name;

40

public List<MyData> subData = new LinkedList<MyData>();

41

42

public static MyData getTestData() {

43

MyData d1 = new MyData();

44

d1.name = "all data";

45

MyData d2 = new MyData();

46

d2.name = "outer data";

47

MyData d3 = new MyData();

48

d3.name = "inner 1";

49

MyData d4 = new MyData();

50

d4.name = "inner 2";

51

MyData d5 = new MyData();

52

d5.name = "inner 5";

53

MyData d6 = new MyData();

54

d6.name = "most inner 6";

d1.subData.add(d2);

d2.subData.add(d3);

d2.subData.add(d4);

d2.subData.add(d5);

d4.subData.add(d6);

return d1;

}

}

{{code title="MyDataDiagrammSynthesisAction.java" language="java"}}

67

public class MyDataDiagrammSynthesisAction implements

68

IWorkbenchWindowActionDelegate {

69

public MyDataDiagrammSynthesisAction() {

70

}

71

public void run(IAction action) {

72

73

// Get some static dummy test data

74

MyData data = MyData.getTestData();

75

// Prepare the diagram synthesis: Create a new klighdUpdateDiagramEffect

76

KlighdUpdateDiagramEffect klighdEffect = new KlighdUpdateDiagramEffect(

77

"de.cau.cs.kieler.klighd.example.mydata.MyDataDiagramSynthesis",

78

"KLighD MyData Diagram", data);

79

// FIXME: Note that the incremental update currently is under re-development

80

// for Eclipse Kepler after large API changes to EMF Compare had been made.

81

// At this time we cannot use the incremental update strategy (commented out).

82

// As soon as it is fixed, uncomment the line below and delete the

83

// SimpleUpdateStrategy line:

84

85

// klighdEffect.setProperty(LightDiagramServices.REQUESTED_UPDATE_STRATEGY,

86

// UpdateStrategy.ID);

87

klighdEffect.setProperty(

88

LightDiagramServices.REQUESTED_UPDATE_STRATEGY,

89

SimpleUpdateStrategy.ID);

90

// Do the diagram synthesis

91

klighdEffect.execute();

92

}

93

public void selectionChanged(IAction action, ISelection selection) {

94

}

95

public void dispose() {

96

}

97

public void init(IWorkbenchWindow window) {

}

}

class MyDataDiagramSynthesis extends AbstractDiagramSynthesis<MyData> {

104

@Inject

105

extension KNodeExtensions

106

@Inject

107

extension KEdgeExtensions

108

@Inject

109

extension KPortExtensions

110

@Inject

111

extension KLabelExtensions

112

@Inject

113

extension KRenderingExtensions

114

@Inject

115

extension KContainerRenderingExtensions

116

@Inject

117

extension KPolylineExtensions

118

@Inject

119

extension KColorExtensions

120

// Some self-defined colors

121

private static val KColor BLUE1 = RENDERING_FACTORY.createKColor() =>

122

[it.red = 248; it.green = 249; it.blue = 253];

123

private static val KColor BLUE2 = RENDERING_FACTORY.createKColor() =>

124

[it.red = 205; it.green = 220; it.blue = 243];

125

// Additional transformation option to hide or show a shadow

126

private static val TransformationOption SHOW_SHADOW = TransformationOption::createCheckOption("Shadow", true);

127

// Add all transformation options (comma separated)

128

override public getTransformationOptions() {

129

return ImmutableSet::of(

SHOW_SHADOW

);

}

override KNode transform(MyData data) {

134

val root = data.createNode()

135

root.putToLookUpWith(data) => [

136

// Optional Layout parameters can be set

137

//it.addLayoutParam(LayoutOptions::ALGORITHM, "de.cau.cs.kieler.kiml.ogdf.planarization");

138

//it.addLayoutParam(LayoutOptions::SPACING, 75f);

139

//it.addLayoutParam(LayoutOptions::DIRECTION, Direction::UP);

140

// A rounded rectangle is created for every MyData instance

141

it.addRoundedRectangle(5, 5) => [

142

// Set linewith, foreground color, and a fading background color

143

it.lineWidth = 1;

144

it.setForeground("darkGray".color)

145

// We need a fresh copy of each color item, because it is contained by its element

146

it.setBackgroundGradient(BLUE1.copy, BLUE2.copy, 90)

147

// Here we see a how to use a boolean transformation/diagram option

148

if (SHOW_SHADOW.optionBooleanValue) {

149

it.shadow = "black".color;

150

}

151

// Set a text

152

it.addText(" " + data.name + " ") => [

153

it.setFontSize(9)

154

it.setForeground("black".color)

155

]

156

// If this is a hierarchical MyData instance, then create horizontal splitter,

157

// a child area, and add its children

158

if (data.subData.length > 0) {

159

it.setGridPlacement(1);

160

it.addHorizontalSeperatorLine(1, 2).setForeground("darkGray".color)

161

it.addChildArea().setGridPlacementData() => [

162

from(LEFT, 3, 0, TOP, 3, 0).to(RIGHT, 3, 0, BOTTOM, 3, 0)

minCellHeight = 5;

minCellWidth = 5;

];

for (subData : data.subData) {

167

// To the recursive call to transform for all children

168

val child = subData.transform

169

// It is important to add all children to the root!

170

root.children.add(child)

}

}

]

]

return root;

}

}

Eclipse

Wiki source code of Minimal Example HowTo

Navigation

Quick Links