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>

This is how it is done with frontend editing in com_content at the moment, see https://github.com/joomla/joomla-cms/blob/staging/components/com_content/views/form/tmpl/edit.php#L151-L167

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>

Routing and SEF URLs

Usually in the frontend Search Engine Friendly (SEF) URLs are used. This is different from the backend and can give some bugs. You'll have to adjust the router.php of your component.

ToDo: give an example problem and solution.

Under Construction

Include some stylesheets and language files from the backend

To properly horizontally align the buttons and to get translations of buttons as defined in backend.

Under Construction

Custom frontend buttons

Under Construction