J3.x:Using the JToolbar class in the frontend

How is it done in the backend?

In the backend Joomla displays a toolbar by using the following procedure:

• In the main administrator/index.php the JToolbarHelper class is included:

  require_once JPATH_BASE . '/includes/toolbar.php';
  

• this JToolbarHelper class is a collection of static functions that mainly call JToolbar-methods. JToolbarHelper is used by programmers to code the toolbar in the view.
• JToolbar is the class (in libraries/cms/toolbar/toolbar.php) that actually makes the toolbar. It has a getInstance()-method to create one (and store it statically), appendButton() and prependButton() methods to add buttons to that toolbar and a render()-method to produce the html to display the toolbar.
• In the backend there is a module mod_toolbar that is displayed in the "toolbar" position of the administrator template. The module echos the rendered toolbar:

  $toolbar = JToolbar::getInstance('toolbar')->render('toolbar');
  

What is different in the frontend if you want to use a toolbar?

In the frontend we don't have:

• JToolbarHelper included in the index.php
• a module that renders the toolbar
• a moduleposition "toolbar" in the template

So, in order to use a toolbar in the frontend, we have to provide the missing things ourselves:

• or include JToolbarHelper or directly call JToolbar to code the toolbar
• render the toolbar
• echo the rendered toolbar in our view template

Alternatively we can directly code toolbar-buttons ourselves instead of using JToolbar.

Using JToolbar in the frontend

We have to do it in 2 steps: we define a toolbar and we echo the rendered toolbar in our view template

Step 1: define a toolbar

Add the rendered toolbar to your view.html.php file in the view you wish to add the toolbar to.

Add a getToolbar() function to your view. Here we do it by directly calling JToolbar:

	protected function getToolbar()
	{		
		// Make a toolbar (you can give it any name if you do it this way)
                $bar = JToolBar::getInstance('toolbar');

		// Add whatever buttons you require
		$bar->appendButton( 'Standard', 'save', 'Save', 'yourviewname.save', false );
		$bar->appendButton( 'Separator' );
		$bar->appendButton( 'Standard', 'cancel', 'Cancel', 'yourviewname.cancel', false );

		//generate the html and return
		return $bar->render();
	}

Alternatively you could include JToolbarHelper and define the buttons the same way as you do it in the backend. But you'll still have to render the toolbar:

	protected function getToolbar()
	{	
                // Include JToolbarHelper
                require_once JPATH_ADMINISTRATOR . '/includes/toolbar.php';

                // Add whatever buttons you require
		JToolBarHelper::save('yourviewname.save');
		JToolbarHelper::divider();
		JToolBarHelper::cancel('yourviewname.cancel');
		JToolbarHelper::divider();

		// Generate the html and return
                // The toolbar is named "toolbar" if you use JToolbarHelper
		return JToolBar::getInstance('toolbar')->render();
        }

Step 2: echo the rendered toolbar in the view template

Where you want to display the toolbar:

<form action="index.php" method="post" id="adminForm" name="adminForm">
	<?php echo $this->getToolbar(); ?>
	<input type = "hidden" name = "task" value = "" />
	<input type = "hidden" name = "option" value = "com_yourcom" />
</form>
<div class="clr"></div>

Or define the toolbar buttons without using JToolbar

You can use Joomla.submitbutton() to submit the task you want to. The Joomla javascript is included in the template head via

<script src="/media/system/js/core.js"></script>

Define your own html, directly in the view template (or via a getToolbar-mentod in your view):

<div class="btn-toolbar">
<div class="btn-group">
<button type="button" class="btn btn-primary" onclick="Joomla.
submitbutton('yourviewname.add')">
<i class="icon-new"></i> <?php echo JText::_('JNEW') ?>
</button>
</div>
</div>