Javascript Frameworks for Joomla
Upcoming SlideShare
Loading in...5

Like this? Share it with your network


Javascript Frameworks for Joomla






Total Views
Views on SlideShare
Embed Views



1 Embed 25 25



Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

Javascript Frameworks for Joomla Presentation Transcript

  • 1. Alonzo TurnerLeveraging JavaScriptFrameworks 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 Joomlajimport(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 =; window.console.log(someAnchor.href);});
  • 6. MooTools Libraries AJAXvar someRequest = new Request({ method: post, url: /index.php, onSuccess: function(textResult, xmlResult){}, onFailure: function(xhr){}});someRequest.send({data: obj}); Bindingvar myObject = {name: Alonzo, title: dev};var myFunction = function(){ window.console.log(;}var bound = myFunction.bind(myObject);bound(); // OUTPUTS: Alonzo
  • 7. MooTools Libraries Effects Tween A single Propertyvar myTween = new Fx.Tween(someElement, { duration: 1000.0, property: left});myTween.start(0,400);Morph any number of styles in tandemvar 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 Togethervar 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 LibrariesForm Validation No-FramesJHtml::_(‘behavior.formvalidation’); JHtml::_(‘behavior.noframes’);Modal Windows CalendarJHtml::_(‘behavior.modal’); JHtml::_(‘behavior.calendar’);ToolTips UploaderJHtml::_(‘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 Implement the google loader<script type="text/javascript" src=""></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 = "".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
  • 14. Special Thanks Lokesh Dhakar - lightbox Sam Stephenson - prototypeThomas Fuchs - scriptaculous Valerio Proietti - mootools John Resig - jqueryThe Joomla and Open Source Communities
  • 15.