community/tutorials/DevelopingWTP/DevelopingWTP.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html >
<head>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="../../../..//default_style.css" type="text/css">
<link rel="stylesheet" href="../../../..//webtools/wtp.css" type="text/css">
<title>WTP Tutorials - Developing the WTP with Eclipse</title>
</head>
<body>
<table width="100%" cellspacing="5" cellpadding="2" border="0">
<tbody>
<tr>
<td width="60%" align="left"><font class="indextop">WTP Tutorials - Developing the WTP with Eclipse</font>
<br>
<font class="indexsub">WTP Tutorials - Developing the WTP with Eclipse</font></td><td width="40%"><img width="207" hspace="50" height="129" align="middle" src="../../../..//webtools/images/wtplogosmall.jpg"></td>
</tr>
</tbody>
</table>
<table width="100%" cellspacing="5" cellpadding="2" border="0">
<col width="16">
<col width="*">
<tbody>
<tr>
<td valign="top" align="right">&nbsp;</td><td valign="top">
<p>
			
<b>By Mark Hutchinson, IBM</b>
			
<BR>
Last updated on May 23, 2011 by <b>Nitin Dahyabhai</b>
<BR>
<BR>
		
</p>
</td>
</tr>
<tr>
<td valign="top" align="right">&nbsp;</td><td valign="top">
<p>
			This tutorial shows you how to set up your Eclipse
			environment to develop or modify the Web Tools Platform (WTP) project plug-ins. First 
			we will discuss how to connect to the CVS repository to check
			out the WTP source code. We will then set up our Target Platform.
			Next we will make a modification to the WTP source and run
			our Eclipse Application.  Finally, we will create a patch
			for our change, which we could submit to the WTP project.
		</p>
		<p>
		To follow this tutorial, you will need either the <a
		  href="http://download.eclipse.org/eclipse/downloads/"
		>Eclipse SDK</a> or otherwise have the Eclipse Plug-in Development
		Environment (PDE) installed. It will also be much simpler if WTP is
		already properly installed and running. <b>Use of the versions of Eclipse and the
		Prerequisites listed on the <a
            href="http://download.eclipse.org/webtools/downloads/"
        >download</a> page is strongly encouraged.</b>  A working knowledge of Eclipse
		concepts such as the Workbench, Editors, and Views, is also required.
		For more information about these concepts, consult the <i>Workbench
		User Guide</i>.
		</p></td>
</tr>
<tr>
<td valign="top" align="right">&nbsp;</td><td valign="top">
<br>
</td>
</tr>
<tr>
<td valign="top" bgcolor="#0080c0" align="left" colspan="2"><b><font face="Arial,Helvetica" color="#ffffff">Getting the Source Code</font></b></td>
</tr>
<tr>
<td valign="top" align="right">&nbsp;</td><td valign="top">
<ol>
			
<li>
			Access the source code for the Eclipse Web Tools Platform
			from the Concurrent Version System (CVS) repository.
			To access the CVS repository select <b>Window &gt; Open
			Perspective &gt; Other</b>
 and select <b>CVS Repository Exploring</b>.
            <br>
<br>
</li>
			
<li>
 The
 			<b>CVS Repositories</b> view is now on the left side of your
			screen. Select the Add CVS Repository icon
			<img src="images/addrepositoryicon.gif" alt="Add Repository Icon" width="25" height="23" border="0">
			and in the Add CVS repository dialog enter the following values:
			<br>
			
<b>Host:</b>
            dev.eclipse.org
            <br>
            
<b>Repository Path:</b>
            /cvsroot/webtools
            <br>
            
<b>User:</b>
			anonymous
			<br>
<b>Password:</b>
			You can leave this blank, but it's courteous to use your email address.
			<br>
<b>Connection type:</b>
            pserver, on the default port
            <br>
<img src="images/addrepository.png" width="436" height="538" border="0" alt="Add CVS Repository">
            <br>
            Select Finish.          
			<br>
			
<br>
            
</li>
			
<li>
			Navigate through the folders and find the plug-ins that you
			are interested in having the source for. The most recent
			code is in HEAD. The subprojects listed on the  
			<a href="http://www.eclipse.org/webtools/">WTP</a> home page
			each have an area in the WTP CVS repository under which you'll
			find their features, plug-ins, documentation, examples, and other
			development goodies. For this tutorial	we will modify the XML
			UI plug-in, <b>org.eclipse.wst.xml.ui</b>, which is part of WTP's
			Source Editing project. 
			The corresponding workspace project's folder can be found in the CVS repository as
			<b>sourceediting/plugins/org.eclipse.wst.xml.ui</b> under HEAD.
			
<br>
<br>
</li>
            
<li>
			Add the source into your local workspace by choosing <b>Check Out</b> from its context menu.
			<br>
			
<img src="images/repositories.gif" alt="check out source code" width="583" height="883" border="0">
			<br>
			
<br>
            
</li>
			
<li>Switch back to the Java perspective. The plug-in will now be a project
	in your workspace. Although not runnable in this form, Plug-in Projects
	such as this fill many a Committer's workspace.</li>
		
</ol>
</td>
</tr>
<tr>
<td valign="top" align="right">&nbsp;</td><td valign="top">
<br>
</td>
</tr>
<tr>
<td valign="top" bgcolor="#0080c0" align="left" colspan="2"><b><font face="Arial,Helvetica" color="#ffffff">Using a Target Platform</font></b></td>
</tr>
<tr>
<td valign="top" align="right">&nbsp;</td><td valign="top">
<p>
			The <b>Target Platform</b> contains the Eclipse plug-ins
			which your workspace projects
			will be compiled against.  Having all of your own plug-ins as well as their dependencies
			in your workspace as plug-in projects means Eclipse will be spending time on code you aren't
			actively working on.
			A well prepared Target
			Platform prevents this but still allows you to compile and run your modified code,
			all while using fewer resources.  The default target platform is the Eclipse installation you
			are using.  For more information on setting up Target Platforms, consult the <i>Plug-in Development Environment Guide</i>.
</p>
</td>
</tr>
<tr>
<td valign="top" align="right">&nbsp;</td><td valign="top">
<br>
</td>
</tr>
<tr>
<td valign="top" bgcolor="#0080c0" align="left" colspan="2"><b><font face="Arial,Helvetica" color="#ffffff">Making your changes</font></b></td>
</tr>
<tr>
<td valign="top" align="right">&nbsp;</td><td valign="top">
<p>
			As an example, we are going to add a new action to the context menu
			on XML files in the Navigator view.  First we need to add an <b>extension</b>
			to the plugin.xml file.
		</p>
</td>
</tr>
<tr>
<td valign="top" align="right">&nbsp;</td><td valign="top">
<ol>
			
<li>
			Open the <b>plugin.xml</b> file for the
			<b>org.eclipse.wst.xml.ui</b> plug-in project you just checked out.
            <br>
<br>
</li>
            
			
<li>
			Add the following to the source of plugin.xml:
			<pre>
&lt;!--  =============================================================================== --&gt; 
&lt;!--     My Popup Menu (the label value is externalized to allow for translations)    --&gt; 
&lt;!--  =============================================================================== --&gt;
&lt;extension point="org.eclipse.ui.popupMenus"&gt;
	 &lt;objectContribution 
	 	objectClass="org.eclipse.core.resources.IFile" 
	 	nameFilter="*.xml" 
	 	id="org.eclipse.wst.xml.ui.actions"&gt;	
	  	&lt;action
	  		label="%SHOW_MESSAGE_DIALOG_LABEL"
	  		class="org.eclipse.wst.xml.ui.internal.actions.MyMessageDialog"
	  		menubarPath="#additions"
	  		adaptable="true"
	  		enablesFor="1"
	  		id="org.eclipse.wst.xml.ui.actions.PopUp" /&gt; 
	  &lt;/objectContribution&gt;
&lt;/extension&gt;
			</pre>
            
</li>
			
<li>Add the following to the <b>plugin.properties</b> file.  This will be the 
            text of the label that appears in your new pop-up menu.
<pre>
#Label to be added to the pop-up menu
SHOW_MESSAGE_DIALOG_LABEL = Show a Message Dialog
</pre>
<br>
</li>
            
<li>
			In the <b>Project Explorer</b> or <b>Package Explorer</b> expand "src" and right click on
			org.eclipse.wst.xml.ui.internal.actions and select New Class.
<img src="images/newclass.png" alt="invoking the New Class wizard">
            <br>
            <br>

			Name this class <b>MyMessageDialog</b>.
            <br>
<br>
</li>
			
<li>
			Add this source code to MyMessageDialog.java:
			<pre>
package org.eclipse.wst.xml.ui.internal.actions;

import org.eclipse.jface.action.IAction;
import org.eclipse.jface.dialogs.MessageDialog;
import org.eclipse.swt.widgets.Shell;
import org.eclipse.ui.PlatformUI;
import org.eclipse.ui.actions.ActionDelegate;

public class MyMessageDialog extends ActionDelegate {
    public void run(IAction action) {
        Shell shell = PlatformUI.getWorkbench().getActiveWorkbenchWindow().getShell();
        String labels[] = new String[1];
        labels[0] = "OK";
        MessageDialog message = new MessageDialog(shell, "My Message Dialog", null, "I have modified eclipse!", 2, labels, 1);
        message.open();
    }
}
			</pre>
            
</li>
		
</ol>
</td>
</tr>
<tr>
<td valign="top" bgcolor="#0080c0" align="left" colspan="2"><b><font face="Arial,Helvetica" color="#ffffff">Running with your changes</font></b></td>
</tr>
<tr>
<td valign="top" align="right">&nbsp;</td><td valign="top">
<ol>
			
<li>
			In the Java perspective, from the menu bar select <b>Run</b> &gt; <b>Run Configurations...</b>.
            <br>
<br>
</li>
			
<li>
			In the Run dialog select the <b>Eclipse Application</b> option,
			then select new.
            <br>
<br>
</li>
			
<li>
			Enter the location of the desired workspace (or accept the default), and select <b>Run</b>.
           
			<br>
			
<img src="images/run.gif" alt="run" width="800" height="640" border="0">
            </li>
		
</ol>
</td>
</tr>
<tr>
<td valign="top" align="right">&nbsp;</td><td valign="top">
<p>
			When this Eclipse Application is run, it's essentially running the configured Target
			Platform, except that the plug-in projects in your
			workspace are used instead of the corresponding plug-ins in the target.
		</p>
</td>
</tr>
<tr>
<td valign="top" align="right">&nbsp;</td><td valign="top">
<p>Now test out your modification:</p>
</td>
</tr>
<tr>
<td valign="top" align="right">&nbsp;</td><td valign="top">
<ol start="4">
			
<li>
			We need a project in the workspace to test this on. Select
			<b>File &gt; New &gt; Example &gt; Editing and Validating XML Files</b>.
            <br>
<br>
</li>
			
<li>
			Right click on any XML file, for example Invoice.xml. Notice
			that the new option "Show Message Dialog" has been
			added to this menu.
			<br>
			
<img src="images/myaction.png" alt="menu" border="0" width="388" height="488">
			<br>
			
<br>
            
</li>
			
<li>
			Select "Show a Message Dialog." A message dialog appears.
			<br>
			
<img src="images/dialog.png" alt="My Message Dialog" border="0" width="441" height="136">
            </li>
		
</ol>
</td>
</tr>
<tr>
<td valign="top" align="right">&nbsp;</td><td valign="top">
<br>
</td>
</tr>
<tr>
<td valign="top" bgcolor="#0080c0" align="left" colspan="2"><b><font face="Arial,Helvetica" color="#ffffff">Creating a Patch for your Modification</font></b></td>
</tr>
<tr>
<td valign="top" align="right">&nbsp;</td><td valign="top">
<p>
			To contribute an enhancement to WTP, you can submit
			your code changes as a patch.
		</p>
</td>
</tr>
<tr>
<td valign="top" align="right">&nbsp;</td><td valign="top">
<ol>
			
<li>In the Project or Package Explorer view, right click on the modified Plug-in 
			Project and select Team &gt; Create Patch.
			<br>
			
<img src="images/createpatchmenu.png" alt="select Team > Create Patch" >
			<br>
<br>
			
</li>
            
<li>Select "Save in File System" and enter the file name.  Select Next.
			<br>
			
<img src="images/createpatch.png" alt="Create Patch" >
			<br>
<br>
			
</li>
            
<li>Ensure the Diff Output Format is set to "unified."  Select Finish.<br>
<br>
</li>
			
<li>The patch has been saved to your file system.  If this were an actual feature 
			enhancement the patch could be submitted to the WTP project as an attachment using
			<a href="https://bugs.eclipse.org/bugs/">
			Bugzilla
			</a>.
            
</li>
		
</ol>
</td>
</tr>
<tr>
<td valign="top" align="right">&nbsp;</td><td valign="top">
<br>
</td>
</tr>
<tr>
<td valign="top" bgcolor="#0080c0" align="left" colspan="2"><b><font face="Arial,Helvetica" color="#ffffff">Summary</font></b></td>
</tr>
<tr>
<td valign="top" align="right">&nbsp;</td><td valign="top">
<p>In this tutorial you learned how to set up your Eclipse environment to get started developing 
		Web Tools Platform plug-ins by creating a simple addition to the user interface.
		</p>
</td>
</tr>
<tr>
<td valign="top" align="right">&nbsp;</td><td valign="top">
<p></p>
</td>
</tr>
<tr>
<td valign="top" align="right">&nbsp;</td><td valign="top">
<p></p>
</td>
</tr>
</tbody>
</table>
</body>
</html>