Your SlideShare is downloading. ×
Javascript Frameworks for Joomla
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Javascript Frameworks for Joomla

1,401
views

Published on

Published in: Technology

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

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 = evt.target; 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(this.name);}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 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 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. Special Thanks Lokesh Dhakar - lightbox Sam Stephenson - prototypeThomas Fuchs - scriptaculous Valerio Proietti - mootools John Resig - jqueryThe Joomla and Open Source Communities
  • 15. https://www.subtextproductions.comalonzo.turner@subtextproductions.com