Setting up your workstation for Joomla! development

Jump to: navigation, search

Contents

Note: This article should be accurate as of August 2008. Eclipse is working on a new release of the PDT (PHP Development Tools), so this article will need to be revised as new Eclipse PDT releases are made available. If you find any errors with this document or have any suggestions for improvement, please post a topic on the Developer Documentation Forum.

Introduction

This article provides detailed instructions for setting up your workstation for Joomla! development. Note that there are many possible configurations for doing Joomla! development. Any environment that supports Apache, MySql, PHP, and Subversion should work for writing Joomla! code and extensions.

This document provides step-by-step instructions for setting up and working with the Eclipse IDE. The example used and screenshots are for Windows XP, but the basic steps will be the same for Linux.

Install XAMPP

XAMPP is an easy-to-install package that bundles the Apache web server, PHP, and the MySql database. This allows you to create the environment you need to run Joomla! on your local machine. The latest version of XAMPP is available at the XAMPP web site.

Downloads are available for Linux, Windows, Mac OS X and Solaris. Download the package for your platform. Installation is very simple. For Windows, you can use the XAMPP installer executable (for example, "xampp-win32-1.6.7-installer.exe"). For Linux and Mac you can just extract the download. Refer to the XAMPP web site for detailed instructions. Also, for Windows there are detailed instructions for installing XAMPP in the Joomla! 1.5 Quickstart Guide.

For Windows, I created my "XAMPP home" directory as "c:\xampp". This means that my Joomla! (and any other local web site folders) will do into the folder "c:\xampp\htdocs". (By convention, all web content goes under the "htdocs" folder.)

Once XAMPP is installed, you can test it by opening your browser and navigating to "http://localhost". You should see the XAMPP welcome screen as shown below.

Image:Xampp_screen.png

Select the link called "phpinfo()" in the left-hand menu. This will display a long screen of information about the PHP configuration, as shown below.

Image:Xampp php info.png

At this point, XAMPP is installed successfully. Notice the "Loaded Configuration File" which is highlighted in the screenshot above. We will be editing this file in the next section to configure XDebug.

Install XDebug

Download Executable (Windows)

For Windows, installing XDebug is very simple. You just download the latest Windows Module for PHP 5.2.X from xdebug.org, as shown below.

Image:Xdebug_download.png

In this case, the downloaded file is "php_xdebug-2.0.3-5.2.5.dll". The exact version number will change over time, so you might see a later version. Once you have downloaded the file, copy it into the folders "c:\xampp\php\ext" and "c:\xampp\php\extensions".

Compile XDebug Source (Linux)

For Linux, you will need to compile the XDebug source. Instructions are available at the XDebug web site.

Edit PHP.INI File

Next we will edit the "php.ini" file to configure XDebug. The "Loaded Configuration File" in the screenshot above tells you what "php.ini" file is being used. In our case this is "c:\xampp\apache\bin\php.ini".

We need to edit this file to configure XDebug as follows:

  1. Find the line "implicit_flush" and set it as follows:
implicit_flush = On
  1. Find the section called "[Zend]" and comment out all of the lines by putting a semi-colon (";") at the start of each line.
  2. Add the following lines to the end of the file. Note that the name of the DLL file must match the file you downloaded and copied.
[xdebug]
xdebug.remote_enable=1
xdebug.remote_host="localhost"
xdebug.remote_port=10000
xdebug.remote_handler="dbgp"
zend_extension_ts = "C:\xampp\php\ext\php_xdebug-2.0.3-5.2.5.dll"

Test XDebug Installation

Now, we need to check that XDebug is installed correctly. To do this, we need to re-start XAMPP. In Windows, we can just browse to the "c:\xampp" folder in Windows Explorer and double-click the program "xampp-control.exe" to open the application shown below.

Image:Xampp-control.png

Press the "Stop" button for "Apache". The button with then read "Start". Press "Start" for Apache and wait a few seconds and the green "Running" message will again display. Then press "Exit" to close the application.

Finally, we will again open a browser and navigate to "http://localhost" to display the XAMPP welcome message. Press the "phpinfo()" link again to display the PHP information screen. Scroll down to the lower part of the screen. You should see a section for "XDebug" as shown below.

Image:Phpinfo_xdebug.png

Look at the settings you entered in the "php.ini" file above. You should see these same settings in the xdebug display, as shown below.

Image:Xdebug settings.png

At this point, XDebug is set up correctly.

Install Eclipse

Install Java

Eclipse is written in Java, so before you can install Eclipse, you need to make sure you have a recent version of Java running. Note that many Linux distributions include third-party Java runtimes (or JVM's for "Java Virtual Machine"), some of which don't work with Eclipse. The safest thing is to make sure you are running the Sun JRE (Jave Runtime Environment). You can download the latest Java version at www.java.com. If you already have a recent version of the Sun JRE (for example, 1.5 or 1.6), you can skip this step.

Download Eclipse

The next step is to download Eclipse. The easiest thing is to install the Eclipse PDT (PHP Development Tools) "all-in-one" bundle. This is available here. There are downloads for Windows, Linux, and Mac OS X. When you download, you will be asked to pick a download mirror. At the time of this writing, the name of the Windows download is "pdt-all-in-one-S20080601_RC2-win32.zip" and is 122mb.

Installing Eclipse is very easy -- you just unzip the file to a target directory. In Windows, it is best to use a third-party "zip" program to do the unzipping. In some cases, Windows Explorer will not correctly unzip this archive and Eclipse won't run correctly. I use

I created a directory called "c:\eclipse_php" for the target. When the file is extracted, you will see a folder called "eclipse" and under that folder 5 folders and six files.

Eclipse will use the default Java JVM for your system. In Windows, this is normally the right one (from Sun). In some Linux distributions, the default JVM may be a third-party program that doesn't work correctly with Eclipse. In this case, you can specify the JVM to use by editing the eclipse.ini file in the eclipse folder as as follows, substituting the correct path to your installed Sun version of the Java JVM:

-showsplash
org.eclipse.platform
--launcher.XXMaxPermSize
128M
-vm
/usr/lib/jvm/java-1.5.0-sun/jre/bin/java
-vmargs
-Xms512m
-Xmx1024m

Note that the path to the JVM goes on the line below the "-vm". Also note that the file ends with a blank line.

At this point, you should be able to start up Eclipse. Just find the "eclipse.exe" file inside the eclipse folder and double-click to execute it.

Alternative (Easy) Installation

An alternative way to install Eclipse with the phpEclipse environment is to use EasyEclipse for PHP. This includes everything you need (including Subclipse) in one simple install for most platforms.

Create an Eclipse Workspace

The first time you launch Eclipse, the screen below displays.

Image:eclipse_workspace_default.png

Before we can start using Eclipse, we need to create a workspace. This is the folder where all of the Eclipse files and project information will be stored. Since we will be working on web-based projects, we want our project PHP and HTML files to be visible to XAMPP. So we will create our workspace in the "c:\xampp\htdocs" folder.

To do this, press the Browse button, navigate to the "c:\xampp\htdocs" folder, and press the New Folder button. Create a directory called something like "joomla_development" and make sure it says the same thing in the Folder field. (You can click on a different folder and then click on the new folder to get the name in the Folder field.) The screen should look like the one below.

Image:eclipse_workspace_new.png

Press OK. Then we go back to the Workspace Launcher, as shown below.

Image:Eclipse_workspace_created.png

Before pressing OK, you can check the box so that you won't need to go through this screen each time you start Eclipse.

Now you should see a splash screen and then a "Welcome to Eclipse" screen, as shown below.

Image:Eclipse_welcome.png

Close this window and the normal Eclipse workbench will display, as shown below.

Image:Eclipse_workbench.png

At this point, Eclipse is installed.

Configure Eclipse

Configure XDebug

The first thing we need to do is to tell Eclipse to use the XDebug we installed earlier. Navigate to Window / Preferences, as shown below.

Image:Window_preferences_menu.png

This will open the Preferences dialog. Expand the PHP node on the left and select "Debug" to display the screen below.

Image:Debug_preferences.png

Notice that the "Break at first line" box is checked. This means that the debugger will always break or suspend execution at the first line of code. We'll see this later on when we run the debugger.

Select XDebug for the PHP Debugger. You might get the message below.

Image:Debug_port_message.png

If so, just ignore it and press OK. (We're going to change the ports now anyway.) Press the "Configure" link for the PHP Debugger to display the screen below.

Image:Installed_debuggers.png

Highlight the XDebug line and press Configure to display the screen below.

Image: Xdebug port.png

Change the port number to "10000" as shown, to match what we put in the "php.ini" file earlier. (I also changed the port number for the Zend debugger to "10001" just to get rid of the port 9000 warning message.)

Set Debug Options

Next, we need to set some options. Select the menu Window / Preferences to open the Preferences dialog. Expand PHP and Debug and select "Workbench Options", as shown below.

Image:workbench_options.png

Change the settings as shown above. You can experiment with these settings to make Eclipse best for you.

Next, select the "PHP Servers" item on the tree to display the screen shown below.

Image:php_servers.png


Select the "Default PHP Web Server" (the only one in the list) and press the Edit button to display the Edit Server dialog shown below.

Image:edit_server.png

Recall that we created our workspace, called "joomla_development", under the "c:\xampp\htdocs" directory. So the URLs to the HTML and PHP files in our project will need to include the "joomla_development" directory name (for example, "http://localhost/joomla_development/Test Project/test.php"). If we change this here, Eclipse will create the URLs for us automatically. So complete the screen as shown above and press OK.

Set Newline Character (Windows Only)

Let's do one final configuration setting, which only applies if you are running Windows. As you may know, Windows and Linux use different characters to terminate lines in text files. Since the Joomla! source code repository is on a Linux machine, we need to tell Eclipse to create Linux-style patch files. To so this, we'll navigate to Window / Preferences and expand the General tree and select "Workspace". The screen below will display.

Image:Workspace_preferences.png

Make two changes. Select Other / UTF-8 for the Text file encoding and Other / Unix for the New text file line delimiter, as shown above. Press OK.

At this point, Eclipse is set up and we can start working with PHP files.

Test XDebug

Now we finally get to have some fun. We're going to write a simple PHP script and run and debug it to test that Eclipse is set up correctly. If you are already familiar with Eclipse, you can just skip over this section. If not, we'll go through some basics.

Eclipse Terminology

First, some quick Eclipse terminology. In Eclipse, we talk about the workbench, perspectives, and views. The workbench is just the whole screen. It has an edit area, where we will edit our PHP files, and a series of views around the outside. A view is an area that displays information about a file or some other resource. A perspective is just a pre-packaged layout of views designed for a specific purpose. When we're writing PHP programs, two perspectives are of interest: the PHP perspective and the PHP Debug perspective.

Let's open the PHP perspective. We can select Window / Open Perspective / PHP, as shown below.

Image:Php_perspectieve_menu.png

Now the workbench displays a different set of views, including the PHP Explorer, in the upper left, and three views in the lower left. Note that Eclipse has pretty good Help, which you can access by pressing F1 or selecting Help / Help Contents from the menu. The screen below shows some of the contents available, including Getting Started, Basic Tutorials, and other useful information.

Image:Php_help.png

Create a Project

Remember that we created a workspace when we launched Eclipse. Before we can write any code, we need to create a project. A project stores a group of related program files. For example, the entire Joomla! application will be one project. We're going to create a test project that we can use to test our setup. We'll select the menu File / New / PHP Project, as shown below.

Image:New_project_1.png

This will open the first screen in the new project wizard, shown below. Enter the project name, in this case "Test Debug", and press Finish.

Image:New_project_2.png

Our new project will now show in the PHP Explorer view.

Create and Run a PHP File

Next, we need to create a PHP file. Select the "Test Debug" project, right click, select New / PHP File, as shown below.

Image:New_php_file.png

Press the Browse button and select the "Test Project" for the source folder. The New PHP File wizard will display, as shown below. Enter "test.php" for the file name, and press Finish.

Image:New_php_file_2.png

An empty PHP file will now display in the editor. Enter the code shown below, and press the Save button in the upper left toolbar to save the "test.php" file.

Image:Php_test_file.png

Now, we're going to execute the script. We'll select the file "test.php" and right-click and select Run As / PHP Web Page, as shown below.

Image:Run_as_menu.png

The script will be run in your default browser, and should display as shown below.

Image:Run_test_php.png

Note that the "phpinfo()" command displays information about your PHP configuration. This is the same screen we saw earlier, when we clicked on the "phpinfo()" link in the XAMPP home page.

Debug a PHP File

Now, let's try debugging this script. Again, select the "test.php" file and right-click, but this time select "Debug As / PHP Web Page", as shown below.

Image:Debug_as_web_page.png

This time, the browser opens and suspends. Go back to Eclipse and open the PHP Debug perspective by selecting Window / Open Perspective / PHP Debug, as shown below.

Image:Open_debug_perspective.png

This opens the Debug Perspective, with the "test.php" file suspended, as shown below.

Image:Debug_perspective.png

Recall from earlier that the "Break at first line" option was selected. This is why the debugger has suspended here, on the first line in our program.

There is a lot going on in this screen. The Debug view in the upper left shows the "frame" information. In this case, we are suspended on line 2. The editor window is now in the middle of the screen. A small blue arrow shows where the program is suspended.

In the upper right is the Variables view. This shows the variables that are in scope at this point in the program.

The toolbar in the Debug perspective is important. The tools are labeled below.

Image:Debug_toolbar.png

  • Resume: Resume execution until the next breakpoint or until the program is finished.
  • Terminate: Terminate the debug session. It is important to always terminate the session before trying to run a new session. This must be done even if the browser is closed.
  • Step Into: Used to step into a called function.
  • Step Over: Used to step to the next line.

If you are familiar with debuggers from other IDEs, these commands will probably be familiar. If not, you can read more about it in the Eclipse help documentation and experiment on your own.

To finish, let's press the Step Over button. The Debug view and editor now show that we are on line 3. Note that this means that we are about to execute line 3. Also, note the change in the Variables view. Now the variable $mytest has a value of "this is a test" because line 2 has now executed.

Press Step Over again. Now we're on line 4. Look at the browser window. It should now say "this is a test", since now line 3 has executed. Press Step Over again and look at the browser window. Now it shows the output of "phpinfo()".

Finally, press Resume. Notice that the program is no longer suspended and the browser no longer shows that it is waiting to complete the page. The script has completed, but our debugger session is still running.

To close the debugger, select the "Remote Launch" in the Debug view and press the Terminate button. Two things happen. In the browser, a new window launches showing a terminate message. In Eclipse, the PHP perspective automatically displays. This is because we set this in the Debug preferences.

Now we had to manually open the Debug perspective, which is an extra step. We can tell Eclipse to do this automatically for us. We just go to Window / Preferences / Run/Debug / Perspectives, select "PHP Web Page", and check "Always" for "Open the associated perspective when launching", as shown below.

Image:Php_debug_preferences.png

At this point, the XDebug is working correctly in Eclipse.

Install Eclipse Subversion

Before we can start coding in Joomla!, we need to be able to work with the Subversion (SVN) source code repository. Subversion is a third-party plugin for Eclipse, so we need to use the Eclipse Update Manager to install it. To do this, navigate to Help / Software Updates / Find and Install, as shown below.

Image:Eclipse_help_software_updates.png

The Install/Update dialog will display. Select "Search for new features to install" and press the Next button. The Install dialog will display. Press the "New Remote Site" button to display the New Update Site dialog. Enter "Subclipse" and "http://subclipse.tigris.org/update_1.4.x" as the URL, as shown below.

Image:Subclipse_update_site.png

Press OK and the Install screen should again display. Make sure the Subclipse is the only box checked, as shown below.

Image:Eclipse_install_update.png

Press the Finish button and the Updates / Search Results dialog will display. Expand the "Subclipse" item on the tree and check the "JavaHL" and "Subclipse" boxes as shown below.

Image:Eclipse_updates.png

Press the Next button to get the License screen. Check "I accept" (after giving this a LOT of thought!) and press the Next button to display the Installation screen. Press the Finish button. Eclipse will work for a few seconds to download the programs and then display the Verification screen. Press the "Install All" button.

After working for a few seconds, a message will display telling you to restart Eclipse. Press the Yes button to restart Eclipse.

At this point, the Eclipse Subversion plugin is installed.

Check Out Joomla! Source Code

Now we are going to create a new PHP project that will contain all of the source code files for Joomla!. We can import the source code and create our PHP project at the same time.

Import Project

To start, select File / Import to display the Import screen. Expand the SVN node and select "Checkout Projects from SVN" as shown below.

Image:Checkout_projects.png

Press the Next button to display the "Checkout from SVN" screen shown below.

Image:New_repository.png

Check the item "Create a new repository location" and press the Next button to display the screen shown below. Enter the location "http://joomlacode.org/svn/joomla/development/releases/1.5", which is the current repository for the Joomla! 1.5 source code.

Image:Repository_location.png

Press the Next button. Eclipse will work for a few moments and then display display the parent folder and subfolders for this SVN repository, as shown below.

Image:Checkout_select_folder.png

Select the top line (the top-level folder) and press Next. Check the option "Check out as a project configured using the New Project Wizard" and enter the project name of "Joomla 1.5 Source", as shown below.

Image:Svn_check_out_as.png

Press the Finish button. The New Project "Select a wizard" dialog will display. Select PHP / PHP Project, as shown below.

Image:New_project_wizard.png

Press Next to display the "New PHP Project" wizard screen. Enter the project name, "Joomla 1.5 Source", as shown below.

Image:New_php_project_svn.png

Press Finish. A warning message will display as shown below.

Image:Check_out_warning.png

Press OK. At this point, Eclipse will work for several minutes, downloading all of the Joomla! source code files from the Joomlacode site. You will see a progress bar, as shown below. In the lower right corner you will see a message "SVN Checkout (xx%)", again showing the progress of the checkout.

Image:Svn_checking_out.png

After a few minutes, the new project will be created, and you should see the familiar folder structure of Joomla!, as shown below.

Image:Joomla_php_project.png

Run and Install Joomla!

Next, let's run the Joomla! front end from inside Eclipse. The file we need to run is "index.php" in the home directory. Right-click this file and select Run As / PHP Web Page, as shown below.

Image:Run_as_php_2.png

The first time you do this, the following screen will display showing you the URL that Eclipse is executing. Press OK.

Image:Run_joomla_index.png

Our default browser opens and runs Joomla!. Since this is the first time we have executed this copy of Joomla!, we are taken to the Joomla! Installation Wizard, as shown below.

Image:Index_installation.png

Go through the normal installation process. Install the sample website. Note: Normally you don't need or want to delete the "installation" folder, since this is under SVN version control.

Run Joomla! Back End

To execute the Joomla! back end, navigate to the "administrator/index.php" file and again right-click and select Run As / PHP Web Page. This time we are executing the administrator "index.php" file as shown below.

Image:Admin_index_run.png

Press OK and the Joomla! login screen should display.

At this point, we have the complete Joomla! source code synchronized with the Joomla! source repository and we can execute the Joomla! front end and back end from inside Eclipse.

Debug Joomla! From Eclipse

Let's do a quick debug session in Eclipse.

Set a Breakpoint

First, we'll set a breakpoint inside Joomla!. Go to the PHP Explorer view and find the Joomla! file "components/com_content/views/frontpage/tmpl/default.php" as shown below.

Image:Default_php_file.png

Double-click the file name to open this file for editing. Double-click in the blank area just to the left of line 2, as shown below. A small blue circle will display.

Image:Breakpoint_example.png

This sets a breakpoint at this line of code. When running in debug mode, Eclipse will suspend the program and we can debug from this point.

Create a Launch Configuration

Now, let's set up what's called a Launch Configuration so we can more easily run the front-end in debug mode. Select the menu Run / Open Debug Dialog. Select "PHP Web Page" in the left-hand tree list. Right-click and select "New" to display the screen below. Notice that the "Break at First Line" option is checked by default. Keep this setting.

Image:Debug_run_dialog.png

Change the Name to "Debug Front End" and press the Browse button and browse to the "index.php" file in the top-level folder of the Joomla 1.5 Source project, as shown below.

Image:Select_index_file.png

Press Apply and Close to save this launch configuration.

You can use this same procedure to create a launch configuration for the Joomla! back end. Just call it "Debug Back End" and browse to the "index.php" file under the administrator folder.

Run a Debug Session

We can select our launch configuration by pressing the drop-down arrow next to the debug icon in the toolbar, as shown below.

Image:Debug_dropdown.png

At this point, two things happen. First, a new browser session starts with an empty window. This is because Joomla! is suspended at the first line of code (since we chose "Break at First Line"). Second, inside Eclipse, the PHP Debug perspective is opened automatically for us, showing the line where we are suspended.

Press the Resume button (green right arrow) in the toolbar to take us to the next breakpoint. This time we suspend at line 2 of the "default.php" file, where we set our break point. The screen should look like the one below.

Image:Joomla_debug_screenshot.png

To end the debug session, just press the red Terminate button. Eclipse will again display the PHP perspective and you will get a "teminated" window in your browser.

Since we created a Debug launch configuration, we can re-run the debug session for the front end just by using the Debug drop-down in the toolbar. (Note: If you don't want to worry about launch configurations, you can always just highlight the "index.php" file, right-click, and select Run / Debug As / PHP Web Page. Using launch configurations is just a convenience.) When we launch the debug session, we again go to the PHP Debug perspective.

Now, press the Resume button once to take us to line 2 of "default.php". Press Resume a second time. Now the Joomla! front page displays and the debugger doesn't show any active frames in the debug view. This is because Joomla! is now just waiting for the user to do something.

Press the link "Joomla! Overview". Now the debugger has again stopped at the first line of code (line 15) of "index.php", again because we have the "Break at First Line" option set. Press Resume again, and the "Joomla! Overview" article displays and again we have no active frames in the Debug view.

Let's take a quick look at some other debugger features. Press the "Home" link and press the Resume button once. Again, you should be suspended at line 2 of "default.php", where we set our manual breakpoint.

Press the "Step Over" button in the debug toolbar. The screen should display as shown below, with the current line now being line 3.

Image:Debug_stepover.png

Two other "step" buttons are "Step Into" and "Step Return". These are used to navigate down to a called method and navigate back. Let's try them. Notice that line 3 includes a call to the "get" method of the "$this->params" object. Press "Step Into" and now we navigate to this method, as shown below.

Image:Params_get_method.png

This method is defined in the file "libraries/joomla/html/parameter.php" file and is a member of the "JParameter" class (since "$this" was a JParameter object). Notice that the current line also calls a method. Press "Step Into" again and we navigate to the getValue method of the JRegistry class in the "registry.php" file.

As you might guess, the "Step Return" navigates to the line following the "return" statement of the current method. So if we press "Step Return" once we go back to line 121 of "parameter.php" file.

Let's look at two other debugger features. Hover the mouse on the $key variable in line 135. You should see the value of this variable, as shown below.

Image:Variable_hover.png

Look at the Variables view to the right of the Debug view and you can see the current value of all of the variables, as shown below.

Image:Variables_view.png

Click on the second frame in the Debug view, as shown below.

Image:Change_frame.png

Notice that the Variables view changes to show the variables for this frame and the edit window now shows the file for this frame. Click on some other frames to get the idea of this. The "frame stack" allows you to see all of the levels of the program and how we got to the current line of code. We can also see the value of variables at each level in the program. When we step into a method, we add a new frame on the top of the stack. When we step return out of a method, the frame for this method is removed and we go back to the previous stack.

Press Step Return and we now go back to the line in "default.php" where we called the "get" method.

Sometimes it is handy to evaluate an entire expression. Highlight the expression on line 5 "$this->escape($this->params->get('page_title'))", being careful to get the entire expression but no extra characters. Right-click and select Watch from the context menu. This expression is now added to the Expressions view and we can see what it evaluates to, as shown below.

Image:Expressions_view.png

You can also type in an expression by right-clicking inside the Expressions view and selecting "Add Watch Expression".

Important Note: There appears to be a bug when you try to launch a debug session with existing Watch Expressions. You get an error "Unexpected termination of script, debugging ended". To avoid this error, just delete all Watch expressions, using the "Remove All Expressions" button in the toolbar, prior to starting a new debug session.

To finish up, delete the Watch expression and press the red Terminate button to stop the debug session.

Create a Test Joomla! Patch

Let's create a simple patch file using Eclipse. We're going to add comment lines to two different files and then create a patch that could be (but won't be) used to update the Eclipse SVN repository.

Edit Files

Navigate to the file "components/com_content/views/frontpage/tmpl/default.php" and add a new comment line as shown below.

Image:Default_php_comment.png

Save the file (either Ctrl+S or press the Save button in the toolbar).

Now, open the file "components/com_content/views/frontpage/tmpl/default.xml" by double-clicking on it in the PHP Explorer view. Eclipse has an XML editor built in, although you can configure it to use an external editor if you prefer. The XML editor has two tabs at the lower left: Design and Source. The Design tab opens by default. This present a tree structure of the XML file. You can expand any of the trees, as shown below.

Image:Eclipse_xml_design.png

Click on the Source tab to display the Source window, as shown below.

Image:Eclipse_xml_source.png

Add a new comment line in line 2 as shown below.

Image:Xml_comment.png

You may have noticed that, when you typed the opening comment tag "<!--" , Eclipse automatically added the closing part of the tag for you. Again, save the file.

Now, look at the PHP Explorer view. Notice that we now have little black "*" symbols next to the files and folders that have changes, as shown below.

Image:Svn_file_changes.png

Create Patch File

Next, select any file in the PHP Explorer view, right click, and select Team / Create Patch, as shown below.

Image:Team_create_patch.png

Select "Save in file system" and press Browse to select the file and folder for the patch. Notice that Eclipse automatically includes all changed files. If you wanted, you could include only selected files in the patch.

Image:Create_patch.png

Press Next to show the Advanced Options dialog shown below. Select "Project" for the patch root and press Finish.

Image:Patch_root.png

The patch file will be created. Open this file with a text editor. It should have the contents as shown below. This file could then be used to apply these changes to an SVN repository.

Index: components/com_content/views/frontpage/tmpl/default.php
===================================================================
--- components/com_content/views/frontpage/tmpl/default.php	(revision 10613)
+++ components/com_content/views/frontpage/tmpl/default.php	(working copy)
@@ -1,4 +1,5 @@
 <?php // no direct access
+// This is a comment to test patch creation.
 defined('_JEXEC') or die('Restricted access'); ?>
 <?php if ($this->params->get('show_page_title', 1)) : ?>
 <div class="componentheading<?php echo $this->params->get('pageclass_sfx') ?>">
Index: components/com_content/views/frontpage/tmpl/default.xml
===================================================================
--- components/com_content/views/frontpage/tmpl/default.xml	(revision 10613)
+++ components/com_content/views/frontpage/tmpl/default.xml	(working copy)
@@ -1,4 +1,5 @@
-<?xml version="1.0" encoding="utf-8"?>
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Test comment for patch -->
 <metadata>
 	<layout title="Frontpage Blog Layout">
 		<message>

Undo File Changes

Before we finish, let's look at how we can undo our changes. The easiest way is to just use the Eclipse editor undo command. Go back to the "default.xml" file in the editor. Press Ctrl+Z (or use Edit / Undo Text Change) once or twice until the comment is gone. Save the file. Notice that the black "*" is now gone from this file in the PHP Explorer view.

Now let's look at a more sophisticated way to undo changes. Navigate to the "default.php" file and right-click anywhere inside the edit area. Select Compare With / Base Revision from the context menu. This will display the screen shown below.

Image:Compare_with_base_revision.png

This is the Eclipse Text Compare editor. It shows you every change between any two files. In this case it's comparing the base revision we downloaded from the Eclipse repository to the current file, where we added the comment. The second button in the toolbar is called "Copy Current Change From Right to Left". Press this button and now the files will be identical. Press Save to save the changes, and notice that now all of the black "*" have disappeared. This indicates that there are no changes between our files and the this revision in the repository.

Eclipse Tips and Tricks

Recommended Eclipse Preference Settings

Here are some additional Eclipse preferences that are recommended.

SVN Label Decorators

Navigate to Window / Preferences and select General / Appearance / Label Decorations and make sure the box "SVN" is checked, as shown below. This should be selected by default when Subclipse is installed.

Image:Prefs_label_decorations.png

Show Line Numbers

Navigate to Window / Preferences and select Editors / Text Editors. Make sure the box "Show Line Numbers" is checked, as shown below. This should be selected by default.

Image:Prefs_line_numbers.png

Show SVN Console

This option will display the Subversion commands in the Eclipse console. Navigate to Window / Preferences and select Team / SVN / Console. Check the box "Show SVN console automatically when command is run" is checked, as shown below. This will not be checked by default.

Image:Prefs_svn_console.png

phpEclipse Browser Preview Defaults

If you are using phpEclipse (not Eclipse PDT or EasyEclipse), navigate to PHP Eclipse Web Development / Browser Preview Defaults and uncheck all options.

Eclipse Edit Windows

  • You can maximize the edit area in the Eclipse workbench just by double-clicking on the tab for the active window (or by clicking the maximize icon in the upper right corner of the edit area). Double-clicking again restores the edit area.
  • You can a second edit window inside the edit area by dragging the active tab to the right-hand edge of the edit area, as shown below.

Image:Split_window1.png

This will create two edit windows, side by side. You can maximize the entire edit area by double-clicking on the active tab. The workbench will display as shown below, with two edit windows.

Image:Split_window2.png

To reverse the process, just drag the tab of the right-hand window back to the left window.

Text Compare

You can use the Eclipse text compare to compare two different files or different versions of the same file. To compare two different files:

  • Highlight both files in the PHP Explorer view.
  • Right-click on one of the files and select Compare With / Each Other. This will open the Text Compare window in the edit area.

You can also compare file that aren't part of an Eclipse project. To do this:

  • Create a new file in Eclipse by selecting File / New and the file type (for example, HTML, XML, text, PHP). Select a name for the file and the correct folder in your Eclipse project.
  • Open the external file you want to compare and copy the contents to the clipboard.
  • Inside the Eclipse editor for the new file, paste the contents and save the file.
  • Repeat this procedure for the second file to compare.
  • Compare the two files using the Compare With / Each other method outlined earlier.

Local History

Eclipse automatically tracks changes you make to files in the editor and allows you to view and use these prior versions. To see the local history of a file, right-click on the file in the edit window and select Team / Show Local History. This will open the History view as shown below.

Image:Local_history.png

Each line is a version of the file at this point in time. With this view, you can:

  • Double-click on a line to open the file as it was at that time.
  • Right-click on a line and select "Compare Current with Local" to compare the current file version with the version at this time.

Using the Eclipse Text Compare window, you can also revert to the earlier version of the file or just revert some of the changes.

Mouse Hover

If you hover the mouse on a class or method, the PHPDoc information will show in a tooltip, as shown below. You can press F2 to move the focus to this tooltip to allow scrolling.

Image:Mouse_hover.png

If you hold down Ctrl and then hover, the source code of the element will display in the tooltip, as shown below. Again, F2 allows you to scroll the tooltip.

Image:Control_hover.png

The element also becomes a hyperlink. Clicking on the element will open the element's source file for editing.

Back and Forward Buttons

You can navigate back and forward, like in a browser, using the Back and Forward buttons in the Eclipse toolbar, shown below.

Image:Back_forward.png

These let you navigate to previous files you were editing or viewing. You can also use the drop-down menu to go to a specific file and location, as shown below.

Image:Back_dropdown.png


Outline View

This view (by default in the lower left) shows the structure of any classes in the active file. For example, open the file "libraries\joomla\factory.php" for editing. The Outline view will show the methods and fields of the JFactory class, as shown below.

Image:Outline_view.png

Clicking on a member in the Outline view highlights the declaration of this member in the source file.

PHP Project Outline View

This view displays a list of constants, classes and functions for all files within the selected project. Selecting an element in the PHP Project Outline view will open the source file in the editor.

PHP Functions View

This view shows the most commonly used PHP Classes, Constants and Iterators. You can add a function to a source file by double-clicking the desired function. The function will be added at the current cursor location in the active source file.

Code Assist

Eclipse will attempt to complete common PHP statements and methods for you. Simply type in the first part of the statement and press Ctrl+Space to invoke code assist. For example, open "index.php" for editing and go to line 13. Type "def" and press Ctrl+Space. The screen should display as shown below.

Image:Code_assist.png

At this point, you can click on any option in the pop-up window to select the desired statement. Click on "defined" and press Enter. The line will now read "defined()". Press Ctrl+Space again and a list of constants will show, as shown below.

Image:Code_assist2.png

You can read more about Code Assist in the "Working with Code Assist" section of the PDT User Guide (PDT User Guide > PDT Help > Getting Started > Basic Tutorials). Code assist is a great feature of Eclipse and can save you a lot of time.

Open PHP Manual

You can access the PHP Manual for any PHP function by highlighting the function name in an edit window or the PHP Functions view and selecting Open PHP Manual. The PHP manual page for this function will display in a browser window.

Other Manuals

Other forms of PHP documentation that you can download are available from php.net. This page includes HTML formats and CHM format.

On Windows, the extended CHM format is the most useful as it includes comments from the live PHP references.

A free viewer for Mac OSX 10.5, iChm, is available from robinlu.com (Chmox and xChm are either not maintained or unreliable enough to use). If you are integrating iChm with Eclipse (either with PDT or phpEclipse) you will need to remember to specify the full path to the actual binary, eg (and adjusting the path for the correct location):

/Applications/iChm/Content/MacOSX/iChm /Users/you/php_manual_en.chm

MySQL manuals are available in a variety of formats from dev.mysql.com.

Personal tools