Wiki source code of Minimal Example (Xtext Model)
Last modified by Niklas Rentz on 2023/09/12 13:04
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 Xtext model from a textual editor 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 | 1. Download the following files, unzip them and import them as existing projects 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): | ||
| 9 | [[attach:de.cau.cs.kieler.klighd.example.myxtextdata.zip]] | ||
| 10 | [[attach:de.cau.cs.kieler.klighd.example.myxtextdata.ui.zip]] | ||
| 11 | [[attach:de.cau.cs.kieler.klighd.example.myxtextdata.klighd.zip]] | ||
| 12 | 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 everything as an Eclipse Application. | ||
| 13 | 1. Create a new project ({{code language="none"}}File->New project...->General->Project{{/code}} or right-click in the Project Explorer and choose {{code language="none"}}New->Project...->General->Project{{/code}}) | ||
| 14 | 1. Once you create a new text file with the ending "*.myxtextdata" and enter some (% class="confluence-link" %)content[[doc:||anchor="example_content"]](%%) (Ctrl+Space gives you content assist), you should see the synthesized diagram as follows: | ||
| 15 | [[image:attach:myxtextdata.png]] | ||
| 16 | |||
| 17 | |||
| 18 | |||
| 19 | == The Details == | ||
| 20 | |||
| 21 | The following files are involved (found in the **src** folder of the imported project in your Eclipse workspace): | ||
| 22 | |||
| 23 | 1. **MyXtextData.xtext **(de.cau.cs.kieler.klighd.example.myxtextdata) : It contains a very simple Xtext grammar for the textual language | ||
| 24 | 1. **ShowDiagramCombination.java** (de.cau.cs.kieler.klighd.example.myxtextdata.klighd) : This is a KIELER combination for triggering the automatic diagram synthesis when editing the model in the textual editor. | ||
| 25 | 1. **MyXtextDataDiagramSynthesis.xtend** (de.cau.cs.kieler.klighd.example.myxtextdata.klighd) : 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. | ||
| 26 | |||
| 27 | == The Files == | ||
| 28 | |||
| 29 | {{code title="MyXtextData.xtext" language="java"}} | ||
| 30 | grammar de.cau.cs.kieler.klighd.example.myxtextdata.MyXtextData with org.eclipse.xtext.common.Terminals | ||
| 31 | |||
| 32 | generate myXtextData "http://www.cau.de/cs/kieler/klighd/example/myxtextdata/MyXtextData" | ||
| 33 | |||
| 34 | Model: | ||
| 35 | name=ID (':' '{' | ||
| 36 | subData+=Model* | ||
| 37 | '}')?; | ||
| 38 | |||
| 39 | {{/code}} | ||
| 40 | |||
| 41 | {{code title="ShowDiagramCombination.java" language="java"}} | ||
| 42 | package de.cau.cs.kieler.klighd.example.myxtextdata.klighd; | ||
| 43 | import de.cau.cs.kieler.core.kivi.AbstractCombination; | ||
| 44 | import de.cau.cs.kieler.core.kivi.triggers.PartTrigger; | ||
| 45 | import de.cau.cs.kieler.core.kivi.triggers.SelectionTrigger; | ||
| 46 | import de.cau.cs.kieler.klighd.xtext.UpdateXtextModelKLighDCombination; | ||
| 47 | //import de.cau.cs.kieler.klighd.incremental.UpdateStrategy | ||
| 48 | public class ShowDiagramCombination extends UpdateXtextModelKLighDCombination { | ||
| 49 | /** | ||
| 50 | * The 'execute()' method, see doc of {@link AbstractCombination}. | ||
| 51 | */ | ||
| 52 | public void execute(PartTrigger.PartState es, SelectionTrigger.SelectionState selectionState) { | ||
| 53 | |||
| 54 | // do not react on partStates as well as on selectionStates in case | ||
| 55 | // a view part has been deactivated recently, as an potentially out-dated selection | ||
| 56 | // is currently about to be processed | ||
| 57 | // most certainly a "part activated" event will follow and subsequently a further | ||
| 58 | // selection event if the selection of the newly active part is changed, too! | ||
| 59 | if (this.latestState() == es || es.getEventType() == PartTrigger.EventType.VIEW_DEACTIVATED) { | ||
| 60 | return; | ||
| 61 | } | ||
| 62 | |||
| 63 | } | ||
| 64 | |||
| 65 | } | ||
| 66 | {{/code}} | ||
| 67 | |||
| 68 | {{code title="MyXtextDataDiagramSynthesis.xtend"}} | ||
| 69 | class MyXtextDataDiagramSynthesis extends AbstractDiagramSynthesis<Model> { | ||
| 70 | @Inject extension KNodeExtensions | ||
| 71 | @Inject extension KEdgeExtensions | ||
| 72 | @Inject extension KPortExtensions | ||
| 73 | @Inject extension KLabelExtensions | ||
| 74 | @Inject extension KRenderingExtensions | ||
| 75 | @Inject extension KContainerRenderingExtensions | ||
| 76 | @Inject extension KPolylineExtensions | ||
| 77 | @Inject extension KColorExtensions | ||
| 78 | // Some self-defined colors | ||
| 79 | private static val KColor BLUE1 = RENDERING_FACTORY.createKColor() => | ||
| 80 | [it.red = 248; it.green = 249; it.blue = 253]; | ||
| 81 | private static val KColor BLUE2 = RENDERING_FACTORY.createKColor() => | ||
| 82 | [it.red = 205; it.green = 220; it.blue = 243]; | ||
| 83 | // Additional transformation option to hide or show a shadow | ||
| 84 | private static val SynthesisOption SHOW_SHADOW = SynthesisOption::createCheckOption("Shadow", true); | ||
| 85 | // Add all transformation options (comma separated) | ||
| 86 | override getDisplayedSynthesisOptions() { | ||
| 87 | return ImmutableList::of( | ||
| 88 | SHOW_SHADOW | ||
| 89 | ); | ||
| 90 | } | ||
| 91 | override KNode transform(Model model) { | ||
| 92 | val root = model.createNode() | ||
| 93 | root.putToLookUpWith(model) => [ | ||
| 94 | // Optional Layout parameters can be set | ||
| 95 | //it.addLayoutParam(LayoutOptions::ALGORITHM, "de.cau.cs.kieler.kiml.ogdf.planarization"); | ||
| 96 | //it.addLayoutParam(LayoutOptions::SPACING, 75f); | ||
| 97 | //it.addLayoutParam(LayoutOptions::DIRECTION, Direction::UP); | ||
| 98 | // A rounded rectangle is created for every MyData instance | ||
| 99 | it.addRoundedRectangle(5, 5) => [ | ||
| 100 | // Set linewith, foreground color, and a fading background color | ||
| 101 | it.lineWidth = 1; | ||
| 102 | it.setForeground("darkGray".color) | ||
| 103 | // We need a fresh copy of each color item, because it is contained by its element | ||
| 104 | it.setBackgroundGradient(BLUE1.copy, BLUE2.copy, 90) | ||
| 105 | // Here we see a how to use a boolean transformation/diagram option | ||
| 106 | if (SHOW_SHADOW.booleanValue) { | ||
| 107 | it.shadow = "black".color; | ||
| 108 | } | ||
| 109 | // Set a text | ||
| 110 | it.addText(" " + model.name + " ") => [ | ||
| 111 | it.setFontSize(9) | ||
| 112 | it.setForeground("black".color) | ||
| 113 | ] | ||
| 114 | // If this is a hierarchical MyData instance, then create horizontal splitter, | ||
| 115 | // a child area, and add its children | ||
| 116 | if (model.subData.length > 0) { | ||
| 117 | it.setGridPlacement(1); | ||
| 118 | it.addHorizontalSeperatorLine(1, 2).setForeground("darkGray".color) | ||
| 119 | it.addChildArea().setGridPlacementData() => [ | ||
| 120 | from(LEFT, 3, 0, TOP, 3, 0).to(RIGHT, 3, 0, BOTTOM, 3, 0) | ||
| 121 | minCellHeight = 5; | ||
| 122 | minCellWidth = 5; | ||
| 123 | ]; | ||
| 124 | for (subData : model.subData) { | ||
| 125 | // To the recursive call to transform for all children | ||
| 126 | val child = subData.transform | ||
| 127 | // It is important to add all children to the root! | ||
| 128 | root.children.add(child) | ||
| 129 | } | ||
| 130 | } | ||
| 131 | ] | ||
| 132 | ] | ||
| 133 | return root; | ||
| 134 | } | ||
| 135 | } | ||
| 136 | {{/code}} | ||
| 137 | |||
| 138 | = = | ||
| 139 | |||
| 140 | {{id name="example_content"/}}Example contentThe following code can be used as example .myxtextdata file: | ||
| 141 | |||
| 142 | {{code title="test.myxtextdata"}} | ||
| 143 | diagram : { | ||
| 144 | outer_data : { | ||
| 145 | inner_1 | ||
| 146 | inner_2 : {most_inner_6} | ||
| 147 | inner_5 | ||
| 148 | } | ||
| 149 | } | ||
| 150 | {{/code}} |