Section 1: Flash MX integration with Phrame

By Gary DeJarnett

Step 1: Introduction

Because Phrame is based upon the "Model2" approach, a variation of the classic Model-View-Controller (MVC) design paradigm, it completely isolates the presentation code (view) from the data and business logic. This enables developers to have independent views running against the same back-end code.

Many application development teams are looking for ways to put an alternative "rich media" front-end on their applications without writing the entire system in proprietary software like Macromedia Flash. This is possible with Phrame because it works well with PHP, Smarty Templates, XSLT, Flash MX, and other presentation systems.

The Calculator Example

The calculator example on the Phrame website illustrates how a Flash front-end could be integrated with the system.

The calculator accepts input using the calculator keys on a simulator running on a simple Flash page. When the user hits the "=" key, two numbers and their operator are posted to a PHP page where the values are fed into the controller and a total is requested. The total is calculated based upon the logic in the Calculation class and then returned to the Flash application.

The Flash application listens for a response object after the values have been posted and when it arrives the application displays the total on the screen of the calculator. Error checking (e.g. divide by zero error) is done within the class of the Calculator object completely independently of Flash. Because totals and errors are displayed within the Flash application, no browser refreshes are done and the application works much like a desktop app. even though it is running within a browser on the web.

Step 2: Actionscript

The following code from the first frame of the calc.fla file illustrates that the Flash application simply captures the data from the screen and passes it to calc.php where the calculation is done using the Calculation class:

/****************************************************************
/ When the calculate button is pressed, the calculator is reset
/ and the variables are moved to the (empty) dataLoader movieclip
/ so that a minimal number of variables are actually posted.
/ Error handling is done within the object class in the models.
/****************************************************************/

function calculate(op, firstNo, secondNo) {
    if ((op == null) || (firstNo == null) || (secondNo == null)) {
        return;
    }
    _root.errorField.text = "";
    _root.calcDisplay.text = "";
    _root.op = null;
    _root.lastValue = null;
    dataLoader.operator = op;
    dataLoader.firstNo = firstNo;
    dataLoader.secondNo = secondNo;
    dataLoader.action = "calculate";
    dataLoader.gotoAndPlay("load");
// The "load" frame of the dataLoader movieclip contains a single line:
// loadVariables("phrame.php", "", "POST");
}

/*****************************************************************
/ The dataLoader movieclip will listen for a response from the 
/ calc.php page it posted to.  When data is returned it is checked to 
/ see if it can be displayed in the viewing area and then is
/ displayed.
/****************************************************************/

dataLoader.onData = function() {
    if (dataLoader.calcError=="") {
        if (isNaN(dataLoader.calcTotal)) {
            _root.calcDisplay.text = "OVERFLOW ";
        } else {
            var response = Math.round(dataLoader.calcTotal*1000000)/1000000;
            if (length(response)>9) {
                _root.calcDisplay.text = "OVERFLOW ";
            } else {
                _root.calcDisplay.text = response;
            }
        }
    } else {
        _root.calcDisplay.text = "ERROR   ";
        _root.errorField.text = dataLoader.calcError;
    }
    _root.calcClear=true;
};

Section 2: Phrame

Following is an explanation of how the business logic is built within Phrame:

Step 1: Directory Structure for Calculator Application

Following is the directory structure for the Calculator Application

    /calc
        /actions
        /include
        /models

Step 2: Building the Models

The first step in building the calculator application is to set up the data model. Following is the Calculation class for the Calculator application:

<?php
class Calculation
{
    function Calculation() {}
    function getTotal($firstNo, $secondNo, $operator)
    {
        switch ($operator) {
            case '+':
                $total = $firstNo + $secondNo; 
                break;
            case '-':
                $total = $firstNo - $secondNo; 
                break;
            case '*':
                $total = $firstNo * $secondNo; 
                break;
            case '/':
                if ($secondNo == 0) {
                    trigger_error('Divide by zero error.');
                } else {
                    $total = $firstNo / $secondNo;
                }
                break;
            default:
                trigger_error('Invalid operator: '.$operator);
            }
        return $total;
    }
}
?>

Step 3: Building the Actions

The next step in building the application is to set up the actions for the application. These actions perform all of the business logic required by the application. Following is the Action in this hello application:

<?php
class CalcAction extends Action
{
    function perform($actionMapping, $actionForm) {
        $calculation = new Calculation();
        $firstNo = $actionForm->get('firstNo');
        $secondNo = $actionForm->get('secondNo');
        $operator = $actionForm->get('operator');
        $total = $calculation->getTotal($firstNo, $secondNo, $operator);
        //put total in the session
        $_SESSION['total'] = $total;
    }
}

Step 4: Piecing Together the Calculator Application

In order to piece together your application, you must also include the following information:

• Mapping Information
• Error Handling Information
• Application Options
• Bootstrap File
• All Application Files

Mapping Information should be located inside the mappings.php file (in the include directory) as follows:

<?php
$mappings = array(
    _ACTION_FORMS => array(
        'form' => array(
            _TYPE => 'ActionForm'
        )
    ),
    _ACTION_MAPPINGS => array(
        'calculate' => array(
            _TYPE       => 'CalcAction',
            _NAME       => 'form',
            _INPUT      => 'calc.php',
            _VALIDATE   => 0
        )
    )
);
?>

Error Handling Information should be located inside the errorHandler.php file (in the include directory) as follows:

<?php
function handleError($number, $message, $file, $line, $context)
{
    if (!$_SESSION[_ERRORS]) {
        $errors = new Stack();
        $_SESSION[_ERRORS] = $errors;
    }
    $errors = &$_SESSION[_ERRORS];
    $errors->push($message);
}
?>

<?php
//set options for the controller
$options = array(
    _CACHE          => 1,
    //set to E_ALL to get controller errors (debug use only)
    _ERROR_REPORTING    => E_USER_ERROR | E_USER_WARNING | E_USER_NOTICE,
    _ERROR_HANDLER  => "handleError",
);
?>

Bootstrap file, calc.php, is the bridge between Flash MX and Phrame:

<?php
include('include/include.php');
session_start();
//add controller to session if not already cached
if (!$_SESSION[_CONTROLLER]) {
    $controller = new ActionController($options);
    $_SESSION[_CONTROLLER] = $controller;
}
//release control to controller for further processing
$controller = &$_SESSION[_CONTROLLER];
$controller->process($mappings, $_REQUEST);
if ($_SESSION[_ERRORS]) {
    $error = $_SESSION[_ERRORS]->pop();
}
if ($_SESSION['total']) {
    $total = $_SESSION['total'];
}
$_SESSION[_ERRORS] = NULL;
$_SESSION[_FORM] = NULL;
$_SESSION['total'] = NULL;
echo "\&calcError=$error\&calcTotal=$total\&";
?>

All Application Files that you have created should be included inside the include.php file (in the include directory) as follows:

<?php
include("../phrame/include.php");
include("actions/CalcAction.php");
include("models/Calculation.php");
include("errorHandler.php");
include("mappings.php");
include("options.php");
?>

That completes the tutorial on how to build the Calculator Application. If you have any more specific questions, please consult the User's Guide.