File: clibmod.html

package info (click to toggle)
eclipse-emf 2.8.3-1
links: PTS, VCS
area: main
in suites: jessie, jessie-kfreebsd
size: 57,992 kB
ctags: 81,092
sloc: java: 561,060; xml: 7,553; sh: 111; makefile: 11
file content (678 lines) | stat: -rw-r--r-- 23,821 bytes
parent folder | download | duplicates (7)
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" href="images/../../../css/book.css" type="text/css"/>
<link rel="stylesheet" href="images/../../../css/emf-book.css" type="text/css"/>
<title>Generating an EMF Model</title>
</head>
<body lang="EN-US" xml:lang="EN-US">
<h1>Generating an EMF Model</h1>

<p>Last updated: June 18, 2007</p>

<p>This tutorial is a step-by-step description of the process of creating an EMF
model and generating a simple model editor for it. Following this tutorial will
show how easy EMF makes it to go from a simple model definition to a fully
functioning editor for that model.</p>

<p>The model we will generate looks like this in UML (see the
<a href="../../references/overview/EMF.html">Eclipse Modeling Framework
Overview</a> for a description of this model):</p>

<img src="images/model.gif" alt="Library UML model"/>

<p>We will show how an EMF model can be generated from either of two different
sources: a Rational Rose model or a set of annotated Java interfaces and
classes.</p>

<p>The screenshots are based on version 3.3.0 RC4 of the Eclipse SDK and version 2.3.0 RC3
of EMF.</p>

<hr/>
<h2>Contents</h2>

<table border="0" cellspacing="2" cellpadding="2" width="100%">
<tr>
<td valign="top" width="60">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="#step1a">Import the Model from Rose</a> or
<a href="#step1b">Define the Model Using Annotated Java</a>
</td>
</tr>

<tr>
<td valign="top">Step 2:</td>
<td valign="top"><a href="#step2">Generate the EMF Model Code</a>
</td>
</tr>

<tr>
<td valign="top">Step 3:</td>
<td valign="top"><a href="#step3">Generate an Editor for the
Model</a> </td>
</tr>

<tr>
<td valign="top">Step 4:</td>
<td valign="top"><a href="#step4">Run the Generated Editor</a>
</td>
</tr>
</table>
<br/>

<hr/>
<p style="text-align: right"><a id="step0" name="step0">&nbsp;</a><a href="#top">contents</a></p>
<h2>Step 0: Prerequisites</h2>

<p>The EMF Runtime package includes the EMF generator and a number of related
plug-ins. After installing the package, verify that they are available in your
Eclipse environment:</p>

<ul>
<li>Bring up the "Help/About Eclipse Platform" dialog.<br/>
<br /><img src="images/img001.gif" alt="Help/About Eclipse Platform"/><br/>
&nbsp;</li>

<li>Click on "Plug-in Details".<br/>
<br /><img src="images/img002.gif" alt="Plug-in Details"/><br/>
&nbsp;</li>

<li>Click the "Plug-in Id" column heading to order the plug-ins by that field.
Then, check that the highlighted set of plug-ins are present.<br/>
<br /><img src="images/img003.gif" alt="Required EMF plug-ins: org.eclipse.emf, org.eclipse.emf.codegen, org.eclipse.emf.codegen.ecore, org.eclipse.emf.codegen.ecore.ui, org.eclipse.emf.codegen.ui, org.eclipse.emf.common, org.eclipse.emf.common.ui, org.eclipse.emf.converter, org.eclipse.emf.ecore, org.eclipse.emf.ecore.edit, org.eclipse.emf.ecore.editor, org.eclipse.emf.ecore.xmi, org.eclipse.emf.edit, org.eclipse.emf.edit.ui, org.eclipse.emf.importer, org.eclipse.emf.importer.java, org.eclipse.emf.importer.rose"/><br/>
&nbsp;</li>
</ul>

<p>Additional EMF plug-ins are not required for this tutorial. They may or may
not appear, depending on which EMF packages you installed.</p>

<hr/>
<p style="text-align: right"><a id="step1a" name="step1a">&nbsp;</a><a href="#top">contents</a></p>
<h2>Step 1a: Import the Model from Rose</h2>

<p>The Rose file for the library model can be found here:
<a target="_code" href="images/../library.mdl">library.mdl</a>. Save it
somewhere on your workstation.</p>

<p>Create a new EMF project in the workspace:</p>

<ul>
<li>Bring up the "File/New/Project..." dialog.<br/>
<br /><img src="images/img101.gif" alt="File/New/Project..."/><br/>
&nbsp;</li>

<li>Expand "Eclipse Modeling Framework" and select "EMF Project". Click the
"Next" button.<br/>
<br /><img src="images/img102.gif" alt="EMF Project"/><br/>
&nbsp;</li>

<li>Give the project a name, say, "library". Then, click the "Next" button.<br/>
<br /><img src="images/img103.gif" alt="Name the project"/><br/>
&nbsp;</li>

<li>Select "Rose class model" and click the "Next" button.<br/>
<br /><img src="images/img104.gif" alt="Rose class model"/><br/>
&nbsp;</li>

<li>Click on the "Browse File System..." or "Browse Workspace..." button and locate the Rose model file.<br/>
<br /><img src="images/img105.gif" alt="Browse for Rose file"/><br/>
&nbsp;</li>

<li>The Rose model file will be examined, and a default generator model name
will be suggested. You can change the name in the entry box if you wish. Then,
click the "Next" button.<br/>
<br /><img src="images/img106.gif" alt="Generator model name"/><br/>
&nbsp;</li>

<li>In general, a Rose model may contain more than one package. Select the
package for which you want to generate an EMF model -- in this case, the only
package, "org.eclipse.example.library". Click the "Finish" button.<br/>
<br /><img src="images/img107.gif" alt="Select package"/><br/>
&nbsp;</li>

<li>An Ecore model (library.ecore) and a generator model (library.genmodel) will
be created. The latter, which controls code generation for the model, is opened
in the main view.<br/>
<br /><img src="images/img108.gif" alt="Opened generator"/><br/>
&nbsp;</li>
</ul>

<hr/>
<p style="text-align: right">&nbsp;<a href="#top">contents</a></p>
<h2><a id="step1b" name="step1b">Step 1b: Define the Model Using Annotated Java</a></h2>

<p>Instead of importing the model from a Rose diagram, we can start with a set
of Java interfaces and classes that correspond to the classes and enumerated
types, respectively, in the library model. This code is the bare minimum
required to illustrate the desired features. Based on it, an Ecore model and a
generator model will be constructed, which will then drive generation of the
remaining code. The code is annotated with "@model" tags in Javadoc comments,
in order to specify any non-default values for the attributes and references of
the Ecore objects.</p>

<p>Starting in EMF 2.3, you can define your annotated Java interfaces with
Java 5.0 Generics and Enumerations.  We will show both approaches when appropriate.  In order
to use Java 5.0, make sure Eclipse's &quot;Java/Compiler/Compiler Compliance Level&quot; value
is set to &quot;5.0&quot; or higher.</p>
<br /><img src="images/img100.gif" alt="Java/Compiler/Compiler Compliance Level"/><br/>

<p><br />Here are the interfaces that describe the library model:</p>

<blockquote>
<table><tr>
<td width="45%"><strong><a name="librarysrc" target="_code" href="images/../Library.java">Library.java</a></strong> (Java 1.4)<br/>
<table width="100%" border="1" frame="box"><tr><td>
<pre>package org.eclipse.example.library;
import java.util.List;

/**
 * @model
 */
public interface Library
{
  /**
   * @model
   */
  String getName();

  /**
   * @model type="Writer" containment="true"
   */
  List getWriters();

  /**
   * @model type="Book" containment="true"
   */
  List getBooks();
}</pre>
</td></tr></table></td>
<td width="10%"></td>
<td width="45%"><strong><a target="_code" href="images/../java5/Library.java">Library.java</a></strong> (Java 5.0)<br/>
<table width="100%" border="1" frame="box"><tr><td>
<pre>package org.eclipse.example.library;
import java.util.List;

/**
 * @model
 */
public interface Library
{
  /**
   * @model
   */
  String getName();

  /**
   * @model containment="true"
   */
  List&lt;Writer&gt; getWriters();

  /**
   * @model containment="true"
   */
  List&lt;Book&gt; getBooks();
}</pre>
</td></tr></table></td>
</tr>
<tr><td colspan="3">&nbsp;</td></tr>
<tr>
<td width="45%"><strong><a name="booksrc" target="_code" href="images/../Book.java">Book.java</a></strong><br/>
<table width="100%" border="1" frame="box"><tr><td>
<pre>package org.eclipse.example.library;

/**
 * @model
 */
public interface Book
{
  /**
   * @model
   */
  String getTitle();

  /**
   * @model default="100"
   */
  int getPages();

  /**
   * @model
   */
  BookCategory getCategory();

  /**
   * @model opposite="books"
   */
  Writer getAuthor();
}</pre>
</td></tr></table>
</td>
<td colspan="2"/>
</tr>
<tr><td colspan="3">&nbsp;</td></tr>
<tr>
<td width="45%"><strong><a name="writersrc" target="_code" href="images/../Writer.java">Writer.java</a></strong> (Java 1.4)<br/>
<table width="100%" border="1" frame="box"><tr><td>
<pre>package org.eclipse.example.library;

/**
 * @model
 */
public interface Writer
{
  /**
   * @model
   */
  String getName();

  /**
   * @model type="Book" opposite="author"
   */
  java.util.List getBooks();
}</pre>
</td></tr></table></td>
<td width="10%"></td>
<td width="45%"><strong><a target="_code" href="images/../java5/Writer.java">Writer.java</a></strong> (Java 5.0)<br/>
<table width="100%" border="1" frame="box"><tr><td>
<pre>package org.eclipse.example.library;

/**
 * @model
 */
public interface Writer
{
  /**
   * @model
   */
  String getName();

  /**
   * @model opposite="author"
   */
  java.util.List&lt;Book&gt; getBooks();
}</pre>
</td></tr></table></td>
</tr>
<tr><td colspan="3">&nbsp;</td></tr>
<tr>
<td width="45%"><strong><a name="bookcategorysrc" target="_code" href="images/../BookCategory.java">BookCategory.java</a></strong> (Java 1.4)<br/>
<table width="100%" border="1" frame="box"><tr><td>
<pre>package org.eclipse.example.library;

/**
 * @model
 */
public class BookCategory
{
  /**
   * @model name="Mystery"
   */
  public static final int MYSTERY = 0;

  /**
   * @model name="ScienceFiction"
   */
  public static final int SCIENCE_FICTION = 1;

  /**
   * @model name="Biography"
   */
  public static final int BIOGRAPHY = 2;
}</pre>
</td></tr></table></td>
<td width="10%"></td>
<td width="45%"><strong><a target="_code" href="images/../java5/BookCategory.java">BookCategory.java</a></strong> (Java 5.0)<br/>
<table width="100%" border="1" frame="box"><tr><td>
<pre>package org.eclipse.example.library;

/**
 * @model
 */
public enum BookCategory
{
  /**
   * @model name="Mystery"
   */
  MYSTERY,

  /**
   * @model name="ScienceFiction"
   */
  SCIENCE_FICTION,

  /**
   * @model name="Biography"
   */
  BIOGRAPHY;
}</pre>
</td></tr></table></td>
</tr></table>
</blockquote>

<p><a id="step1b_newEmptyEMFProj" name="step1b_newEmptyEMFProj">Create a new empty EMF project in the workspace:</a></p>

<ul>
<li>Bring up the "File/New/Project..." dialog.<br/>
<br /><img src="images/img101.gif" alt="File/New/Project..."/><br/>
&nbsp;</li>

<li>Expand "Eclipse Modeling Framework" and select "Empty EMF Project". Click
the "Next" button.<br/>
<br /><img src="images/img121.gif" alt="Empty EMF Project"/><br/>
&nbsp;</li>

<li>Give the project a name, say, "library", and click the "Finish" button.<br/>
<br /><img src="images/img122.gif" alt="Name the project"/><br/>
&nbsp;</li>

<li>The newly created project can be seen in the Package Explorer.<br/>
<br /><img src="images/img124.gif" alt="Library project"/><br/>
&nbsp;</li>
</ul>

<p><a id="step1b_newJavaInterface" name="step1b_newJavaInterface">Create the first Java interface:</a></p>

<ul>
<li>Right-click the "src" folder and select "New/Interface" from the pop-up
menu.<br/>
<br /><img src="images/img125.gif" alt="New/Interface"/><br/>
&nbsp;</li>

<li>Fill in the package and interface name. Click the "Finish" button.<br/>
<br /><img src="images/img126.gif" alt="Create new interface"/><br/>
&nbsp;</li>

<li>A new Java interface file is created and opened in the main view.<br/>
<br /><img src="images/img127.gif" alt="Opened interface"/><br/>
&nbsp;</li>

<li>Type (or paste) in the <a href="#librarysrc">Library.java</a> interface
code, as shown above. Pay special attention to the @model tags.<br/>
<br /><img src="images/img128.gif" alt="Enter interface code"/><br/>
&nbsp;</li>

<li>Select "Save" from the "File" menu to save the file.<br/>
<br /><img src="images/img129.gif" alt="File/Save"/><br/>
&nbsp;</li>
</ul>

<p>Create the other two interfaces (<a href="#booksrc">Book.java</a> and
<a href="#writersrc">Writer.java</a>) and the class
(<a href="#bookcategorysrc">BookCategory.java</a>) in the same way. Of course,
to create the class, select "New/Class" from the pop-up menu, instead of
"New/Interface".</p>

<p><a id="step1b_newEMFModJava" name="step1b_newEMFModJava">Create the EMF model:</a></p>

<ul>
<li>In the Package Explorer view, right-click the "model" folder and select
"New/Other..." from the pop-up menu.<br/>
<br /><img src="images/img130.gif" alt="New/Other..."/><br/>
&nbsp;</li>

<li>Expand "Eclipse Modeling Framework" and select "EMF Model". Click the
"Next" button.<br/>
<br /><img src="images/img131.gif" alt="EMF Model"/><br/>
&nbsp;</li>

<li>Change the file name to "library.genmodel" and click the "Next" button.<br/>
<br /><img src="images/img133.gif" alt="Change the file name"/><br/>
&nbsp;</li>

<li>Select "Annotated Java" and click the "Next" button.<br/>
<br /><img src="images/img134.gif" alt="Annotated Java"/><br/>
&nbsp;</li>

<li>Select the "org.eclipse.example.library" package and click the "Finish" button.<br/>
<br /><img src="images/img135.gif" alt="Select package"/><br/>
&nbsp;</li>

<li>An Ecore model (library.ecore) and a generator model (library.genmodel) will
be created. The latter, which controls code generation for the model, is opened
in the main view.<br/>
<br /><img src="images/img136.gif" alt="Opened generator"/><br/>
&nbsp;</li>
</ul>

<hr/>
<p style="text-align: right"><a id="step2" name="step2">&nbsp;</a><a href="#top">contents</a></p>
<h2>Step 2: Generate the EMF Model Code</h2>

<p>The generator model shows a root object, representing the whole model. This
model object has children that represent its packages, whose children then
represent classifiers (classes and datatypes, including enumerated types). The
children of classes are class attributes, references, and operations; the
children of enumerated types are enum literals.</p>

<ul>
<li>The model can be expanded to see its various elements.<br/>
<br /><img src="images/img201.gif" alt="Expanded generator model"/><br/>
&nbsp;</li>

<li>There are properties associated with each object. If the Properties view
isn't already showing, right-click the "Library" model object and select "Show
Properties View" from the pop-up menu, or simply double-click the "Library"
object.<br/>
<br /><img src="images/img202.gif" alt="Show Properties View"/><br/>
&nbsp;</li>

<li>These properties control the behavior of the code generator.<br/>
<br /><img src="images/img203.gif" alt="Generator model properties"/><br/>
&nbsp;</li>
</ul>

<a name="genmodelComplianceLevel"/>
<p>In most cases, the properites need not be changed from their default values,
but these options can provide a great deal of control over the code that gets
generated. One option worth pointing out is the second one in the image above, 
"Compliance Level". If you chose to exploit the new constructs introduced by Java 5.0 
in annotated Java interfaces, or you wish to generate code that makes use of generics, ensure this 
option is set to "5.0" or higher. Its initial value is based on the compiler compliance level property, 
which was illustrated above in Step 0.</p>

<p>The generator model is also the place where you initiate the code generation.
By right-clicking on an object in the model, you can generate code for it.</p>

<ul>
<li>Right-click the "Library" model object and select "Generate Model Code" from
the pop-up menu.<br/>
<br /><img src="images/img204.gif" alt="Generate Model Code"/><br/>
&nbsp;</li>

<li>Observe the generated files.<br/>
<br /><img src="images/img205.gif" alt="Generated files"/><br/>
</li>
</ul>

<p>After generation, the class interfaces and enum class will have been created
(if the model was imported from Rose) or completed (if the model was defined
using annotated Java), and a new pair of interfaces will have been created for
the package itself and for the factory. There will also be two new packages,
with "impl" and "util" suffixes, which contain implementations of the interfaces
and additional utility classes, and both types of manifest files for the model
plug-in: "plugin.xml" and "MANIFEST.MF".</p>

<p>If you defined the model by using annotated Java, you may see a warning in
the Problems view: "The import java.util.List is never used". This warning is
expected, and will not stop you from continuing on to the next step.</p>

<p>If you change the model, you can regenerate it, and changes will be merged
with any hand modifications that may have been made to the code. You can also
selectively generate a subset of the model code by right-clicking on a package,
class, or enum object and selecting "Generate Model Code" from the pop-up
menu.</p>

<hr/>
<p style="text-align: right"><a id="step3" name="step3">&nbsp;</a><a href="#top">contents</a></p>
<h2>Step 3: Generate an Editor for the Model</h2>

<p>A fully functional Eclipse editor can also be generated for any model. By
default, it is split between two plug-ins: an "edit" plug-in includes adapters
that provide a structured view and perform command-based editing of the model
objects; an "editor" plug-in provides the UI for the editor and wizard.</p>

<ul>
<li>In the generator, right-click the "Library" model object and select
"Generate Edit Code" from the pop-up menu.<br/>
<br /><img src="images/img301.gif" alt="Generate Edit Code"/><br/>
&nbsp;</li>

<li>Right-click the model object again and select "Generate Editor Code" from
the pop-up menu.<br/>
<br /><img src="images/img302.gif" alt="Generate Editor Code"/><br/>
&nbsp;</li>

<li>Observe the generated projects in the Package Explorer view, with "edit" and
"editor" suffixes.<br/>
<br /><img src="images/img303.gif" alt="Edit and editor projects"/><br/>
&nbsp;</li>
</ul>

<p>In general, if you wish to generate the model, edit, and editor plug-ins in a
single step, you can do so by selecting "Generate All" from the pop-up menu. </p>

<p>This will also create a tests plug-in, containing JUnit test skeletons for exercising any volatile features and operations defined in the model.  This model doesn't include any, but In general, you'll need to fill in the bodies of these tests, yourself.  The tests plug-in also includes a simple example class, which shows how to load and validate a model in a stand-alone application.</p>

<p>The code should be compiled automatically as it is generated, and should
recompile whenever it is changed. If you have disabled automatic building in the
workbench preferences, you can initiate compilation manually:</p>

<ul>
<li>Select "Build All" from the "Project" menu.<br/>
<br /><img src="images/img304.gif" alt="Project/Build All"/><br/>
&nbsp;</li>

<li>Observe the Problems view. If you imported the model from Rose, there should
be no errors in the library, library.edit, and library.editor projects.<br/>
<br /><img src="images/img305.gif" alt="No errors"/><br/>
&nbsp;</li>

<li>If you defined the model using annotated Java, there will be one warning in
the library project.<br/>
<br /><img src="images/img306.gif" alt="One warning: The import java.util.List is never used"/><br/>
&nbsp;</li>

<li>Double click the warning to see the line of code that is causing it. It
occurs because the code generator changed the return type of Library's two
multiplicity-many references from "List" to "EList", but did not remove the
unused import. You can simply delete it, or have Eclipse do it for you, by
selecting "Organize Imports" from the "Source" menu.<br/>
<br /><img src="images/img307.gif" alt="Source/Organize Imports"/><br/>
&nbsp;</li>
</ul>

<hr/>
<p style="text-align: right"><a id="step4" name="step4">&nbsp;</a><a href="#top">contents</a></p>
<h2>Step 4: Run the Generated Editor</h2>

<p>In order to test the new plug-ins, a second instance of Eclipse must be
launched. The plug-ins will run in this workbench.</p>

<ul>
<li>Select one of the projects and then choose "Run As/Eclipse Application"
from the "Run" menu or toolbar drop-down.<br/>
<br /><img src="images/img401.gif" alt="Run/Run As/Eclipse Application"/><br/>
&nbsp;</li>

<li>Wait for a second instance of the Eclipse platform to come up. Bring up the
"Help/About Eclipse Platform" dialog, click on the "Plug-in Details" button, and
verify that the generated plug-ins are there.<br/>
<br /><img src="images/img402.gif" alt="Generated plug-ins: library.editor, library.edit, library"/><br/>
&nbsp;</li>
</ul>

<p>The Library Model wizard can now be used to create a new instance of the
model.</p>

<ul>
<li>Bring up the "File/New/Project..." dialog.<br/>
<br /><img src="images/img101.gif" alt="File/New/Project..."/><br/>
&nbsp;</li>

<li>Expand "General" and select "Project". Click the "Next" button.<br/>
<br /><img src="images/img403.gif" alt="General Project"/><br/>
&nbsp;</li>

<li>Give the project a name and click the "Finish" button.<br/>
<br /><img src="images/img404.gif" alt="Name the project"/><br/>
&nbsp;</li>

<li>Right-click the project and select "New/Other..." from the pop-up menu.<br/>
<br /><img src="images/img405.gif" alt="New/Other..."/><br/>
&nbsp;</li>

<li>Expand "Example EMF Model Creation Wizards" and select "Library Model".
Click the "Next" button.<br/>
<br /><img src="images/img406.gif" alt="Library Model"/><br/>
&nbsp;</li>

<li>Enter a file name for the library model. Make sure it ends with
a ".library" extension. Then, click the "Next" button.<br/>
<br /><img src="images/img407.gif" alt="Name the library model file"/><br/>
&nbsp;</li>

<li>Select "Library" as the model object and click the "Finish" button.<br/>
<br /><img src="images/img408.gif" alt="Select the model object"/><br/>
&nbsp;</li>

<li>The newly created library model is opened in the main view.<br/>
<br /><img src="images/img409.gif" alt="New library model"/><br/>
&nbsp;</li>
</ul>

<p>The root object in this editor corresponds to the My.library resource. Under
it lies a single library, the object which was selected as the model object in
the wizard.</p>

<ul>
<li>Expand the "platform:/resource/librarytest/My.library" resource to see the
"Library" object. Select it.<br/>
<br /><img src="images/img410.gif" alt="Expanded resource"/><br/>
&nbsp;</li>

<li>If the Properties view isn't already showing, right-click the "Library"
object and select "Show Properties View" from the pop-up menu.<br/>
<br /><img src="images/img411.gif" alt="Show Properties View"/><br/>
&nbsp;</li>

<li>In the Properties view, click on the "Value" column of the "Name" property,
and give a name to the library. The label in the main view will be updated when
you hit Enter.<br/>
<br /><img src="images/img412.gif" alt="Name the library"/><br/>
&nbsp;</li>

<li>Right-click the library and select "New Child/Writer" from the pop-up menu.
A new writer is added to the library.<br/>
 <br /><img src="images/img413.gif" alt="New Child/Writer"/><br/>
&nbsp;</li>

<li>Enter the name of the writer in the Properties view.<br/>
<br /><img src="images/img414.gif" alt="Name the writer"/><br/>
&nbsp;</li>

<li>Similarly, a book can be added to the library.<br/>
<br /><img src="images/img415.gif" alt="New Child/Book"/><br/>
&nbsp;</li>

<li>All the book's attributes and references can edited in the Properties
view.<br/>
<br /><img src="images/img416.gif" alt="Book properties"/><br/>
&nbsp;</li>

<li>You can save, close, and then re-open the model using the text editor if you
wish to see the saved model in XMI format.<br/>
<br /><img src="images/img417.gif" alt="Open With/Text Editor"/><br/>
&nbsp;</li>
</ul>

<hr/>
<p style="text-align: right"><a href="#top">contents</a></p>
</body>
</html>