Getting Started with Eclipse Part 1

When I went to the Zen Cart Conference in Toronto in April, I had the great pleasure of meeting Peter Coles, owner and operator of Kuroi, a web design firm based in the UK. Peter is definitely one of the best developers I’ve seen bubble up from the Zen Cart community (along with team member Chris Brown). For the meeting, Peter put together a fantastic tutorial on Eclipse, the premier integrated development environment (IDE). I played with Eclipse in the past, but it’s so overwhelming initially that I never got the hang of it; Notepad++ always suited me just fine. Peter did a great job making the system approachable, including a step-by-step guide specifically targetting PHP developers. Needless to say, I saw the shortcomings of my simple text editor, and am currently tackling this beast.

With Peter’s permission I am happy to share his tutorial from the Toronto conference here with you (minor edits made for consistency). Today’s segment covers why Eclipse was a good choice for Peter and Kuroi (and why it’s a good choice for you!). Later this week I’ll post the actual steps for setting up Eclipse. Enjoy!

At Kuroi, we have been considering for a while a move away from Dreamweaver, to a tool that is better able to support the type of work that we are do. We both have developer backgrounds and do the vast majority of our work, development and styling, by hand coding rather than by use of the WYSIWYG interface that is one of DW’s main strengths. Our search was motivated by growing awareness that DW simply isn’t designed for our way of working. In effect it was a glorified editor with a few nice features. We were sure that there would be an IDE (or IDE’s) that would more closely match our preferences and offer additional features that would streamline our workflow. The ideal IDE would therefore give us everything we actually use in Dreamweaver and some nice goodies to make the transition worthwhile. This all comes with the huge caveat that I’m still at an early stage of learning how to use Eclipse, but even at this early point, I’m seeing more than enough benefits to recommend that Kuroi makes the switch. Why Eclipse? I looked (briefly) at a number of IDEs and one in particular in depth. Aptana is gaining in popularity amongst designers, largely because of its support for AJAX development. It has a PHP add-in and also one for AIR, which made it particularly interesting. However, I was unimpressed with its PHP editor and PHP support generally, and the discovery that it didn’t support the deployment of files across a network (i.e. to our test server). However, Aptana Studio is built on Eclipse, thus drawing my attention back in that direction. Eclipse comes from the non-profit Eclipse Foundation which includes representatives from (amongst others) IBM, HP, Red Hat, SuSE, Ericsson, Intel, SAP, and more recently (and significantly for PHP development) Zend. The current version of Zend Studio is being sold in two forms: a stand-alone version and one built on Eclipse, which in my view is the first step in a Zend strategy to move all of its customers to the Eclipse-based version. One license fee gets you both versions. Another factor that drew our attention here at Kuroi was that Adobe (owners of Dreamweaver and the Flash IDE) are now basing the Flex IDE (that’s the one used to Flash movies using a programming language) on Eclipse. Now that’s a vote of confidence! So Eclipse is stable, well-supported, and building up some serious momentum, as well as providing a consistent approach to tackling an unprecedentedly wide variety of development types that previously would have required very different development tools. Oh, and it’s free! For us cost isn’t the primary concern, and I have also evaluated Zend Studio on Eclipse against Eclipse PDT (PHP Development Tools). But I struggled at first to find differences. They are there. The debugging is reputedly better integrated, code deployment is easier and there will surely be differences in the integration of other Zend services. But most of the basic stuff we do in DW is covered by the base functionality in Eclipse so there didn’t seem a need to splash out $399 per workstation (and we have several) at this point. However, if those extras were needed in the future, it would be possible could upgrade to Zend and benefit from the knowledge and working practises derived from use of the underlying package as the icons, look & feel and underlying paradigms are that similar, and Zend is structured as an increment to the base package. This would be true of other tools too. The problem that I had with Aptana not supporting a network server arose in Eclipse too. I solved it by using an Eclipse plug-in and since Aptana is based on Eclipse, I had to try…and yes, it worked there too, and have a growing belief that it would work in any Eclipse-based application. And as you will see there proved to be another major benefit to this inter-operability. Anyway, enough raving… What do we want from it to match our Dreamweaver workflow? We rely upon (in no particular order): * Syntax Colouring * Snippets * Code folding * File Manager * Working File Segregation with local and remote deployment * Code Search (current project and whole Zen Cart distro) * File Compare * Parenthesis Matching

So can Eclipse offer these? Syntax Colouring

This is available by default and can be configured through Window > Preferences > PHP > Editor > Syntax Coloring Snippets

There is a snippets view allowing common code blocks to be saved and quickly re-used. Snippets can also be exported and imported (useful for sharing). However, code completion and code templates offer even faster way of inserting blocks of code or functions in may situations. Code Folding

Code folding is available but unlike Dreamweaver files are opened with comment blocks and functions already foldered. This is bliss (though if you don’t like it, it can be turned off too). It is so much quicker to locate specific bits of code in large files (and this is just one of the tools that helps in this. File Manager

Eclipe’s PHP Explorer view offers a file tree similar to the file manager in Dreamweaver, but goes wider. At the top end it includes projects (rather than them being separate entitles that you must switch between à la DW). At the bottom end it allows you to drill down into some files. For example, it is possible to drill down into classes or other files containing ph functions and select a specific function or method. The relevant file will be opened with all functions closed (see above) except for the specific one selected (more bliss). Working File Segregation and Deployment

At Kuroi we typically work with Zen Cart and Drupal, both of which are large file sets. So we segregate the files which we have changed or created from the full code set for the underlying application, and use DW to deploy our files to environments with a full installation for testing or delivery. DW allows us to define a local, test and remote file set and switch between them. Eclipse is focused differently. It appears to be good at supporting projects based around code repositories but weak at simply transferring files to another server across a network or by FTP (or similar). However this can be dealt with. The top ranked plug-in for Eclipse is FileSync. Installation is a breeze (and will be covered), and once in place it allows the files in a project to be linked to an external file set, such as those on our test server. Editing and saving a file in the project, automatically updates the equivalent external file. Precisely which files get updated can be set at folder or file level (as opposed to DW’s cloaking facility, which only allows folders to be excluded from updates). Although there is an FTP facility originally developed by IBM, it appears to have a poor reputation and wasn’t easy to install (i.e. I didn’t manage it). However, Aptana’s FTP has a good reputation, and I was able (easily) to add it to Eclipse (details below). Like DW it allows bi-directional synchronization, but in place of upload and download there is a unidirectional synchronization, and no drag and drop. Code Search (current project and whole Zen Cart distro)

Search is easily accessed by a keyboard short cut or a button on the navigation bar. The modular nature of Eclipse, and the way I have built my install, means that I have ended up a choice of four slightly different search facilities! I suspect that I could trim that down if I wished, but it’s not inconvenient. Searching brings up a results window, as in DW, but rather than showing the searched for term in context, it shows a file tree. Clicking on a result will open the file and take you to the first result in the file, or you can use the search result navigation buttons to navigate through the results, weed them or re-run a previous search. Oh, and you can do replacement too. File Compare

DW allows the integration of third-party file comparison tools (one of us uses WinMerge, the other Beyond Compare). Eclipse has file comparison built in and when I say file comparison, I mean file compare on steroids. It will compare folders and their contents or individual files. The options available depend on the context; but contain at least “base from working copy”, “latest from repository”, “URL”, “branch”, “tag”, “each other” and “local history.” That last one means that a file can be compared with its own history, nice! There is also “help” available for three way comparisons though my poor, exploding brain isn’t ready for that yet. Parenthesis Matching

Only joking. DW doesn’t do this. So we both switch regularly into Notepad++ which does, just for this. Happily it’s built in to Eclipse. What Extra Goodies can Eclipse give us? Well, that’s all the boxes ticked for what we do now. Is there anything new? Well, yes. Heaps. I can only scratch the surface here. Subversive SVN

One of the modules that can be added into Eclipse is Subversive. An official Eclipse project, this add-in claims to use an extended API allowing it to offer features for working with SVN repositories that aren’t available in other packages. I don’t have enough experience of SVN to gauge the validity or benefits of this. But I do like being able to update SVN repositories from within my IDE with a single click. I haven’t yet attempted to upload to a repository from Eclipse, but suspect that it would prove very simple to do. Code Assist

Start to type a function and then press ctrl-space and up will pop a tool tip with all functions matching what has been typed so far and all functions that match what has been typed so far are made available in the a hover window for selection. Also available are details of the parameters taken by the function. The same can be done for defined constants, for which information about where they have been declared and their value is also displayed. But it gets better. The functions and constants available via code assist don’t have to be restricted to those in the current project or built into PHP. It is possible to include a reference to another project, including a project linked to an SVN repository, and have all functions in that project also included in code assist. And it gets even better still! If I instantiate a new class, and then type the name which I have assigned to it plus -> (e.g. $newOrder->) up pops a list of the methods available to this instance. Amazing. Code Formatting

There’s a neat little add-in that can be applied to most editors to do things like convert all tabs to two spaces and any strip whitespace from the end of lines automatically whenever a file is saved, so you never need to worry about this again. Multiple Editors

The extent to which this is a benefit or not is arguable, but an Eclipse installation will typically have several specialist editors, rather than DW’s jack-of-all-trades. Happily they work rather well together so, for example, I have been able to construct a template file with the Aptana HTML editor, taking advantage of its HTML code assist and completion facilities, and then switch to the PHP editor to insert the dynamic content. This is much less clunky than it sounds, since you can have the same file open in two editors at the same time and any changes made in one are immediately visible in the other. PHP Project Outline

This offers a tree view of all constants, classes and functions in a project and the ability to jump straight to where each is declared. Outline View

By default this is set to show the outline of a PHP file and is very useful for providing a quick overview of php scripts with classes and functions, which can be displayed in several different ways. Go to a template file and switch the view over to HTML and it displays an equally useful overview of the tag structure. Real-time Syntax Validation

Eclipse checks your syntax as you type. If it detects a problem, it puts a little white cross on a red background next to the file and relevant line. There is a setting in the preferences that allows you to hover over the indicator in the file to see why it has been flagged. Auto Insertion of phpDoc Comment Blocks

Write a function or method and go back to insert a comment block and Eclipse can scan what you’ve written and insert a part completed comment block, which will also contribute automatically to your project’s code assist.

Check back later this week for the follow-up, where Peter will go in depth on just how to get Eclipse going on your system, with all the features he has described above! You can save yourself the effort by simply joining the RSS feed.