# Wiki source code of Minimal Example (Java Model)

Last modified by Niklas Rentz on 2023/09/12 13:04
Export
Office Formats
Export as PDF Export as ODT Export as RTF
Other Formats

Select the pages to export:

select all/ none

Legend:
  Created Page
  Modified Extension Page
  Clean Extension Page

Export as HTML

Show last authors

author | version | line-number | content
--- | --- | --- | ---
|  | 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 java 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) and install KIELER Pragmatics 0.10.0 ([[according to these instructions>>doc:KIELER.Discontinued Projects.KLighD old Minimal Example HowTo.WebHome]])
|  | 8 | [Note that there is an updated version with connections/transitions [[here>>doc:KIELER.Discontinued Projects.KLighD old Minimal Example HowTo.Minimal Example (Java Model).Updated Java Version Example with Connections.WebHome]]]
|  | 9 | 1. Download the following file, unzip it and import it as an existing project into your Eclipse workspace using {{code language="none"}}File->Import...->General->Existing projects into Workspace{{/code}} (see [[help>>url:http://help.eclipse.org/kepler/index.jsp?topic=%2Forg.eclipse.platform.doc.user%2Ftasks%2Ftasks-importproject.htm&cp=0_3_10_0||shape="rect"]] for details):
|  | 10 | [[attach:de.cau.cs.kieler.klighd.example.mydata.zip]]
|  | 11 | 1. You may now create a new run-configuration ([[according to these instructions>>doc:KIELER.Discontinued Projects.KLighD old Minimal Example HowTo.WebHome]]) and run the project as an Eclipse Application.
|  | 12 | 1. Once you click on the red-circled button, you should see the synthesized diagram as follows:
|  | 13 | [[image:attach:KIELER.Minimal Example HowTo.WebHome@klighd-minimal-example.png]]
|  | 14 |
|  | 15 |
|  | 16 |
|  | 17 | == The Details ==
|  | 18 |
|  | 19 | Mainly there are three classes involved (found in the **src** folder of the imported project in your Eclipse workspace):
|  | 20 |
|  | 21 | 1. **MyData.java** : It contains a trivial hierarchical data model, in reality you can use your own data structures or models instead.
|  | 22 | 1. **MyDataDiagrammSynthesisHandler.java** : This is an Eclipse command handler implementation for triggering the diagram synthesis with a button, in reality you can use your own code in order to synthesize or update your data/model visualization.
|  | 23 | 1. **MyDataDiagramSynthesis.xtend** : This is 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.
|  | 24 |
|  | 25 | == The Files ==
|  | 26 |
|  | 27 | {{code title="MyData.java" language="java"}}
|  | 28 | public class MyData {
|  | 29 |
|  | 30 | public String name;
|  | 31 | public List<MyData> subData = new LinkedList<MyData>();
|  | 32 |
|  | 33 | public static MyData getTestData() {
|  | 34 | MyData d1 = new MyData();
|  | 35 | d1.name = "all data";
|  | 36 | MyData d2 = new MyData();
|  | 37 | d2.name = "outer data";
|  | 38 | MyData d3 = new MyData();
|  | 39 | d3.name = "inner 1";
|  | 40 | MyData d4 = new MyData();
|  | 41 | d4.name = "inner 2";
|  | 42 | MyData d5 = new MyData();
|  | 43 | d5.name = "inner 5";
|  | 44 | MyData d6 = new MyData();
|  | 45 | d6.name = "most inner 6";
|  | 46 | d1.subData.add(d2);
|  | 47 | d2.subData.add(d3);
|  | 48 | d2.subData.add(d4);
|  | 49 | d2.subData.add(d5);
|  | 50 | d4.subData.add(d6);
|  | 51 | return d1;
|  | 52 | }
|  | 53 |
|  | 54 | }
|  | 55 | {{/code}}
|  | 56 |
|  | 57 | {{code title="MyDataDiagrammSynthesisHandler.java" language="java"}}
|  | 58 | public class MyDataDiagrammSynthesisHandler extends
|  | 59 | WorkbenchWindowHandlerDelegate { //IWorkbenchWindowActionDelegate {
|  | 60 | @Override
|  | 61 | public Object execute(ExecutionEvent event) throws ExecutionException {
|  | 62 | // Get some static dummy test data
|  | 63 | MyData data = MyData.getTestData();
|  | 64 | // Prepare the diagram synthesis: Create a new klighdUpdateDiagramEffect
|  | 65 | KlighdUpdateDiagramEffect klighdEffect = new KlighdUpdateDiagramEffect(
|  | 66 | "de.cau.cs.kieler.klighd.example.mydata.MyDataDiagramSynthesis",
|  | 67 | "KLighD MyData Diagram", data);
|  | 68 | // FIXME: Note that the incremental update currently is under re-development
|  | 69 | // for Eclipse Kepler after large API changes to EMF Compare had been made.
|  | 70 | // At this time we cannot use the incremental update strategy (commented out).
|  | 71 | // As soon as it is fixed, uncomment the line below and delete the
|  | 72 | // SimpleUpdateStrategy line:
|  | 73 |
|  | 74 | // klighdEffect.setProperty(LightDiagramServices.REQUESTED_UPDATE_STRATEGY,
|  | 75 | // UpdateStrategy.ID);
|  | 76 | klighdEffect.setProperty(
|  | 77 | LightDiagramServices.REQUESTED_UPDATE_STRATEGY,
|  | 78 | SimpleUpdateStrategy.ID);
|  | 79 | // Do the diagram synthesis
|  | 80 | klighdEffect.execute();
|  | 81 | return null;
|  | 82 | }
|  | 83 | }
|  | 84 | {{/code}}
|  | 85 |
|  | 86 | {{code title="MyDataDiagramSynthesis.xtend"}}
|  | 87 | class MyDataDiagramSynthesis extends AbstractDiagramSynthesis<MyData> {
|  | 88 | @Inject extension KNodeExtensions
|  | 89 | @Inject extension KEdgeExtensions
|  | 90 | @Inject extension KPortExtensions
|  | 91 | @Inject extension KLabelExtensions
|  | 92 | @Inject extension KRenderingExtensions
|  | 93 | @Inject extension KContainerRenderingExtensions
|  | 94 | @Inject extension KPolylineExtensions
|  | 95 | @Inject extension KColorExtensions
|  | 96 | // Some self-defined colors
|  | 97 | private static val KColor BLUE1 = RENDERING_FACTORY.createKColor() =>
|  | 98 | [it.red = 248; it.green = 249; it.blue = 253];
|  | 99 | private static val KColor BLUE2 = RENDERING_FACTORY.createKColor() =>
|  | 100 | [it.red = 205; it.green = 220; it.blue = 243];
|  | 101 | // Additional transformation option to hide or show a shadow
|  | 102 | private static val SynthesisOption SHOW_SHADOW = SynthesisOption::createCheckOption("Shadow", true);
|  | 103 | // Add all transformation options (comma separated)
|  | 104 | override getDisplayedSynthesisOptions() {
|  | 105 | return ImmutableList::of(
|  | 106 | SHOW_SHADOW
|  | 107 | );
|  | 108 | }
|  | 109 | override KNode transform(MyData data) {
|  | 110 | val root = data.createNode()
|  | 111 | root.putToLookUpWith(data) => [
|  | 112 | // Optional Layout parameters can be set
|  | 113 | //it.addLayoutParam(LayoutOptions::ALGORITHM, "de.cau.cs.kieler.kiml.ogdf.planarization");
|  | 114 | //it.addLayoutParam(LayoutOptions::SPACING, 75f);
|  | 115 | //it.addLayoutParam(LayoutOptions::DIRECTION, Direction::UP);
|  | 116 | // A rounded rectangle is created for every MyData instance
|  | 117 | it.addRoundedRectangle(5, 5) => [
|  | 118 | // Set linewith, foreground color, and a fading background color
|  | 119 | it.lineWidth = 1;
|  | 120 | it.setForeground("darkGray".color)
|  | 121 | // We need a fresh copy of each color item, because it is contained by its element
|  | 122 | it.setBackgroundGradient(BLUE1.copy, BLUE2.copy, 90)
|  | 123 | // Here we see a how to use a boolean transformation/diagram option
|  | 124 | if (SHOW_SHADOW.booleanValue) {
|  | 125 | it.shadow = "black".color;
|  | 126 | }
|  | 127 | // Set a text
|  | 128 | it.addText(" " + data.name + " ") => [
|  | 129 | it.setFontSize(9)
|  | 130 | it.setForeground("black".color)
|  | 131 | ]
|  | 132 | // If this is a hierarchical MyData instance, then create horizontal splitter,
|  | 133 | // a child area, and add its children
|  | 134 | if (data.subData.length > 0) {
|  | 135 | it.setGridPlacement(1);
|  | 136 | it.addHorizontalSeperatorLine(1, 2).setForeground("darkGray".color)
|  | 137 | it.addChildArea().setGridPlacementData() => [
|  | 138 | from(LEFT, 3, 0, TOP, 3, 0).to(RIGHT, 3, 0, BOTTOM, 3, 0)
|  | 139 | minCellHeight = 5;
|  | 140 | minCellWidth = 5;
|  | 141 | ];
|  | 142 | for (subData : data.subData) {
|  | 143 | // To the recursive call to transform for all children
|  | 144 | val child = subData.transform
|  | 145 | // It is important to add all children to the root!
|  | 146 | root.children.add(child)
|  | 147 | }
|  | 148 | }
|  | 149 | ]
|  | 150 | ]
|  | 151 | return root;
|  | 152 | }
|  | 153 | }
|  | 154 | {{/code}}
|  | 155 |
|  | 156 |
|  | 157 |
|  | 158 |
|  | 159 |
|  | 160 | Eclipse

# Quick Links

KIELER on GitHub
RTSYS Homepage

XWiki 14.4.7