Attachment 83608 Details for Bug 210724 – example file from our own website

example file from our own website

php_atf.html (text/plain), 21.22 KB, created by David Williams

on 2007-11-23 03:51:42 EST

(hide)

Description:

Filename:

MIME Type:

Creator: David Williams

Created: 2007-11-23 03:51:42 EST

Size: 21.22 KB

patch

obsolete

><html>
>
><title>How to create a Rich Internet Application using ATF and PHP IDE</title>
>
><body>
>
>
><h2>Introduction</h2>
>
><p>
>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.
></p>
><p>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.</p>
>
>
><p> You must first download the PHP IDE from <a href="http:www.eclipse.org/php">www.eclipse.org/php</a>.
>Install as directed, including the necessary PHP server and debug components.  Then download and install the ATF tools from <a href="http:www.eclipse.org/atf">www.eclipse.org/ATF</a>.
>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.
></p>
><p>
>This PHP application makes use of the Zend PHP frameworks which you can download for free from 
><a href="http://framework.zend.com/">http://framework.zend.com/</a>.  After you have installed 
>the frameworks, you must update the <b>include_path</b> entry in your <b>php.ini</b> file to point to 
>the location of the frameworks.
></p>
>
><h2>Creating a PHP Application</h2>
><p>
>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).
></p>
><p>
><ol>
><li>
>Start the combined PHP/Ajax eclipse you installed as previously directed.
></li>
><li>
>Create a new PHP Project by selecting the menu <b>File->New->Project</b> and then selecting
><b>PHP->PHP Project</b>. Hit <b>Next</b>, and then enter the project name "fileExplorer", and hitting <b>Finish</b>.
>If prompted to switch perspectives, answer <b>Yes</b>.
></li>
><li>
>Create a new PHP file by first selecting the previously created project,
>then select the popup menu (Right mouse button on windows) <b>New->PHP File</b>.  Change
>the filename to "file.php" and hit <b>Next</b>.  Here you can select a template for the initial
>contents of the new PHP file.  Choose the "simple" template and hit <b>Finish</b>.
>The PHP editor is now displayed for the new file.  Replace the contents with the following:
><xmp>
><?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;
> 	}
> }
>?>
>
></xmp>
>Notice that keywords such as <b>class</b> are highlighted. Save the contents (ctrl+s).
></li>
>
><li>
>Move the cursor to after a <b>this-></b> and hit ctrl+enter.  A list of possible values
>is shown. Escape out.  Move the cursor to the other side of the <b>=</b> and hit ctrl+enter.  A
>list of possible functions or classes are displayed.  Escape out.
></li>
><li>
>In the left hand margin you will see several <b>-</b> 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.
></li>
><li>
>Move the cursor over the <b>dir</b> 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.
></li>
><li>
>Select (double click on) the <b>basename</b> function call (in the first function).  Display the popup menu
>menu and select <b>Open PHP Manual</b>.  The PHP manual entry for the "basename" function is 
>displayed.
></li>
><li>
>Display the popup menu and choose <b>Format->Document</b>.  The php file is reformatted.
></li>
><li>
>Create another PHP file named "filebrowse.php" with the following contents:
><xmp>
><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>
></xmp>
>In the line <xmp> $files=new SystemFile('/temp');</xmp>, change the directory location to something appropriate for your machine.
>
></li>
><li>
>Select <b>SystemFile</b> (near the middle of the file).  Display the popup menu and select
><b>Open Declaration</b>.  The declaration (in the file "file.php") is displayed.
></li>
><li> 
><h4>Outline View</h4>
>Make sure the editor for the file "fileBrowse.php" is selected (click in the tab near the top middle).
>Select the <b>outline</b> view which should be a tab near the left middle.  This shows the PHP
>structure of the file. 
></li>
><li> 
>Choose <b>html</b> 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.
></li>
><li> 
><h4>PHP Project Outline View</h4>
>Select the <b>PHP Project Outline</b> tab which should be just to the left of the
><b>Outline</b> tab. Expand the nodes in the tree.  This outline shows all the 
>classes and functions defined in the project of the currently selected file.
></li>
>
><li> 
><h4>PHP Functions View</h4>
>Select the <b>PHP Functions</b> tab which should be just to the left of the
><b>PHP Project Outline</b> 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.
></li>
>
></ol>
></p>
>
><h2>Debugging the PHP Application</h2>
><p>During these debugging steps, you may receive a <b>Debug Error</b> message saying "connection failed".
>You should be able to ignore these messages.
>
><ol>
><li>
>In the <b>PHP Explorer</b> view in the upper left corner, select the file "fileBrowse.php",
>then from the main menu, select <b>Run->Debug</b>.
></li>
><li>
>Select <b>PHP Web Server</b>, then popup menu item <b>New</b>.
></li>
><li>
>Enter "phpFileBrowser" in the <b>Name</b> field.
></li>
><li>
>In the <b>Server</b> area, hit the <b>New</b> button.
></li>
><li>
>Enter "phpServer" in the <b>Name</b> field.
></li>
><li>
>Select the <b>Publish Projects to this Server</b> checkbox.
></li>
><li>
>Enter the publish location of your web server.  For an Apache server, this would
>be <i>apacheDirectory</i><b>/htdocs</b>.
></li>
><li>
>Hit <b>Finish</b>.
></li>
><li>
>In the <b>Name</b> field enter  "/fileExplorer/fileBrowse.php".  
></li>
>Change the <b>Context</b> field to be "fileExplorer".
></li>
><li>
>Change the <b>URL</b> field to be "http://localhost/fileExplorer/fileBrowse.php".
></li>
><li>
>Hit <b>Finish</b>.
></li>
><li>
>If presented with a prompt about changing to <b>PHP Perspective</b>, select <b>Yes</b>.
></li>
><li>
>The perspective will be switched to the <b>PHP Debug</b> perspective.
>In the right hand side, there are 2 view, the <b>Debug Output</b> view which shows
>the html generated by the PHP.  The <b>Browser Output</b> shows the rendering.
></li>
><li>
>Select the editor for the file "fileBrowse.php". Change the line :
><xmp>
> $dirs=$files->listChildren();
></xmp>
>to
><xmp>
> $dirs=$files->notDefinedlistChildren();
></xmp>
>and then save the file.
></li>
><li>
>Debug again (should be able to just hit debug icon in the eclipse toolbar).
>Select the <b>Console</b> 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.
></li>
><li>
>Set a breakpoint in the file by double clicking in the left hand margin of the PHP editor.
></li>
><li>
>Debug again.  You will see execution halt at the breakpoint.  You will see the current variable
>values in the <b>Variables</b> view near the top middle.
>You can step in/over/out of code with the keys <b>F5</b>, <b>F6</b>, and <b>F7</b>.
></li>
>
></ol>
>
><h2>Creating an Ajax Application</h2>
>
><ol>
><li>
>In the <b>PHP Explorer</b> view in the upper left corner, select the file "fileExplorer" project.
></li>
><li>
>Select the popup menu <b>New->Other</b>.
></li>
><li>
>Select <b>Dojo->Dojo Application</b> and hit <b>Next</b>.
></li>
><li>
>Enter "ajaxFileBrowser" in the <b>Name</b> field.  This will automatticaly fill in the
><b>Location</b> field.  The <b>Project</b> field should already be set to "fileExplorer".
>Hit <b>Next</b>.
></li>
><li>
>Deselect the <b>Debug</b> checkbox and hit <b>Finish</b>.
></li>
><li>
>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 <b>PHP Explorer</b>
>view to see this.
></li>
><li>
>From the main menu, select <b>Window->View->Other</b>.  Then select <b>General->Snippets</b>.
>Locate where the <b>Snippets</b> view opened at.  If you are still in the <b>PHP</b> perspective,
>it is probably on the right hand side.
></li>
><li>
>In the <b>Snippets</b> view, select "Dojo".  You will see available Dojo code snippets.
></li>
><li>
>In the <b>Snippets</b> view, select "Dojo".  You will see available Dojo code snippets.
></li>
><li>
>Drag the "tree" snippet into the editor under the <xmp></xmp> comment.
>The code/tags for a dojo tree will be inserted into html file.
></li>
><li>
>Replace the "ajaxFileBrowser.html" contents with the following: 
><xmp>
><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);
>	
>		
>
>	}
> 
>	
>/* 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>
></xmp> 
></li>
><li>
>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".
><br/><b>Note:</b> Because of the dynamic nature of the javascript language, many errors
>do note show up until the script is run.
></li>
></ol>
>
>
><h2>Debugging a Ajax Application</h2>
>
><ol>
><li>
>Set a breakpoint (double click in the left margin) in the function removedClicked in the file ajaxFileBrowser.html.
></li>
><li>
>Select the "ajaxFileBrowser.html" in the explorer view. From the popup menu, select
><b>Debug as->Debug in Mozilla</b>.
></li>
><li>
>The <b>Run on Server</b> dialog will appear.  Hit <b>Next</b>.
></li>
><li>
>Select the <b>Publish Projects to this Server</b> checkbox. In the <b>Directory</b> field,
>enter the same directory which you entered for the PHP publish location.  Assuming
>an Apache server, this would be <i>/apacheLocation</i>/htdocs.
></li>
><li>
>Hit <b>Finish</b>.  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".
></li>
><li>
>Show the popup for the root node, and chose "remove".  You should get a message <b>
>Confirm Perspective Switch</b>.  Hit <b>Yes</b>.
></li>
><li>
>You should now be in the <b>Debug</b> 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 <b>F5</b>, <b>F6</b>, and <b>F7</b>.
>
></li>
>
><li>
>The <b>Variables</b> view in the upper right side shows the current variable values.
>The <b>Script View</b> 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.
></li>
><li>
>Continue running the script by hitting <b>F8</b> or clicking the run icon.
></li>
><li>
>Open the <b>Mozilla</b> perspective.  You can do this by going to the main menu and
>selecting <b>Windon->Open Perspective->Other</b>, and then selecting <b>Mozilla</b>.
></li>
><li>
>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.  
></li>
><li>
>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.  
></li>
><li>
>In the browser, expand the "root" node.  You will get an error message since the server side
>is not yet implemented.
></li>
><li>
>Select the <b>XHR Monitor</b> 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 <b>XHR Monitor</b> tab to make the view take the full screen.
></li>
><li>
>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.
></li>
><li>
>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.
></li>
></ol>
>
><h2>Creating and debugging the PHP request handler</h2>
><ol>
>
><li>
>Switch back to the PHP Perspective.  
></li>
><li>
>Select the "fileExplorer" project, and create a new php file by selecting the popup menu
><b>New->PHP File</b>.
></li>
><li>
>Select the "fileExplorer" project, and create a new php file by selecting the popup menu
><b>New->PHP File</b>.
></li>
><li>
>Name the file "treelisten.php" and hit finish.  Replace the file contents with the following:
><xmp>
><?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;
>   }
>?>
></xmp>
></li>
><li>
>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 <b>PHP Explorer</b> view, select the
>"fileExplorer" project, open the properties by selecting popup menu <b>Properties</b>.
></li>
><li>
>Select <b>PHP Include Path</b>, and then select the <b>Libraries</b> tab.
></li>
><li>
>Hit <b>Add External Folder</b> and then select the directory where the Zend Frameworks libraries are located.
>This would be something like <i>zendFrameWorkDirectory</i><b>/library</b>. Hit <b>OK</b>.
></li>
><li>
>Hit <b>Ok</b> again to close the Properties dialog.
></li>
><li>
>Create a debug configuration by selecting from the main window <b>Run->Debug</b>.
>Select <b>PHP Web Server</b> and then select <b>New</b> from the popup menu.
></li>
><li>
>Fill in the fields as follows:
><table rules="all" border="1">
><tr><th>Field</th><th>Value</th></tr>
><tr><td>Name</td><td>treelisten</td></tr>
><tr><td>Server</td><td>phpServer (should be a choice in the combo box)</td></tr>
><tr><td>Publish to Server</td><td>selected</td></tr>
><tr><td>File</td><td>/fileExplorer/treelisten.php</td></tr>
></table>
></li>
><li>
>For the <b>URL</b> field, paste in the text previously copied from the <b>XHR Monitor</b> 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.
></li>
><li>
>Hit <b>Debug</b> to run.  You should see output in the <b>Debug Output</b> view.  
>This is data in JSON format.
></li>
>
></ol>
>
><h2>Finishing off the AJAX application</h2>
><ol>
><li>
>Now go debug the Ajax application again.  The tree should now be fully functional.
></li>
><li>
>Select the 2nd icon from the right on the <b>Mozilla Browser</b>.  This allows you use CTRL+click to select dom
>elements in the browser.
></li>
><li>
>Make sure you are in the <b>Mozilla</b> perspective.  On the left hand side, you will see the <b>DOM Inspector</b> 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.
></li>
><li>
>Select the 2nd icon from the right on the <b>Mozilla Browser</b>.  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 
><b>DOM Inspector</b> view. 
></li>
><li>
>Select the <b>CSS</b> view near the bottom.  Here you can see and edit the CSS values.
></li>
>
></ol>
>
></body>
>

Actions: View

Attachments on bug 210724: 83608