Joomla! Documentation - Changes related to "Using the JToolBar class in the frontend" [en]

J3.1:Using the JToolBar class in the frontend

2013-05-18T17:57:55Z

new page for 3.1, need version checking

New page

{{page|needs review}}{{RightTOC}}
== 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.
{{clear}}
===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.
<source lang="php>
function getToolbar() {
// add required stylesheets from admin template
$document = & JFactory::getDocument();
$document->addStyleSheet('administrator/templates/system/css/system.css');
//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
$document->addCustomTag(
'<link href="administrator/templates/bluestork/css/template.css" rel="stylesheet" type="text/css" />'."\n\n".
''."\n".
''."\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' );
//and make whatever calls you require
$bar->appendButton( 'Standard', 'save', 'Save', 'savetask', false );
$bar->appendButton( 'Separator' );
$bar->appendButton( 'Standard', 'cancel', 'Cancel', 'canceltask', false );
//generate the html and return
return $bar->render();
}
</source>

===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.
<source lang="php">
<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>
</source>
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, 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.

Just copy over the content of joomla.html.toolbar.button standard.php; then, change the fetchbutton function
<source lang="php">
//Goes inside JButtonFrontend class definition.
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";
$html .= "<span class=\"$class\">\n";
$html .= "</span>\n";
$html .= "$i18n_text\n";
$html .= "</a>\n";

return $html;
}
</source>

Then, in your mainfile (site/yourcom.php), use this:
<source lang="php">
JLoader::register('JButtonFrontend', dirname(__FILE__) . DS . 'buttons' . DS . 'frontend.php');
</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).

You can now use the 'Frontend' button:
<source lang="php">
$this->bar->appendButton( 'Frontend', 'name', 'label', 'subcontroller.method', false );
</source>

[[Category:Development]]

J2.5:Using the JToolBar class in the frontend

2013-05-18T17:57:13Z

layout

J2.5:Using the JToolBar class in the frontend

2013-05-18T17:46:35Z

new article for 2.5

New page

== 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, 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.

Just copy over the content of joomla.html.toolbar.button standard.php; then, change the fetchbutton function
<source lang="php">
//Goes inside JButtonFrontend class definition.
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";
$html .= "<span class=\"$class\">\n";
$html .= "</span>\n";
$html .= "$i18n_text\n";
$html .= "</a>\n";

return $html;
}
</source>

Then, in your mainfile (site/yourcom.php), use this:
<source lang="php">
JLoader::register('JButtonFrontend', dirname(__FILE__) . DS . 'buttons' . DS . 'frontend.php');
</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).

You can now use the 'Frontend' button:
<source lang="php">
$this->bar->appendButton( 'Frontend', 'name', 'label', 'subcontroller.method', false );
</source>

== Using JToolBar ==
{{JVer/multi|2.5,3.x}}
It's even simpler to use JToolBar in the front end, as it only requires two steps.
First (Using the MVC architecture of 1.6), add a function definition to view.html.php file in the view you wish to add the toolbar to.
<source lang="php>
function getToolbar() {
// add required stylesheets from admin template
$document = & JFactory::getDocument();
$document->addStyleSheet('administrator/templates/system/css/system.css');
//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
$document->addCustomTag(
'<link href="administrator/templates/bluestork/css/template.css" rel="stylesheet" type="text/css" />'."\n\n".
''."\n".
''."\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' );
//and make whatever calls you require
$bar->appendButton( 'Standard', 'save', 'Save', 'savetask', false );
$bar->appendButton( 'Separator' );
$bar->appendButton( 'Standard', 'cancel', 'Cancel', 'canceltask', false );
//generate the html and return
return $bar->render();
}
</source>
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.
<source lang="php">
<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>
</source>
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.

@@ Line 1: / Line 1: @@
-== Using JToolBar with Search Engine Friendly enabled (SEF)==
+{{page|needs review}}{{RightTOC}}
-When using the toolbar on the frontend,the standard buttons will sometimes bug out. This is usually because Search Engine Friendly urls is defined.
+== Using JToolBar ==
-−
-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.
-−
-Just copy over the content of joomla.html.toolbar.button standard.php; then, change the fetchbutton function
-<source lang="php">
-//Goes inside JButtonFrontend class definition.
-	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";
-		$html .= "<span class=\"$class\">\n";
-		$html .= "</span>\n";
-		$html .= "$i18n_text\n";
-		$html .= "</a>\n";
-−
-		return $html;
-−
-</source>
-−
-Then, in your mainfile (site/yourcom.php), use this:
-<source lang="php">
-JLoader::register('JButtonFrontend', dirname(__FILE__) . DS . 'buttons' . DS . 'frontend.php');
-</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).
+It's now simpler to use JToolBar in the front end than it was in Joomla! 1.5 as it only requires two steps.
+{{clear}}
-You can now use the 'Frontend' button:
+===Step 1===
-<source lang="php">
+Using the MVC architecture, add a function definition to view.html.php file in the view you wish to add the toolbar to.
-$this->bar->appendButton( 'Frontend', 'name', 'label', 'subcontroller.method', false );
-</source>
-−
-== Using JToolBar ==
-{{JVer/multi|2.5,3.x}}
-It's even simpler to use JToolBar in the front end, as it only requires two steps.
-First (Using the MVC architecture of 1.6), add a function definition to view.html.php file in the view you wish to add the toolbar to.
 <source lang="php>
 	function getToolbar() {
@@ Line 69: / Line 34: @@
+	}
 </source>
 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.
@@ Line 81: / Line 49: @@
 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.