Actions

J3.x

Using the JToolbar class in the frontend

(Redirected from 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 has a collection of static methods 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 directly call JToolbar to code the toolbar or include JToolbarHelper
  • render the toolbar
  • echo the rendered toolbar in the 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

In the view template, where you want to display the toolbar, echo the rendered 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

Define your own html, directly in the view template (or via a getToolbar-method 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>

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

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