Use phpdomxml to create a Guestook in Flash

Introduction

In this tutorial we will see how to create and manage a simple Guestbook using an XML formatted file (with a simple XSL style-sheet). To do that we will create and parse the XML structure using an opensource library for PHP which allow us to threat XML with DOM.
In particular this library uses the same DOM as the one installed in Flash. Which is a great thing!
In the end we will apply a custom XSL style sheet to our xml file in order to see it in a in a better way ;)
This is the final example

What we need?

• Macromedia Flash MX 2004
• PHP (4.3.x)
• phpdomxml library
• A brief XSL how-to

1 Create a simple Flash Form

Let's start with the most easy part of this tutorial. We will build a simple Flash Movie which send to our PHP page a set of data using the POST method and the LoadVars Object.

Open Flash and build a graphical interface like this picture:

We have:

• 2 textinput components (sName and sEmail)
• textArea component (sMessage)
• 2 component button (sendBtn and cancelBtn)

And this is the code used in the Flash Form application:

// Import the Alert class in order to control the Alert window

import mx.controls.Alert

function doAlert(message, title){

    Alert.show(message,title);

}



// check if properties of the cecker object are set to true.

// If so, enable the sendBtn button, otherwise disable it

function checkForm(){

    if(checker.sName and checker.sEmail and checker.sMessage){

        sendBtn.enabled = true;

    } else {

        sendBtn.enabled = false;

    }

}

// Event listener for the textinput component

checker = {}

function textChanged( target ){

    checker[target.target._name] = target.target.text != ""

    checkForm();

}



// close current HTML window with click on the closeBtn

function closeWin(){

    getURL("javascript:window.close();");

}



// send form to PHP

function sendForm(){

    var myV = new LoadVars();

    myV.name = sName.text

    myV.email = sEmail.text

    myV.message = sMessage.text

    myV.player = getVersion();

    myV.action = "insert";

    myV.sendAndLoad("create.php", myV, "POST");

    myV.onLoad = function(){

        doAlert("Thank You " + sName.text + "! Your comment has been added to the guestbook!","Thanks");

        sendBtn.enabled = false;

        sName.removeEventListener("change", textChanged)

        sEmail.removeEventListener("change", textChanged)

        sMessage.removeEventListener("change", textChanged)

        // refresh the opener page

        getURL("javascript:window.opener.location.reload();");

    }

    sendBtn.enabled = false;

}



// set sendButton disabled by default

sendBtn.enabled = false

// Assign all the eventListener for the components

sName.addEventListener("change", textChanged);

sEmail.addEventListener("change", textChanged);

sMessage.addEventListener("change", textChanged);

sendBtn.addEventListener("click", sendForm);

closeBtn.addEventListener("click", closeWin);

The code interesting is just the part which sends the variables to the PHP file:

// send form to PHP
function sendForm(){
	var myV = new LoadVars();
	myV.name = sName.text
	myV.email = sEmail.text
	myV.message = sMessage.text
	myV.player = getVersion();
	myV.action = "insert";
	myV.sendAndLoad("create.php", myV, "POST");
	myV.onLoad = function(){
		doAlert("Thank You " + sName.text + "! Your comment has been added to the guestbook!","Thanks");
		sendBtn.enabled = false;
		sName.removeEventListener("change", textChanged)
		sEmail.removeEventListener("change", textChanged)
		sMessage.removeEventListener("change", textChanged)
		// refresh the opener page
		getURL("javascript:window.opener.location.reload();");
	}
	sendBtn.enabled = false;
}
		  

First create a new LoadVars object.
Now put inside this object all the variables we want to send to PHP.
sName.text => value of the input component sName (the same for sEmail)
getVersion() => send to PHP the current flash player version used by our guest.
then make a sendAndLoad call to PHP.

sendAndLoad will send all the variables to the page requested and moreover will wait for the page response. Since I declared as second argument of the sendandload function the same loadvars object, this means that the responder of the php response will be the same object.
In fact with the onLoad function I receive the PHP output.

So, once a response is given from PHP first show to the guest an alert window saying Thanks for the message inserted.. then remove all the eventlisteners associated to the components and at least reload the guestbook.xml page (window.opener.location.reload())