Your SlideShare is downloading. ×
0
Javascript Frameworks for Joomla
Javascript Frameworks for Joomla
Javascript Frameworks for Joomla
Javascript Frameworks for Joomla
Javascript Frameworks for Joomla
Javascript Frameworks for Joomla
Javascript Frameworks for Joomla
Javascript Frameworks for Joomla
Javascript Frameworks for Joomla
Javascript Frameworks for Joomla
Javascript Frameworks for Joomla
Javascript Frameworks for Joomla
Javascript Frameworks for Joomla
Javascript Frameworks for Joomla
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,429

Published on

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

No Downloads
Views
Total Views
1,429
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
5
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

×