Introduction

This is a step by step description of how use the PHP IDE and Ajax Tools to create a Rich Internet Application. Following these steps will provide you with a tour of the PHP IDE and Ajax Tools functions.

You are first shown a simple PHP application which lists the files and directories contained by a directory. This application contains 2 files, a PHP class, and a web page which uses the class to display the files/directories. You are then shown how to create an AJAX application which displays the files and directories as a "tree" widget. This is a dojo tree widget which makes an XMLHttpRequest to get the tree contents of a tree node. The previously created PHP class is used to process the request.

You must first download the PHP IDE from www.eclipse.org/php. Install as directed, including the necessary PHP server and debug components. Then download and install the ATF tools from www.eclipse.org/ATF. Note that you will already have the Web Tools prerequisite as a result of installing PHP IDE. The eclipse installation you will install your ATF features is the PHP IDE you have previously installed.

This PHP application makes use of the Zend PHP frameworks which you can download for free from http://framework.zend.com/. After you have installed the frameworks, you must update the include_path entry in your php.ini file to point to the location of the frameworks.

Creating a PHP Application

Following these steps will create a simple PHP application which displays the contents of a directory (on the machine where the php server is running).

  1. Start the combined PHP/Ajax eclipse you installed as previously directed.
  2. Create a new PHP Project by selecting the menu File->New->Project and then selecting PHP->PHP Project. Hit Next, and then enter the project name "fileExplorer", and hitting Finish. If prompted to switch perspectives, answer Yes.
  3. Create a new PHP file by first selecting the previously created project, then select the popup menu (Right mouse button on windows) New->PHP File. Change the filename to "file.php" and hit Next. Here you can select a template for the initial contents of the new PHP file. Choose the "simple" template and hit Finish. The PHP editor is now displayed for the new file. Replace the contents with the following: <?php class SystemFile { public $name; public $fullPath; public $isDir; function __construct($path,$isDirectory=true) { $this->name=basename($path); $this->fullPath=$path; $this->isDir=$isDirectory; } function listChildren() { $d = dir($this->fullPath); while (false !== ($entry = $d->read())) { if($entry != '.' && $entry != '..' ) { $arDir[$entry] = new SystemFile($this->fullPath."/".$entry,is_dir($this->fullPath."/".$entry)); } } $d->close(); return $arDir; } } ?> Notice that keywords such as class are highlighted. Save the contents (ctrl+s).
  4. Move the cursor to after a this-> and hit ctrl+enter. A list of possible values is shown. Escape out. Move the cursor to the other side of the = and hit ctrl+enter. A list of possible functions or classes are displayed. Escape out.
  5. In the left hand margin you will see several - signs within a circle. Click on these to hide the related function. Click again to redisplay. This function can be used to hide functions/classes you don't want to see.
  6. Move the cursor over the dir function call (around the middle of the file). Leave the cursor still for a moment, and the PHP Doc for the "dir" function is displayed.
  7. Select (double click on) the basename function call (in the first function). Display the popup menu menu and select Open PHP Manual. The PHP manual entry for the "basename" function is displayed.
  8. Display the popup menu and choose Format->Document. The php file is reformatted.
  9. Create another PHP file named "filebrowse.php" with the following contents: <html> <head> <title>Application Title</title> </head> <body> <ul> <?php require_once 'file.php'; function dirTree($dir) { $d = dir($dir); while (false !== ($entry = $d->read())) { if($entry != '.' && $entry != '..' ) $arDir[$entry] = $entry; } $d->close(); return $arDir; } $files=new SystemFile('/temp'); $dirs=$files->listChildren(); foreach ($dirs as $file) { if ($file->isDir) echo "<li><a href=".$file->name.">".$file->name."</a></li>"; else echo "<li>".$file->name."</li>"; } ?> </ul> </body> </html> In the line $files=new SystemFile('/temp');, change the directory location to something appropriate for your machine.
  10. Select SystemFile (near the middle of the file). Display the popup menu and select Open Declaration. The declaration (in the file "file.php") is displayed.
  11. Outline View

    Make sure the editor for the file "fileBrowse.php" is selected (click in the tab near the top middle). Select the outline view which should be a tab near the left middle. This shows the PHP structure of the file.
  12. Choose html from the outline view menu. This menu is the icon in the upper right corner of the view. Expand the nodes in the tree. The outline now displays the html structure of the file.
  13. PHP Project Outline View

    Select the PHP Project Outline tab which should be just to the left of the Outline tab. Expand the nodes in the tree. This outline shows all the classes and functions defined in the project of the currently selected file.
  14. PHP Functions View

    Select the PHP Functions tab which should be just to the left of the PHP Project Outline tab. This view shows all the php systems functions available. Scroll down to the functions and select one. The pop menu has a open to open the php manual for the selected function. Double-clicking on the function will add a function call in the currently selected PHP editor. If you did doubleclick, remove what was inserted in the editor.

Debugging the PHP Application

During these debugging steps, you may receive a Debug Error message saying "connection failed". You should be able to ignore these messages.

  1. In the PHP Explorer view in the upper left corner, select the file "fileBrowse.php", then from the main menu, select Run->Debug.
  2. Select PHP Web Server, then popup menu item New.
  3. Enter "phpFileBrowser" in the Name field.
  4. In the Server area, hit the New button.
  5. Enter "phpServer" in the Name field.
  6. Select the Publish Projects to this Server checkbox.
  7. Enter the publish location of your web server. For an Apache server, this would be apacheDirectory/htdocs.
  8. Hit Finish.
  9. In the Name field enter "/fileExplorer/fileBrowse.php".
  10. Change the Context field to be "fileExplorer".
  11. Change the URL field to be "http://localhost/fileExplorer/fileBrowse.php".
  12. Hit Finish.
  13. If presented with a prompt about changing to PHP Perspective, select Yes.
  14. The perspective will be switched to the PHP Debug perspective. In the right hand side, there are 2 view, the Debug Output view which shows the html generated by the PHP. The Browser Output shows the rendering.
  15. Select the editor for the file "fileBrowse.php". Change the line : $dirs=$files->listChildren(); to $dirs=$files->notDefinedlistChildren(); and then save the file.
  16. Debug again (should be able to just hit debug icon in the eclipse toolbar). Select the Console view which is on the bottom. You should see a "Debug Error" message about undefined method. Click on the Debug error line, and you will see the PHP editor is opened to that file and location. Correct the change you had made in the previous step.
  17. Set a breakpoint in the file by double clicking in the left hand margin of the PHP editor.
  18. Debug again. You will see execution halt at the breakpoint. You will see the current variable values in the Variables view near the top middle. You can step in/over/out of code with the keys F5, F6, and F7.

Creating an Ajax Application

  1. In the PHP Explorer view in the upper left corner, select the file "fileExplorer" project.
  2. Select the popup menu New->Other.
  3. Select Dojo->Dojo Application and hit Next.
  4. Enter "ajaxFileBrowser" in the Name field. This will automatticaly fill in the Location field. The Project field should already be set to "fileExplorer". Hit Next.
  5. Deselect the Debug checkbox and hit Finish.
  6. Wait for the wizard to go away. In the "fileExplorer" project, you will now have the file ajaxFileBrowser/ajaxFileBrowser.html. You can expand the tree nodes in the PHP Explorer view to see this.
  7. From the main menu, select Window->View->Other. Then select General->Snippets. Locate where the Snippets view opened at. If you are still in the PHP perspective, it is probably on the right hand side.
  8. In the Snippets view, select "Dojo". You will see available Dojo code snippets.
  9. In the Snippets view, select "Dojo". You will see available Dojo code snippets.
  10. Drag the "tree" snippet into the editor under the <!-- Content Here --> comment. The code/tags for a dojo tree will be inserted into html file.
  11. Replace the "ajaxFileBrowser.html" contents with the following: <html> <head> <title>File Explorer</title> <script type="text/javascript"> var djConfig = {isDebug: true ,debugAtAllCosts : false ,debugContainerId : "_dojoDebugConsole" }; </script> <script type="text/javascript" src="/fileExplorer/dojoAjax/dojo.js"></script> <script language="JavaScript" type="text/javascript"> dojo.require("dojo.lang.*"); dojo.require("dojo.widget.Tree"); dojo.require("dojo.widget.TreeLoadingController"); dojo.require("dojo.widget.TreeSelector"); dojo.require("dojo.widget.TreeNode"); dojo.require("dojo.widget.TreeContextMenu"); //all dojo.require above this line dojo.hostenv.writeIncludes(); //makes debugging in Venkman possible </script> <style type='text/css'> dojoTreeNodeLabel { font-family:Lucida Grande, Verdana; font-size:0.8em; width:100%; border:1px solid #ccc; } </style> </head> <body> <div dojoType="TreeContextMenu" toggle="explode" contextMenuForWindow="false" widgetId="treeContextMenu"> <div dojoType="TreeMenuItem" treeActions="addChild" widgetId="treeContextMenuCreate" caption="Create"></div> <div dojoType="TreeMenuItem" treeActions="remove" caption="Remove" widgetId="treeContextMenuRemove"></div> <div dojoType="TreeMenuItem" treeActions="move" caption="Up" widgetId="treeContextMenuUp"></div> <div dojoType="TreeMenuItem" treeActions="move" caption="Down" widgetId="treeContextMenuDown"></div> </div> <script> function removeClicked(selectedNode, controllerId, icon) { if (!selectedNode) { alert('No node selected'); return false; } if (selectedNode.actionIsDisabled(selectedNode.actions.REMOVE)) { return false; } this.controller = dojo.widget.manager.getWidgetById(controllerId); <!-- Code do remove should go here --> } /* setup menu actrions */ dojo.addOnLoad(function() { dojo.event.topic.subscribe('treeContextMenuCreate/engage', function (menuItem) { createClicked( menuItem.getTreeNode(), 'treeController', menuItem.getTreeNode().expandIcon); } ); dojo.event.topic.subscribe('treeContextMenuRemove/engage', function (menuItem) { removeClicked( menuItem.getTreeNode(), 'treeController', menuItem.getTreeNode().expandIcon); } ); dojo.event.topic.subscribe('treeContextMenuUp/engage', function (menuItem) { moveClicked( menuItem.getTreeNode(), 'treeController', menuItem.getTreeNode().expandIcon, 'up'); } ); dojo.event.topic.subscribe('treeContextMenuDown/engage', function (menuItem) { moveClicked( menuItem.getTreeNode(), 'treeController', menuItem.getTreeNode().expandIcon, 'down'); } ); }); </script> <table><tr><td>File Explorer <div dojoType="TreeLoadingController" RPCUrl="../treelisten.php" widgetId="treeController" DNDController="create"></div> <div dojoType="TreeSelector" widgetId="treeSelector"></div> <div dojoType="Tree" DNDMode="onto" selector="treeSelector" widgetId="fileTree" controller="treeController" DNDAcceptTypes="fileTree" menu="treeContextMenu" > <div dojoType="TreeNode" title="root" widgetId="fileRoot" objectId="/temp" isFolder="true"></div> </td></tr></table> </body> </html>
  12. Find the word "function" in the html file. Change the spelling. You will see that error markers appear indicating a syntax error. Change text back to "function".
    Note: Because of the dynamic nature of the javascript language, many errors do note show up until the script is run.

Debugging a Ajax Application

  1. Set a breakpoint (double click in the left margin) in the function removedClicked in the file ajaxFileBrowser.html.
  2. Select the "ajaxFileBrowser.html" in the explorer view. From the popup menu, select Debug as->Debug in Mozilla.
  3. The Run on Server dialog will appear. Hit Next.
  4. Select the Publish Projects to this Server checkbox. In the Directory field, enter the same directory which you entered for the PHP publish location. Assuming an Apache server, this would be /apacheLocation/htdocs.
  5. Hit Finish. The application is displayed running in a browser. You should see the words "File Explorer" and a tree beneath it with the root node "root".
  6. Show the popup for the root node, and chose "remove". You should get a message Confirm Perspective Switch. Hit Yes.
  7. You should now be in the Debug perspective with the javascript execution halted at the breakpoint you previously set. You see the current stack in the upper left side. You can step in/over/out with the keys F5, F6, and F7.
  8. The Variables view in the upper right side shows the current variable values. The Script View in the upper right side shows the currently loaded scripts, and what functions are defined within those scripts. Double clicking will open the script in an editor.
  9. Continue running the script by hitting F8 or clicking the run icon.
  10. Open the Mozilla perspective. You can do this by going to the main menu and selecting Windon->Open Perspective->Other, and then selecting Mozilla.
  11. The dojo tree control used in this sample application will make a request back to the server to get the contents of a tree node. We will now begin to implement the server side.
  12. The dojo tree control used in this sample application will make a request back to the server to get the contents of a tree node. We will now begin to implement the server side.
  13. In the browser, expand the "root" node. You will get an error message since the server side is not yet implemented.
  14. Select the XHR Monitor view near the bottom. This view shows the http requests made by the browser and the responses. The top entry will be the http request which was the result of expanding the tree node in the previous step. You may want to double click on the XHR Monitor tab to make the view take the full screen.
  15. The first entry should have a url with something line "/fileExplorer/treelisten.php?action=..." Double click on the entry to see the request and response headers and bodies.
  16. Display the body of the request, and select the entire text, and copy it to the clipboard (ctrl+c), and then save the contents to a temporary file. Alternatively, perform this step immediately before step where this text is used to debug the request handler.

Creating and debugging the PHP request handler

  1. Switch back to the PHP Perspective.
  2. Select the "fileExplorer" project, and create a new php file by selecting the popup menu New->PHP File.
  3. Select the "fileExplorer" project, and create a new php file by selecting the popup menu New->PHP File.
  4. Name the file "treelisten.php" and hit finish. Replace the file contents with the following: <?php require_once 'Zend/JSon.php'; require_once './file.php'; // we're returning json header('Content-type: text/json'); $action = $_REQUEST["action"]; $data = $_REQUEST["data"]; $cache = $_REQUEST["dojo_preventCache"]; if ( $action == "getChildren") { $jsonData =Zend_Json::decode($data); // get the node object $node = $jsonData['node']; $nodeArray = getChildren($node); print Zend_Json::encode($nodeArray); } function getChildren($node) { $path = $node['objectId']; $dir=new SystemFile($path,$node['isFolder']); $files=$dir->listChildren(); $i = 0; foreach ($files as $file) { $node = array( "title"=> "".$file->name, "widgetId" => "".$file->name, "objectId"=> "".$file->fullPath, "isFolder"=> $file->isDir ); $returnArray[$i] = $node; $i++; } return $returnArray; } ?>
  5. Since this file contains a references to functions in the Zend Framework (i.e. Zend_Json::encode), we will have to point the PHP IDE to the Frameworks location. In the PHP Explorer view, select the "fileExplorer" project, open the properties by selecting popup menu Properties.
  6. Select PHP Include Path, and then select the Libraries tab.
  7. Hit Add External Folder and then select the directory where the Zend Frameworks libraries are located. This would be something like zendFrameWorkDirectory/library. Hit OK.
  8. Hit Ok again to close the Properties dialog.
  9. Create a debug configuration by selecting from the main window Run->Debug. Select PHP Web Server and then select New from the popup menu.
  10. Fill in the fields as follows:
    FieldValue
    Nametreelisten
    ServerphpServer (should be a choice in the combo box)
    Publish to Serverselected
    File/fileExplorer/treelisten.php
  11. For the URL field, paste in the text previously copied from the XHR Monitor view. You will have to prepend "http:/localhost" which would not have been in the copied text. This will simulate the http request which comes in when the root node is expanded.
  12. Hit Debug to run. You should see output in the Debug Output view. This is data in JSON format.

Finishing off the AJAX application

  1. Now go debug the Ajax application again. The tree should now be fully functional.
  2. Select the 2nd icon from the right on the Mozilla Browser. This allows you use CTRL+click to select dom elements in the browser.
  3. Make sure you are in the Mozilla perspective. On the left hand side, you will see the DOM Inspector view. This contains a tree which represents the current browser DOM. Select a node in the tree, and you will see a flashing box around the dom element in the browser. Below the tree, you will see the attributes of the currently selected dom element. These attributes are editable.
  4. Select the 2nd icon from the right on the Mozilla Browser. This allows you use CTRL+click to select dom elements in the browser. CTRL+click on something in the browser, and you will see the corresponding tree node in the DOM Inspector view.
  5. Select the CSS view near the bottom. Here you can see and edit the CSS values.