Actions

J3.x

Difference between revisions of "Using the JToolBar class in the frontend"

From Joomla! Documentation

m (Using JToolBar with Search Engine Friendly enabled (SEF))
Line 3: Line 3:
  
 
It's now simpler to use JToolBar in the front end than it was in Joomla! 1.5 as it only requires two steps.
 
It's now simpler to use JToolBar in the front end than it was in Joomla! 1.5 as it only requires two steps.
 +
 +
NOTE: This documentation was not previously updated for Joomla! 3.2. I have made some updates to bring it closer to what is needed for Joomla! 3 but admittedly, I still don't have this functionality working. Additional corrections and contributions would be appreciated. Erik Jorgensen 12/10/2013.
 +
 
{{clear}}
 
{{clear}}
 
===Step 1===
 
===Step 1===
Line 9: Line 12:
 
function getToolbar() {
 
function getToolbar() {
 
// add required stylesheets from admin template
 
// add required stylesheets from admin template
$document   = & JFactory::getDocument();
+
                $document = JFactory::getDocument();
$document->addStyleSheet('administrator/templates/system/css/system.css');
+
                $document->addStyleSheet('administrator/templates/isis/css/template.css');
//now we add the necessary stylesheets from the administrator template
+
                //now we add the necessary stylesheets from the administrator template
//in this case i make reference to the bluestork default administrator template in joomla 1.6
+
                //in this case i make reference to the isis default administrator template in joomla 3.2
$document->addCustomTag(
+
                $document->addCustomTag( '<link href="administrator/templates/isis/css/template.css" rel="stylesheet" type="text/css" />'."\n\n" );
'<link href="administrator/templates/bluestork/css/template.css" rel="stylesheet" type="text/css" />'."\n\n".
+
                //load the JToolBar library and create a toolbar
'<!--[if IE 7]>'."\n".
+
                jimport('cms.html.toolbar');
'<link href="administrator/templates/bluestork/css/ie7.css" rel="stylesheet" type="text/css" />'."\n".
+
'<![endif]-->'."\n".
+
'<!--[if gte IE 8]>'."\n\n".
+
'<link href="administrator/templates/bluestork/css/ie8.css" rel="stylesheet" type="text/css" />'."\n".
+
'<![endif]-->'."\n".
+
'<link rel="stylesheet" href="administrator/templates/bluestork/css/rounded.css" type="text/css" />'."\n"
+
);
+
//load the JToolBar library and create a toolbar
+
jimport('joomla.html.toolbar');
+
 
$bar =& new JToolBar( 'toolbar' );
 
$bar =& new JToolBar( 'toolbar' );
 
//and make whatever calls you require
 
//and make whatever calls you require
$bar->appendButton( 'Standard', 'save', 'Save', 'savetask', false );
+
$bar->appendButton( 'Standard', 'save', 'Save', 'yourcom.save', false );
 
$bar->appendButton( 'Separator' );
 
$bar->appendButton( 'Separator' );
$bar->appendButton( 'Standard', 'cancel', 'Cancel', 'canceltask', false );
+
$bar->appendButton( 'Standard', 'cancel', 'Cancel', 'yourcom.cancel', false );
 
//generate the html and return
 
//generate the html and return
 
return $bar->render();
 
return $bar->render();
Line 56: Line 50:
 
What happens is that instead of going to index.php?option=com_yourcom&view=&...#, it will go to index.php/friendlyurl# . This bugs out many users.
 
What happens is that instead of going to index.php?option=com_yourcom&view=&...#, it will go to index.php/friendlyurl# . This bugs out many users.
  
Using these two together can be done,however. There's two tricks to it. First, make a class called JButtonFrontend and extend JButton. For this, jimport('joomla.html.toolbar') has to be done,because this includes the standard button classes.
+
Using these two together can be done,however. There's two tricks to it. First, create a buttons folder under your main component folder and create frontend.php file with a class called JToolbarButtonFrontend which extends JToolbarButton. Include a jimport('cms.html.toolbar') statement to include the standard button classes.
 +
 
 +
This file will need the following code to create the search engine friendly front end buttons.
  
Just copy over the content of joomla.html.toolbar.button standard.php; then, change the fetchbutton function
 
 
<source lang="php">
 
<source lang="php">
//Goes inside JButtonFrontend class definition.
+
defined('_JEXEC') or die('Restricted access');
public function fetchButton($type = 'Standard', $name = '', $text = '', $task = '', $list = true)
+
{
+
$i18n_text = JText::_($text);
+
$class = $this->fetchIconClass($name);
+
$doTask = $this->_getCommand($text, $task, $list);
+
  
$html = "<a href=\"javascript: void( $doTask);\" onclick=\"$doTask\" class=\"toolbar\">\n";
+
// import Joomla view library
$html .= "<span class=\"$class\">\n";
+
jimport('cms.html.toolbar');
$html .= "</span>\n";
+
$html .= "$i18n_text\n";
+
$html .= "</a>\n";
+
  
return $html;
+
/**
}
+
* Search Engine Friendly Frontend Buttons
 +
*/
 +
class JToolbarButtonFrontend extends JToolbarButton {
 +
     
 +
        public function fetchButton($type = 'Frontend', $name = '', $text = '', $task = '', $list = true)
 +
        {
 +
                $i18n_text = JText::_($text);
 +
                $class = $this->fetchIconClass($name);
 +
                $doTask = $this->_getCommand($text, $task, $list);
 +
 +
                $html = "<button onclick=\"$doTask\" class=\"btn btn-small\">\n";
 +
                $html .= "<span class=\"$class\">\n";
 +
                $html .= "</span>\n";
 +
                $html .= "$i18n_text\n";
 +
                $html .= "</button>\n";
 +
 +
                return $html;
 +
        }
 +
     
 +
        /**
 +
    * Get the button CSS Id
 +
    *
 +
    * @param  string  $type  Not used.
 +
    * @param  string  $html  Not used.
 +
    * @param  string  $id    The id prefix for the button.
 +
    *
 +
    * @return  string  Button CSS Id
 +
    *
 +
    * @since  3.0
 +
    */
 +
    public function fetchId($type = 'Frontend', $html = '', $id = 'frontend')
 +
    {
 +
        return $this->_parent->getName() . '-' . $id;
 +
    }
 +
     
 +
        /**
 +
    * Get the JavaScript command for the button
 +
    *
 +
    * @param  string  $name  The task name as seen by the user
 +
    * @param  string  $task  The task used by the application
 +
    * @param  boolean  $list  True is requires a list confirmation.
 +
    *
 +
    * @return  string  JavaScript command string
 +
    *
 +
    * @since  3.0
 +
    */
 +
    protected function _getCommand($name, $task, $list)
 +
    {
 +
        JHtml::_('behavior.framework');
 +
        $message = JText::_('JLIB_HTML_PLEASE_MAKE_A_SELECTION_FROM_THE_LIST');
 +
        $message = addslashes($message);
 +
 
 +
        if ($list)
 +
        {
 +
            $cmd = "if (document.adminForm.boxchecked.value==0){alert('$message');}else{ Joomla.submitbutton('$task')}";
 +
        }
 +
        else
 +
        {
 +
            $cmd = "Joomla.submitbutton('$task')";
 +
        }
 +
 
 +
        return $cmd;
 +
 
 +
    }
 +
}
 
</source>
 
</source>
  
Line 82: Line 133:
 
</source>
 
</source>
  
As you can see, I made a directory called 'buttons'  in my /site directory. If you do so, don't forget to add it to your package xml file! (yourcom.xml).
+
Be sure to add the new "buttons" directory to your package xml file! (yourcom.xml)
  
You can now use the 'Frontend' button:
+
You can now use the 'Frontend' buttons in the getToolbar methods in your view.html.php files:
 
<source lang="php">
 
<source lang="php">
$this->bar->appendButton( 'Frontend', 'name', 'label', 'subcontroller.method', false );
+
                //load the JToolBar library and create a toolbar
 +
                jimport('cms.html.toolbar');
 +
                $this->bar = new JToolBar( 'toolbar' );
 +
                //and make whatever calls you require
 +
                $this->bar->appendButton( 'Frontend', 'save', 'Save', 'yourcom.save', false );
 +
                $this->bar->appendButton( 'Separator' );
 +
                $this->bar->appendButton( 'Frontend', 'cancel', 'Cancel', 'yourcom.cancel', false );
 +
                //generate the html and return
 +
                return $this->bar->render();
 
</source>
 
</source>
  
 
[[Category:Development]]
 
[[Category:Development]]

Revision as of 13:50, 10 December 2013

Copyedit.png
This Page Needs Your Help

This page is tagged because it NEEDS REVIEW. You can help the Joomla! Documentation Wiki by contributing to it.
More pages that need help similar to this one are here. NOTE-If you feel the need is satistified, please remove this notice.

Contents

Using JToolBar

It's now simpler to use JToolBar in the front end than it was in Joomla! 1.5 as it only requires two steps.

NOTE: This documentation was not previously updated for Joomla! 3.2. I have made some updates to bring it closer to what is needed for Joomla! 3 but admittedly, I still don't have this functionality working. Additional corrections and contributions would be appreciated. Erik Jorgensen 12/10/2013.

Step 1

Using the MVC architecture, add a function definition to view.html.php file in the view you wish to add the toolbar to.

        function getToolbar() {
                // add required stylesheets from admin template
                $document = JFactory::getDocument();
                $document->addStyleSheet('administrator/templates/isis/css/template.css');
                //now we add the necessary stylesheets from the administrator template
                //in this case i make reference to the isis default administrator template in joomla 3.2
                $document->addCustomTag( '<link href="administrator/templates/isis/css/template.css" rel="stylesheet" type="text/css" />'."\n\n" );
                //load the JToolBar library and create a toolbar
                jimport('cms.html.toolbar');
                $bar =& new JToolBar( 'toolbar' );
                //and make whatever calls you require
                $bar->appendButton( 'Standard', 'save', 'Save', 'yourcom.save', false );
                $bar->appendButton( 'Separator' );
                $bar->appendButton( 'Standard', 'cancel', 'Cancel', 'yourcom.cancel', false );
                //generate the html and return
                return $bar->render();
        }

Step 2

Now in the corresponding tmpl file, you simply need to add code like the following (added here to a default.php file in the tmpl folder of the view to which the code above was added to the view.html.php file. Note I say "like" the following, changes may be required. I'm including the <form> declaration html (the toolbar MUST be in a form with the id of "adminForm" in order for it to work.

<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>

You'll note the [div class="clr"] which you may or may not need depending on your own design requirements. If you don't add the div tag, slapping this code into an existing component front end will place the buttons to the right and level with the content on the left. Also, and as explained above, you'll need to add functions within the controller that is called when one of the toolbar buttons is pressed, to process the request gracefully.

Using JToolBar with Search Engine Friendly enabled (SEF)

When using the toolbar on the frontend,the standard buttons will sometimes bug out. This is usually because Search Engine Friendly urls is defined.

What happens is that instead of going to index.php?option=com_yourcom&view=&...#, it will go to index.php/friendlyurl# . This bugs out many users.

Using these two together can be done,however. There's two tricks to it. First, create a buttons folder under your main component folder and create frontend.php file with a class called JToolbarButtonFrontend which extends JToolbarButton. Include a jimport('cms.html.toolbar') statement to include the standard button classes.

This file will need the following code to create the search engine friendly front end buttons.

defined('_JEXEC') or die('Restricted access');
 
// import Joomla view library
jimport('cms.html.toolbar');
 
/**
 * Search Engine Friendly Frontend Buttons
 */
class JToolbarButtonFrontend extends JToolbarButton {
 
        public function fetchButton($type = 'Frontend', $name = '', $text = '', $task = '', $list = true)
        {
                $i18n_text = JText::_($text);
                $class = $this->fetchIconClass($name);
                $doTask = $this->_getCommand($text, $task, $list);
 
                $html = "<button onclick=\"$doTask\" class=\"btn btn-small\">\n";
                $html .= "<span class=\"$class\">\n";
                $html .= "</span>\n";
                $html .= "$i18n_text\n";
                $html .= "</button>\n";
 
                return $html;
        }
 
        /**
     * Get the button CSS Id
     *
     * @param   string  $type  Not used.
     * @param   string  $html  Not used.
     * @param   string  $id    The id prefix for the button.
     *
     * @return  string  Button CSS Id
     *
     * @since   3.0
     */
    public function fetchId($type = 'Frontend', $html = '', $id = 'frontend')
    {
        return $this->_parent->getName() . '-' . $id;
    }
 
        /**
     * Get the JavaScript command for the button
     *
     * @param   string   $name  The task name as seen by the user
     * @param   string   $task  The task used by the application
     * @param   boolean  $list  True is requires a list confirmation.
     *
     * @return  string   JavaScript command string
     *
     * @since   3.0
     */
    protected function _getCommand($name, $task, $list)
    {
        JHtml::_('behavior.framework');
        $message = JText::_('JLIB_HTML_PLEASE_MAKE_A_SELECTION_FROM_THE_LIST');
        $message = addslashes($message);
 
        if ($list)
        {
            $cmd = "if (document.adminForm.boxchecked.value==0){alert('$message');}else{ Joomla.submitbutton('$task')}";
        }
        else
        {
            $cmd = "Joomla.submitbutton('$task')";
        }
 
        return $cmd;
 
    }
}

Then, in your mainfile (site/yourcom.php), use this:

JLoader::register('JButtonFrontend', dirname(__FILE__) . '/buttons/frontend.php');

Be sure to add the new "buttons" directory to your package xml file! (yourcom.xml)

You can now use the 'Frontend' buttons in the getToolbar methods in your view.html.php files:

                //load the JToolBar library and create a toolbar
                jimport('cms.html.toolbar');
                $this->bar = new JToolBar( 'toolbar' );
                //and make whatever calls you require
                $this->bar->appendButton( 'Frontend', 'save', 'Save', 'yourcom.save', false );
                $this->bar->appendButton( 'Separator' );
                $this->bar->appendButton( 'Frontend', 'cancel', 'Cancel', 'yourcom.cancel', false );
                //generate the html and return
                return $this->bar->render();