For checking and verifying the students answers, I use a solution where each sortable item carries a single character tag. In the months example, january has the tag character “a”, february has the tag character “b” etc. This means that a correct answer would be “abcdefghijkl” – all the 12 months in the correct order.

My problem is the following: What algorithm to use to get a “pedagogically usable and fair” result value when the student’s answer pattern is partly correct, but differs from the correct answer in a way that php Levenshtein and similar_text algorithms doesn’t handle well. Example:

similar_text('jonas', 'xxjon', $similar); echo $similar; // returns 60
similar_text('jonas', 'asjon', $similar); echo $similar; // returns 60 <- !
echo levenshtein('jonas', 'xxjon'); // returns 4
echo levenshtein('jonas', 'asjon'); // returns 4  <- !

As seen in these examples, the similar_text and the Levenshtein functions returns the same value for both strings, in spite of the fact that the “asjon” string is much closer to the “jonas” when it comes to the character content.

I’ve been lurking around for some more elaborated solution that would suite my needs better, but not yet found one. So, I had to give it a go myself. And here’s what I’ve come up with:

static public function string_compare($str_a, $str_b)
{
    $length = strlen($str_a);
    $length_b = strlen($str_b);

<code>    $i = 0;
    $segmentcount = 0;
    $segmentsinfo = array();
    $segment = '';
    while ($i < $length)
    {
        $char = substr($str_a, $i, 1);
        if (strpos($str_b, $char) !== FALSE)
        {
            $segment = $segment.$char;
            if (strpos($str_b, $segment) !== FALSE)
            {
                $segmentpos_a = $i - strlen($segment) + 1;
                $segmentpos_b = strpos($str_b, $segment);
                $positiondiff = abs($segmentpos_a - $segmentpos_b);
                $posfactor = ($length - $positiondiff) / $length_b; // <-- ?
                $lengthfactor = strlen($segment)/$length;
                $segmentsinfo[$segmentcount] = array( 'segment' => $segment, 'score' => ($posfactor * $lengthfactor));
            }
            else
            {
                 $segment = '';
                 $i--;
                 $segmentcount++;
             }
         }
         else
         {
             $segment = '';
            $segmentcount++;
         }
         $i++;
     }

     // PHP 5.3 lambda in array_map
     $totalscore = array_sum(array_map(function($v) { return $v['score'];  }, $segmentsinfo));
     return $totalscore;
}

Some results:

• jonas / jonax : 0.8
• jonas / sjona : 0.68
• jonas / sjonas : 0.66
• jonas / asjon : 0.52
• jonas / xxjon : 0.36

I’m sure i isn’t perfect, and that it could be optimized, but nevertheless it seems to produce the results that I’m after… One weak spot is that when strings have different length, it produces different result when the values are swapped. But, will do for a start!

Create a new Google spreadsheet, and grab the “key” part from the browser address bar query string. This is the unique key used by the api to reference your spreadsheet. You also have to set your google account username and password.

The script isn’t fancy at all, but it does the basics:

• Get the spreadsheet data content into an array
• Get the column names
• Dynamically adds some new rows

It’s a good start, I guess. The Zend Gdata Spreadsheet api seems to be well developed. I’m looking for solutions for doing the same thing with text documents, but I haven’t come through yet.

Well, here’s the script. Be my guest!

<?php
require_once 'Zend/Loader.php';
Zend_Loader::loadClass('Zend_Gdata_AuthSub');
Zend_Loader::loadClass('Zend_Gdata_ClientLogin');
Zend_Loader::loadClass('Zend_Gdata_Spreadsheets');
Zend_Loader::loadClass('Zend_Gdata_Docs');

echo "<pre>";

//-------------------------------------------------------------------------------
// Google user account

$username = 'yourusername'; // Your google account username
$password = 'yourpassword'; // Your google account password

//-------------------------------------------------------------------------------
// Document key - get it from browser addres bar query key for your open spreadsheet

$key = 'tx1LYk4BpIQaglM38cJbTNA';

//---------------------------------------------------------------------------------
// Init Zend Gdata service

$service = Zend_Gdata_Spreadsheets::AUTH_SERVICE_NAME;
$client = Zend_Gdata_ClientLogin::getHttpClient($username, $password, $service);
$spreadSheetService = new Zend_Gdata_Spreadsheets($client);

//--------------------------------------------------------------------------------
// Example 1: Get cell data

$query = new Zend_Gdata_Spreadsheets_DocumentQuery();
$query->setSpreadsheetKey($key);
$feed = $spreadSheetService->getWorksheetFeed($query);
$entries = $feed->entries[0]->getContentsAsRows();
echo "<hr><h3>Example 1: Get cell data</h3>";
echo var_export($entries, true);

//----------------------------------------------------------------------------------
// Example 2: Get column information

$query = new Zend_Gdata_Spreadsheets_CellQuery();
$query->setSpreadsheetKey($key);
$feed = $spreadSheetService->getCellFeed($query);
$columnCount = $feed->getColumnCount()->getText();
$columns = array();
for ($i = 0; $i < $columnCount; $i++) {
	$columnName = $feed->entries[$i]->getCell()->getText();
	$columns[$i] = strtolower(str_replace(' ', '', $columnName));
}
echo "<hr><h3>Example 2: Get column information</h3>";
echo "Nr of columns: $columnCount";
echo "<br>Columns: ";
echo var_export($columns, true);

//-------------------------------------------------------------------------------------------------
// Example 3: Add cell data

$testData = array();
foreach ($columns as $col) {
	$testData[$col] = "Dynamically added " . date("Y-m-d H:i:s") . " in column " . $col;
}
$ret = $spreadSheetService->insertRow($testData, $key);
//echo var_export($ret, true);

Creating the project Mvp4gEx1

Create a new GWT Web Application Project in Eclipse, give it the project name Mvp4gEx1, use a package path of your liking (in this tutorial we use ex as a minimalistic root package), and make sure to uncheck the Use Google App Engine checkbox.

Testrun the example (using F11) to make sure that it compiles and runs in hosted mode as expected.

Mvp4g dependencies

To get us up and running, we need some library jars.
Here I use the following:

• commons-configuration-1.6.jar
• commons-lang-2.5.jar
• aopalliance.jar
• gin-1.0.jar
• guice-2.0.jar
• mvp4g-1.2.0.jar

Have a look at http://code.google.com/p/mvp4g/wiki/HowtoIntegrateMvp4g for information on where to download these libraries.

Create a lib folder at the root of your project, and put the above jars in that folder.

Now, we have to make sure that these jars are included in our project build path. Rightclick on your project root, and use the Properties menu alternative to open the project properties dialog box. Select the alternative Java Build Path, and select the tab Libraries.

1. Press the button Add JARs…
2. Navigate to the Mvp4gEx1 > lib folder, and select the jars
3. Press the OK button

So, now we have those jars included in our project.

Before we can use them (or – actually – Mvp4g can use them, we don’t!) we have to make some changes in our gwt module definition xml. Open Mvp4gJson.gwt.xml, located in your package root. Make sure to to the following changes:

1. ADD <inherits name=’com.mvp4g.Mvp4gModule’/> under the Other module inherits comment.
   This gives us access to the Mvp4g classes.
2. CHANGE the entry point tag to <entry-point class=’com.mvp4g.client.Mvp4gEntryPoint’/>
   This will replace the normal GWT entry point class with a mvp4g-specific one that we will create in a minute.

The complete Mvp4gEx1.gwt.xml will look something like this:

<?xml version="1.0" encoding="UTF-8"?>
<module rename-to='mvp4gex1'>
  <!-- Inherit the core Web Toolkit stuff.                        -->
  <inherits name='com.google.gwt.user.User'/>

  <!-- Inherit the default GWT style sheet.  You can change       -->
  <!-- the theme of your GWT application by uncommenting          -->
  <!-- any one of the following lines.                            -->
  <inherits name='com.google.gwt.user.theme.standard.Standard'/>
  <!-- <inherits name='com.google.gwt.user.theme.chrome.Chrome'/> -->
  <!-- <inherits name='com.google.gwt.user.theme.dark.Dark'/>     -->

  <!-- Other module inherits                                      -->
  <inherits name='com.mvp4g.Mvp4gModule'/>

  <!-- Specify the app entry point class.                         -->
  <entry-point class='com.mvp4g.client.Mvp4gEntryPoint'/>

</module>

Please note: There are two ways of implementing the eventbus:

1. as application entry point (the method used here), and
2. invoked from the GWT standard entry point class. Here’s more info about this.

Creating the event bus

The Mvp4g architecture is built around an eventbus. It acts like a command central, that ties together all other parts of the application. The point is, that these other parts doesn’t have to know of each other, they can act independently in a loose coupled manner. Wich in turn is what we’re after to build testable, maintainable and scaleable solutions.
The eventbus is so essential that it acts as the entry-point for our application (replacing the GWT-normal EntryPoint-inherited class).

So let’s create one. In your package.client, create an AppEventBus interface extending the mvp4g EventBus interface:

This event bus is going to serve as our application entrypoint, and since we need a way to connecting link with the browser/html, we are soon going to create a RootView with a corresponding RootPresenter to give us this connection.

Here we can see the code for our minimalistic AppEventBus, with the @Event(startView = RootView.class) annotation telling the Mvp4g system what class to use as our main start view:

// ex.client.AppEventBus.java
package ex.client;

import com.mvp4g.client.annotation.Events;
import com.mvp4g.client.event.EventBus;

@Events( startView = RootView.class )
public interface AppEventBus extends EventBus {
	// No events to handle yet...
}

RootView and RootPresenter

Our RootView, wich will hold our basic UI controls, will inherit from Composite:

// ex.client.RootView.java
package ex.client;

import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.HorizontalPanel;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.TextBox;

public class RootView extends Composite {
 private Button button = new Button("Button");
 private TextBox textbox = new TextBox();
 private Label label = new Label("Label");
 private HorizontalPanel horizontalPanel = new HorizontalPanel();

 public RootView () {
 this.horizontalPanel.add(button);
 this.horizontalPanel.add(textbox);
 this.horizontalPanel.add(label);
 initWidget(this.horizontalPanel);
 }
}

Please note that this view is a stupid one — no button click handling, no connection to the outer world. This is the way it’s supposed to be in this type of loose coupled architecture.

The RootView needs a RootPresenter that acts like a bridge between the ui (RootView) and the rest of the application (via the AppEventBus). The RootPresenter will inherit from BasePresenter:

// ex.client.RootPresenter.java
package ex.client;

import com.mvp4g.client.annotation.Presenter;
import com.mvp4g.client.presenter.BasePresenter;

@Presenter( view = RootView.class )
public class RootPresenter extends BasePresenter {

}

Please note that the BasePresenter class needs two type arguments: view and event bus:
public class RootPresenter extends BasePresenter<RootView, AppEventBus> {
Also note the @Presenter annotation that tells the mvp4g system what view this class is serving.

Time for some action!

So, now we have a stupid view, a dead presenter and an empty event bus. Great! Now, with our fancy UI (a button, a textbox and a label), we will try to accomplish the following: When the user presses the button, the text written in the textbox will be copied into the label.

There are three ways of handling this “data status change”:

1. Putting the logic into the view, by adding a clickhandler to the button.
   Completely simple, quick and un-fancy! It works here, but not if 20 views and models are depending on the same data. Then we will soon get dependency spaghetti hell that Mvp4g is built to help us aviod.
   (Code example 1 below)
2. Putting the logic into the presenter, by registering the clickhandler there and taking care of the logic. This can be done because the mvp4g system has injected the view into the presenter, so we can access it easily.
   Only a fraction better than the solution above. At least we are handling data change in a class that’s created for this kind of things – wich the view clearly isn’t. It’s also an important step towards doing it the “right way” below.
   (Code example 2 below)
3. Dispatch our data status change to the eventbus, and letting anyone depending on the data change taking care of it. This means that we tell the application event bus: “Hey, some data has changed”. At the same time we are handling over the responsibility to take this information further to the event bus. It will broadcast it to the presenters (or EventHandler classes – subject for next tutorial) that are registered to care.

So, lets have a look at some code:

Code example 1: Logic in the view. Have a quick look, and forget it:

public RootView () {
 this.horizontalPanel.add(button);
 this.horizontalPanel.add(textbox);
 this.horizontalPanel.add(label);
 initWidget(this.horizontalPanel);
 // code below added...
 button.addClickHandler(new ClickHandler() {
 public void onClick(ClickEvent event) {
 label.setText(textbox.getText());

 }
 });
 }

Code example 2: Logic in the presenter – possible via dependency injection, as the view (RootView) is injected in the presenter, and accessible via the protected property view.

We create the click handler in the overridden bind() method, wich is invoked when the presenter is activated.

@Presenter( view = RootView.class )
public class RootPresenter extends BasePresenter {
 public void bind() {
 view.button.addClickHandler(new ClickHandler() {
 public void onClick(ClickEvent event) {
 view.label.setText(view.textbox.getText());
 }
 });
 }
}

Code example 3: Using the event bus to notify the application about our data change.

First, let’s create a event bus method that we can call from our presenter. As we are dealing with textbox text change, we call our eventbus method “textChange”:

@Events(startView = RootView.class)public interface AppEventBus extends EventBus { @Event(handlers = {}) public void textChange(String newText);}

Now, we can call this eventbus method from our presenter, like this:

view.button.addClickHandler(new ClickHandler() {
 public void onClick(ClickEvent event) {
 //view.label.setText(view.textbox.getText()); // <-- Replace this...
 eventBus.textChange(view.textbox.getText());  // <-- with this...
 }
 });

The eventbus is now recieveing information about our data change, but there it stops because no one’s listening!

We need to register one or many recepients for the event information. Right now, we just have one actor – the RootPresenter – so this guy will now act not only as a broadcaster, but also as a reciever…

First, let’s register the RootPresenter as a listener to the textChange event:

public interface AppEventBus extends EventBus {

 @Event(handlers = {RootPresenter.class}) // <-- RootPresenter added here!
 public void textChange(String newText);

}

Next step is to add a handler for our event method. This is done by adding  “on” in the beginning of the method name.

Thus, the event bus method textChange needs a presenter handler called onTextChange. Let’s say we have a event bus method named loginStatusChange — this would need a presenter handler called onLoginStatusChange etc.

The RootPresenter with onTextChange handler added, and some code to update the view label, will look like this:

@Presenter( view = RootView.class )
public class RootPresenter extends BasePresenter {
 public void bind() {
 view.button.addClickHandler(new ClickHandler() {
 public void onClick(ClickEvent event) {
 //view.label.setText(view.textbox.getText()); // <-- Replace this...
 eventBus.textChange(view.textbox.getText());  // <-- with this...
 }
 });
 }

 public void onTextChange(String newText) {  // this method recieves the eventbus textChange event
 view.label.setText(newText);
 }
}

So, now we’ve completed the data roundtrip. No real benefits this far, of course, but let’s just say that we had three or thirty different views that should be updated instead of one. All we have to do is to create the view/presenter pair, and register the presenter as a listener to the event in focus. We wouldn’t add any tight coupling but to the event bus itself, other parts would still act independently.

So, now we have some raw json data back from our server script. How to do something meaningful with it?

The json data that our php script produced is an array of users. To break this down to objects, we can use two entities:

• User, with properties name and age
• Users, array of User

Following the GWT Get started Tutorials, we use javascript overlay types for these objects – they are javascript objects, but we interact with them through a java interface. This means that instead of extending the native java types (Object respectively ArrayList), we will use the javascript overlay counterparts:

• User extends JavaScriptObject
• Users extends JsArray<User>

So, let’s create those two classes. They’re nothing more than simple value objects, so let’s put them in se.cambiata.gwtphp.client.vo package.
Here’s the code for User:

// User
package se.cambiata.gwtphp.client.vo;
import com.google.gwt.core.client.JavaScriptObject;
public class User extends JavaScriptObject {
	protected User() {};
	public final native String getName() /*-{ return this.name; }-*/;
	public final native int getAge() /*-{ return this.age; }-*/;	
	}
}

// Users
package se.cambiata.gwtphp.client.vo;
import com.google.gwt.core.client.JsArray;
public class Users extends JsArray {
	protected Users() {}
	public static final native Users usersFromJson(String json) /*-{
		return  eval(json);
	}-*/;		
}

Now, let’s add some users to our application. In the GwtPhp.java, after the onModuleLoad() method, add the following code:

	private Users users;

	private void setUsersFromJson(String jsonString) {
		this.users = Users.usersFromJson(jsonString);
		//-----------------------------------------
		// accessing a user
		User user = this.users.get(1);
		GWT.log(user.getName());
		GWT.log(Integer.toString(user.getAge()));
	}

This gives us users as a property of the application, and a setter-style method to invoke those users from the json code.
So, let’s feed this setter method with our recieved json.
In the HttpRequestCallback onResponseRecieved method, change the code to include a call to setUsersFromJson — something like this:

					public void onResponseRecieved(Request request, Response response) {
						GWT.log("HttpRequestCallback.onResponseRecieved" + response.getText());
						setUsersFromJson(response.getText());
					}

		Users user = this.users.get(index);

Php server script

1. The php server script could be created inside the current GWT project directory, or as a separate project outside. For simplicity, we here create a server folder inside the GwtPhp project, and a php file (test.php) inside of that one:

2. Populate the test.php file with something that results a valid json, for example this:

<?php

$users = array();

$user = new StdClass();
$user->name = "John";
$user->age = 23;
$users[] = $user;

$user = new StdClass();
$user->name = "Claire";
$user->age = 32;
$users[] = $user;

echo json_encode($users);

Making the http request

3. Now we are ready to create a http request from our Gwt frontend to our php server script.

In java, we can’t simply pass a function as a parameter, so setting up a callback for an asynchronous event is a bit more tricky in java than in, say, as3 or php. But we can pass an object that has the required callback functions. This is best done by using an interface. Have a look here if you want to know more.

To simplify the callback object creation and the setup of an RequestBuilder, we will use a simple utility class. Create the file se.cambiata.gwtphp.client.HttpRequestUtil.java, and populate it like this:

// se.cambiata.gwtphp.client.HttpRequestUtil.java
package se.cambiata.gwtphp.client;

import com.google.gwt.http.client.Request;
import com.google.gwt.http.client.RequestBuilder;
import com.google.gwt.http.client.RequestCallback;
import com.google.gwt.http.client.RequestException;
import com.google.gwt.http.client.Response;
import com.google.gwt.http.client.RequestBuilder.Method;

public class HttpRequestUtil {

	public interface HttpRequestCallback{
		void onResponseRecieved(Request request, Response response);
		void onError(Request request, Throwable exception);
	}

	public static void makeRequest(String url, String jsonData, Method method, final HttpRequestCallback httpRequestCallback) {
		RequestBuilder requestBuilder = new RequestBuilder(method, url);
		requestBuilder.setHeader("Content-Type","application/json");
		try {
			Request request = requestBuilder.sendRequest(jsonData, new RequestCallback() {
				@Override
				public void onResponseReceived(Request request, Response response) {
					httpRequestCallback.onResponseRecieved(request, response);
				}
				@Override
				public void onError(Request request, Throwable exception) {
					httpRequestCallback.onError(request, exception);
				}
			});
		} catch (RequestException e) {
			e.printStackTrace();
		}
	}
}

4. Update the GwtPhp.java btnTest.addClickHandler to the following. Make sure that the url to the test.php script is valid:

		// se.cambiata.gwtphp.client.GwtPhp.java
		btnTest.addClickHandler(new ClickHandler() {
			@Override
			public void onClick(ClickEvent event) {
				GWT.log("Hello from GwtPhp");

				HttpRequestCallback httpRequestCallback = new HttpRequestUtil.HttpRequestCallback() {
					@Override
					public void onResponseRecieved(Request request, Response response) {
						GWT.log("HttpRequestCallback.onResponseRecieved" + response.getText());
<pre>						Window.alert("HttpRequestCallback.onResponseRecieved" + response.getText());</pre>
}
 public void onError(Request request, Throwable exception) {
 GWT.log("HttpRequestCallback.onError");
 }
 };
 String url = "http://localhost/GwtPhp/server/test.php";
 String postJsonData = "{'test':123}";
 HttpRequestUtil.makeRequest(url, postJsonData, RequestBuilder.POST, httpRequestCallback);
 }
 });

5. Refresh the GwtPhp app in the browser and press the button. This should call the php script, and an alert dialog box should pop up displaying the json recieved from the server.

In the above example we’re actually posting some data to the php script, but this isn’t delt with in this article. Be my guest!

Here’s how I got my setup working so that I can develop with GWT hosted mode served through a localhost php/XAMPP setup. In my setup, I’m using the following:

• Eclipse 3.5 with PDT
• GWT 2.1 SDK and Eclipse plugin

Serving GWT frontend in hosted mode from XAMPP localhost

In this example we are going to create a GWT project called GwtPhp.

1. Create a new GWT Web Application Project, but instead of using the default Eclipse workspace, make sure that you create it in the Xampp www root (for exampel D:\xampp\htdocs). Use a package path of your liking:

2. Replace the autogenerated application stub code (in this case se.cambiata.gwtphp.GwtPhp.java) with something simple, like this:

package se.cambiata.gwtphp.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.core.client.GWT;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.RootPanel;

public class GwtPhp implements EntryPoint {

	private Button btnTest = new Button("btnTest");

	public void onModuleLoad() {
		RootPanel.get().add(btnTest);

		btnTest.addClickHandler(new ClickHandler() {
			@Override
			public void onClick(ClickEvent event) {
				GWT.log("Hello from GwtPhp");
			}
		});
	}
}

3. Replace the project html ({project}/war/GwtPhp.html) to something of your liking (basically deleting the autogenerated unneeded stuf like divs and tables).

4. Testdebug in hosted mode by pressing debugbutton or using F11, and doubleclicking the address bar in the Development Mode eclipse view (on my machine http://127.0.0.1:8888/GwtPhp.html?gwt.codesvr=127.0.0.1:9997).
This executes the application in hosted mode using jetty server.
Pressing the button should display a “Hello from GwtPhp” message in the Development Mode panel log.

5. Now, we’re going to change the debug configuration for this project. Rightclick the eclipse project name in the package explorer (GwtPhp) and look for the Debug As > Debug Configurations… alternative. In the dialog box, select the GwtPhp item in the left tree, and open the Arguments tab.

Replace the program arguments with something like the following:

-noserver -remoteUI "${gwt_remote_ui_server_port}:${unique_id}"
-startupUrl http://localhost/GwtPhp/war/GwtPhp.html
-logLevel INFO -codeServerPort 9997
-war "D:\xampp\htdocs\GwtPhp\war" se.cambiata.gwtphp.GwtPhp

Make sure that the paths

• on the localhost (http://localhost/GwtPhp/war/GwtPhp.html)
• to the war (D:\xampp\htdocs\GwtPhp\war)
• to the entry point class (se.cambiata.gwtphp.GwtPhp)

correspond to your setup.

6. Save these settings by clicking on Debug button. Please note that the app isn’t runnable yet!

7. Now, we have to deploy the application once to the new location. (This only has to be done once!) Do this by clicking the red G bag icon (Gwt Compile Project), and then Compile button in the dialog. This builds the needed class files, javascript files etc in the new xampp location.

8. At this point, we should be able to testrun our app served from Xampp. Click the little arrow right of the debug button, and make sure to select the GwtPhp alternative (the one that we configured in point 5 above. This should display an address in the Development Mode panel, this time located on localhost:

Doubleclicking this address should open the browser pointing at localhost. and pressing the button should display the log message in the Development Mode panel.

At last, to clean things up a bit, you should be able to delete the redundant classes in the se.cambiata.gwtphp.shared and se.cambiata.gwtphp.server packages, as well as the GreetingService.java and GreetingServiceAsync.java classes in the se.cambiata.gwtphp.client package. Also delete or comment away the <source path=’shared’/> tag in the se.cambiata.gwtphp.GwtPhp.gwt.xml file.

Thanks to Bogdan for pointing this solution out at StackOverflow!

Go to part 2 of this article

I’ve always avoided it, with some kind of subconcious thought that I should use it, know it, that real grown-up programmers program in java.

I’we been working on a music notation solution for some months. Started in AS3, while one of the goals is accomplishing good solutions for browser-based notation display and playback. But I also at the same time want to create desktop editors for the notation stuff. And why not an Eclipse plug-in? That would be really cool…

So I started porting it to java the other day. It’s really interesting, and I learn a lot from it. Here are some experiences:

Eclipse Java IDE is great!

Flash Builder is ok, but not at all as mature as the java editor. Two highlights:

• Typecast suggestion, when a value doesn’t match the current variable type
• Great refactoring features – renaming works like a charm! (Not at all stable in Flash Builder 4)

When starting with a new language, a decent IDE helps a lot! Thank you, Eclipse guys!

Java is verbose!

Java doesn’t have an equivalent to php’s var_export() or Flex ObjectUtil.toString() functions. (At least not natively. There might of course be some implementations out there.) Instead it’s expected that the programmer overrides the toString() method with his/her own code. This is from a “best practice” example that I found:

StringBuilder s = new StringBuilder();
String NEW_LINE = System.getProperty("line.separator");
s.append(levelString + this.getClass().getName() + " Object {" + NEW_LINE);
s.append(object property 1...) etc.

Xml in java sucks! (compared to AS3)

Working with xml is a joy in AS3, thanks to the e4x implementation. The possibility to use xml as a native type makes it so intuitive. On the other hand, in native java, you have to rely on DOM, SAX and other solutions. That hurts!
Luckily thers a third part solution, JDOM (http://www.jdom.org/) that makes it a lot simpler. Highly recommended!

// Create a xml document - Java DOM
DocumentBuilderFactory dbfac = DocumentBuilderFactory.newInstance();
DocumentBuilder docBuilder = dbfac.newDocumentBuilder();
Document doc = docBuilder.newDocument();
Element root = xmlDocument.createElement("root");
xmlDocument.appendChild(root);

// Create a xml document - JDOM
Document document = new Document(new Element("root"));

// Create a xml document - AS3
var document:XML = new XML("<root></root>");

Java enums are great!

Example: I need an enum to handle how to flip the musical notes. This should have the values UP, AUTO and DOWN. These should correspond to the ordinal values -1, 0 and 1.
In java, a native enum looks like this, simple and clear:

public enum EnumDirectionUAD {
	UP(-1), AUTO(0), DOWN(1);
	public int ordinal;
	private EnumDirectionUAD(int ordinal) {
		this.ordinal = ordinal;
	}
}

// Grabbing the enum value from a string is as simple as this, using built-in enum method .valueOf(String):
EnumDirectionUAD uad = EnumDirectionUAD .valueOf("AUTO");

AS3 doesn't have enum types, so there has to be a pseudo-enum using classes with static constants:

public class EnumDirectionUAD {		
	public static const UP:EnumDirectionUAD = new EnumDirectionUAD("UP", -1);
	public static const AUTO:EnumDirectionUAD = new EnumDirectionUAD("AUTO", 0);
	public static const DOWN:EnumDirectionUAD = new EnumDirectionUAD("DOWN", 1);

	public var value:String;
	public var ordinal:int;
	public function EnumDirectionUAD(value:String, ordinal:int) {
		this.value = value;
		this.ordinal = ordinal;
	}
	// need to create the getByValue() method by myself...
	public static function get list():Array {
		return [UP, AUTO, DOWN];
	}
	public static function getByValue(value:String):EnumDirectionUAD {
		for each (var enumType:EnumDirectionUAD in EnumDirectionUAD.list) {
			if (value == enumType.value)
				return enumType;
		}
		return AUTO;
	}		
}

To get it running on XP, I did the following:

1. Download fresh php binaries (http://php.net/downloads.php). I choose the 5.2.14 zip package.
2. Unzip the downloaded php zip.
3. Download and unzip the the cairo-0.1.0-alpha-php-5.2.10.zip, conatining the cairo wrapper extension (php_cairo.dll). It can be found using the PHP 5.2 link available here: http://perisama.net/cairo/
4. Copying the php_cairo.dll from the downloaded cairo zip to the ext folder located insid the php directory.
5. Editing the php.ini-recommended  filename (found in the php directory) to php.ini.
6. Adding the line

   extension=ext/php_cairo.dll

   to the Windows Extensions part of php.ini (around line 664).

7. This should be it!

Now, it should be possible to run php from the command line with cairo commands.
For example, create a file named “test_cairo.php” with the following content and put it in the php directory:

<?php
// test_cairo.php
$s = new CairoImageSurface(CairoFormat::ARGB32, 400, 400);
$c = new CairoContext($s);
$c->fill();
$c->setSourceRGB(1, 0, 0);
$c->setLineWidth(50);
$c->arc(200, 200, 100, 0, 2 * M_PI);
$c->stroke();
$c->setSourceRGB(0, 0, 0.6);
$c->rectangle(0, 160, 400, 75);
$c->fill();

$s->writeToPng(dirname(__FILE__)  . '/test.png');

Now, run open a command line window in the php directory and run the testfile like this: >php thest_cairo.php This should produce a test.png looking like this:

The example is taken from Micahel Macleans (http://mgdm.net/) talk on Graphics with Cairo – excellent read! Michael is one of the lead developers on the php cairo wrapper. Thank you, Michael!

Thank you, Elisabeth Marie Smith (http://elizabethmariesmith.com/) for developing and hosting the http://perisama.net/cairo/!

UPDATE:

If you want to use the cairo extension with PHP 5.2,  Eclipse PDT and Zend debugging client (http://www.thierryb.net/pdtwiki/index.php?title=Using_PDT_:_Installation_:_Installing_the_Zend_Debugger), make sure to download the Non Thread Safe (PHP 5.2 NTS) from  http://perisama.net/cairo/.

• mx.utils.Base64Encoder — wrong result
• com.dynamicflash.util.Base64 — wrong result
• com.hurlant.util.Base64 — wrong result
• be.boulevart.as3.security.Base64 — works!

Haven’t had time to dive into it yet, but there seems to be different interpretations of the more obscure character codes, causing the different results.

The be.boulevart.as3.security.Base64 class is developed by Sven Dens (modelled after an Aardwulf Systems solution) and can be found here.

So here are my simple enctyption solutions:

Simplecrypt.as

package se.cambiata.utils.crypt {
	
	// The Base64 class is developed by Sven Dens, and can be found here: 
	// http://labs.boulevart.be/index.php/2007/05/23/encryption-in-as2-and-as3/
	import be.boulevart.as3.security.Base64;
	
	public class Simplecrypt {
		static public function encrypt(str:String, key:String = '%key&'):String {
			var result:String = '';
			for (var i:int = 0; i < str.length; i++) {
				var char:String = str.substr(i, 1);
				var keychar:String = key.substr((i % key.length) - 1, 1);
				var ordChar:int = char.charCodeAt(0);
				var ordKeychar:int = keychar.charCodeAt(0);
				var sum:int = ordChar + ordKeychar;
				char = String.fromCharCode(sum);
				result = result + char;
			}
			return Base64.encode(result);
		}

		static public function decrypt(str:String, key:String = '%key&'):String {
			var result:String = '';
			var str:String = Base64.decode(str);
			
			for (var i:int = 0; i < str.length; i++) {
				var char:String = str.substr(i, 1);
				var keychar:String = key.substr((i % key.length) - 1, 1);
				var ordChar:int = char.charCodeAt(0);
				var ordKeychar:int = keychar.charCodeAt(0);
				var sum:int = ordChar - ordKeychar;
				char = String.fromCharCode(sum);
				result = result + char;
			}
			return result;
		}
	}
}

Simplecrypt.php

<?php
class Simplecrypt {

	function encrypt($string, $key='%key&') {
		$result = '';
		for($i=0; $i<strlen($string); $i++) {
			$char = substr($string, $i, 1);
			$keychar = substr($key, ($i % strlen($key))-1, 1);
			$ordChar = ord($char);
			$ordKeychar = ord($keychar);
			$sum = $ordChar + $ordKeychar;
			$char = chr($sum);
			$result.=$char;
		}
		return base64_encode($result);
	}

	function decrypt($string, $key='%key&') {
		$result = '';
		$string = base64_decode($string);
		for($i=0; $i<strlen($string); $i++) {
			$char = substr($string, $i, 1);
			$keychar = substr($key, ($i % strlen($key))-1, 1);
			$ordChar = ord($char);
			$ordKeychar = ord($keychar);
			$sum = $ordChar - $ordKeychar;
			$char = chr($sum);
			$result.=$char;
		}
		return $result;
	}

}

But fortunately, there seems to be a good (enough) solution!

Keenan, at Automata Studios, blogs about using an extra request header parameter (X-HTTP-Method-Override), a method that seems to be accepted by Google among others. Good news!

To submit a DELETE request from flash, all I have to do is setting the requestHeaders X-HTTP-Method-Override parameter with the value “DELETE”:

	var loader:URLLoader = new URLLoader();
	loader.addEventListener(Event.COMPLETE, onComplete);
	var request:URLRequest = new URLRequest("http://url/to/rest/server");
	request.method = URLRequestMethod.POST;
	request.data = "dummyData"; // Some data needed, otherwise sent as GET request!
	request.requestHeaders = [new URLRequestHeader("X-HTTP-Method-Override", "DELETE")];
	loader.load(request);

Using php, this can be handled on the server side like this:

$method = (isset($_SERVER['HTTP_X_HTTP_METHOD_OVERRIDE'])) ? $_SERVER['HTTP_X_HTTP_METHOD_OVERRIDE'] : $_SERVER['REQUEST_METHOD'];
echo $method;

if the server parameter for HTTP_X_HTTP_METHOD_OVERRIDE is set, it picks the request method from that parameter value, otherwise from the normal REQUEST_METHOD value.

Not a truly genuine RESTful solution, but close enough! Thank you, Keenan!