Wednesday, October 14, 2009

Joomla 1.5 - Creating RAW output for the front end

If you want your component to create RAW output on the front end, like xml data to be returned for an AJAX POST/GET, then this is what you have to do.

1. In your component's views/view/ folder, add a view.raw.php file. E.g. if your component has a view called smile your will add view.raw.php to your views/smile/ folder . i.e. com_mycomponent/views/smile/view.raw.php

2. Whenever you call your component via a url simply append format=raw to the url. E.g. index.php?option=com_mycomponent&format=raw

Notes: For the backend administrator side, you can just specify format=raw without having to add the view.raw.php file to your views folder.

Monday, August 10, 2009

Joomla 1.5 Raising Errors, Notices and Warnings through code

Sometimes it is neccessary to inform an user that incorrect information was entered, like with a login or form validation or sometimes the users needs to be notified what fields needs to be filled in when the form gets loaded.


Making use of Joomla!'s JError class it is possible to display this kind of messages theough the Joomla! framework. To use simply call the JError::raiseError, JError::raiseNotice or JError::raiseWarning methods.


<?php
$msg = 'Error Message';
JError::raiseError(0,$msg);

$msg = 'Notice Message';
JError::raiseNotice(0,$msg);

$msg = 'Warning Message';
JError::raiseWarning(0,$msg);
?>


[update - 11 Feb 2010]
For more go to the following url:
http://docs.joomla.org/Display_error_messages_and_notices

Monday, May 25, 2009

Joomla! 1.5 Fixing the Tabs for IE

The basic tabs style does not really display properly in Internet Explorer. See my tutorial on how to create tabs through the Joomla! framework.

In Internet Explorer the dd and dt tags does not stack properly while it display properly in Firefox, Chrome, Opera and Safari.

To fix this issue, an IE only style is created and included in the site template's  index.php file, or the existing ieonly.css file in the template/css directory can be used, if there is such a file.
E.g.
<!--[if IE]>
<link href="<?=$this->baseurl?>/templates/<?=$this->template?>/css/ieonly.css" rel="stylesheet" type="text/css" />
<![endif]-->

In this css file the following code is added.
div.current { overflow:auto; }
div.current dd  { float:left; }

And the display issue is fixed!

Credits: I would like to credit alexwai for figuring out a solution for this. See thie forum thread.

Thursday, May 21, 2009

Joomla! 1.5 Adding to the Breadcrumb/PathWay through the Joomla Framework

Joomla's JPathway class allows you to add a new item to the pathway to be displayed in the Breadcrumb.

The first thing to do is to access the global JApplication object, then get a reference to the JPathway object.

<?php 
global $mainframe;
$breadcrumbs = &$mainframe->getPathWay();
?>
Adding a breadcrumb is now as simple as calling the JPathway::addItem() method. The addItem method takes a name as the first parameter and a link as the second parameter.
<?php 
$breadcrumbs->addItem( 'My Crumb!', JRoute::_('index.php?option=com_mycrumb') );
?>

If your Item is the last item on the breadcrumb the link will be ignored.

Tuesday, January 27, 2009

Joomla! 1.5 How to create Tabs through the Joomla Framework

It is quite easy to create tabs through the Joomla's Framwork.

According to the Joomla API documentation the class to use is the JPane class, specifically an instance of a JPaneTabs class.

The folloing code get the instance of a JPaneTabs class
<?php
//Inform Joomla we want to make use of panes
jimport('joomla.html.pane');
   //Get JPaneTabs instance
$myTabs = & JPane::getInstance('tabs', array('startOffset'=>0)); 
?>
The first parameter of JPane::getInstance() specify the apearance of the pane, in this case tabs. Another option is sliders. What the function basically do is append the first parameter to the JPane name and create an instanc of that class. E.g. 'JPane' + 'Tabs' give you JPaneTabs. Ths same is true for the Sliders.

The Second parameter specify the starting, or default, tab.

Once there is an instance of the JPaneTabs, Joomla need to know that it should start with a Tab pane. The JPaneTabs ::startPane($id) will be used with the first parameter a unique id. All panes needs to be accessed by Mootools which will use the unique id in order to draw the tabs correctly.

What is a pane without some tabs? The  JPaneTabs ::startPanel($title,$id) function will inform Joomla that a new tab should be created. IT takes a tab name or title as a first parameter and a unique id as the second parameter. (id is for Mootools).

An example implimentation will look as follows:

<?php
//Inform Joomla we want to make use of panes
jimport('joomla.html.pane');
//Get JPaneTabs instance
$myTabs = & JPane::getInstance('tabs', array('startOffset'=>0));
$output = '';
//Create Pane
$output .= $myTabs->startPane( 'pane' );
//Create 1st Tab
$output .= $myTabs->startPanel( '1st', 'tab1' );
$output  .= '<p>This is the first tab</p>';
$output .= $myTabs->endPanel();
//Create 2nd Tab
$output .= $myTabs->startPanel( '2nd', 'tab2' );
$output  .= '<p>This is the secondt tab</p>';
$output .= $myTabs->endPanel();
//Create 3rd Tab
$output .= $myTabs->startPanel( '3rd', 'tab3' );
$output  .= '<p>This is the third tab</p>';
$output .= $myTabs->endPanel();
//End Pane
$output .= $myTabs->endPane();
//Output to web
echo $output;
?>
Once the tabs have been created it is important to create styles for the id's specified in the code. It can be created in the template's template.css file.

Example styles will look as follows:
dl.tabs {
float: left;
margin: 10px 0 -1px 0;
z-index: 50;
}

dl.tabs dt {
float: left;
padding: 4px 10px;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
border-top: 1px solid #ccc;
margin-left: 3px;
background: #f0f0f0;
color: #666;
}

dl.tabs dt.open {
background: #F9F9F9;
border-bottom: 1px solid #F9F9F9;
z-index: 100;
color: #000;
}

div.current { 
clear: both; 
border: 1px solid #ccc; 
padding: 10px 10px;
}

div.current dd 
{ 
padding: 0; 
margin: 0;
}
And that is it.

Fun thing to do: Create sliders from the above code.