1. Alonzo Turner
Leveraging JavaScript
Frameworks in your
Joomla Sites

2. A Quick History
Why we need JavaScript
Frameworks in the first place.
First, there was the Internet, and it was good.
Then there was Netscape, and it had a <blink> tag.
And, then came Internet Explorer.
Then came Firefox and things got a lot better but...
It was complicated.

3. What Frameworks Provide
DOM Manipulation
Class Structures
Event Listeners
AJAX
Binding
Effects

4. The Default JavaScript Framework
Provided by Joomla
jimport('joomla.html.html.behavior');
JHtmlBehavior::framework(boolean);
/media/system/js/mootools-core.js
/media/system/js/mootools-more.js

5. MooTools Libraries
DOM Manipulation
$(selector) //returns extended element
$$(selector) //returns an array of elements
Classes
var someObject = new Class({
initialize: function(){
// some constructor actions
}
});
Event Listeners
$$('a').invoke('addEvent', 'click' function(evt){
var someAnchor = evt.target;
window.console.log(someAnchor.href);
});

6. MooTools Libraries
AJAX
var someRequest = new Request({
method: 'post',
url: '/index.php',
onSuccess: function(textResult, xmlResult){},
onFailure: function(xhr){}
});
someRequest.send({'data': obj});
Binding
var myObject = {name: 'Alonzo', title: 'dev'};
var myFunction = function(){
window.console.log(this.name);
}
var bound = myFunction.bind(myObject);
bound(); // OUTPUTS: Alonzo

7. MooTools Libraries
Effects
Tween A single Property
var myTween = new Fx.Tween('someElement', {
duration: 1000.0,
property: 'left'
});
myTween.start(0,400);
Morph any number of styles in tandem
var myMorph = new Fx.Morph('someElement', {
duration: 2500.0,
transition: Fx.Transitions.Sine.easeInOut,
chain: 'cancel'
});
myMorph.start({'height': 300, 'width': 100});

8. MooTools Libraries
Putting It All Together
var myInterface = new Class({
initialize: function(){
this.links = this.listenToLinks.bind(this);
this.buttons = this.listenToButtons.bind(this);
this.startListening();
},
startListening: function(){
$$('a').invoke('addEvent', this.links);
$$('button').invoke('addEvent', this.buttons);
},
listenToLinks: function(evt){
// do something with links
},
listenToButtons: function(evt){
// do something with buttons
}
});

9. JHtml Behaviors
Loading the Built-In
Javascript Libraries
Form Validation No-Frames
JHtml::_(‘behavior.formvalidation’); JHtml::_(‘behavior.noframes’);
Modal Windows Calendar
JHtml::_(‘behavior.modal’); JHtml::_(‘behavior.calendar’);
ToolTips Uploader
JHtml::_(‘behavior.tooltip’); JHtml::_(‘behavior.uploader’);

10. Inserting Javascript
Template index.php file
$doc =& JFactory::getDocument();
$doc->addScript('path/to/script');
$doc->addScriptDeclaration('script as text');
// FILTER OUT MOOTOOLS JAVASCRIPT
$header = $this->getHeadData();
$scripts = $header['scripts'];
$allow = array();
foreach($scripts as $script => $type){
if(strpos($script, "/media/system/js") === FALSE){
$allow[$script] = $type;
}
}
// RESET THE PRELOADED JAVASCRIPT LIBRARIES
$header['scripts'] = $allow;
$this->setHeadData($header);

11. Google Loader API
Decrease page load times and offset
network traffic by implementing the
loader API
First, sign up for an API key
http://code.google.com/apis/loader/signup.html
Implement the google loader
<script type="text/javascript"
src="http://www.google.com/jsapi?key=xxxx"></script>
<script type="text/javascript">google.load(script, version)</script>

12. Google Loader API
Implement the Google Loader in your
Template index.php file
// USE GOOGLE LOADER API TO PRELOAD COMMON JAVASCRIPT LIBRARIES
$js = '{"modules":{"name":"mootools","version":"1.4.1"}}';
$key = $this->params->get('google_api');
if($key){
$source = "www.google.com/jsapi?autoload=".urlencode($js)."&amp;key=";
$document->addScript(HTTP_PROTOCOL.$source.$key);
}else{
$document->addScript("templates/yourtemplate/javascript/mootools.js");
$document->addScript("templates/inkandpaper/javascript/swfobject.js");
}

13. Additional
Resources
http://code.google.com/apis/loader
https://groups.google.com/group/joomla-dev-general
http://docs.joomla.org/Developers
http://mootools.net/docs/core
http://jquery.com
http://www.prototypejs.org

14. Special Thanks
Lokesh Dhakar - lightbox
Sam Stephenson - prototype
Thomas Fuchs - scriptaculous
Valerio Proietti - mootools
John Resig - jquery
The Joomla and Open Source
Communities

15. https://www.subtextproductions.com
alonzo.turner@subtextproductions.com