Actions

Difference between revisions of "Configuring Eclipse for joomla development"

From Joomla! Documentation

m (Added the very handy "Type Hierarchy View"!!)
m (Eclipse download for Ubuntu)
 
(13 intermediate revisions by 4 users not shown)
Line 7: Line 7:
  
 
==Download Eclipse==
 
==Download Eclipse==
The next step is to download Eclipse. Unfortunately, as of Eclipse 3.7 (code name Helios), the old "all-in-one" PHP version is no longer maintained. So, the easiest thing is to download and install the Eclipse IDE for JavaScript Web Developers from [http://eclipse.org/downloads/ 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 64-bit download is "eclipse-javascript-indigo-SR2-win32-x86_64.zip" and is 132mb.
+
The next step is to download Eclipse. Unfortunately, as of Eclipse 3.7 (code name Helios), the old "all-in-one" PHP version is no longer maintained. So, the easiest thing is to download and install the Eclipse IDE for Java Developers from [http://eclipse.org/downloads/ 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 64-bit download is "eclipse-javascript-indigo-SR2-win32-x86_64.zip" and is 132mb.
  
 
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. One good option is 7 Zip, available [http://www.7-zip.org/ here].
 
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. One good option is 7 Zip, available [http://www.7-zip.org/ here].
Line 34: Line 34:
 
:Eclipse can be found in the Ubuntu Software Centre (or Synaptic Package Manager)  and when installed from there it places a menu item in the 'Programming' menu.
 
:Eclipse can be found in the Ubuntu Software Centre (or Synaptic Package Manager)  and when installed from there it places a menu item in the 'Programming' menu.
  
==Alternative (Easy) Installation==
+
::After installing Eclipse see [[Working_with_Git_and_Eclipse#Installing_Eclipse_with_PHP_and_Git | Installing Eclipse with PHP and Git]] for detailed instructions to enable PHP and Git. [[Configuring_Xdebug_for_PHP_development/Linux | Configuring XDebug for Linux]] is also helpful.
 
+
An alternative way to install Eclipse with the phpEclipse environment is to use [http://www.easyeclipse.org/site/distributions/php.html EasyEclipse for PHP].  This includes everything you need (including Subclipse) in one simple install for most platforms.  The following instructions are not applicable for EasyEclipse for PHP.
+
  
 
==Create an Eclipse Workspace==
 
==Create an Eclipse Workspace==
Line 64: Line 62:
  
 
At this point, Eclipse is installed.
 
At this point, Eclipse is installed.
 +
 
= Configure Eclipse =
 
= Configure Eclipse =
 
==Set Newline Character (Windows/Mac Only)==
 
==Set Newline Character (Windows/Mac Only)==
Line 73: Line 72:
  
 
At this point, Eclipse is set up and we can start working with PHP files.
 
At this point, Eclipse is set up and we can start working with PHP files.
=Configure XDebug=
 
''Note: Getting XDebug to work on some workstations can be difficult. XDebug is NOT required to be able to use Eclipse for PHP development. If you are new to Eclipse for PHP, you can skip this section and use Eclipse without XDebug if desired. You can install XDebug later if you need it.''
 
 
==Edit XDebug Eclipse Settings==
 
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. (Mac users: Eclipse / Preferences...)
 
 
[[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.)
 
 
In order to ensure compatability with php.ini, 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.)
 
 
On some systems, you may get Javascript errors like the following: <blockquote>''A Runtime Error has occurred. Do you wish to Debug? Line: 1 Error: Syntax error''</blockquote>
 
 
If so, you can eliminate these messages by changing the "Output Capture Settings / Capture stdout" from "copy" to "off".
 
 
==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.
 
 
== 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==
 
==Eclipse Terminology==
Line 176: Line 120:
 
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.
 
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==
+
=Setting up Xdebug=
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.
+
If you want to enable PHP debugging in Eclipse, see [[Configuring_Eclipse_and_Xdebug|Configuring Eclipse and Xdebug]].
 
+
[[Image:Debug_as_web_page.png]]
+
 
+
This time, the browser opens and suspends. (Note: If Eclipse does not suspend at the first line, try closing Eclipse and re-starting it.)
+
 
+
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.
+
 
+
==Troubleshooting Tips==
+
===Debugger Doesn't Stop at Breakpoint===
+
This can happen if another application is using the port you chose for XDebug. If you experience this problem, try changing the port from 10000 to 10002 or some other value. You have to change the port number in your <code>php.ini</code> file as well as in the Eclipse preferences. You also have to re-start your Apache server to make the change effective.
+
 
+
 
+
= 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 / Debug Configurations .  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]]
+
 
+
Click OK and Close buttons to save the 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.
+
If our just created launch configuration with the name "Debug Front End" doesn't show up, we have to add it to our favourites by pressing "Organize Favorites..." in the same drop down and adding our launch configuration to the favorite list.
+
 
+
[[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.
+
 
+
(Above solution did not work in my case but to not show superglobals was the solution. - [[User:Rolandd]])
+
 
+
To finish up, delete the Watch expression and press the red Terminate button to stop the debug session.
+
  
 
= Eclipse Tips and Tricks =
 
= Eclipse Tips and Tricks =
Line 359: Line 166:
 
==Customising Shortcut Keys==
 
==Customising Shortcut Keys==
 
If you do a lot of work in Eclipse, it can save you time to make good use of Eclipse shortcut keys. You can customise these keys to work just the way you want. In the example below, we will add a shortcut key for the SVN command "Compare With Base Revision". Here are the steps:
 
If you do a lot of work in Eclipse, it can save you time to make good use of Eclipse shortcut keys. You can customise these keys to work just the way you want. In the example below, we will add a shortcut key for the SVN command "Compare With Base Revision". Here are the steps:
# Select Window / Preferences / General / Keys to show the screen below. Scroll down to the command "Compare With Local Base Revision" and highlight it. [[Image:Screen_eclipse_shortcut_change_1_20090524.png|center|frame]]
+
# Select Window / Preferences / General / Keys to show the screen below. Scroll down to the command "Compare With Local Base Revision" and highlight it. [[Image:Screen_eclipse_shortcut_change_1_20090524.png|center|800px]]
# Click in the Binding field and press Ctrl+Shift+X, as shown below. In the "When" drop-down list, select "In Dialogs and Windows", as shown below. Notice that the "Conflicts" field is empty. If you pick a shortcut key that is already used in Eclipse, it will show here.[[Image:Screen_eclipse_shortcut_change_2_20090524.png|center|frame]]
+
# Click in the Binding field and press Ctrl+Shift+X, as shown below. In the "When" drop-down list, select "In Dialogs and Windows", as shown below. Notice that the "Conflicts" field is empty. If you pick a shortcut key that is already used in Eclipse, it will show here.[[Image:Screen_eclipse_shortcut_change_2_20090524.png|center|800px]]
 
# Press OK.
 
# Press OK.
 
Now, you can highlight a file and open the Compare With Base Revision editor just by pressing Ctrl+Shift+X. Note that some shortcut keys may conflict with other applications on your system, in which case they will not work correctly in Eclipse.
 
Now, you can highlight a file and open the Compare With Base Revision editor just by pressing Ctrl+Shift+X. Note that some shortcut keys may conflict with other applications on your system, in which case they will not work correctly in Eclipse.
Line 439: Line 246:
  
 
==Type Hierarchy View==
 
==Type Hierarchy View==
--working on it--
+
[[Image:Hierarchy View.png|frame|none]]This is rather a very handy view for joomla development. It's a bit of a mix of Outline View and Project Outline View, but better in many ways. It shows the structure of not only the current class, but all it's parent classes!
 +
<small>Thanks to [http://stackoverflow.com/users/290629/shengyuan-lu shengyuan-lu] for his  [http://stackoverflow.com/questions/4040974/how-to-display-parents-methods-variables-in-outline stackoverflow answer]</small>
  
 
==PHP Functions View==
 
==PHP Functions View==
Line 485: Line 293:
  
 
This screen also gives additional parameters that you could use.
 
This screen also gives additional parameters that you could use.
 +
 +
[[Category:Development]]
 +
[[Category:Bug Squad]]
 +
[[Category:IDE (Integrated development environment)]]

Latest revision as of 04:41, 10 November 2013

Contents

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.

Another option for Mac OS X Snow Leopard users is to download the OS X packages from http://www.open.collab.net/downloads/community/ for Subversion after you've installed Subclipse. This will install the appropriate JavaHL library to make the installed JVM work properly.

Download Eclipse

The next step is to download Eclipse. Unfortunately, as of Eclipse 3.7 (code name Helios), the old "all-in-one" PHP version is no longer maintained. So, the easiest thing is to download and install the Eclipse IDE for Java Developers from 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 64-bit download is "eclipse-javascript-indigo-SR2-win32-x86_64.zip" and is 132mb.

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. One good option is 7 Zip, available here.

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.

Once you have the basic Eclipse IDE for JavaScript Web Developers version installed, you then need to use the Eclipse Help system to add PHP and Git support. See Installing Eclipse with PHP and Git for detailed instructions.

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
512M
-vm
/usr/lib/jvm/java-1.5.0-sun/jre/bin/java
-vmargs
-Xms512m
-Xmx512m

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. In Linux: /path/to/your/eclipse/folder/eclipse

Eclipse download for Ubuntu

Eclipse can be found in the Ubuntu Software Centre (or Synaptic Package Manager) and when installed from there it places a menu item in the 'Programming' menu.
After installing Eclipse see Installing Eclipse with PHP and Git for detailed instructions to enable PHP and Git. Configuring XDebug for Linux is also helpful.

Create an Eclipse Workspace

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

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 (in linux: "/opt/lampp/htdocs").

To do this, press the Browse button, navigate to the "c:\xampp\htdocs" or "/opt/lampp/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.

Eclipse workspace new.png

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

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.

Eclipse welcome.png

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

Eclipse workbench.png

At this point, Eclipse is installed.

Configure Eclipse

Set Newline Character (Windows/Mac Only)

Let's do one final configuration setting, which only applies if you are running Windows or Mac. 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. Although Mac is Unix based, for the sake of standardization, Mac users should use these settings too. To do this, we'll navigate to Window / Preferences, expand the General tree, and select "Workspace". This is shown in the screenshot below.

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.

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.

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.

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.

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.

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.

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.

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.

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.

Run as menu.png

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

If your php files are set by default to open in a text editor, you may get an error. If so, go to Window/Preferences/General/Web Browser and explicitly select your preferred option.

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.

Setting up Xdebug

If you want to enable PHP debugging in Eclipse, see Configuring Eclipse and Xdebug.

Eclipse Tips and Tricks

Recommended Eclipse Settings

Here are some additional Eclipse settings and preferences that are recommended.

Eclipse.ini File Settings

When you install Eclipse, it places a file called eclipse.ini in the root folder (where you unzipped the Eclipse archive). This file controls how much memory Eclipse and Java are allowed to use on your PC. By default, these settings are low and do not take advantage of the computer RAM available on most PC's. Editing this file to the values shown below might make Eclipse run substantially faster:

-startup
plugins\org.eclipse.equinox.launcher_1.0.101.R34x_v20080819.jar
-showsplash
org.eclipse.platform
--launcher.XXMaxPermSize
512m
-vmargs
-Xms512m
-Xmx512m

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.

Prefs label decorations.png

Show Line Numbers

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

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.

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.

Customising Shortcut Keys

If you do a lot of work in Eclipse, it can save you time to make good use of Eclipse shortcut keys. You can customise these keys to work just the way you want. In the example below, we will add a shortcut key for the SVN command "Compare With Base Revision". Here are the steps:

  1. Select Window / Preferences / General / Keys to show the screen below. Scroll down to the command "Compare With Local Base Revision" and highlight it.
    Screen eclipse shortcut change 1 20090524.png
  2. Click in the Binding field and press Ctrl+Shift+X, as shown below. In the "When" drop-down list, select "In Dialogs and Windows", as shown below. Notice that the "Conflicts" field is empty. If you pick a shortcut key that is already used in Eclipse, it will show here.
    Screen eclipse shortcut change 2 20090524.png
  3. Press OK.

Now, you can highlight a file and open the Compare With Base Revision editor just by pressing Ctrl+Shift+X. Note that some shortcut keys may conflict with other applications on your system, in which case they will not work correctly in Eclipse.

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.

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.

Split window2.png

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

Compare With Base Reivsion

When working with patches, it can often be handy to see the changes you have made to a specific file. To do this, right click on any file in your Joomla! project and select Compare With / Base Revision.

Screen eclipse compare menu 20090524.png

If the local version of the file is different than the base revision, the Eclipse Compare Editor will display in the Edit Area of the workbench, as shown below.

Screen eclipse compare example 20090524.png

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.

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.

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.

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.

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.

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.

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.


Type Hierarchy View

Hierarchy View.png

This is rather a very handy view for joomla development. It's a bit of a mix of Outline View and Project Outline View, but better in many ways. It shows the structure of not only the current class, but all it's parent classes!

Thanks to shengyuan-lu for his stackoverflow answer

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.

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.

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.

Filter on Problem Window

If your Problem (or Task) window is not showing you the right problems, you may need to adjust your filter. It can be particularly helpful to adjust the filter to just show the working selection.

To do that click on the down triangle in the upper right corner of the Problem window.

Screenshot eclipse problem 20090603-1.png

This will display a dropdown menu. Select "Configure Contents". In the "Configure Contents" window, check "Warnings on Selection".

Screenshot eclipse configurecontents 20090603-1.png

Click "OK".

This screen also gives additional parameters that you could use.