Actions

Difference between revisions of "Configuring Eclipse IDE for PHP development/Linux"

From Joomla! Documentation

< Configuring Eclipse IDE for PHP development
m (Understanding the Eclipse IDE interface)
Line 58: Line 58:
 
*[http://www.phpeclipse.com/ PhpEclipse]
 
*[http://www.phpeclipse.com/ PhpEclipse]
  
== Understanding the Eclipse IDE interface ==
+
{{chunk:Configuring Eclipse IDE for PHP development - Understanding the interface}}
 
+
Eclipse IDE is not just a editor it is a platform and can be used to many thing, that is why it implement a very flexible philosophy to denominate and describe the way it display and organize the information, the most relevant parts of eclipse interface are:
+
 
+
*The tool bar: Is at the top of the window just like any other common application
+
*The tool bar with buttons: Is right under neat the toolbar it contains a bunch of buttons most of them change according the current context, view or perspective, you can drag and drop that some of it buttons to arrange them the way you want
+
*The views: They are sections that divide the windows content and display different kind of information, you can arrange the views in almost any possible way, ex: columns, rows, complex combinations of columns and rows and so forth
+
*The perspectives: The perspectives are just a setup of views arranged in certain configuration and normally sharing a relationship between them
+
 
+
Is important to understand how this perspective philosophy works, for example The "PHP perspective" is used to edit PHP code so is coherent to display views related to the PHP code edition, views to manage the project files and views to navigate trough the code, the following is a typical "PHP perspective":
+
 
+
*Docked at the left with several tabs are the "PHP explorer" view and the "Type Hierarchy explorer" view
+
*In the middle is a wide view which is the "editor area", there will be as many tabs as many files you are editing
+
*Docked at the right with several tabs are the "Search" view and the "outline" view, they will assist you to find chuck of code or navigate trough the parts, variables and object of your current file under edition.
+
*Docked at the bottom are with several tabs are the "Problems" view,"Task" view, "Console" view and "Progress" view there you will see things like unsolved problems like syntax errors, uncompleted TODO tasks, and see the progress of build or update operations
+
 
+
In the other hand the "Debug Perspective" share some views with the "PHP perspective" but have a different arrangement of views and got more different views related to the code debugging operations such as:
+
 
+
*Debug view: Display the call stack of the current breakpoint
+
*servers view: Display a list of the configured server to debug with
+
*Variables view: This view shows a tree that is basically is a complete dump of all the variables and object of the current session at the current breakpoint
+
*Breakpoints view: Display a list of all the breakpoints set all over your project, you can double click on one of the item of that list to jump in that exact line of code
+
*Expressions views: There you can create expressions on the fly to evaluate them without the need of do code modifications
+
 
+
You can switch betweend perspectives selecting them at "Tool bar --> window --> Open perspective" or you can click in the perspective buttons located at the far right of the "The tool bar with buttons"
+
 
+
If you don't feel happy with any of this perspective configurations and how their views are arranged, you can create your very own perspectives and add as much views as you want and arrange them the way that makes you feel good, you just got to:
+
*Modify the current perspective (any it doesn't matter)
+
*Add thew views you want and remove the others you don't
+
*Arrange the views the way you like and make you feel comfortable
+
*Go to "Tool bar --> window --> Save perspective as" and set a name for your custom perspective, ex: "pimp-My-IDE" and save it, you can also overwrite an existing view name
+
 
+
So far you should be able to know how to play with Eclipse IDE and understand it interface philosophy, if you want to see a video demonstration about Eclipse IDE to get a preview and taste some of it powers check this out [[Webinar: Using Eclipse for Joomla! Development]]
+
 
+
  
 
== Understanding the Eclipse IDE folder structure ==
 
== Understanding the Eclipse IDE folder structure ==

Revision as of 18:00, 4 May 2012

Documentation all together tranparent small.png
Under Construction

This article or section is in the process of an expansion or major restructuring. You are welcome to assist in its construction by editing it as well. If this article or section has not been edited in several days, please remove this template.
This article was last edited by Enav (talk| contribs) 22 months ago. (Purge)

Contents

Theses instructions should work fine on any Debian based distribution such as Debian, Ubuntu, LinuxMint, Xubuntu, Kbuntu and others.


Download and Installation

There is 2 ways to download and install Eclipse IDE in your Linux box, you can do it automatically from the comfort of your software center or the Linux terminal with few commands or manually downloading and installing Eclipse IDE from the Eclipse project website or other alternative download sites.


Method 1: From a Linux repository

NOTE: This method is the most recommended because you will have the benefits of automate all the installation process and get automatic security patches and bug fixes updates when the software is installed from the repositories.


Option 1: Terminal

  • Open your terminal and type
 sudo apt-get install eclipse 
  • Wait until installation process finish
  • If everything whent fine Eclipse IDE should be available in the software menu

Option 2: Software center

  • Open the software center that comes with your distribution
  • Type in the search box "Eclipse IDE"
  • Select "Eclipse IDE" in the search result list
  • Click on the "install" button
  • Wait until installation processes finish
  • If everything whent fine Eclipse IDE should be available in the software menu

Method 2: From a downloaded copy

NOTE: For manual download and installation you got to have JAVA runtime previously installed or Eclipse IDE will not run

To install java runtime on your Linux box open a terminal and type folloging command and wait until the installation finish:

sudo apt-get install sun-java6

You can also install java from your software center just type "openjdk java 6" and install the package.

To get a copy of Eclipse IDE follow these steps:

  • Go to: Eclipse download page
  • Download "Eclipse Classic" 32 or 64 bits according to your current OS version
  • Unpack the downloaded file on any location that you want, ex: Downloads folder or Desktop folder
  • Open the eclipse folder an find an executable file called "eclipse"
  • Do a right click on the file then -> properties -> permissions and check "Allow executing file as a program"
  • To execute Eclipse IDE, you can do a double click on the executable file or run it from terminal, ex:
cd ~/Downloads/eclipse/
eclipse

NOTE: At the Eclipse download page you can see many versions of Eclipse IDE, all of them are basically the same Eclipse with a bunch of extensions pre-installed to do specific task by default Eclipse IDE comes with all the tools needed to develop JAVA projects but you can install more extensions to develop in other languages, click in the link Compare Packages to see a complete char of all the extensions included on each Eclipse Package build, you can try one of these pre-build packages specifically created for PHP development some of them are official releases from the Eclipse website and others are independent projects:

Understanding the interface

Eclipse IDE is not just a editor it is a platform and can be used to many thing, that is why it implement a very flexible philosophy to denominate and describe the way it display and organize the information, the most relevant parts of eclipse interface are:

  • The tool bar: Is at the top of the window just like any other common application
  • The tool bar with buttons: Is right under neat the toolbar it contains a bunch of buttons most of them change according the current context, view or perspective, you can drag and drop that some of it buttons to arrange them the way you want
  • The views: They are sections that divide the windows content and display different kind of information, you can arrange the views in almost any possible way, ex: columns, rows, complex combinations of columns and rows and so forth
  • The perspectives: The perspectives are just a setup of views arranged in certain configuration and normally sharing a relationship between them

Is important to understand how this perspective philosophy works, for example The "PHP perspective" is used to edit PHP code so is coherent to display views related to the PHP code edition, views to manage the project files and views to navigate trough the code, the following is a typical "PHP perspective":

  • Docked at the left with several tabs are the "PHP explorer" view and the "Type Hierarchy explorer" view
  • In the middle is a wide view which is the "editor area", there will be as many tabs as many files you are editing
  • Docked at the right with several tabs are the "Search" view and the "outline" view, they will assist you to find chuck of code or navigate trough the parts, variables and object of your current file under edition.
  • Docked at the bottom are with several tabs are the "Problems" view,"Task" view, "Console" view and "Progress" view there you will see things like unsolved problems like syntax errors, uncompleted TODO tasks, and see the progress of build or update operations

In the other hand the "Debug Perspective" share some views with the "PHP perspective" but have a different arrangement of views and got more different views related to the code debugging operations such as:

  • Debug view: Display the call stack of the current breakpoint
  • servers view: Display a list of the configured server to debug with
  • Variables view: This view shows a tree that is basically is a complete dump of all the variables and object of the current session at the current breakpoint
  • Breakpoints view: Display a list of all the breakpoints set all over your project, you can double click on one of the item of that list to jump in that exact line of code
  • Expressions views: There you can create expressions on the fly to evaluate them without the need of do code modifications

You can switch betweend perspectives selecting them at "Tool bar --> window --> Open perspective" or you can click in the perspective buttons located at the far right of the "The tool bar with buttons"

If you don't feel happy with any of this perspective configurations and how their views are arranged, you can create your very own perspectives and add as much views as you want and arrange them the way that makes you feel good, you just got to:

  • Modify the current perspective (any it doesn't matter)
  • Add thew views you want and remove the others you don't
  • Arrange the views the way you like and make you feel comfortable
  • Go to "Tool bar --> window --> Save perspective as" and set a name for your custom perspective, ex: "pimp-My-IDE" and save it, you can also overwrite an existing view name

So far you should be able to know how to play with Eclipse IDE and understand it interface philosophy, if you want to see a video demonstration about Eclipse IDE to get a preview and taste some of it powers check this out Webinar: Using Eclipse for Joomla! Development

Understanding the Eclipse IDE folder structure

When your execute Eclipse for the first time, it ask you to create a "workspace" the workspace is a folder where Eclipse IDE will save the configurations about your editors, perspectives and views also the workspace folder is normally used locate your project files separated by folders, nonetheless you can place your project files outside the workplace folder if you like.

The workplace folder name could any valid folder name, but by default Eclipse IDE set the name "workplace" to it, and it tries to locate the folder at your documents folder or your home folder, ex "/home/youruser/workspace"

When you create new PHP project and you decide to place it inside the workplace folder then it may looks like this:

/home/youruser/workspace/myphptutorial
/home/youruser/workspace/joomla_component
/home/youruser/workspace/test

Those 3 folders represent 3 different projects inside the same "workspace" and they will share the same editor and perspective layout configuration for Eclipse IDE.

The configurations about the editors and perspective layouts are specifically located at the hidden folder called ".metadata" which is right inside the workspace folder, this means you can move the workplace folder from one computer to another and work in Eclipse from another computer with all your custom configurations and projects just easy.

Configuration

Installing more extensions

For your Eclipse IDE you will need to install more extension for PHP development and other tools to help you in your project development journey, follow this steps and indications:

  • On Eclipse go to: "Toolbar --> help --> install new software"
  • You are now on the "Install" window, click the drop-down list "Work with" and set it to "--All Available Sites--"
  • In the search box type the following keywords and select all the results in the list below:
    • subversive
    • Remote Development Support
    • php
    • xml editors
    • xsl editors
    • javascript
    • Remote System Explorer
    • Eclipse Web Developer Tools
    • Web Page Editor
  • Press "Next>" and follow the installation wizard and restart Eclipse if needed

Those are all the extension to install for now, they should be enough to work with local and remote PHP and Joomla development projects, nonetheless you can experiment and tray all the extensions you like.


Configuring the perspectives and views

In this case we need to configure Eclipse for PHP development, so you should add the following perspectives:

  • Go to: "Toolbar --> windows --> open perspective --> others --> debug"
  • Go to: "Toolbar --> windows --> open perspective --> others --> php"
  • Switch to the "PHP perspective"
  • Go to: "Toolbar --> windows --> show view --> others --> remote systems"
  • Drag the view from the tab and drop it next to the "PHP explorer" view

Now you can explore local and remote PHP project, how to configure this tools will be explained in this series of articles, but for now leave it for the future.

Configuring the editors

These are some of the configuration you can do to your editors to improve the user experience:

Display white spaces

Some people like to see the white spaces represented in the editor to do so:

  • Go to "Toolbar --> window --> preferences --> general --> editors --> text editors"
  • Set "show whitespace characters" to check

Colors

To highlight some the parts of the code with stronger colors, follow this steps:

  • Go to "Toolbar --> window --> preferences --> general --> editors --> text editors --> annotations "
    • On the list find "java scrip occurrences" and set the color value to "#FFFF5A"
    • On the list find "matching tags" and set the color value to "#FFFF5A"
    • On the list find "php elements read occurrences" and set the color value to "#FFFF5A"
  • Go to "Toolbar --> window --> preferences --> general --> editors --> structured text editor"
    • Find the list "Appearance color options"
    • On the list find "Matching brackets highlight" and set the color value to "#0000FF"
  • Go to "Toolbar --> window --> preferences --> javascript --> editor"
    • Find the list "Appearance color options"
    • On the list find "Matching brackets highlight" and set the color value to "#0000FF"
  • Go to "Toolbar --> window --> preferences --> javascript --> editor --> syntax coloring"
    • Find the list "Element"
    • On the list find "javascript --> functions" enable the option and set the color value to "#1E90FF"
    • On the list find "javascript --> function declarations" enable the option and set the color value to "#1E90FF"
    • On the list find "javascript --> local variable declaration" enable the option and set the color value to "#A52A2A"
    • On the list find "javascript --> local variable references" enable the option and set the color value to "#A52A2A"
    • On the list find "javascript --> parameter variables" enable the option and set the color value to "#A52A2A"
  • Go to "Toolbar --> window --> preferences --> php --> editor --> syntax coloring"
    • Find the list "Syntax element"
    • On the list find "functions" and set the color value to "#1E90FF"
    • On the list find "methods" and set the color value to "#1E90FF"
    • On the list find "variable" and set the color value to "#A52A2A"

Spell checking

If you want that eclipse assist you on check the grammar of your text, enable this option.

  • Go to "Toolbar --> window --> preferences --> general --> editors --> spelling"
    • Find and enable "enable spell checking

Code folding

Code folding is a nice feature of some editor, it allow you to fold the code in certain data structures like functions, classes and other structures such as conditionals, we are going to fold all the possible except classes content to be able to check and study PHP files quickly

  • Go to "Toolbar --> window --> preferences --> general --> editors --> structured text editors"
    • Clink on the tab "appearance"
    • Find and enable "enable folding"
  • Go to "Toolbar --> window --> preferences --> javascript --> editor --> folding"
    • Find and enable "enable folding"
    • Find and enable "comments"
    • Find and enable "header comments"
    • Find and enable "members"
  • Go to "Toolbar --> window --> preferences --> php --> editor --> code folding"
    • Find and enable "enable folding"
    • Find and enable "functions"
    • Find and enable "phpdoc"
    • Find and enable "header phpdoc"

code cleaning

Eclipse provides some nice utilities to automatically clean the source code of some extra garbage such as cleaning empty lines, deleting unnecessary trials spaces, formatting to the code and more. To activate some of this features follow these instructions:

  • Go to "Toolbar --> window --> preferences --> javascript --> editor --> content assist --> save actions"
    • Find and enable "Additional actions"
    • Press the button "Configure"
    • Find the tab "code organizing"
    • Find and enable "remove trailing whitespaces" and also select "all lines"
    • Press the button "ok"
  • Go to "Toolbar --> window --> preferences --> php --> editor --> save actions"
    • Find and enable "Remove trailing whitespaces" and also select "all lines"

Fine tuning

Increase RAM memory usage

By default Eclipse got some configuration to limit the amount of RAM memory, this configurations works fine for most users but if you 2GB of ram or more you should consider set this values to improve Eclipse IDE performance.

First you got to locate the "eclipse.ini" file that contains some few Eclipse IDE configurations.

  • If you downloaded Eclipse IDE manually from internet the "eclipse.ini" file is just inside the unpacked folder
  • If you installed Eclipse via terminal or software center the location of the file is "/etc/eclipse.ini"
  • In some Linux versions the file can be found at "/usr/share/eclipse/eclipse.ini"

NOTE: If you found a config file at "/etc/eclipse.ini" then don't edit the file at "/usr/share/eclipse/eclipse.ini"

This is the content of the original "eclipse.ini" file

-startup
plugins/org.eclipse.equinox.launcher_1.2.0.dist.jar
--launcher.library
plugins/org.eclipse.equinox.launcher.gtk.linux.x86_64_1.1.100.dist
-showsplash
org.eclipse.platform
--launcher.XXMaxPermSize
256m
--launcher.defaultAction
openFile
-vmargs
-Xms40m
-Xmx384m
-Dorg.eclipse.equinox.p2.reconciler.dropins.directory=/usr/share/eclipse/dropins

To see the full reference about these parameters visit [1]

Change the following values to increase the amount of RAM memory used by Eclipse

-startup
plugins/org.eclipse.equinox.launcher_1.2.0.dist.jar
--launcher.library
plugins/org.eclipse.equinox.launcher.gtk.linux.x86_64_1.1.100.dist
-showsplash
org.eclipse.platform
--launcher.XXMaxPermSize
512m
--launcher.defaultAction
openFile
-vmargs
-Xms512m
-Xmx512m
-Dorg.eclipse.equinox.p2.reconciler.dropins.directory=/usr/share/eclipse/dropins

If you got a lot of RAM memory you can try with these other configuration

-startup
plugins/org.eclipse.equinox.launcher_1.2.0.dist.jar
--launcher.library
plugins/org.eclipse.equinox.launcher.gtk.linux.x86_64_1.1.100.dist
-showsplash
org.eclipse.platform
--launcher.XXMaxPermSize
1024m
--launcher.defaultAction
openFile
-vmargs
-Xms1024m
-Xmx1024m
-Dorg.eclipse.equinox.p2.reconciler.dropins.directory=/usr/share/eclipse/dropins