| <div id="midcolumn"> |
| <h2>How to change the order of attributes which are shown in the editor</h2> |
| <p>If you have setup your Eclipse developer environment as outlined in the previous tutorials, you have learned how to run a EMFCP instance and add model elements to a project.</p> |
| <p>The following steps will explain how to arrange the attributes in the EMFCP editor.</p> |
| |
| <b>Step 1: Check default behaviour</b> |
| <p>Based on the example model, the default editor for a model element of the type <em>Book</em> will look as follows.</p> |
| <p><img width=700 src="images/emfcp-editor-default.png" alt="EMFCP with the default editor" /></p> |
| <p>We will change this layout by rearranging the order of the attributes and editing the width of one input field.</p> |
| |
| <b>Step 2: Check the default model</b> |
| <p>In your Eclipse developer environment, open the model definition by double-clicking the file <em>library.ecore</em> in <em>exampleModel/model</em>.</p> |
| <p><img width=700 src="images/dev-model-definition.png" alt="The default model definition" /></p> |
| <p>As you can see, the elements <em>Book.author</em> and <em>Writer.books</em> are already annotated.</p> |
| |
| <b>Step 3: Editing the model elements</b> |
| <p>Right-click on the attribute <em>title</em> of the model element <em>Book</em> and select <em>New Child >> EAnnotation</em>. In the Properties-View, set the <em>source</em> to <em>org.eclipse.emf.ecp.editor</em>. Next, right-click on the new EAnnotation and add a new <em>Details Entry</em> child. In the Properties-View, set the <em>key</em> to <em>position</em> and the <em>value</em> to <em>bottom</em>. Add a second <em>Details Entry</em>-child and set the <em>key</em> to <em>priority</em> and the <em>value</em> to <em>0</em>. In the editor, this will change the position of the input-field for the <em>title</em> to the bottom.</p> |
| <p><img width=700 src="images/dev-model-definition-title.png" alt="The annotated title element" /></p> |
| <p>Next, add an EAnnotation to the <em>pages</em>-attribute and give it the source <em>org.eclipse.emf.ecp.editor</em>. Add a first <em>Details Entry</em> with the <em>key</em> <em>position</em> and the <em>value</em> <em>right</em>. Now, add a second entry with the <em>key</em> <em>priority</em> and the <em>value</em> <em>1</em>. These changes will position the editor-field for the <em>pages</em>-attribute to be displayed below the editor-field for the <em>author</em>, on the right side of the editor window.</p> |
| <p><img width=700 src="images/dev-model-definition-pages.png" alt="The annotated pages element" /></p> |
| |
| <b>Step 4: Generating the code</b> |
| <p>In the Package Explorer, right-click on <em>library.genmodel</em> and select <em>Reload ...</em>. In the popup-window, select <em>Next</em>, <em>Next</em> and <em>Finish</em>.</p> |
| <p>In the <em>library.genmodel</em>-Editor, right-click on <em>Library</em> and select <em>Generate Model Code</em>. Right-click again and select <em>Generate Edit Code</em>.</p> |
| <p><img width=700 src="images/dev-model-genmodel.png" alt="Model generation" /></p> |
| |
| <b>Step 5: Check the results</b> |
| <p>When you start your EMFCP instance, the new editor for a model element of the type <em>Book</em> will look as follows:</p> |
| <p><img width=700 src="images/emfcp-editor-result.png" alt="EMFCP with the modified editor" /></p> |
| <p>As expected, the input-field for the <em>title</em>-attribute is displayed on the bottom of the editor-window now, whereas the <em>pages</em>-attribute can be edited on the right side below the <em>author</em>.</p> |
| <p>There is a third possibility to arrange the attributes. Attributes can be set to "hidden" that means they are not shown in the generated editor. This can be done by an EAnnotation with key="hidden" and value="true".</p> |
| </div> |
