Using Javascript effects with Joomla! 1.5

Exclusive offer: get 50% off this eBook here
Mastering Joomla! 1.5 Extension and Framework Development

Mastering Joomla! 1.5 Extension and Framework Development — Save 50%

The Professional Guide to Programming Joomla!

£16.99    £8.50
by James Kennard | June 2010 | Joomla! Open Source

Joomla! is one of the world's top open source content management systems. The main sources of the PHP MySQL application's success are its comprehensive extension libraries, which extend Joomla! far beyond content management, and it's very active forums where one can easily tap into the knowledge of other Joomla! users, administrators, and developers.

In this article by,Chuck Lanham and James Kennard, author of Mastering Joomla! 1.5 Extension and Framework Development,we will cover Adding interactive and user-friendly JavaScript elements to our extensions

(Read more interesting articles on Joomla! 1.5 here.)

Using JavaScript effects

Joomla! includes mootools—a powerful compact JavaScript framework. Mootools enables us to do many things, but it is used extensively in Joomla! to create client-side effects. Some of these, such as the accordion, are accessible through Joomla! classes. Others require special attention.

In some instances it may be necessary to manually add the mootools library to the document. We can do this using the JHTML behavior.mootools type:

JHTML::_('behavior.mootools');

JPane

A pane is an XHTML area that holds more than one set of information. There are two different types of panes:

  • Tabs: Tabs provides a typical tabbed area with tabs to the top that are used to select different panes.
  • Sliders: Sliders, based on the mootools accordion, are vertical selections of headings above panels that can be expanded and contracted.

We use the JPane class to implement panes. This example demonstrates a basic tabular pane with two panels:

$pane =& JPane::getInstance('Tabs');
echo $pane->startPane('myPane');
{
echo $pane->startPanel('Panel 1', 'panel1');
echo "This is Panel 1";
echo $pane->endPanel();
echo $pane->startPanel('Panel 2', 'panel2');
echo "This is Panel 2";
echo $pane->endPanel();
}
echo $pane->endPane();

There are essentially two elements to a pane: the pane itself and the panels within the pane. We use the methods startPane() and endPane() to signify the start and end of the pane. When we use startPane() we must provide one string parameter, which is a unique identifier used to identify the pane.

Panels are always created internally to a pane and use the methods startPanel() and endPanel(). We must provide the startPanel() method with two parameters, the name, which appears on the tab, and the panel ID.

The following is a screenshot of the pane created from the previous code:

Had we wanted to create a slider pane instead of a tab pane when we used the getInstance() method, we would need to have supplied the parameter Sliders instead of Tabs. This is a screenshot of the same pane as a slider:

Panes are used extensively in Joomla!

As a general rule, tabs are used for settings and sliders are used for parameters.

Tooltips

Tool tips are small boxes with useful information in them that appear in response to onmouseover events. They are used extensively in forms to provide more information about fields and their contents. Tooltips can be extremely helpful to users by providing small helpful hints such as what value should be put into a field or what is the purpose of a field. It takes a small amount of code to implement but adds a lot of value for our users. So how do we add a tooltip?

We use JHTML to render tips easily. There are two types that we use:

  • behavior.tooltip is used to import the necessary JavaScript to enable tooltips to work and it does not return anything. We only ever need to call this type once in a page.
  • tooltip is used to render a tooltip in relation to an image or a piece of text. There are six parameters associated with tooltip, of which five are optional. We will explore the more common uses of these parameters.

The most basic usage of tooltip returns a small information icon that onmouseover displays as a tooltip; as this example demonstrates:

echo JHTML::_('tooltip', $tooltip);

The next parameter allows us to define a title that is displayed at the top of the tooltip:

echo JHTML::_('tooltip', $tooltip, $title);

The next parameter allows us to select an image from the includes/js/ThemeOffice directory. This example uses the warning.png image:

echo JHTML::_('tooltip', $tooltip, $title, 'warning.png');

The next obvious leap is to use text instead of an image and that is just what the next parameter allows us to do:

echo JHTML::_('tooltip', $tooltip, $title, null, $text);

There are some additional parameters that relate to using hypertext links. A full description of these is available in Appendix E, Joomla! HTML Library.

We can modify the appearance of tooltips using CSS. There are three style classes that we can use: .tool-tip, .tool-title, and .tool-text. The tooltip is encapsulated by the .tool-tip class, and the .tool-title and .tool-text styles relate to the title and the content.

This code demonstrates how we can add some CSS to the document to override the default tooltip CSS:

// prepare the cSS
$css = '/* Tooltips */

.tool-tip
{
min-width: 100px;
opacity: 0.8;
filter: alpha(opacity=80);
-moz-opacity: 0.8;
}


.tool-title
{
text-align: center;
}

.tool-text {
font-style: italic;
}';

// add the CSS to the document
$doc =& JFactory::getDocument();
$doc->addStyleDeclaration($css);

Let's add tooltips to our com_boxoffice/views/revue/tmpl/default.php layout file.

The first step is to enable tooltips by adding behavior.tooltip to the beginning of our layout file as follows:

<?php
// No direct access
defined('_JEXEC') or die('Restricted access');

// Enable tooltips
JHTML::_('behavior.tooltip');
?>

This should be placed at the beginning as illustrated. This adds the mootool JavaScript class Tips to our document and adds the following JavaScript code to the document heading:

<script type="text/javascript">
window.addEvent('domready', function(){
var JTooltips = new Tips($$('.hasTip'),
{ maxTitleChars: 50, fixed: false});
});
</script>

Next, we identify those elements that we wish to have a tooltip enabled for. There are two documented ways to implement a tooltip. We will create both for the movie title to illustrate:

<tr>
<td width="100" align="right" class="key">
<span class="editlinktip hasTip"
title="::<?php echo JText::_('TIP_001');?>">
<label for="title">
<?php echo JText::_('Movie Title'); ?>:
</label>
</span>
</td>
<td>
<input class="inputbox" type="text"
name="title" id="title" size="25"
value="<?php echo $this->revue->title;?>" />
<?php echo JHTML::_('tooltip', JText::_('TIP_001')); ?>
</td>
</tr>

The first approach wraps the label with a <span> that has two CSS classes declared editlinktip and hasTip, and a title attribute. The title attribute is a two part string with the parts separated by double colons; the first part is the tooltip title and the second is the tooltip text. Both methods will produce similar results.

There are a few differences that you should keep in mind. The first approach displays the tip when you hover over the spanned element (in this case the label field). The second approach will generate a small icon next to the input field; the tip will appear when you move your mouse over the icon.

You can duplicate the results of the first approach using the tooltip method with the following code:

<?php
$label = '<label for ="title">'
. JText::_('Movie Title')
. '</label>'
echo JHTML::_('tooltip', JText::_('TIP_001'),
'', '', $label);
?>

Note that the tip text is passed through JText with a key from our translation file. Here are the entries for our tips:

# Tip Text


TIP_001=Enter the film title.
TIP_002=Choose the MPAA film rating.
TIP_003=Provide a brief impression of the film.
TIP_004=Enter the name of the reviewer.
TIP_005=Enter 1-5 asterisks (*) for overall quality of the film.
TIP_006=Enter the date of the review (mm/dd/yyyy).
TIP_007=Do you wish to publish this revue?

In the end the method you choose to implement tooltips is largely a personal preference.

Mastering Joomla! 1.5 Extension and Framework Development The Professional Guide to Programming Joomla!
Published: November 2007
eBook Price: £16.99
Book Price: £30.99
See more
Select your format and quantity:

(Read more interesting articles on Joomla! 1.5 here.)

Fx.Slide

We will use the mootools Fx.Slide effect to demonstrate how we can build a PHP class to handle some mootools JavaScript. The Fx.Slide effect allows an XHTML element to seamlessly slide in and out of view horizontally or vertically.

We'll create a class named 'Slide', which will handle the Fx.Slide effect. The class will have five methods: __construct(), startSlide(), endSlide(), button(), and addScript().

The way in which we use Fx.Slide requires us to add JavaScript to the window domready event. This event is fired once the DOM (Document Object Model) is ready. If we do not add the JavaScript in this way it is likely that we will incur problems. This is because if important parts of the DOM are missing, such as a slider, then the JavaScript will not be able to execute properly.

As the domready event can only trigger one event handler, we'll use the addScript() method as a static method to build up an event handler. This will allow us to use the Slide class to add multiple sliders without overwriting any previous domready event handlers.

Here is our Slide class:

/**
* Handles mootools Fx.Slide
*/
class Slide extends JObject
{
/**
* Slider mode: horizontal|vertical
*/
var $_mode;
/**
* Constructor
*
* @param string Slide mode: horizontal|vertical
*/
function __construct($mode = 'vertical')
{
$this->_mode = $mode;
TIP_008=Write your review.
TIP_009=Select the film genre (category).
// import mootools library
JHTML::_('behavior.mootools');
}
/**
* Starts a new Slide
*
* @param string Slider ID
* @param string Slider class
* @return string Slider XHTML
*/
function startSlider($id, $attributes = '')
{
// prepare slider JavaScript
$js = "var ".$id." = new Fx.Slide('".$id."', {mode:
'".$this->_mode."'});";
Slide::addScript($js);
// return the slider
return '<div id="'.$id.'" '.$attributes.'>';
}
/**
* Ends a slide
*
* @return string Slider XHTML
*/
function endSlide()
{
// end the slide
return '</div>';
}
/**
* Creates a slide button
*
* @param string Button text
* @param string Button Id
* @param string Slider Id
* @param string Button type: toggle|slideIn|slideOut|hide
* @return string Slider XHTML action button
*/
function button($text, $buttonId, $slideId, $type = 'toggle')
{
// prepare button JavaScript
$js = "$('".$buttonId."').addEvent('click', function(e){"
." e = new Event(e);"
." ".$slideId.".".$type."();"
." e.stop();"
." });";
Slide::addScript($js);

// return the button
return '<a id="'.$buttonId.'" href="#"
name="'.$buttonId.'">'.$text.'</a>';
}
/**
* Adds the JavaScript to the domready event
*and adds the event handler to the document
*
* @static
* @param string JavaScript to add to domready event
*/
function addScript($script = null)
{
// domready event handler
static $js;
if ($script)
{
// append script
$js .= "\n".$script;
}
else
{
// prepare domready event handler
$script="window.addEvent('domready',
function(){".$js."});"
// add event handler to document
$document =& JFactory::getDocument();
$document->addScriptDeclaration($script);
}
}
}

Notice that at no point do we tell the document that we need to include the mootools library. This is because mootools is always included when we render an HTML document.

So how do we use our newly created class? Well it's relatively simple. We use startSlide() and endSlide() to indicate a slider; anything that we output between these two calls will be within the slider. We use the button() method to output a button, which when pressed will perform a slider event on the slider. Once we have outputted all the sliders we intend to, we use the static addScript() method to add the necessary JavaScript to the document.

This example demonstrates how we can create two slides using our Slide class:

$slide = new Slide();

echo $slide->button('Toggle Slide 1', 'toggle1', 'slide1');
echo $slide->startSlider('slide1', 'class="greyBox"');
echo 'Slide 1';
echo $slide->endSlider();

echo $slide->button('Toggle Slide 2', 'toggle2', 'slide2');
echo $slide->startSlider('slide2', 'class="greyBox"');
echo 'Slide 2';
echo $slide->endSlider();

Slide::addScript();

Notice that we call the static addScript() method at the end with no parameters. This will add the necessary JavaScript to make our slides work. We should never call the addScript() method without parameters more than once.

The resultant slides appear as follows:

Both of these particular slides are vertical, but there is nothing to prevent us from using horizontal and vertical slides on the same page. To do this we would require two Slide objects, one which when instantiated is passed the variable horizontal:

$slideHorizontal = new Slide('horizontal');
$slideVertical = new Slide();

There are many different effects we can achieve using mootools, and we don't have to use a PHP class to implement them. If you want to take advantage of mootools then the best place to start is at the mootools website: http://mootools.net/.

Summary

In this Article,we discussed about the mootools JavaScript library, which can significantly enhance the user experience of our extensions. We looked at creating tabbed and slider panels, creating unique tooltips, and how to create our own special effects class using some mootools JavaScript.


If you have read this article you may be interested to view:

Mastering Joomla! 1.5 Extension and Framework Development The Professional Guide to Programming Joomla!
Published: November 2007
eBook Price: £16.99
Book Price: £30.99
See more
Select your format and quantity:

About the Author :


Chuck Lanham

Chuck Lanham began his career as a database software engineer with Burroughs Corp. He later worked for Informix Corp. managing the database tools development group while serving as repository architect. He has founded and managed two successful software development companies, and taught college courses on database theory, data communications, and computer technologies. He has also managed the global development and deployment of leading CRM and CMS systems for many Fortune 500 companies, and managed the development and deployment of some of the largest e-commerce websites in the world.

In 2002, Chuck left the corporate world and started a new company, Blue Water Associates. This company is located near the deep blue waters of Lake Tahoe where he designs, develops, and maintains websites for small to medium sized businesses, both within the U.S. and abroad.

Chuck has been developing websites using Joomla! since 2007 with the release of version 1.5 and has developed several extensions for use in the websites he has designed. This is Chuck's first book as an author, although he has reviewed and edited several books and written numerous technical articles for publication.

James Kennard

James Kennard is a computer programmer. He has worked with various PHP and MySQL applications, since 2002. He quickly discovered Mambo/Joomla! because of its flexible extension manager. James currently maintains one open-source Joomla! component, which has been translated into over fifteen languages. Moreover, he has plans to build two more open-source components. Examples of his work can be found on his personal website www.webamoeba.co.uk.

Books From Packt


Joomla! 1.5 SEO
Joomla! 1.5 SEO

Joomla! 1.5: Beginner's Guide
Joomla! 1.5: Beginner's Guide

Joomla! E-Commerce with VirtueMart
Joomla! E-Commerce with VirtueMart

Joomla! 1.5 Multimedia
Joomla! 1.5 Multimedia

Joomla! 1.5 Content Administration
Joomla! 1.5 Content Administration

Learning Joomla! 1.5 Extension Development
Learning Joomla! 1.5 Extension Development

Joomla! with Flash
Joomla! with Flash

Joomla! Web Security
Joomla! Web Security


Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software