Xajax 0.5: Tutorials: Writing Advanced Plugins






Xajax 0.5: Tutorials: Writing Advanced Plugins

In Writing Custom Plugins it is shown how to write a plugin to easily extend xajax. In this article, we will take a look at advanced techniques to further enhance plugins and explore how this effects the bandwidth usage of your application.

Contents

[edit] Basic Plugin Design

A basic xajax plugin extends the xajax PHP by adding response commands via the $objResponse->script(...) command. I think it is easy to see how this might quickly use up bandwidth as you build larger and larger scripts to be passed each time your plugin is invoked.

[edit] Designing a Smarter Plugin

Instead of passing the javascript accross the connection each time you want to use it, you can create the functions on the browser, then simply invoke them from your plugin:

First, create a .js file with your functions: 

myFunction = function(arg1) {
    alert(arg1);
}

Then, include your .js file in your script: 

<head>
    <link type='text/javascript' href='./scripts/myFunction.js'></link>
</head>

Last, design your plugin to invoke your function(s): 

class myPlugin extends xajaxResponsePlugin
{
    var $sCallName = "myPlugin";
    
    function myFunction($arg1) {
        $this->_objResponse->call('myFunction', arg1);
    }
}

$pluginManager = &xajaxPluginManager::getInstance();
$pluginManager->registerResponsePlugin(new myPlugin());

[edit] Writing Custom Response Commands

Now, the ultimate plugin can be written to hook directly into the xajax command processing on the javascript side. Response commands can be cut down to just a couple parameters thus reducing bandwidth usage to a minimum.

In your javascript file, you can create response command handlers like so: 

    xajax.commands['myPlug_001'] = function(args) {
        args.cmdFullName = 'myPlugin->001';
        args.objElement.style.backgroundColor = args.data;
        return false;
    }
    xajax.commands['myPlug_002'] = function(args) {
        args.cmdFullName = 'myPlugin->002';
        args.objElement.style.disabled = true;
        return false;
    }

NOTE: It is very important that your command handler returns true! If you return false, you have to setup a timer to restart the xajax response command processing... otherwise, your page will appear to "lockup" and response commands will not be processed.

It is also important that your plugin command IDs are unique. It is recommended that you post on the xajax forum before building large plugins using this technique to let others know of your command ID scheme. Search the xajax forum to ensure that others are not already using the same scheme or your plugins will not be compatible.

Now, to invoke your plugin handlers, you write your php plugin functions like so: 

class myPlugin extends xajaxResponsePlugin
{
    var $sCallName = "myPlugin";
    
    function function001($sTarget, $sBackgroundColor) {
        $this->_objResponse->addCommand(array('n'=>'myPlug_001','t'=>$sTarget),$sBackgroundColor);
        return $this;
    }
    function function002($sTarget) {
        $this->_objResponse->addCommand(array('n'=>'myPlug_002','t'=>$sTarget),'');
        return $this;
    }
}

$pluginManager = &xajaxPluginManager::getInstance();
$pluginManager->registerResponsePlugin(new myPlugin());

[edit] Coming Soon

New features added to xajax 0.5 beta 3 (not yet released) will allow plugin writers to install their javascript functions on the fly (as needed). This will help decrease the memory usage on the browser by keeping unused functions from being installed. However, you'll need to keep track of which functions have been installed... perhaps in a $_SESSION variable.

Here's how it might work: 

class myPlugin extends xajaxResponsePlugin
{
    var $aInstalledFunctions = array();
    var $sCallName = "myPlugin";
    
    function function001($sTarget, $sBackgroundColor) {
        if (false === in_array('myPlug_001', $this->aInstalledFunctions)) {
            $script = 'args.cmdFullName = "myPlugin->001";';
            $script .= 'args.objElement.style.backgroundColor = args.data;';
            $script .= 'return false;';
            $this->_objResponse->setFunction('xajax.commands["myPlug_001"]', 'args', $script);
            $this->aInstalledFunctions[] = 'myPlug_001';
            saveState();
        }
        $this->_objResponse->addCommand(array('n'=>'myPlug_001','t'=>$sTarget),$sBackgroundColor);
        return $this;
    }
    function function002($sTarget) {
        if (false === in_array('myPlug_002', $this->aInstalledFunctions)) {
            $script = 'args.cmdFullName = "myPlugin->002";';
            $script .= 'args.objElement.style.disabled = true;';
            $script .= 'return false;';
            $this->_objResponse->setFunction('xajax.commands["myPlug_002"]', 'args', $script);
            $this->aInstalledFunctions[] = 'myPlug_002';
            saveState();
        }
        $this->_objResponse->addCommand(array('n'=>'myPlug_002','t'=>$sTarget),'');
        return $this;
    }

    function saveState() {
        $_SESSION['myPlugin_state'] = $this->aInstalledFunctions;
    }
    function loadState() {
        $this->aInstalledFunctions = $_SESSION['myPlugin_state'];
    }
}

$my_plugin = new myPlugin();
$my_plugin->loadState();

$pluginManager = &xajaxPluginManager::getInstance();
$pluginManager->registerResponsePlugin($my_plugin);

By keeping track of what functions have been installed on the browser, you can now install only the functions you need, thus reducing memory usage on the browser... as well as bandwidth.

  • Author: CtC - Joseph Woolley - 2007/03/27
Retrieved from "http://xajaxproject.org/wiki/Xajax_0.5:_Tutorials:_Writing_Advanced_Plugins"