Thursday, 7 May 2015

Build your own Dart Editor with the Eclipse Dart Plugin

Beginning with release 1.11 the Dart project will discontinue the Dart Editor and promote WebStorm as the preferred IDE solution for Dart developers. Dart support will be provided using a WebStorm plugin which will be developed alongside the still-maintained Eclipse plugin. So while the standalone Dart Editor will no longer be provided the Eclipse plugin can still be used to create a free alternative to the commercial WebStorm IDE.

The Dart Editor combined a customised version of the Eclipse IDE with the Dart development tools, the Dart plugin and components from the Eclipse Web Tools Platform. By replacing the custom IDE with the standard Eclipse platform binary it is possible to assemble a replacement Dart Editor using these same components.

This post provides step-by-step instructions for assembling such an Eclipse-based IDE for Dart. No knowledge of Eclipse is assumed; experienced Eclipse users may want to skip certain explanatory sections.

As with the Dart Editor, a Java runtime environment (version 7 or 8) is required to run the Eclipse development tools.

Finally, these instructions are for a 32-bit Windows system, but as Eclipse is a cross-platform product the installation process should be similar for users of other operating systems.

Warning to Windows users

At the time of writing there is an issue with Eclipse's handling of the symlinks used to manage packages. This affects Windows users only and will hopefully be resolved in the near future. In the meantime there are certain restrictions you should be aware of regarding deleting project resources from within Eclipse. See this blog post for more details.

1. Install Eclipse

The first step is to download the Eclipse platform package from the Eclipse project website.

Select the latest stable release and download the Platform Runtime Binary package. At the time of writing the latest version is 4.4.2, codenamed Luna. For later releases be sure to substitute the appropriate version number and codename in the following instructions where necessary.

You should now have a file named something like this: (Make sure you have the platform, not the SDK or other variant.)

There is no installer for Eclipse, simply unpack the file to a location of your choice. This will create a directory named eclipse which will form the root directory of the IDE. All the remaining components will be assembled in here so once complete the IDE will be completely self-contained.

2. Install the Dart tools

Next we need to add the Dart tools; download the SDK and Dartium packages from the Dart project website.

You should now have two zip files:

Extract the contents of each; this will create two directories, one for each of the two packages. Rename the dartium directory to chromium and move both into the eclipse directory which should now look like this:

3. Install the Eclipse Web Tools

The Eclipse Web Tools Platform provides support for editing HTML, CSS and JavaScript files.

Like all Eclipse components these are installed by downloading the appropriate packages from online Eclipse repositories known as update sites. The Web Tools are available from the update site associated with the release of Eclipse we are using, in this case Luna. Component installation is performed from within Eclipse so first we need to get Eclipse up and running.

Locate the Eclipse binary (eclipse.exe) and double-click to start it. When prompted select a location for your workspace. This will provide a home directory for your Dart projects and can be anywhere you like, in this example I am using a Dart directory within my documents folder.

Once Eclipse has finished loading, open the Help menu and select Install New Software.

Click the down arrow in the Work with field to open the list of update sites available. Click the Luna update site to select it; Eclipse will begin retrieving the list of available packages. Wait for the list to be retrieved (this may take a while). Once the package tree view has been populated scroll to the bottom and open up the section named Web, XML, Java EE and OSGi Enterprise Development (click the arrow next to it to open the tree node).

Now select Eclipse Web Developer Tools by checking the box and click Next to begin the installation.

Click Next, accept the license agreement and click Finish. The selected packages will be downloaded and installed. Allow Eclipse to restart when prompted.

4. Install the Dart plugin

Now repeat the package installation process for the Dart plugin; go to the Help menu and select Install New Software. This time we need to add the update site for the Dart plugin. Click the Add button and enter the following path for the site location:

Click OK. After a short pause the Dart package should appear.

Check the box to select it, click Next and complete the wizard as before. Again, restart Eclipse when prompted.

Will all the components in place we now need to finalise the installation by preparing Eclipse for use.

Eclipse-based IDEs support the concept of perspectives which provide customised layouts for the various development scenarios supported by the IDE. By default, Eclipse will start in the Resources perspective. We want to close this and open the Dart perspective instead.

Close the opening 'welcome' screen by clicking the Workbench icon in the upper right of the window.

 Next click the perspectives button to the right of the toolbar (see the green arrow) ...

... and select Dart from the list of available perspectives.

The Dart perspective will be activated. Finally, close the Resource perspective by right-clicking its button and selecting Close.

That's it! Your new Dart IDE is ready for its first project.

5. Create a Dart project

From the file menu select New, then Project; select Dart Project from the project types presented. Click Next to advance to the Dart project wizard. After a short delay the available project types will be presented.

Enter a name for the project in the text field and select Uber Simple Web Application from the list. Click Finish to create the project.

The default content will be created and various Dart tools will run to retrieve the necessary packages and begin analysing the project. Once this has finished you can run the project. As with the Dart Editor, projects are run using the green arrow button in the toolbar (the one without the toolbox icon) Click the button and select Dartium Launch to open the app in Dartium. All being well the project should load and display the correct output.