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.

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.

Joomla! 1.5 How to create a Select tag through the Joomla Framework

Today I needed to display a list of towns from a database table. Nowhere on the Joomla! documentation could I find an example on how to achieve that, so I had to go figure it out once again.

I have a database table that contains all my towns. First I had to create a query to retrieve the towns and put them in an object list.

The code for that follows.

<?php
$db =& JFactory::getDBO();

$query = 'SELECT `id`,`name` FROM #__town';
$db->setQuery( $query );
$townlist = $db->loadObjectList();
?>

Ok now that I have a list of towns I simply have to use JHTMLSelect.genericlist() to output the HTML code for my select.

The code to do that follows:

<?php
echo JHTML::_('Select.genericlist',$townlist,"town","","id","name",1);
?>

In the code I am simply creating a select from the town list with the options values set as id and the texts set as name (as per the query) . The 1 at the end indicates the selected option. 

If I for example get the selected option from a post/get request, the code will look as follows.

<?php
$selectedId = JRequest::getVar( 'id',0);
echo JHTML::_('Select.genericlist',$townlist,"town","","id","name",$selectedId);
?>

Joomla! 1.5 How to cloak an email through code.

This one I figured out for myself and I am sure you will be able to do the sime... right. :)

Say for example you have a custom field in the database that stores an email and you want to display that email on a page somewhere. You don't really want to allow every spam or virus harvest bot out there to come and grab the email. That is why Joomla! created the cloak function. It just makes sense to protect ppl's emails.

To cloak the email simply enter the following code.

<?php
$email = 'some.email@some.domain';
$emcloaked = JHTML::_('Email.cloak',$email);
echo $emcloaked;
?>

And that is it.

Joomla! 1.5 Getting the modal dialog to work

Today I quickly want to show you how to get the Joomla! 1.5 Modal Dialog (SqueezeBox - Expandable Lightbox) to work in any of your components or modules. It's actually quite easy to do since the Joomla! team did such a great job at making mootools part of the solution. JHTML to the rescue! :)

In this example I'm going to make a normal anchor open up a Modal dialog. Are you ready?

Within your php code tags enter the following:

<?php
JHTML::_('behavior.modal', 'a.modal-button');
?>

Add an anchor and the following to the anchor:

<a href="http://www.google.com/" class="modal-button" rel="{handler: 'iframe', size: {x: 725, y: 520}}">MyMooModal</a>

And that is all there is to it. You can specify ANY link and it will open in the Modal Dialog