Component Writer's Guide :: Adding javascript events

A javascript is like a normal event, but the goal of creating this kind of events is to provide a way for the component user to write javascript code which will be executed on the browser, that allows the developer to write more user friendly applications.

    protected $_jsonjavascriptevent=null;
    function getjsOnJavascriptEvent() { return $this->_jsonjavascriptevent; }
    function setjsOnJavascriptEvent($value) { $this->_jsonjavascriptevent=$value; }

To specify the IDE this is a Javascript event, the functions for it must start with "jsOn", so the code above declares a Javascript event called OnJavascriptEvent.

Now you have to perform two steps to fire your javascript event:

1. Instruct the page to generate the event:

This can be done overriding the method dumpJsEvents():

        function dumpJsEvents()
        {
                parent::dumpJsEvents();
 
                $this->dumpJSEvent($this->_jsonjavascriptevent);
        }

Doing this, the page, when generating the code for your component, will place the right code on the <head> section of the page.

2. Firing the event in javascript: This step depends very much in the way your component use javascript, for example, for an html tag, you need to generate the attribute which will call the event, see this code:

echo "<input type=\"text\" ";
if ($this->_jsonclick!=null)  { $event=$this->_jsonclick;  echo " onclick=\"return $event(event)\" "; }
echo ">";

This code can be read:

If there is attached code to the OnClick javascript event
When generating the input tag
Generate also the code to attach the onclick event to the javascript event handler.

Now let's see the modified hello, world app, but using javascript instead PHP to show the message:

<?php
    require_once("rpcl/rpcl.inc.php");
    use_unit("forms.inc.php");
 
    //Inherit from Page
    class MyPage extends Page
    {
            function buttonclick($sender, $params)
            {
            ?>
                alert("Hello, world!");
                return false;
            <?php
            }
    }
 
    //Create the page
    $page=new MyPage();
    $page->Name = "Form1";
 
    //Create the page and set some properties
    $button=new Button($page);
    $button->Caption="Click Here";
    $button->Parent=$page;
    $button->Left=100;
    $button->Top=100;
 
    //Attach the event handler
    $button->jsOnClick="buttonclick";
 
    //Make the page process the events
    $page->init();
 
    //Show the page
    $page->show();
?>

On this code, note this:

            function buttonclick($sender, $params)
            {
            ?>
                alert("Hello, world!");
                return false;
            <?php
            }

The functional code for the event is escaped from PHP using ?> and <?php, so the code you write inside must be javascript code. And also, the event is returning false, that instructs the browser to stop processing the posting of the form to the server.

And also, note this:

    $button->jsOnClick="buttonclick";

The attachment is done to the js OnClick, which is the Javascript event fired when the button is clicked.

Finally, just tell that almost all standard javascript events are implemented on the base Control class, as public events, so if your component makes use of an standard javascript event, you just need to publish that event and attach it to your component, there is no need to override dumpJsEvents() as it will be generated automatically.

Component Writer's Guide :: Adding javascript events

Views

Personal tools

Navigation

Search

Toolbox