All times are UTC + 1 hour




Post new topic Reply to topic  [ 6 posts ] 
  Print view

Extend(add more) javascript Event Handlers using Prototype
Author Message
PostPosted: Fri Sep 04, 2009 2:42 am 
Evangelist
User avatar
Offline

Joined: Mon Oct 10, 2005 7:46 am
Posts: 2142
So far the only javascript event handler I see implemented in ATK is onChange.

Having prototype integrated into ATK provides a huge benefits in extending the rest of the javascript handlers.

I think ATK should have the following javascript handlers implemented out of the box, which will extend ATK usability in the corporate world, which increasing productivity for the developer (goes with ATK's mission)

Event Handlers

    onabort
    onblur
    onchange (COMPLETED)
    onclick
    ondblclick
    onerror
    onfocus
    onkeydown
    onkeypress
    onkeyup
    onload
    onmousedown
    onmousemove
    onmouseout
    onmouseover
    onmouseup
    onreset
    onresize
    onselect
    onsubmit
    onunload



I think the implementation should be similar to onChange as follows:

- Allow developer to assign event by calling an attribute method of the general naming convention: addOnEventHandler(), where "Event" is the actual name of the event (eg: keyup)

code example:

Code:
                       
$a = &$this->add(new atkCurrencyAttribute("price_per_share", AF_HIDE_ADD | AF_FORCE_LOAD,15, "$", 5,".",","),NULL,500);
                       
$a->addOnKeyupHandler("doSomething();");


- each event handler should be implemented in atkAttribute

- the parameter should allow the same flexibility as currently implemented in OnChange event

Here is where I think the implementation should defer from the current implementation of OnChange:

- Instead of adding the event to the field tag (eg: <input type='text' name='test' onChange='do something'>), simply use the prototype convention to render and have the event registered as in the following example, which uses the keyup event:

Code:
$('price_per_share').observe('keyup', function(event) { doSomething(); });


In the above example:

- price_per_share: is the name of the attribute(field)
- keyup: is the event
- doSomething(): is the javascript function provided by the developer by calling method addOnKeyupHandler of the attribute


If multiple events are applied to the attribute, say onBlur and onKeyup then something as follows should be written to the browser:

Code:
<SCRIPT LANGUAGE="JavaScript">

     $('attribute1').observe('blur', function(event) { doSomething(); });
     $('attribute2').observe('keyup', function(event) { doSomethingElse(); });

</SCRIPT>


Conclusion:

To call a javascript event, the user could easily execute something as follows:

Code:
                       
$a = &$this->add(new atkCurrencyAttribute("price_per_share", AF_HIDE_ADD | AF_FORCE_LOAD,15, "$", 5,".",","),NULL,500);
                       
$a->addOnKeyupHandler("doSomething();");



Upon execution, the browser should have something as follows:

Code:
<SCRIPT LANGUAGE="JavaScript">

     $('attribute2').observe('keyup', function(event) { doSomethingElse(); });

</SCRIPT>


Of course for this magic to happen, it would have to be implemented in atk/attributes/class.atkAttribute.inc


If it will make implementation faster, a generic Javascript event handler can be implemented that takes two parameters:

1. the name of the event (eg: keyup, blur, etc)
2. the user Javascript to be executed upon the event

example of generic Javascript event handler:



Code:
                       
$a = &$this->add(new atkCurrencyAttribute("price_per_share", AF_HIDE_ADD | AF_FORCE_LOAD,15, "$", 5,".",","),NULL,500);
                       
$a->addJavaScriptEventHandler('keyup','doSomething();');



For some reason I like a generic implementation better. I feel that it will save implementation time and will make it easier to add future Javascript events :)

Below is a list of sources:


Javascript Event Handlers:


http://www.w3schools.com/htmldom/dom_obj_event.asp

Prototype observe method:

http://www.prototypejs.org/api/event/observe

_________________
Jorge Garifuna
Professional Web Developer
Garinet Media Network, LLC
http://www.GariDigital.com

Proud ATK Supporter since 2005


Top
 Profile  
 

Re: Extend(add more) javascript Event Handlers using Prototype
PostPosted: Wed Nov 04, 2009 10:04 am 
Moderator
Offline

Joined: Wed May 25, 2005 8:17 am
Posts: 209
Thanks for the suggestion. I've added this as a new method to atkAttribute called observeJS which has a parameter $event for the event name and a parameter $body for the JavaScript body. Inside the JavaScript body the event is available as "event" and the field identifier is available as "fieldId".

However I marked this feature as experimental because I'm not sure if it really fits well in there. The main reason I'm having doubts is that not all attributes are represented by a single HTML form field. So what to observe in such a case? And another problem arises when you think about the atkManyToOneRelation's auto-complete feature. This uses a simple text field to enter a search string and updates a hidden field when you select one of the auto-complete results. I can register the observers on the search field, but that field isn't really the value field you want to observe. I can register the observers on the hidden field but then they will never get called because this field is only updated using JavaScript code which won't trigger the event listeners... That's why for the change handlers each attribute can implement it's own way of triggering the change events which doesn't necessarily mean they get triggered from a real JavaScript event. But for a general observer this is much more difficult to implement because each type of event might need different handling.


Top
 Profile  
 

Re: Extend(add more) javascript Event Handlers using Prototype
PostPosted: Wed Nov 04, 2009 12:42 pm 
Site Admin
User avatar
Offline

Joined: Sun May 22, 2005 1:28 pm
Posts: 4214
Location: Utrecht, The Netherlands
I don't think this should go in atkAttribute itself; it pollutes the atkAttribute space with something that will only be used on certain occassions. Since prototype is powerful enough to use unobtrusive javascript to hookitself into things, it would be nice if this feature on the php site would be as unobtrusive as well.


Top
 Profile  
 

Re: Extend(add more) javascript Event Handlers using Prototype
PostPosted: Wed Nov 04, 2009 1:16 pm 
Moderator
Offline

Joined: Wed May 25, 2005 8:17 am
Posts: 209
The reason it's inside atkAttribute is simple. The attribute knows best where and how to register the events. Same goes for the change handler which needs different implementations for different attributes.


Top
 Profile  
 

Re: Extend(add more) javascript Event Handlers using Prototype
PostPosted: Thu Nov 05, 2009 1:28 am 
Evangelist
User avatar
Offline

Joined: Mon Oct 10, 2005 7:46 am
Posts: 2142
Peter, thanks for the valuable effort.

At the time that I made the suggestion above, multi-edit, had not been officially released.

After I started working with multi-edit, I figured that this concept could be implemented without prototype.

I did it modeling the onChange event, but in a generic way and it works fine:

I added the following member variables to the constructor of atkattribute and atknumberattribute:


Code:
    /**
     * Array for containing a valid javascript event code
     * @access private
     * @var Array
     */
    var $m_javascriptEventcode = array();

    /**
     * Variable to store initialisation javascript code
     * in for the javascript event handler.
     * @access private
     * @var String
     */
    var $m_javascriptEventhandler_init = "";



within the edit method of both I added the following:


Code:
      $javascriptEvent = '';
      if (count($this->m_javascriptEventcode)){
          foreach ($this->m_javascriptEventcode as $jsevent => $jscode_array) {
            $javascriptEvent .= $jsevent.'="'.$id.'_'.$jsevent.'(this);"';
            $this->_renderJavaScriptEventHandler($jsevent, $fieldprefix);
          }
      }


Within edit I modified the following to include the $javascriptEvent variable from above:

Code:
      $result = '<input type="text" id="'.$id.'" name="'.$id.'" '.$this->getCSSClassAttribute().
                ' value="'.$value.'"'.
                ($size > 0 ? ' size="'.$size.'"' : '').
                ($this->m_maxsize > 0 ? ' maxlength="'.$this->m_maxsize.'"' : '').' '.$onchange.' '.$javascriptEvent.' />';


The added the following two new methods to atkattribute and atknumberattribute:

Code:

    /**
    * Jorge Garifuna <info@GariDigital.com>
    * 10/30/09
    *
    * Add a javascript event handler
    * @param string $jsevent Any of the valid javascript events:
                onabort
                onblur
                onchange
                onclick
                ondblclick
                onerror
                onfocus
                onkeydown
                onkeypress
                onkeyup
                onload
                onmousedown
                onmousemove
                onmouseout
                onmouseover
                onmouseup
                onreset
                onresize
                onselect
                onsubmit
                onunload
    * @param string $jscode A block of valid javascript code.
    * @return atkAttribute Returns the instance of this attribute.
    *
    */
    function addJavaScriptEventHandler($jsevent, $jscode){
      if ((isset($this->m_javascriptEventcode[$jsevent]) && !in_array($jscode, $this->m_javascriptEventcode[$jsevent])) || !isset($this->m_javascriptEventcode[$jsevent]) ){
          $this->m_javascriptEventcode[$jsevent][] = $jscode;         
      }
      return $this;

    }// end function


    /**
    * Jorge Garifuna <info@GariDigital.com>
    * 10/30/09
    *
    * Renders the javascript event code on the page.
    *
    * @access private
    * @param string $jsevent Any of the valid javascript events:
                onabort
                onblur
                onchange
                onclick
                ondblclick
                onerror
                onfocus
                onkeydown
                onkeypress
                onkeyup
                onload
                onmousedown
                onmousemove
                onmouseout
                onmouseover
                onmouseup
                onreset
                onresize
                onselect
                onsubmit
                onunload
     * @param String $fieldprefix The prefix to the field
     */
    function _renderJavaScriptEventHandler($jsevent, $fieldprefix)
    {
      if (count($this->m_javascriptEventcode[$jsevent]))
      {
        $page = &$this->m_ownerInstance->getPage();
        $page->register_scriptcode("
    function ".$this->getHtmlId($fieldprefix)."_".$jsevent."(el)
    {
      ".(isset($this->m_javascriptEventhandler_init[$jsevent])?$this->m_javascriptEventhandler_init[$jsevent]:'')."
      ".implode("\n      ", $this->m_javascriptEventcode[$jsevent])."
    }\n");
      }
    }



This is fully functional as is in both, atkattribute and atknumberattribute for regular edit and multi-edit as well.

The entire code can be downloaded from the following link which is a modification from the latest ATK 6.4.2 release:

http://garisoft.com/atk/samples/atk_enhancements/atk_attribute_with_javascript_events_implemetation_by_jorge_garifuna.zip

I made an announcement about this implementation at the following post and plan to follow up with a wiki as soon as you incorporate it into the core:

viewtopic.php?f=2&t=19991

_________________
Jorge Garifuna
Professional Web Developer
Garinet Media Network, LLC
http://www.GariDigital.com

Proud ATK Supporter since 2005


Top
 Profile  
 

Re: Extend(add more) javascript Event Handlers using Prototy
PostPosted: Wed Dec 12, 2012 1:12 pm 
Offline

Joined: Wed Sep 05, 2012 10:15 am
Posts: 3
Location: hyderabad
Sir,
I have MRA button which is provided by atk framework. I wast restrict the button from multiple clicking????
Please help me to overcome the problem.


Top
 Profile  
 

Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 6 posts ] 

All times are UTC + 1 hour


Who is online

Users browsing this forum: No registered users and 1 guest


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum

Search for:
Jump to:  
cron
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group