PHP5 directory browsing/image display utility, Part 1

I wrote this PHP5 utility as a quick and easy way to present design mockups to a reviewing party. It needed to be short and simple enough for a Designer to understand (and not freak out) and copy/paste.

This script will read through a directory, either a default one, or one passed to the page via query string. It automatically reads every file in the given directory and displays the images found there. The Designer can name the files anything they want and they don’t have to edit any XML files. This code can also be used to spit data out to either HTML or Flash.

<?php $version = htmlspecialchars($_GET["version"]); ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>creative presentation</title>
    <link rel="stylesheet" href="css/common.css" type="text/css">		
</head>
<body>

<div id="container">
<h1> Here're the images</h1>

<?php		

	$contnt1 = "";
	$contnt2 = "";
	$myArr = array();	
	
	if($version == null) 			 
		$version = "images"; 
	
	$myDir = opendir($version);		
	while (false !== ($file = readdir($myDir)))
    {
		if($file != "." && $file != ".." && $file != ".DS_Store")
		{				
			//$contnt1 = "file name = ".$file."<br />";
			//echo $contnt1."<br><br>";
			array_push($myArr, $file);
		}
	}
	closedir($myDir);	
	
    $contnt2 = spitOutImgs("html", $version, $myArr);	
	echo $contnt2;	

	function spitOutImgs($whichFrontEnd, $version, $arr)
	{
		for($i = 0; $i < count($arr); $i++)
		{	
			$pth = $version."/".$arr[$i];
			$s = getimagesize($pth);
			if($whichFrontEnd == "html"){				
				$c2 = "<div class='dv1'><img src='".$version."/".$arr[$i]."' /><br />".$s[0]."x".$s[1]."</div>";	
			} else if($whichFrontEnd == "flash") {
			    $c2 = $version."/".$arr[$i];
			}	
			echo $c2; 		
		}
	}		
	
?>

</div>
</body>
</html>

In Part 2, I rewrite the above code as a Class file.

J2EE Code Behind for Flex / Actionscript Developers

Just re-stumbled upon Ted Patrick’s post on using the Code Behind technique in Flex with Actionscript. Ted wrote about how he used it in .NET and in Flex. There’re more explanations of Code Behind here and here.

The same technique exists in J2EE in the form of JSP and Java Beans. It’s also known as Model 1 architecture (Model 2 is an example of MVC). As Ted states MXML is just a bunch of tags that are really ActionScript code under the hood and a .mxml file is a .as file. JSP can be thought of as tags that represent Java code. They’re XML-like tags that the compiler breaks down into a Java class, specifically, a Servlet.

JSP is used for displaying visual content, what’s called the “View” in design pattern terminology. Java Beans are Java class files that handle the application’s logic.

You can use a JSP import statement to use a Bean to create objects and then access its public methods like so:

<jsp:useBean id="calc" class="com.mysite.MyCalc" scope="session" />

<html><head><title>JSP Code Behind</title></head><body>

<%
	double myResult = calc.addTwoNumbrs(92.2231, 2384.0);
	out.print("myResult = " + myResult);
        //in the browser  you should see
        //myResult = 2476.2231
%>

</body></html>

Here “id=calc” refers to the object reference, or an instance name called “calc.” The “com.mysite.MyCalc” part specifies the package “com.mysite” and class “MyCalc.” For the Tomcat 6 servlet container (or application server), this Bean would live inside the Tomcat6/webapps/yourApp/WEB-INF/classes/com/mysite/ directory.

package com.mysite;
public class MyCalc {
  public void MyCalc() { }
  public double addTwoNumbrs(double num1, double num2 )
  {
     return num1 + num2;
  }
}