| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" |
| "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
| <html xmlns="http://www.w3.org/1999/xhtml"> |
| <head> |
| <meta name="generator" content="HTML Tidy, see www.w3.org" /> |
| <meta http-equiv="Content-Type" |
| content="text/html; charset=utf-8" /> |
| <title>Creating an EMF 1.1 Model using a Graphical Editor</title> |
| </head> |
| <body> |
| <h2>Creating an EMF 1.1 Model using a Graphical Editor</h2> |
| |
| <p>In the previous tutorials, we showed you how to create EMF |
| models by importing Rose models or annotated Java interfaces. This |
| may have seemed like a somewhat indirect way of creating a model in |
| EMF. In this tutorial, we will show you how to create the Library |
| model from scratch using a graphical editor that manipulates the |
| EMF model directly. An EMF model file has the extension |
| <small><b>.ecore</b></small> and therefore sometimes referred to as |
| an ecore model.</p> |
| |
| <p>The graphical editor is provided by <a |
| href="http://www.omondo.com">Omondo</a> through their <a |
| href="http://www.omondo.com/">EclipseUML</a> plugin. |
| The following is the class diagram of the Library model we dealt |
| with in the first tutorial shown in Omondo graphics and |
| icons.<br /> |
| <img src="images/gl001.gif" alt="" width="517" height="310" /> |
| <br /> |
| </p> |
| |
| <p>The screenshots in this tutorial were captured using version 2.1 |
| of the Eclipse SDK, version 1.1.0 (build 20030519_0521VL) of EMF, |
| version 2.1.0 of GEF, and version 1.2.1 of EclipseUML.</p> |
| |
| <h3>Contents</h3> |
| |
| <table summary="" border="0" cellspacing="2" cellpadding="2" |
| width="100%"> |
| <tbody> |
| <tr> |
| <td valign="top" width="100">Step 0:</td> |
| <td valign="top"><a href="#step0">Prerequisites</a></td> |
| </tr> |
| |
| <tr> |
| <td valign="top">Step 1:</td> |
| <td valign="top"><a href="#step1">Creating a New Model</a> </td> |
| </tr> |
| |
| <tr> |
| <td valign="top">Step 2:</td> |
| <td valign="top"><a href="#step2">Creating Classes</a> </td> |
| </tr> |
| |
| <tr> |
| <td valign="top">Step 3:</td> |
| <td valign="top"><a href="#step3">Creating Associations</a> </td> |
| </tr> |
| |
| <tr> |
| <td valign="top">Step 4:</td> |
| <td valign="top"><a href="#step4">Generating the Model and |
| Editor<br /> |
| </a> </td> |
| </tr> |
| |
| <tr> |
| <td valign="top">Step 5:<br /> |
| </td> |
| <td valign="top"><a href="#step5">Modifying the Model</a><br /> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| |
| <br /> |
| <hr /> |
| <p style="text-align: right"><a id="step0" |
| name="step0"> </a><a href="#top">contents</a></p> |
| |
| <h3>Step 0: Prerequisites</h3> |
| |
| <p>Download and install the latest EclipseUML plugin from the |
| Omondo web site (<a |
| href="http://www.omondo.com/">http://www.omondo.com/</a>) |
| and its dependent plugins. The screenshots below were captured when |
| version 1.2.1 was available, but you should use the latest version |
| you find on the Omondo web site.</p> |
| |
| <ul> |
| <li>Download the Auto-Installer and save the jar file in, say, |
| c:\temp.<br /> |
| <img src="images/gl002.gif" alt="" width="619" |
| height="235" /><br /> |
| (If you already have the GEF and EMF plugins, you might want to |
| download the zip file which is smaller, but make sure you have the |
| correct versions of the dependencies.)<br /> |
| <br /> |
| </li> |
| |
| <li>Execute the jar file you downloaded:<b><tt><br /> |
| </tt></b> |
| |
| <blockquote><b><tt>C:\> cd c:\temp<br /> |
| C:\temp> java -jar eclipseuml-installer_1.2.1.ar</tt></b><br /> |
| </blockquote> |
| </li> |
| |
| <li>Follow the instructions as the installer runs to install the |
| EclipseUML, GEF, and EMF plugins into your Eclipse |
| installation.<br /> |
| <br /> |
| </li> |
| |
| <li>Launch Eclipse. If you have run Eclipse before installing |
| EclipseUML, you will be prompted to run the Update Manager. Select |
| <b>Yes</b> and follow through the steps to install |
| EclipseUML.<br /> |
| <br /> |
| Select <small><b>Help>About Eclipse Platform</b></small>.<br /> |
| <br /> |
| <img src="images/gl003.gif" alt="" width="163" |
| height="123" /><br /> |
| <br /> |
| </li> |
| |
| <li>Click the <small><b>Plug-in Details</b></small> button.<br /> |
| <br /> |
| <img src="images/gl004.gif" alt="" width="462" |
| height="331" /><br /> |
| <br /> |
| <br /> |
| </li> |
| |
| <li>Verify that the following highlighted plugins show up in the |
| dialog.<br /> |
| <br /> |
| <img src="images/gl005.gif" alt="" width="595" |
| height="295" /><br /> |
| <br /> |
| <img src="images/gl006.gif" alt="" width="595" |
| height="267" /><br /> |
| <br /> |
| <img src="images/gl007.gif" alt="" width="595" |
| height="75" /><br /> |
| <br /> |
| <br /> |
| </li> |
| </ul> |
| |
| <hr /> |
| <p style="text-align: right"><a id="step1" |
| name="step1"> </a><a href="#top">contents</a></p> |
| |
| <h3>Step 1: Creating a New Model</h3> |
| |
| <p>We first create a Java project and then use the wizard to create |
| a new EMF model.</p> |
| |
| <ul> |
| <li>In the Navigator view in the Resource perspective, right-click |
| on the blank area and select <small><b>New > |
| Project...</b></small>:<br /> |
| <br /> |
| <img src="images/gl101.gif" alt="" width="280" |
| height="233" /><br /> |
| <br /> |
| </li> |
| |
| <li>Select "Java" and "Java Project". Click the "Next" |
| button.<br /> |
| <img src="images/gl102.gif" alt="" width="362" |
| height="199" /><br /> |
| <br /> |
| </li> |
| |
| <li>Enter <b><small>library</small></b> as the project name. Click |
| the <small><b>Finish</b></small> button.<br /> |
| <br /> |
| <img src="images/gl103.gif" alt="" width="258" |
| height="176" /><br /> |
| <br /> |
| </li> |
| |
| <li>Click the "Add Folder" button.<br /> |
| <img src="images/gl104.gif" alt="Add folder" height="225" |
| width="499" /><br /> |
| </li> |
| |
| <li>Click the "Create New Folder" button.<br /> |
| <img src="images/gl104_1.gif" alt="Create a new folder" |
| height="422" width="346" /><br /> |
| </li> |
| |
| <li>Type "src" and click the "OK" button.<br /> |
| <img src="images/gl105.gif" alt="Name the folder" height="164" |
| width="300" /><br /> |
| </li> |
| |
| <li>Click the "OK" button.<br /> |
| <img src="images/gl105_1.gif" alt="Done with new folder" |
| height="422" width="346" /><br /> |
| </li> |
| |
| <li>When asked if you want to remove the project as source folder |
| and update the build output folder to "library/bin", click the |
| "Yes" button.<br /> |
| <img src="images/gl105_2.gif" |
| alt="Do not update build output folder" height="139" |
| width="441" /><br /> |
| </li> |
| |
| <li>Specify "library/runtime" as the build default output folder. |
| Click the "Finish" button.<br /> |
| <img src="images/gl105_3.gif" alt="Specify build output folder" |
| height="500" width="500" /><br /> |
| </li> |
| |
| <li>The newly created Java project can be seen in the Package |
| Explorer.<br /> |
| <img src="images/gl105_4.gif" alt="Library Java project" |
| height="117" width="280" /><br /> |
| </li> |
| |
| <li>On the Navigator view, right-click on the <small>src</small> |
| folder and select <small><b>New > Folder</b></small>.<br /> |
| <br /> |
| <img src="images/gl106.gif" alt="" width="366" |
| height="141" /><br /> |
| <br /> |
| </li> |
| |
| <li>Enter <b><small>model</small></b> as the folder name. Click the |
| <small><b>Finish</b></small> button.<br /> |
| <br /> |
| <img src="images/gl107.gif" alt="" width="158" |
| height="41" /><br /> |
| <br /> |
| <!-- |
| <li>We are going to create the subfolders <font face="Courier New, Courier, monospace"><small><b>src/model</b></small></font> and place the ecore model in there so that the file system structure is the same as in the earlier tutorials.<br> |
| On the Navigator view, right-click on the library project and select <font face="Helvetica, Arial, sans-serif"><small><b>New > Folder</b></small></font>.<br> |
| <br> |
| <img src="images/gl104.gif" alt="" width="363" height="152"> |
| <br> |
| <br> |
| </li> |
| <li>Enter <font face="Courier New, Courier, monospace"><b><small>src</small></b></font> as the folder name. Click the <small><font face="Helvetica, Arial, sans-serif"><b>Finish</b></font></small> button.<br> |
| <br> |
| <img src="images/gl105.gif" alt="" width="151" height="46"> |
| <br> |
| <br> |
| </li> |
| <li>On the Navigator view, right-click on the <small><font face="Courier New, Courier, monospace">src</font></small> folder and select <font face="Helvetica, Arial, sans-serif"><small><b>New > Folder</b></small></font>.<br> |
| <br> |
| <img src="images/gl106.gif" alt="" width="366" height="141"> |
| <br> |
| <br> |
| </li> |
| <li>Enter <font face="Courier New, Courier, monospace"><b><small>model</small></b></font> as the folder name. Click the <small><font face="Helvetica, Arial, sans-serif"><b>Finish</b></font></small> button.<br> |
| <br> |
| <img src="images/gl107.gif" alt="" width="158" height="41"> |
| <br> |
| |
| <br> |
| --> |
| </li> |
| |
| <li>With the <small>model</small> folder selected, select |
| <b><small>File > New > Other...</small></b>.<br /> |
| <br /> |
| <img src="images/gl108.gif" alt="" width="334" |
| height="140" /><br /> |
| <br /> |
| </li> |
| |
| <li>Select <b><small>EMF Diagrams</small></b> on the left pane and |
| <b><small>EMF Class Diagram</small></b> on the right. Click the |
| <small><b>Next</b></small> button.<br /> |
| <br /> |
| <img src="images/gl109.gif" alt="" width="494" |
| height="252" /><br /> |
| <br /> |
| </li> |
| |
| <li>Change the file name to <small><b>library.ecd</b></small> and |
| the package name to |
| <small><b>org.ecilpse.example.library</b></small>. You can also add |
| some description if your like. Click the |
| <small><b>Finish</b></small> button.<br /> |
| <br /> |
| <img src="images/gl110.gif" alt="" width="500" |
| height="711" /><br /> |
| <br /> |
| </li> |
| |
| <li>A pair of files, the <small>.ecore</small> and the |
| <small>.ecd</small> files, will be created and the graphical editor |
| will be opened in the main view.<br /> |
| <br /> |
| <img src="images/gl111.gif" alt="" width="522" |
| height="181" /><br /> |
| <br /> |
| The <small>.ecore</small> <small>file</small> contains the |
| structure of the model while the <small>.ecd</small> file contains |
| the graphical layout information.<br /> |
| </li> |
| </ul> |
| |
| <hr /> |
| <p style="text-align: right"><a id="step2" |
| name="step2"> </a><a href="#top">contents</a></p> |
| |
| <h3>Step 2: Creating Classes</h3> |
| |
| <ul> |
| <li>In the editor view, click on the <b><small>Create a |
| class</small></b> button, and then click anywhere in the blank |
| area. A New Class dialog will come up.<br /> |
| <br /> |
| <img src="images/gl201.gif" alt="" width="291" height="86" /> |
| <br /> |
| <br /> |
| </li> |
| |
| <li>Enter <b><small>Library</small></b> as the class name. Click |
| the <small><b>Finish</b></small> button.<br /> |
| <br /> |
| <img src="images/gl202.gif" alt="" width="228" |
| height="156" /><br /> |
| <br /> |
| </li> |
| |
| <li>A Library class will be drawn in the main view. You can |
| drag it around and place it wherever you prefer.<br /> |
| Now, right-click on it and select <b><small>New > |
| Attribute</small></b>.<br /> |
| <br /> |
| <img src="images/gl203.gif" alt="" width="319" |
| height="84" /><br /> |
| <br /> |
| </li> |
| |
| <li>Enter <small><b>name</b></small> as the name of the attribute. |
| Ensure that the other properties match what is shown below. Click |
| the <small><b>OK</b></small> button.<br /> |
| <br /> |
| <img src="images/gl204.gif" alt="" width="438" |
| height="260" /><br /> |
| <br /> |
| </li> |
| |
| <li>You have just created a class named <small>Library</small> with |
| a String attribute named <small>name</small>.<br /> |
| <br /> |
| <img src="images/gl205.gif" alt="" width="319" |
| height="182" /><br /> |
| <br /> |
| </li> |
| |
| <li>There is also another way of creating classes. First, you click |
| in the blank area of the editor to deselect any class you might |
| have selected. Then, right-click in the blank area of the main view |
| and select <small><b>New > Class</b></small>.<br /> |
| <br /> |
| <img src="images/gl206.gif" alt="" width="434" |
| height="301" /><br /> |
| <br /> |
| </li> |
| |
| <li>Enter <small><b>Writer</b></small> as the class name and click |
| the <small><b>Finish</b></small> button.<br /> |
| <br /> |
| <img src="images/gl207.gif" alt="" width="215" |
| height="171" /><br /> |
| <br /> |
| </li> |
| |
| <li>Create the <small>name</small> attribute for the |
| <small>Writer</small> class just like before. Right-click on |
| <small>Writer</small>, select <small><b>New > |
| Attribute</b></small>, then enter <small><b>name</b></small> for |
| Name and click the <small><b>OK</b></small> button.<br /> |
| <br /> |
| <img src="images/gl208.gif" alt="" width="322" |
| height="282" /><br /> |
| <br /> |
| </li> |
| |
| <li>Now we are going to create an enumeration class. You can click |
| on the <img src="images/gl209.gif" alt="" width="25" height="20" /> |
| button and then anywhere on the blank area, or right-click on the |
| blank area and select <small><b>New > Enumeration</b></small> to |
| bring up the New Enumeration dialog. Enter |
| <small><b>BookCategory</b></small> as the name of the |
| enumeration.<br /> |
| <br /> |
| <img src="images/gl210.gif" alt="" width="438" |
| height="154" /><br /> |
| <br /> |
| </li> |
| |
| <li>For each of the three literals shown below, click on the |
| <small><b>Add...</b></small> button, enter the name and value of |
| the literals, and then click the <small><b>OK</b></small> |
| button.<br /> |
| <br /> |
| |
| |
| <table summary="" cellpadding="2" cellspacing="0" border="1" |
| width="250"> |
| <tbody> |
| <tr> |
| <th valign="top">Name<br /> |
| </th> |
| <th valign="top">Value<br /> |
| </th> |
| </tr> |
| |
| <tr> |
| <td valign="top" align="center">Mystery<br /> |
| </td> |
| <td valign="top" align="center">0<br /> |
| </td> |
| </tr> |
| |
| <tr> |
| <td valign="top" align="center">ScienceFiction<br /> |
| </td> |
| <td valign="top" align="center">1<br /> |
| </td> |
| </tr> |
| |
| <tr> |
| <td valign="top" align="center">Biography<br /> |
| </td> |
| <td valign="top" align="center">2<br /> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| |
| <br /> |
| <img src="images/gl211.gif" alt="" width="438" |
| height="244" /><br /> |
| <br /> |
| </li> |
| |
| <li>At this point, the New Enumeration dialog should appear as |
| shown below. Click the <small><b>Finish</b></small> button.<br /> |
| <br /> |
| <img src="images/gl212.gif" alt="" width="438" |
| height="405" /><br /> |
| <br /> |
| </li> |
| |
| <li>The <small>BookCategory</small> enumeration is created and |
| shown in the editor.<br /> |
| <br /> |
| <img src="images/gl213.gif" alt="" width="494" |
| height="300" /><br /> |
| <br /> |
| </li> |
| |
| <li>We are now going to create the <small>Book</small> class. |
| Right-click on the blank area and select <small><b>New > |
| Class</b></small>. Enter <small><b>Book</b></small> as the class |
| name and click the <small><b>Finish</b></small> button. Then, with |
| the Book class selected, right-click and select <small><b>New > |
| Attribute</b></small>, enter <small><b>title</b></small> as the |
| attribute name and click the <small><b>OK</b></small> button.<br /> |
| <br /> |
| <img src="images/gl214.gif" alt="" width="475" |
| height="300" /><br /> |
| <br /> |
| </li> |
| |
| <li>With the Book class selected, right-click and select |
| <small><b>New > Attribute</b></small>, and enter |
| <small><b>pages</b></small> as the attribute name. Select |
| <small><b>EInt</b></small> as the type and click the |
| <small><b>OK</b></small> button.<br /> |
| <br /> |
| <img src="images/gl215.gif" alt="" width="438" |
| height="260" /><br /> |
| <br /> |
| </li> |
| |
| <li>With the Book class selected, right-click and select |
| <small><b>New > Attribute</b></small>, and enter |
| <small><b>category</b></small> as the attribute name. Select |
| <small><b>BookCategory</b></small> as the type and click the |
| <small><b>OK</b></small> button.<br /> |
| <br /> |
| <img src="images/gl216.gif" alt="" width="438" |
| height="260" /><br /> |
| <br /> |
| </li> |
| |
| <li>Now you should have created 4 classes in the library |
| project.<br /> |
| <br /> |
| <img src="images/gl217.gif" alt="" width="489" |
| height="330" /><br /> |
| <br /> |
| </li> |
| |
| <li>Save the model by selecting <small><b>File > |
| Save</b></small> or simply press the <small><b>Ctrl+S</b></small> |
| key.<br /> |
| <br /> |
| <img src="images/gl218.gif" alt="" width="380 height=" /><br /> |
| </li> |
| </ul> |
| |
| <hr /> |
| <p style="text-align: right"><a id="step3" |
| name="step3"> </a><a href="#top">contents</a></p> |
| |
| <h3>Step 3: Creating Associations</h3> |
| |
| <ul> |
| <li>In the editor view, click on the |
| <b><small>Association</small></b> button <img |
| src="images/gl301.gif" alt="" width="24" height="19" /> .<br /> |
| <br /> |
| <img src="images/gl302.gif" alt="" width="283" height="77" /> |
| <br /> |
| <br /> |
| </li> |
| |
| <li>Note that as you move your mouse pointer over a class, the |
| class will change color. Click on the <small>Library</small> |
| class.<br /> |
| <br /> |
| <img src="images/gl303.gif" alt="" width="468" |
| height="396" /><br /> |
| <br /> |
| </li> |
| |
| <li>Next, move the mouse pointer over to the |
| <small>Writer</small> class and click on it.<br /> |
| <br /> |
| <img src="images/gl304.gif" alt="" width="475" height="350" /> |
| <br /> |
| <br /> |
| </li> |
| |
| <li>As soon as you release the mouse button, the association |
| properties dialog comes up.<br /> |
| On the <small><b>1st Association End</b></small> tab, change the |
| name to <small><b>writers</b></small>, select the |
| <small><b>Containment</b></small> checkbox, and change the upper |
| bound to <small><b>-1</b></small>.<br /> |
| <br /> |
| <img src="images/gl305.gif" alt="" width="507" height="304" /> |
| <br /> |
| <br /> |
| The <small><b>Containment</b></small> property indicates that a |
| <small>Library</small> object will contain <small>Writer</small> |
| objects through this <small>writers</small> association. The upper |
| bound of <small>-1</small> means a <small>Library</small> |
| object can own more than one <small>Writer</small> objet.<br /> |
| <br /> |
| </li> |
| |
| <li>Click on the <small><b>2nd Association End</b></small> tab, and |
| deselect the <small><b>Navigable</b></small> checkbox.<br /> |
| <br /> |
| <img src="images/gl306.gif" alt="" width="512" |
| height="308" /><br /> |
| <br /> |
| This indicates that from a <small>Writer</small> object, you cannot |
| navigate to the <small>Library</small> object that owns it.<br /> |
| <br /> |
| </li> |
| |
| <li>Click on the <small><b>Router</b></small> tab, select the |
| <small><b>Manual</b></small> radio button. The selections on this |
| tab do not affect the properties of the association in the ecore |
| model. They only affect how the association line is drawn in the |
| editor. Click the <small><b>OK</b></small> button.<br /> |
| <br /> |
| <img src="images/gl307.gif" alt="" width="512" |
| height="308" /><br /> |
| <br /> |
| </li> |
| |
| <li>An arrow is now drawn between the <small>Library</small> class |
| and the <small>Writer</small> class. to represent the association |
| we just created<br /> |
| <br /> |
| <img src="images/gl308.gif" alt="" width="480" |
| height="340" /><br /> |
| <br /> |
| </li> |
| |
| <li>Now, we are going to create the containment association between |
| <small>Library</small> and <small>Book</small>. It is similar to |
| the association between <small>Library</small> and |
| <small>Writer</small>.<br /> |
| Click on the <img src="images/gl301.gif" alt="" width="23" |
| height="21" /> button and then on the <b><small>Library</small></b> |
| class. Then click on the <small><b>Book</b></small> class. On the |
| <small><b>1st Association End</b></small> tab of the association |
| properties dialog, change the name to <small><b>books</b></small>, |
| select the <small><b>Containment</b></small> checkbox and change |
| the upper bound to <small><b>-1</b></small>.<br /> |
| <br /> |
| <img src="images/gl309.gif" alt="" width="512" |
| height="308" /><br /> |
| <br /> |
| </li> |
| |
| <li>On the <small><b>2nd Association End</b></small> tab, deselect |
| the <small><b>Navigable</b></small> checkbox. On the |
| <small><b>Router</b></small> tab, select the |
| <small><b>Manual</b></small> radio button. Click the |
| <small><b>OK</b></small> button.<br /> |
| <br /> |
| <img src="images/gl310.gif" alt="" width="470" |
| height="340" /><br /> |
| <br /> |
| </li> |
| |
| <li>Next we are going to create the association between |
| <small>Book</small> and <small>Writer</small>.<br /> |
| Click on the Association button <img src="images/gl301.gif" alt="" |
| width="23" height="21" /> , then click on the |
| <small><b>Book</b></small> class and then click on the |
| <small><b>Writer</b></small> class.<br /> |
| <br /> |
| <img src="images/gl311.gif" alt="" width="500" |
| height="335" /><br /> |
| <br /> |
| </li> |
| |
| <li>On the <small><b>1st Association End</b></small> tab, change |
| the name to <small><b>author</b></small>. Leave the |
| <small><b>Containment</b></small> checkbox unchecked, and change |
| the <small><b>lower bound</b></small> to <small><b>1</b></small>. |
| We assume a book will have exactly one author.<br /> |
| <br /> |
| <img src="images/gl312.gif" alt="" width="512" |
| height="308" /><br /> |
| <br /> |
| </li> |
| |
| <li>Click on the <small><b>2nd Association End</b></small> tab. |
| Change the name to <small><b>books</b></small> and change the |
| <small><b>upper bound</b></small> to <small><b>-1</b></small>. A |
| writer can author zero or more books.<br /> |
| <br /> |
| <img src="images/gl313.gif" alt="" width="512" |
| height="308" /><br /> |
| <br /> |
| </li> |
| |
| <li>Click on the <small><b>Router</b></small> tab, select the |
| <small><b>Manual</b></small> radio button and click the |
| <small><b>OK</b></small> button. The association is drawn in the |
| editor view.<br /> |
| <br /> |
| <img src="images/gl314.gif" alt="" width="500" |
| height="360" /><br /> |
| <br /> |
| </li> |
| |
| <li>We can make the class diagram look tidier if we can make the |
| line that represents the association between the |
| <small>Writer</small> and <small>Book</small> classes be drawn so |
| that it appears horizontal and without the jagged edge. This can be |
| done easily in the editor.<br /> |
| Click on the <small><b>Writer</b></small> class to select it. Next, |
| holding down the Shift key, click on the <b><small>Book</small></b> |
| class to add it to the selection.<br /> |
| <br /> |
| <img src="images/gl315.gif" alt="" width="500" |
| height="370" /><br /> |
| <br /> |
| </li> |
| |
| <li>Right-click and select <small><b>Alignment > Align |
| Middle</b></small>.<br /> |
| <br /> |
| <img src="images/gl316.gif" alt="" width="585" |
| height="475" /><br /> |
| <br /> |
| </li> |
| |
| <li>Now, the diagram looks much neater. Press |
| <small><b>Ctrl+S</b></small> key to save the model.<br /> |
| <br /> |
| <img src="images/gl317.gif" alt="" width="563" |
| height="370" /><br /> |
| </li> |
| </ul> |
| |
| <hr /> |
| <p style="text-align: right"><a id="step4" |
| name="step4"> </a><a href="#top">contents</a></p> |
| |
| <h3>Step 4: Generating the Model and Editor</h3> |
| |
| <ul> |
| <li>In the editor view, right-click on the blank area. Select |
| <small><b>Generate All</b></small>.<br /> |
| <br /> |
| <img src="images/gl401.gif" alt="" width="552" height="525" /> |
| <br /> |
| <br /> |
| </li> |
| |
| <li>The first time you do code generation on a project, you will |
| need to create the GenModel model. The GenModel model is auxiliary |
| to the EMF model. It contains information about code generation |
| like the directory into which the code is generated and the adapter |
| pattern.<br /> |
| <br /> |
| The GenModel selector will come up. Click on the <small><b>New |
| GenModel</b></small> button.<br /> |
| <br /> |
| <img src="images/gl402.gif" alt="" width="326" height="402" /> |
| <br /> |
| <br /> |
| </li> |
| |
| <li>Expand the <small><b>library</b></small> project and select the |
| <small><b>model</b></small> folder. Change the file name to |
| <small><b>library.genmodel</b></small>. Click the |
| <small><b>Finish</b></small> button.<br /> |
| <br /> |
| <img src="images/gl403.gif" alt="" width="438" |
| height="592" /><br /> |
| <br /> |
| </li> |
| |
| <li>You are back in the GenModel selector. Click the |
| <small><b>OK</b></small> button and code generation begins.<br /> |
| <br /> |
| <img src="images/gl404.gif" alt="" width="407" |
| height="402" /><br /> |
| <br /> |
| </li> |
| |
| <li>When the code generation is finished, the GenModel and the EMF |
| model code for the <small>library</small> project will have been |
| generated. In addition, the <small>library.edit</small> and |
| <small>library.editor</small> projects will have been generated and |
| be ready to execute.<br /> |
| <br /> |
| <img src="images/gl405.gif" alt="" width="285" |
| height="382" /><br /> |
| <br /> |
| </li> |
| |
| <li>Switch to a Java perspective or a Debug perspective and then |
| follow <a href="#step4">Step 4</a> in the tutorial "Generating an |
| EMF Model" to run the generated editor.<br /> |
| </li> |
| </ul> |
| |
| <hr /> |
| <p style="text-align: right"><a id="step5" |
| name="step5"> </a><a href="#top">contents</a></p> |
| |
| <h3>Step 5: Modifying the Model</h3> |
| |
| <p>When you modify the EMF model in the graphical editor, it will |
| sychronize the changes with the corresponding GenModel model.</p> |
| |
| <ul> |
| <li>Working in the Resource perspective, double-click on the |
| <small><b>library.genmodel</b></small> in the Navigator view to |
| open it so that both the EMF model and GenModel model are shown. If |
| you have closed the EMF model, double-click on the |
| <small><b>library.ecore</b></small> file or the |
| <small><b>library.ecd</b></small> file in the Navigator view to |
| open the EMF model.<br /> |
| <br /> |
| <img src="images/gl501.gif" alt="" width="470" height="586" /> |
| <br /> |
| <br /> |
| </li> |
| |
| <li>Go to the EMF model view, select the <small><b>Book</b></small> |
| class, right-click and select <small><b>New > |
| Attribute</b></small> to add a new attribute. Enter |
| <small><b>isbn</b></small> as the name and click the |
| <small><b>OK</b></small> button.<br /> |
| <br /> |
| <img src="images/gl502.gif" alt="" width="438" |
| height="260" /><br /> |
| <br /> |
| </li> |
| |
| <li>You can see that the EMF model and the GenModel model are not |
| synchronized. The newly added attribute <small><b>isbn</b></small> |
| is not in the GenModel model.<br /> |
| <br /> |
| <img src="images/gl503.gif" alt="" width="477" |
| height="578" /><br /> |
| <br /> |
| </li> |
| |
| <li>To synchronize, save the EMF model by selecting <small><b>File |
| > Save</b></small> or simply pressing the |
| <small><b>Ctrl+S</b></small> key.<br /> |
| <br /> |
| <img src="images/gl504.gif" alt="" width="297" |
| height="122" /><br /> |
| <br /> |
| </li> |
| |
| <li>The change still does not show up in the GenModel model yet. |
| You have to switch the GenModel model view into focus. It will then |
| be reloaded. When you expand to the <small>Book</small> class in |
| the GenModel model again, you will find the new attribute.<br /> |
| <br /> |
| <img src="images/gl505.gif" alt="" width="473" |
| height="582" /><br /> |
| </li> |
| </ul> |
| |
| <hr /> |
| <p style="text-align: right"><a href="#top">contents</a></p> |
| </body> |
| </html> |
| |
