0
Alonzo TurnerLeveraging JavaScriptFrameworks in your    Joomla Sites
A Quick History    Why we need JavaScript Frameworks in the first place.First, there was the Internet, and it was good.The...
What Frameworks Provide      DOM Manipulation      Class Structures      Event Listeners      AJAX      Binding      Effects
The Default JavaScript Framework      Provided by Joomlajimport(joomla.html.html.behavior);JHtmlBehavior::framework(boolea...
MooTools Libraries            DOM Manipulation  $(selector) //returns extended element  $$(selector) //returns an array of...
MooTools Libraries                    AJAXvar someRequest = new Request({    method: post,    url: /index.php,    onSucces...
MooTools Libraries                    Effects          Tween A single Propertyvar myTween = new Fx.Tween(someElement, {   ...
MooTools Libraries          Putting It All Togethervar myInterface = new Class({   initialize: function(){       this.link...
JHtml Behaviors             Loading the Built-In              Javascript LibrariesForm Validation                        N...
Inserting Javascript             Template index.php file$doc =& JFactory::getDocument();$doc->addScript(path/to/script);$d...
Google Loader API       Decrease page load times and offset       network traffic by implementing the                   lo...
Google Loader API      Implement the Google Loader in your            Template index.php file// USE GOOGLE LOADER API TO P...
Additional             Resourceshttp://code.google.com/apis/loaderhttps://groups.google.com/group/joomla-dev-generalhttp:/...
Special Thanks  Lokesh Dhakar - lightbox Sam Stephenson - prototypeThomas Fuchs - scriptaculous Valerio Proietti - mootool...
https://www.subtextproductions.comalonzo.turner@subtextproductions.com
Upcoming SlideShare
Loading in...5
×

Javascript Frameworks for Joomla

1,475

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,475
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
5
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "Javascript Frameworks for Joomla"

  1. 1. Alonzo TurnerLeveraging JavaScriptFrameworks in your Joomla Sites
  2. 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. 3. What Frameworks Provide DOM Manipulation Class Structures Event Listeners AJAX Binding Effects
  4. 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. 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. 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(this.name);}var bound = myFunction.bind(myObject);bound(); // OUTPUTS: Alonzo
  7. 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. 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. 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. 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. 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. 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. 13. Additional Resourceshttp://code.google.com/apis/loaderhttps://groups.google.com/group/joomla-dev-generalhttp://docs.joomla.org/Developershttp://mootools.net/docs/corehttp://jquery.comhttp://www.prototypejs.org
  14. 14. Special Thanks Lokesh Dhakar - lightbox Sam Stephenson - prototypeThomas Fuchs - scriptaculous Valerio Proietti - mootools John Resig - jqueryThe Joomla and Open Source Communities
  15. 15. https://www.subtextproductions.comalonzo.turner@subtextproductions.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×