Tutorial:Adding Javascript moo.fx to your component WIP

From Joomla! Documentation

Jump to: navigation, search

Contents

3.1.5 Adding Javascript (moo.fx) to your component (WIP)

This tutorial starts out with the ground work from Hello World 1, and extends that code to include use of javascript.

In this example we will utilize some functions from the the moo.fx library that comes bundled with Joomla! 1.5

3.1.5.1 The basis

For simplicity of this tutorial, we use Hello World 1 as a basis of our example. Here are the final versions of the files included in the Hello World 1 example:

<?php
// no direct access
defined('_JEXEC') or die('Restricted access');
 
 
// require the html view class
require_once (JApplicationHelper :: getPath('front_html', 'com_hello'));
 
$task = JRequest::getVar('task');
$name = JRequest::getVar('name', 'John');
 
switch ($task) {
        case 'show':
        default:
                hello_HTML::show($name);
                break;
}
?>

<?php
// no direct access
defined('_JEXEC') or die('Restricted access');
 
class hello_HTML {
 
        function show($name) {
                echo 'Hello ' . $name . ' in our World!';
        }
 
}
?>

For details on how this code works, please go back and read up on the Hello World 1 tutorial.

3.1.5.2 Add some javascript

We are now going to load some javascript into our component, and we want to do this in the <head> section of the page. For this example we have used the moo.fx libraries, which come included with Joomla, but you could just as well use any other Javascript library in a similar fashion.

We use JHTML::_('behavior.mootools') to include the mootools javascript.

We use the $document->addScriptDeclaration() method to load the javascript we've written for this project.

<?php
// no direct access
defined('_JEXEC') or die('Restricted access');
 
class hello_HTML {
 
        function show($name) {
                // Load the moo.fx scripts
                JHTML::_('behavior.mootools');
 
                // Get the document to load custom script
                $document = & JFactory::GetDocument();
 
                echo 'Hello ' . $name . ' in our World!';
        }
 
}
?>


The HTML output of the <head> section page now looks like this:

<html>
<head>
        <!-- some meta tags and other code removed from here for clarity -->
        <script type="text/javascript" src="/includes/js/joomla.javascript.js"></script>
        <script type="text/javascript" src="/media/system/js/mootools.js"></script>
</head>

The result is a component that loads the javascript mootools files when the show() function is called and the files are needed. Beats loading them into your template code with some php if-statements huh?

3.1.5.3 Create the moo.fx effect

We now want to show how to use some of the available functionality in moo.Fx. For this example we will create an effect that makes a box slide in and its contents to display on click.

This is the javascript we will use:

<script type="text/javascript">
        // <!--
                var greeting;
                window.onload = function() {
                        greeting = new Fx.Slide('greetingContainer', {height: true, opacity: true, duration: 500});
                        greeting.hide();
                }       
        // -->
</script>

The source code itself should be easy to read for those of you familiar with Javascript. For all the others, here is a brief breakdown:

On the third line, the variable greeting is declared. Window.onload is an event that occurs when the page has loaded and here we initialize our nice effects.

On the fifth line we define the greeting variable to be an Fx.Slide effect. It is going to affect the object with id 'greetingContainer', and it will set the object to it's normal height and opacity. Duration is the time in milliseconds that the transition effect will last.

Last but not least, we call greeting.hide(); so that the greetingContainer is hidden when the page loads.

For more information on moo.Fx syntax you should read [moo.fx documentation].

3.1.5.4 Add containers and an event

What remains now is to add the greetingContainer to our HTML output. This is the code we will use:

echo '<div onclick="greeting.toggle();">Click to see the greeting</div>
          <div id="greetingContainer" style="background-color: #CCC;">
                  Hello ' . $name . ' in our World!
          </div>';

Notice the onclick function in the first div and that the second div has its id set to 'greetingContainer'.

I have also added a background color to the container, just to make the container easier to spot on screen. Normally you would do this in a CSS stylesheet file.

3.1.5.5 The result

This is the end result and final version of hello.html.php. From version 2 you can see that I have added the javascript declaration in a simliar fashion to how I loaded the external javascript libraries, and I have modified the Hello World output as well to show the two boxes: One clickable and one that is toggled.

<?php
// no direct access
defined('_JEXEC') or die('Restricted access');
 
class hello_HTML {
 
        function show($name) {
                // Load the moo.fx scripts
                $document = & JFactory::getDocument();
 
                JHTML::_('behavior.mootools');
 
                $document->addScriptDeclaration("
                        var greeting;
                        window.onload = function() {
                                greeting = new Fx.Slide('greetingContainer', {height: true, opacity: true, duration: 500});
                                greeting.hide();
                        }       
                ");
 
                // Show the greeting, this time with a clickable header
                echo '<div id="greetingClicker" onclick="greeting.toggle();">Click to see the greeting</div>
                          <div id="greetingContainer" style="background-color: #CCC;">
                              Hello ' . $name . ' in our World!
                          </div>';
        }
}
?>
Retrieved from "http://docs.joomla.org/Tutorial:Adding_Javascript_moo.fx_to_your_component_WIP"
Personal tools