Joomlant - All about Joomla!

How to implement ToolBar in Frontend

If you are familiar with Joomla! backend development, you may found that Toolbar implemented in backend is quite useful. It is easy to code in backend but there is no standard way in frontend. In this article(s) I will provide a solution used in many of my component development, using this way you can use backend style to create toolbar like this:-

<?php
// Check to ensure this file is included in Joomla!
defined('_JEXEC') or die( 'Restricted access' );

require_once(JPATH_COMPONENT.DS.'libraries'.DS.'baseview.class.php');

class JongmanViewReservations extends JBaseView
{
          function display()
         {
               JHTML::_('behavior.modal');
               JToolBarHelper::title('Jongman :: '.JText::_(COM_JONGMAN_MANAGE_RESERVATIONS));
               JToolBarHelper::custom('reservation.view', 'preview' , 'preview', "View" ); 
               JToolBarHelper::editList('reservation.edit');  
               JToolBarHelper::deleteList('', 'reservation.remove', "Delete");

                $rows = & $this->get("Items");
                $pagination = & $this->get("Pagination");
                $sorting = & $this->get("Sorting");
                $searchword = & $this->get("SearchWord");
                $schedule_id = $this->get("ScheduleId");
                $this->assignRef('rows', $rows);
                $this->assignRef('pagination', $pagination);
                $this->assignRef('sorting', $sorting);
                $this->assignRef('searchword', $searchword);
               $this->assignRef('scheduleid', $schedule_id);

                parent::display();
       }
}

As you can see from line 10 to 13, it has nothing different with those implemented in backend. Two more differences that you can see are line 4 and 5 which includes baseview.class.php and our view extends from JBaseView. As I have seen from backend implementation that toolbar render occurs in template, but in frontend we have no control over template. So my solution is a base view class that render toolbar and call parent::display() in that view.

Base View Class for Toolbar Implementation

In this class we include a layout for toolbar and also render it in the toolbar position. The layout was copied from the Joomla! backend which you can use rounded and no-rounded corner layout.

{codecitation}

<?phpdefined( '_JEXEC' ) or die( 'Restricted access' );
jimport('joomla.application.component.view');
jimport('joomla.html.toolbar');
require_once(JPATH_ADMINISTRATOR.DS.'includes'.DS.'toolbar.php');
class JBaseView extends JView
{
         function display($tpl=null)
         {
                     global $mainframe, $option;

                      JHTML::stylesheet('rounded.css', "components/$option/assets/css/");
                      JHTML::stylesheet('layout.css', "components/$option/assets/css/");
                      $bar = JToolBar::getInstance('toolbar');
                      $bar->addButtonPath(JPATH_COMPONENT.DS.'assets'.DS.'images'.DS.'toolbar');
?>
            <div id="my-header">
       <div id="toolbar-box">
               <div>
                    <div>
                         <div></div>
                    </div>
                </div>
       <div>

        <div></div>
         </div>
 <div>
 <div>
 <div></div>
 </div>
 </div>
 </div>
<div></div>
          </div>
            <div id="my-main">
                <?php parent::display($tpl);?>
            </div>
<?php  
  }
}

• < Prev
• Next >