<br style="clear:both;height:1em;"> | |
<div id="leftcol"> | |
<div class="nav-logo"> | |
<a href="index.php"><img src="logo.png" style="margin-left:10px; width:155px"/></a> | |
</div> | |
<ul id="leftnav"> | |
<li class="partentry" > | |
Documentation | |
</li> | |
<li class="separator"><div class="separator"> | |
<img src="triangle.gif" style="height:12px; margin-right: 2px; display:none" /><img src="triangle-90.gif" style="display:none; margin-right: 2px" height="12px" /> | |
<a href="01-Introduction.php">Introduction</a></div> | |
</li> | |
<li class="separator"><div class="separator"> | |
<img src="triangle.gif" style="height:12px; margin-right: 2px; " /><img src="triangle-90.gif" style="display:none; margin-right: 2px" height="12px" /> | |
<a href="02-GettingStarted.php">Getting Started</a></div> | |
<ul style="display: none;" id="subToc_02-GettingStarted.html"> | |
<li id="02-GettingStarted.html#Installation.html" ><a href="02-GettingStarted.php#Installation.php" >Installation</a></li> | |
<li id="02-GettingStarted.html#FirstExample.html" ><a href="02-GettingStarted.php#FirstExample.php" >First Example</a></li> | |
<li id="02-GettingStarted.html#RCPMail.html" ><a href="02-GettingStarted.php#RCPMail.php" >RCP Mail Example</a></li> | |
</ul> | |
</li> | |
<li class="separator"><div class="separator"> | |
<img src="triangle.gif" style="height:12px; margin-right: 2px; " /><img src="triangle-90.gif" style="display:none; margin-right: 2px" height="12px" /> | |
<a href="03-Components.php">Components</a></div> | |
<ul style="display: none;" id="subToc_03-Components.html"> | |
<li id="03-Components.html#FormComponent.html" ><a href="03-Components.php#FormComponent.php" >Form Component</a></li> | |
<li id="03-Components.html#TreeComponent.html" ><a href="03-Components.php#TreeComponent.php" >Tree Component</a></li> | |
<li id="03-Components.html#TreeFormComponent.html" ><a href="03-Components.php#TreeFormComponent.php" >Tree Form Component</a></li> | |
<li id="03-Components.html#TableComponent.html" ><a href="03-Components.php#TableComponent.php" >Table Component</a></li> | |
</ul> | |
</li> | |
<li class="separator"><div class="separator"> | |
<img src="triangle.gif" style="height:12px; margin-right: 2px; " /><img src="triangle-90.gif" style="display:none; margin-right: 2px" height="12px" /> | |
<a href="04-Customization.php">Customization</a></div> | |
<ul style="display: none;" id="subToc_04-Customization.html"> | |
<li id="04-Customization.html#ResourceManagers.html" ><a href="04-Customization.php#ResourceManagers.php" >Managing Resources</a></li> | |
<li id="04-Customization.html#Providers.html" ><a href="04-Customization.php#Providers.php" >Providers</a></li> | |
<li id="04-Customization.html#SelectionAndMenu.html" ><a href="04-Customization.php#SelectionAndMenu.php" >Selection And Menu</a></li> | |
<li id="04-Customization.html#Builders.html" ><a href="04-Customization.php#Builders.php" >Builders</a></li> | |
<li id="04-Customization.html#Factories.html" ><a href="04-Customization.php#Factories.php" >Factories</a></li> | |
<li id="04-Customization.html#Viewers.html" ><a href="04-Customization.php#Viewers.php" >Viewers</a></li> | |
</ul> | |
</li> | |
<li class="separator"><div class="separator"> | |
<img src="triangle.gif" style="height:12px; margin-right: 2px; " /><img src="triangle-90.gif" style="display:none; margin-right: 2px" height="12px" /> | |
<a href="05-DSL.php">EMF Parsley DSL</a></div> | |
<ul style="display: none;" id="subToc_05-DSL.html"> | |
<li id="05-DSL.html#xbase.html" ><a href="05-DSL.php#xbase.php" >Xbase features</a></li> | |
</ul> | |
</li> | |
<li class="separator"><div class="separator"> | |
<img src="triangle.gif" style="height:12px; margin-right: 2px; display:none" /><img src="triangle-90.gif" style="display:none; margin-right: 2px" height="12px" /> | |
<a href="06-AdvancedComponents.php">Advanced Components</a></div> | |
</li> | |
<li class="separator"><div class="separator"> | |
<img src="triangle.gif" style="height:12px; margin-right: 2px; " /><img src="triangle-90.gif" style="display:none; margin-right: 2px" height="12px" /> | |
<a href="07-Eclipse4.php">Eclipse 4</a></div> | |
<ul style="display: none;" id="subToc_07-Eclipse4.html"> | |
<li id="07-Eclipse4.html#GetFirstExample.html" ><a href="07-Eclipse4.php#GetFirstExample.php" >First Example Setup</a></li> | |
<li id="07-Eclipse4.html#PrepareForEclipse4Application.html" ><a href="07-Eclipse4.php#PrepareForEclipse4Application.php" >Preparing for a pure Eclipse 4 Application</a></li> | |
<li id="07-Eclipse4.html#CreateEclipse4Application.html" ><a href="07-Eclipse4.php#CreateEclipse4Application.php" >Create an Eclipse 4 Application</a></li> | |
<li id="07-Eclipse4.html#Eclipse4ApplicationAndEMFParsley.html" ><a href="07-Eclipse4.php#Eclipse4ApplicationAndEMFParsley.php" >Using an EMF Parsley TreeComposite into an Eclipse 4 Part</a></li> | |
<li id="07-Eclipse4.html#Eclipse4Save.html" ><a href="07-Eclipse4.php#Eclipse4Save.php" >Adding the dirty state and Save command</a></li> | |
</ul> | |
</li> | |
<li class="partentry" > | |
Appendix | |
</li> | |
<li class="separator"><div class="separator"> | |
<img src="triangle.gif" style="height:12px; margin-right: 2px; display:none" /><img src="triangle-90.gif" style="display:none; margin-right: 2px" height="12px" /> | |
<a href="GettingSources.php">Getting Sources</a></div> | |
</li> | |
<li class="separator"><div class="separator"> | |
<img src="triangle.gif" style="height:12px; margin-right: 2px; display:none" /><img src="triangle-90.gif" style="display:none; margin-right: 2px" height="12px" /> | |
<a href="Downloads.php">EMF Parsley - Downloads</a></div> | |
</li> | |
</ul> | |
</div> | |
<div id="midcolumn"> | |
<a name="GettingStarted" ></a> | |
<h1>Getting Started</h1> | |
<div class="toc"> | |
<ul> | |
<li><a href="02-GettingStarted.php#Installation.php" >Installation</a></li> | |
<li><a href="02-GettingStarted.php#FirstExample.php" >First Example</a></li> | |
<li><a href="02-GettingStarted.php#RCPMail.php" >RCP Mail Example</a></li> | |
</ul> | |
</div> | |
<p> | |
To get started, you may download "Eclipse Modeling Tools" or "Eclipse IDE for Java and DSL Developers" from <a href="http://www.eclipse.org/downloads/" >Eclipse | |
Downloads</a>. | |
</p> | |
<p> | |
This will ensure you have EMF and related Tools installed and ready to go (you may as well use any other Eclipse package, provided that you have installed | |
also EMF and its tools). | |
</p> | |
<a name="Installation" ></a> | |
<span style="float:left; border-top: 1px dotted #d4d4dd; margin-left: 0; margin-top: 5px; | |
padding: 5px 0; | |
padding-top: 5px;"></span><a style="float: right" href="#">Top</a> | |
<br style="clear:both"></br> | |
<h1>Installation</h1> | |
<p> | |
Now select "Help" -> "Install New Software..." and in the "Work with:" field insert the EMF Parsley update | |
site <a href="http://download.eclipse.org/emf-parsley/updates" >http://download.eclipse.org/emf-parsley/updates</a> | |
and install all features. | |
Although sources are not strictly required, it might help when using EMF Parsley | |
to have a look at its sources. | |
</p> | |
<p> | |
<div class="image" > | |
<a class="gallery" rel="prettyPhoto[all]" title="" href="images/emf-parsley-update-site.png"> | |
<img src="images/emf-parsley-update-site.png" | |
width="600px" | |
/> | |
</a> | |
<div class="caption"> | |
</div> | |
</div> | |
</p> | |
<a name="FirstExample" ></a> | |
<span style="float:left; border-top: 1px dotted #d4d4dd; margin-left: 0; margin-top: 5px; | |
padding: 5px 0; | |
padding-top: 5px;"></span><a style="float: right" href="#">Top</a> | |
<br style="clear:both"></br> | |
<h1>First Example</h1> | |
<p> | |
The purpose of this first example is to make use of the classical EMF Library Model example and | |
create a view for editing such models using an EMF Parsley enabled plug-in. | |
</p> | |
<p> | |
So let's start by creating the model plug-in with | |
</p> | |
<p> | |
<ol> | |
<li>File -> New... -> Example...</li> | |
<li>from Category "Eclipse Modeling Framework", select "Extended Library Model Example"</li> | |
<li>press Next and Finish</li> | |
</ol> | |
</p> | |
<p> | |
You will end up with three plug-ins: | |
</p> | |
<p> | |
<ul> | |
<li>org.eclipse.emf.examples.library (the model plug-in)</li> | |
<li>org.eclipse.emf.examples.library.edit (the edit plug-in)</li> | |
<li>org.eclipse.emf.examples.library.editor (the editor plug-in)</li> | |
</ul> | |
</p> | |
<p> | |
Please consider that here we are starting from this well known EMF model taken out-of-the-box from Eclipse, | |
but you can start from your EMF model (in that case you may probably omit the ".edit" and ".editor" plugins, depending on your model). | |
</p> | |
<p> | |
Now you can create your first example with the appropriate wizard. | |
</p> | |
<p> | |
<ol> | |
<li>select "File" -> "New" -> "Project..."</li> | |
<li>from the "Emf Parsley" category select "Emf Parsley Dsl based Project"</li> | |
<li>click "Next"</li> | |
<li>give a name to the project (e.g. "org.eclipse.emf.parsley.examples.firstexample")</li> | |
<li>click "Finish"</li> | |
</ol> | |
The generated project has some classes and a <em>module.parlsey</em> file, which opens automatically. | |
Just type the following content into the {} block (note that context assist is available) | |
</p> | |
<p> | |
<div class="literallayout"> | |
<div class="incode"> | |
<p class="code"> | |
<span class="keyword">parts</span> {<br/> | |
<span class="keyword">viewpart</span> org.eclipse.emf.parsley.examples.firstexample.view.library.treeform {<br/> | |
<span class="keyword">viewname</span> <span class="string">"My Library Tree Form"</span><br/> | |
<span class="keyword">viewclass</span> <br/> | |
}<br/> | |
} | |
</p> | |
</div> | |
</div> | |
</p> | |
<p> | |
Here above we have just declared a view part with | |
<ol> | |
<li>id <em>"org.eclipse.emf.parsley.examples.firstexample.view.library.treeform"</em></li> | |
<li>name <em>"Library Tree Form"</em></li> | |
<li>class: not yet set, we are going to create | |
<em>"org.eclipse.emf.parsley.examples.firstexample.views.LibraryTreeFormView"</em></li> | |
</ol> | |
</p> | |
<p> | |
So there is still an error, in fact we need to create the declared class. | |
<em>Suggestion:</em> Just copy the above qualified class name (<em>"org.eclipse.emf.parsley.examples.firstexample.views.LibraryTreeFormView"</em>), | |
select the project, right-click and select File -> New -> Class. Now paste the clipboard content into <em>"Name:"</em> field: the | |
package and class name will be automatically splitted into right fields. Then click <em>"Finish"</em>. | |
</p> | |
<p> | |
Now modify the view class code with this content: | |
</p> | |
<p> | |
<div class="literallayout"> | |
<div class="incode"> | |
<p class="code"> | |
<span class="keyword">import</span> org.eclipse.emf.parsley.views.AbstractSaveableTreeFormView;<br/> | |
<span class="keyword">import</span> org.eclipse.emf.common.util.URI;<br/> | |
<br/> | |
<span class="keyword">public</span> <span class="keyword">class</span> LibraryTreeFormView <span class="keyword">extends</span> AbstractSaveableTreeFormView {<br/> | |
<br/> | |
<span class="keyword">protected</span> URI createResourceURI() {<br/> | |
<span class="keyword">return</span> URI.createFileURI( System.getProperty(<span class="string">"user.home"</span>) + <span class="string">"/MyLibrary.library"</span> );<br/> | |
}<br/> | |
<br/> | |
} | |
</p> | |
</div> | |
</div> | |
</p> | |
<p> | |
Now get back to <em>module.parlsey</em> file, go just after <em>"viewclass"</em> keyword, type <em>"LibraryTreeFormView"</em> | |
and <em>Ctrl-Space</em>: the content assist will set automatically the correct qualified name | |
</p> | |
<p> | |
<div class="literallayout"> | |
<div class="incode"> | |
<p class="code"> | |
<span class="keyword">viewclass</span> org.eclipse.emf.parsley.examples.firstexample.views.LibraryTreeFormView | |
</p> | |
</div> | |
</div> | |
</p> | |
<p> | |
when you save the above file you will notice that a new file (<em>"plugin.xml_emfparsley_gen"</em>) | |
is generated into the root folder of your project. Just copy this file into <em>"plugin.xml"</em>. | |
</p> | |
<p> | |
Let's focus briefly on the above <em>createResourceURI()</em> method: our goal is allowing to manage | |
a library model instance which persists on a EMF Resource. | |
In this example we choose to use the EMF default persistence (XMI), but you can provide any URI | |
(e.g. using Teneo, CDO or any other EMF Resource Persistence implementation) | |
In particular here we choose to persist the Resource in a XMI file named <em>"MyLibrary.library"</em> into the user home | |
folder (you might want to change it with any other path). | |
</p> | |
<p> | |
We need a <em>Dependency</em> from the model plug-in: so open <em>MANIFEST.MF</em> file, go to <em>Dependencies</em> | |
tab, press <em>"Add..."</em> button in <em>"Required Plug-ins"</em> section and insert <em>"org.eclipse.emf.examples.library"</em> | |
among dependencies. | |
</p> | |
<p> | |
Before executing this code we need to do some little more work in order to initialize the Resource. | |
</p> | |
<p> | |
An easy way to overcome this issue can be the following: | |
</p> | |
<p> | |
<ol> | |
<li>open the class *GuiceModule (FirstexampleGuiceModule in this example) that the wizard created for you. | |
Note that this is a key class for all customizations; it allows to override several methods in order to provide custom behaviors | |
and implementations.</li> | |
<li>override method <em>bindEmptyResourceInitializer()</em> providing a class for Resource initialization | |
<div class="literallayout"> | |
<div class="incode"> | |
<p class="code"> | |
<span class="keyword">public</span> Class<? <span class="keyword">extends</span> EmptyResourceInitializer> bindEmptyResourceInitializer() {<br/> | |
<span class="keyword">return</span> LibraryEmptyResourceInitializer.<span class="keyword">class</span>;<br/> | |
} | |
</p> | |
</div> | |
</div> | |
</li> | |
<li>create a new class <em>LibraryEmptyResourceInitializer</em> extending from <em>EmptyResourceInitializer</em> for Resource initialization | |
<div class="literallayout"> | |
<div class="incode"> | |
<p class="code"> | |
<span class="keyword">import</span> org.eclipse.emf.parsley.resource.EmptyResourceInitializer;<br/> | |
<span class="keyword">import</span> org.eclipse.emf.ecore.resource.Resource;<br/> | |
<span class="keyword">import</span> org.eclipse.emf.examples.extlibrary.EXTLibraryFactory;<br/> | |
<span class="keyword">import</span> org.eclipse.emf.examples.extlibrary.Library;<br/> | |
<br/> | |
<span class="keyword">public</span> <span class="keyword">class</span> LibraryEmptyResourceInitializer <span class="keyword">extends</span> EmptyResourceInitializer { <br/> | |
<br/> | |
<span class="keyword">public</span> <span class="keyword">void</span> initialize(Resource resource) { <br/> | |
<span class="keyword">super</span>.initialize(resource); <br/> | |
Library library = EXTLibraryFactory.eINSTANCE.createLibrary(); <br/> | |
resource.getContents().add(library); <br/> | |
} <br/> | |
<br/> | |
} | |
</p> | |
</div> | |
</div> | |
The method <em>initialize()</em> will be executed only when the Resource is empty | |
(i.e., it has no contents). | |
</li> | |
</ol> | |
</p> | |
<p> | |
now get back to the <em>MANIFEST.MF</em> and run the example | |
</p> | |
<p> | |
<div class="image" > | |
<a class="gallery" rel="prettyPhoto[all]" title="" href="images/first-example-launch.png"> | |
<img src="images/first-example-launch.png" | |
width="600px" | |
/> | |
</a> | |
<div class="caption"> | |
</div> | |
</div> | |
</p> | |
<p> | |
As an Eclipse RCP developer you know, of course, that this will start another Eclipse instance (unless | |
you add an Application plug-in to the launch or define an Application in the current plug-in). | |
</p> | |
<p> | |
In this second Eclipse instance you can show the View in this way: | |
<ol> | |
<li><em>Window -> Show View -> Other...</em></li> | |
<li>from Category "Other", select "My Library Tree Form"</li> | |
<li>press <em>OK</em></li> | |
</ol> | |
</p> | |
<p> | |
<div class="image" > | |
<a class="gallery" rel="prettyPhoto[all]" title="" href="images/first-example-run.png"> | |
<img src="images/first-example-run.png" | |
width="600px" | |
/> | |
</a> | |
<div class="caption"> | |
</div> | |
</div> | |
</p> | |
<p> | |
With this simple view you can start editing the model instance. For example you can set the <em>"name"</em> | |
field; as soon as you start typing characters into this field you will notice that: | |
<ol> | |
<li>the View turns to a <em>"dirty"</em> state (an asterisk symbol appears on the view tab)</li> | |
<li>the <em>"Save"</em> toolbar button is enabled</li> | |
<li>the typed characters are reflected into the label correspondent to the Library icon</li> | |
</ol> | |
</p> | |
<p> | |
if you now perform a <em>"Save"</em> action the persistence mechanism will trigger and you will see that file | |
<span class="inlinecode"><user.home>/MyLibrary.library</span> | |
is being created on the file system. From now on, this file will keep the state of the model object whenever | |
you change and save it. | |
</p> | |
<p> | |
To create a Writer into the Library just right-click on the Library object and select <em>New Child -> Writer</em> | |
</p> | |
<p> | |
<div class="image" > | |
<a class="gallery" rel="prettyPhoto[all]" title="" href="images/createWriter.png"> | |
<img src="images/createWriter.png" | |
width="600px" | |
/> | |
</a> | |
<div class="caption"> | |
</div> | |
</div> | |
</p> | |
<p> | |
Please note that you might see a slightly different content in the above context-menu in case you deleted | |
the .edit plugin when creating the model (e.g. <em>"Writers Writer"</em> instead of <em>"Writer"</em>, <em>"Stock Book"</em> instead of <em>"Book"</em> and | |
similar (this is because with EMF it is possible to customize labels also via .edit plugin). | |
</p> | |
<p> | |
Now set for instance the writer <em>"name"</em> field and save. | |
Now just play around creating Books, associating them to Writers and so on. | |
As you can see you can entirely manage the EMF model instance: creating, modifying and deleting elements. | |
</p> | |
<p> | |
Whenever the current selection on the upper side of the view changes, then the lower side shows the detail | |
of this selection. | |
</p> | |
<p> | |
However, up to this point, you have no control over the field to be shown and its order; for example | |
you may want just the <em>"name"</em> attribute for the Library and <em>"name", "address" and "books"</em> attributes | |
for Writers and maybe <em>"title", "authors" and "category"</em> for Books. | |
</p> | |
<p> | |
Well, it's indeed very easy to obtain this: just edit the <em>module.parsley</em> file, | |
adding the following import (without ending line with ";") | |
</p> | |
<p> | |
<div class="literallayout"> | |
<div class="incode"> | |
<p class="code"> | |
<span class="keyword">import</span> org.eclipse.emf.examples.extlibrary.* | |
</p> | |
</div> | |
</div> | |
</p> | |
<p> | |
and then defining the features to show | |
</p> | |
<p> | |
<div class="literallayout"> | |
<div class="incode"> | |
<p class="code"> | |
<span class="keyword">module</span> ... {<br/> | |
<br/> | |
<span class="keyword">parts</span> { <br/> | |
... <br/> | |
}<br/> | |
<br/> | |
<span class="keyword">featuresProvider</span> {<br/> | |
<span class="keyword">features</span> {<br/> | |
Library -> name<br/> | |
Writer -> name, address, books<br/> | |
Book -> author, title, category<br/> | |
}<br/> | |
}<br/> | |
} | |
</p> | |
</div> | |
</div> | |
</p> | |
<p> | |
Remeber that code completion is available, just exploit it since it helps a lot. | |
</p> | |
<p> | |
If you restart now the application you will see that, when selecting an object, only the declared attributes | |
will be shown. Furthermore, they are shown in the specified order. | |
</p> | |
<p> | |
Did you run the application in Debug mode? Well, then you can change fields and order, save and see the | |
changes without even restarting the application. | |
</p> | |
<p> | |
Do you want to change text used for attribute labels in the detail? Just add the following: | |
</p> | |
<p> | |
<div class="literallayout"> | |
<div class="incode"> | |
<p class="code"> | |
<span class="keyword">propertyDescriptionProvider</span> {<br/> | |
<span class="keyword">text</span> {<br/> | |
Book : author -> <span class="string">'Wrote by:'</span><br/> | |
Writer : name -> <span class="string">'Name:'</span><br/> | |
}<br/> | |
} | |
</p> | |
</div> | |
</div> | |
Or do you want to change the label shown on the tree nodes on the upper side and as detail title? | |
Maybe want to format the book label like this? | |
<div class="literallayout"> | |
<div class="incode"> | |
<p class="code"> | |
<span class="keyword">labelProvider</span> {<br/> | |
<span class="keyword">text</span> {<br/> | |
Book b -> <span class="string">'"'</span> + b.title + <span class="string">'"'</span> +<span class="string">' (by '</span>+ b.author.name + <span class="string">')'</span><br/> | |
}<br/> | |
} | |
</p> | |
</div> | |
</div> | |
<div class="image" > | |
<a class="gallery" rel="prettyPhoto[all]" title="" href="images/labelCustomization.png"> | |
<img src="images/labelCustomization.png" | |
width="600px" | |
/> | |
</a> | |
<div class="caption"> | |
</div> | |
</div> | |
</p> | |
<a name="RCPMail" ></a> | |
<span style="float:left; border-top: 1px dotted #d4d4dd; margin-left: 0; margin-top: 5px; | |
padding: 5px 0; | |
padding-top: 5px;"></span><a style="float: right" href="#">Top</a> | |
<br style="clear:both"></br> | |
<h1>RCP Mail Example</h1> | |
<div id="disqus_thread"></div> | |
<script type="text/javascript" src="documentationRoot.js"></script> | |
<script type="text/javascript"> | |
/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */ | |
var disqus_shortname = 'xtext'; // required: replace example with your forum shortname | |
// The following are highly recommended additional parameters. Remove the slashes in front to use. | |
var disqus_identifier = 'GettingStarted'; | |
var disqus_url = documentationRoot+'02-GettingStarted.php'; | |
/* * * DON'T EDIT BELOW THIS LINE * * */ | |
(function() { | |
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true; | |
dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js'; | |
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq); | |
})(); | |
</script> | |
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript> | |
</div> | |
<br style="clear:both;height:1em;"> |