Advanced topics

From Joomla! Documentation

(Redirected from Tutorial:Advanced topics)

Templates are executed in a 2-phase process that makes full use of the PHP parser to provide considerable flexibility and performance to the template designer. Templates are executed in the context of the document object so that the $this object is always the instantiation of the JDocument class.

Before template execution begins, the component will have been executed and its output buffered for later use.

Template execution then proceeds as follows:-

template parameters (if any) are loaded.
template language (if any) is loaded.
if legacy mode is on then the configuration variables are copied as globals.
the template file (index.php) is loaded and executed (by PHP). The output is buffered. This is phase 1 of the 2-phase process. Everything between <?php and ?> tags is executed as PHP code. Everything outside of these tags is output but otherwise ignored. As the output is being buffered, nothing is sent to the client web browser at this stage.
a favicon.ico file is looked for, first in the Joomla! root directory, then in the template root directory. The latter will override the former if found.
the output that was buffered in phase 1 is now parsed for <jdoc:include> elements. This is phase 2 of the process. For each jdoc element found, the appropriate renderer class is loaded and its render method is called. The output from the render method replaces the <jdoc:include> element itself in the output buffer. In the case of module renderer classes this triggers the execution of the modules and the buffering of their output.
Certain template-specific HTTP headers are added to the list of headers to be output.
Control is then passed back to the JApplication object which will handle the rest of the process of getting the now rendered web page back to the client web browser.

When a request is made for a page on your site, the server returns an HTTP status code in response to the request. Joomla! returns a '200 - the server successfully returned the page' for error pages. This is problematic for those working with Google Webmaster Services and trying to get a sitemap resolved.

If you want Joomla! to return a status code for the error, you can do so by adding logic before the DOCTYPE line, as follows:

<?php 
if ($this->error->code == '404') {
	header("HTTP/1.0 404 Not Found");
} ?>

More HTTP Status Code Information

Using Theme Header and Footer on Standard Error Page

If you want to see the error page in theme design and don't like redirecting to error page URL or duplicating HTML in the error page template, here is a way to apply your theme template to the error page.

First, put the following code in templates/<template-name>/error.php:

<?php
// no direct access
defined( '_JEXEC' ) or die( 'Restricted access' );
 
include dirname(__FILE__) . "/index.php";
?>

Then make the following edits to templates/<template-name>/index.php::

1. Find the following code in index.php

<jdoc:include type="head" />

and replace it with the following

<?php if (!$this->error->code) : ?>
<jdoc:include type="head" />
<?php else : ?> 
<title><?php echo $this->error->code ?> - <?php echo $this->title; ?></title>
<?php endif; ?>

2. Find the following code in index.php

<jdoc:include type="component" />

and replace it with the following

<?php if ($this->error->code) : /* check if we are on error page, if yes - display error message */ ?>
<p><strong><?php echo $this->error->code ?> - <?php echo $this->error->message ?></strong></p>
 
<p><strong><?php echo JText::_('You may not be able to visit this page because of:'); ?></strong></p>
<ol>
<li><?php echo JText::_('An out-of-date bookmark/favourite'); ?></li>
<li><?php echo JText::_('A search engine that has an out-of-date listing for this site'); ?></li>
<li><?php echo JText::_('A mis-typed address'); ?></li>
<li><?php echo JText::_('You have no access to this page'); ?></li>
<li><?php echo JText::_('The requested resource was not found'); ?></li>
<li><?php echo JText::_('An error has occurred while processing your request.'); ?></li>
</ol>
<p><strong><?php echo JText::_('Please try one of the following pages:'); ?></strong></p>
<p>
<ul>
<li><a href="<?php echo $this->baseurl; ?>/index.php" title="<?php echo JText::_('Go to the home page'); ?>"><?php echo JText::_('Home Page'); ?></a></li>
</ul>
</p>
<p><?php echo JText::_('If difficulties persist, please contact the system administrator of this site.'); ?></p>  
<?php else : ?>  
<jdoc:include type="component" />
<?php endif; ?>

Now your theme template is applied to error pages too.

Note: Module includes in template will not work on error page created by this method (but will work on other pages).

Adding Javascript

This chunk should describe in detail how to add Javascript to the head of a template using the Joomla! 1.5 API calls. It should be aimed at people who have only minimal knowledge of PHP, HTML and Javascript.

Add the following code to have the Javascript library /media/system/js/sample.js included in your template.

<?php
$document = &JFactory::getDocument();
$document->addScript( '/media/system/js/sample.js' );
?>

Explanation

Ultimately you are trying to have the resulting HTML page have a Javascript included in the head element (i.e. <head> ... </head>):

For example:

<script type="text/javascript" src="/media/system/js/sample.js"></script>

Ensure that the Javascript you want to include is in the directory, from the above example:

  /media/system/js/sample.js

Load your page into a browser and verify that the <script> tag is in the <head> area and able to load the Javascript. Again, using the example:

  http://www.example.com/media/system/js/sample.js

When successful the script is integrated into your page. Now you can use Javascript in your HTML.

Do not directly add the <script> to your template's index.php. The code will insert the <script> line where your index.php has the following line:

<jdoc:include type="head" />

Add this PHP code to your page, in the head, or next to the Javascript code you will use, depending on your preference.

<?php
$document = &JFactory::getDocument();
$document->addScript( '/media/system/js/sample.js' );
?>

Reload and view the page. Ensure that the sample.js is included in the <head> section.

Adding Javascript Files Using JHTML

You may also use the JHTML script method to add a Javascript file to the head of your document.

<?php
$filename = 'filename.js';
// Add the path parameter if the path is different than 'media/system/js/'
$path = 'path/to/file/';
JHTML::script($filename, $path);
?>

There is a third Boolean argument that can be passed to the script method. Set this to true if you also want MooTools loaded.

<?php
$filename = 'filename.js';
// Add the path parameter if the path is different than 'media/system/js/'
$path = 'path/to/file/';
// MooTools will load if it is not already loaded
JHTML::script($filename, $path, true);
?>

Please Note: Joomla 1.6+ may handle MooTools differently than in previous versions. ^[1]

References

↑ Whitepaper Upgrade to mootools 1.2

Different web browsers sometimes show differences in the way that they render a page. For this reason you may wish to find out which particular browser a visitor is using, in order to use some browser-specific CSS.

The following JavaScript defines a simple browser detection object which determines the browser's name and version by decoding the navigator.userAgent string.

function browserDetect()
{
  var browserNames=new Array("Opera", "MSIE","Netscape","Firefox");
  this.name="NK";
  this.mainVersion="NK";
  this.minorVersion="NK";
 
  for (var i=0; i< browserNames.length; i++)
  {
   var pattern='('+browserNames[i]+')'+'.([0-9]+)\.([0-9]+)';    
   var myRegExp=new RegExp(pattern);
   if (myRegExp.test(navigator.userAgent))
    {
      var results=myRegExp.exec(navigator.userAgent);
      this.name=results[1];
      this.mainVersion=results[2];
      this.minorVersion=results[3];
      break;
    }
  }
}

In order to use this in a script, you then create an instance of this object:

var browser = new browserDetect();

The property browser.name will then give you then name of the browser (MSIE, Opera, Netscape or Firefox), browser.mainVersion will give you the main version number and browser.minorVersion will give you the minor version number.

However you should be aware that this is not foolproof, and it is generally better (in this writer's opinion) to avoid writing browser-specific code as far as possible.

You can define different CSS style sheets depending upon the device the user is browsing your site with

The recognised media types are:

all - Suitable for all devices.
aural - For speech synthesizers.
braille - Intended for braille tactile feedback devices.
embossed -Intended for paged braille printers.
handheld - Intended for handheld devices.
print - Used for formatting printed pages.
projection - Intended for projected presentations, for example projectors or print to transparencies.
screen - Intended primarily for color computer screens.
tty - Intended for media using a fixed-pitch character grid, such as teletypes, terminals, or portable devices with limited display capabilities. Authors should not use pixel units with the "tty" media type.
tv - Intended for television-type devices (low resolution, color, limited-scrollability screens, sound available).

You can assign a media type to a CSS declaration with the following syntax

@media print {

   BODY { font-size: 12pt }
 }

To assign the declaration to more than one media type:

@media print handheld{

   BODY { font-size: 12pt }
 }

Alternatively, and perhaps a neater solution is to create a separate style sheet for a given media type and include the following in your templates <head> (the following is taken from the beez template):

<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/beez/css/print.css" type="text/css" media="Print" />

[0] Whitepaper Upgrade to mootools 1.2

[1]

Advanced topics

From Joomla! Documentation

Contents

Error Page Templates

Styling the Error Pages

Overriding the System Error Results

Overriding the System Styling

Customizing Error Messages

HTTP Status Code

More HTTP Status Code Information

Using Theme Header and Footer on Standard Error Page

Adding Javascript

Explanation

Adding Javascript Files Using JHTML

References

Views

Personal tools

Navigation

Search

Joomla! Sites

Toolbox