Joomla! Documentation - User contributions [en]

J1.5 talk:Using the JToolBar class in the frontend

2012-08-23T15:17:03Z

Daimonie: /* Complete the toolbar look and feel */

== javascript ==

Hi,

This is a great article :) However I had a small problem due to my lack of experience... I propose a small change in the javascript part:
Instead of
'''<script type="text/javascript" src="includes/js/joomla.javascript.js"></script>''',
shouldn't it be:
'''<script language="javascript" type="text/javascript" src="includes/js/joomla.javascript.js"></script>'''
?

Since I am quite new to web development (including html and php) it took me some time to understand that the reason behind my buttons inactivity was the language attribute... I do not know if this is a general feature or if it depends on the developer's configurations... either way, probably this should be mentioned on the article.

--[[User:Sbrandao|Sbrandao]] 13:20, 2 March 2009 (UTC)

No,that's merely a HTML standard. See here: http://www.w3.org/TR/html4/interact/scripts.html#h-18.2.1 Language is, in fact, deprecated.

I am unsure as to why you found it to be like that; however, it might be related to your browser and testing setup.
[[User:Daimonie|Daimonie]] 10:16, 23 August 2012 (CDT)

== Complete the toolbar look and feel ==

Thanks to the original contributor; very nice piece explaining how we can add the menu to the front end. I would like to add the following to give a more complete picture.

'''Changes to CSS'''
Copy the contents from the following CSS into the new CSS you are creating for your component.

From directory /joomla/administrator/templates/khepri/css
# rounded.css or norounded.css as needed (you can copy both if you could be using either of them)
# general.css
# you can ignore the additions for ''table.toolbar a'' and ''table.toolbar a:hover'' they are already in general.css. However, you need to have the code for icons

The code copied from general.css has the styles for ''div.header''. By default the color is #0B55C4, change this to your color of choice

'''Changes to com_yourcomponent.php'''

<source lang="php">
echo "<div id=\"toolbar-box\">\n";
echo "<div class=\"t\">\n";
echo "<div class=\"t\">\n";
echo "<div class=\"t\"></div>\n";
echo "</div></div>\n";
echo "<div class=\"m\">\n";
echo yourcomponentHelperToolbar::getToolbar( );
echo "<div class=\"header\">menu header</div>\n";
echo "<div class=\"clr\"></div>\n";
echo "</div>\n";
echo "<div class=\"b\">\n";
echo "<div class=\"b\">\n";
echo "<div class=\"b\"></div>\n";
echo "</div>\n";
echo "</div>\n";
echo "</div>\n";
</source>

This will make sure that the look and feel is exactly like the backend.

Enjoy the toolbar!!!
== New notworking ==
'''"New" is a reserved word ergo you can't have a function called "new" you will get a syntax error that wont go away. So you need to change the name of the "task" "new" to something like "mynew" and then the function to "mynew" also.'''

Hey, something is not working with the function name new():

function new()
{
JRequest::setVar('view' , 'new');
parent::display();
}

Parse error: syntax error, unexpected T_NEW, expecting T_STRING in D:\htdocs\cattleinfo\components\com_breed\controller.php on line 7

so..we need to change the function name first, or yu guys have other option to solve this problem.

Its quite confussing where to insert the following form, is it inside default.php

<form action = "index.php" method = "post" id = "adminForm" name = "adminForm" />

<input type = "hidden" name = "task" value = "" />
<input type = "hidden" name = "option" value = "com_yourcom" />
</form>

thukten dendup

== Problem with toolbar and SEO ==

Hi

I was very happy when I saw the chapter on using JToolBar in 1.6 – everything looked so easy! But, although the description is very good and nothing is missing, I needed a long time until it worked as expected in my tests.

My problem was: In my installation, I had SEO (Search Engine Friendly URLs) set to „Yes“ – and this somehow mixed up the parameters sent by the edit form (but not in the list form - these buttons worked): option, task and all the other parameters somehow got lost and were never seen by a controller, so „save“ and „cancel“ never worked correctly. After changing this setting, almost everything worked on first try.

The one exception ist the toolbar title: it is never displayed in the front end. Is this the same for everybody or just another problem with my site only?

Many thanks for this article – having all the toolbar functionality easily available in the frontend helps me a lot.

--[[User:Rolfz|Rolfz]] 13:56, 21 August 2011 (CDT)
'''Added a section on this. The fix is to define your own 'standard' button with a changed HTML function.
--[[User:Daimonie|Daimonie]] 18:07, 8 Octobre 2012 (GMT+1)

== Javascript and Forms ==

You can add the form in the default.php since Joomla builds the view and appends the toolbars from the controller onto one page. When a button on the toolbar is clicked, it submits the form via javascript. To verify view your HTML source. You should see the HTML rendering the toolbars javascript and the form definition on the same page.

The new keyword is reserved. I changed mine to add

--[[User:EduOngeso|EduOngeso]] 17:34, 28 September 2011 (CDT)

== id of adminForm is misleading ==

This documentation helped me show the toolbar on the front end, but when I tried to save the form it just didn't pass any data to the save function in the controller. The cancel button worked well. After days of frustration, the answer turned out to be really simple.

The following comment is very misleading:
"the toolbar MUST be in a form with the id of "adminForm" in order for it to work."

In fact, I found that the form that you need to submit needs to have id="adminForm", and the toolbar itself needs to have a different id (I called mine id="adminForm2"). Now my form actually saves the data, and doesn't just complain about mandatory fields which already have data in them. Hopefully this tip can save someone else hours of frustration.

J1.5 talk:Using the JToolBar class in the frontend

2012-08-23T15:16:14Z

Daimonie: /* javascript */

== javascript ==

Hi,

This is a great article :) However I had a small problem due to my lack of experience... I propose a small change in the javascript part:
Instead of
'''<script type="text/javascript" src="includes/js/joomla.javascript.js"></script>''',
shouldn't it be:
'''<script language="javascript" type="text/javascript" src="includes/js/joomla.javascript.js"></script>'''
?

Since I am quite new to web development (including html and php) it took me some time to understand that the reason behind my buttons inactivity was the language attribute... I do not know if this is a general feature or if it depends on the developer's configurations... either way, probably this should be mentioned on the article.

--[[User:Sbrandao|Sbrandao]] 13:20, 2 March 2009 (UTC)

No,that's merely a HTML standard. See here: http://www.w3.org/TR/html4/interact/scripts.html#h-18.2.1 Language is, in fact, deprecated.

I am unsure as to why you found it to be like that; however, it might be related to your browser and testing setup.
[[User:Daimonie|Daimonie]] 10:16, 23 August 2012 (CDT)

== Complete the toolbar look and feel ==

Thanks to the original contributor; very nice piece explaining how we can add the menu to the front end. I would like to add the following to give a more complete picture.

'''Changes to CSS'''
Copy the contents from the following CSS into the new CSS you are creating for your component.

From directory /joomla/administrator/templates/khepri/css
# rounded.css or norounded.css as needed (you can copy both if you could be using either of them)
# general.css
# you can ignore the additions for ''table.toolbar a'' and ''table.toolbar a:hover'' they are already in general.css. However, you need to have the code for icons

The code copied from general.css has the styles for ''div.header''. By default the color is #0B55C4, change this to your color of choice

'''Changes to com_yourcomponent.php'''

<source lang="php">
echo "<div id=\"toolbar-box\">\n";
echo "<div class=\"t\">\n";
echo "<div class=\"t\">\n";
echo "<div class=\"t\"></div>\n";
echo "</div></div>\n";
echo "<div class=\"m\">\n";
echo yourcomponentHelperToolbar::getToolbar( );
echo "<div class=\"header\">menu header</div>\n";
echo "<div class=\"clr\"></div>\n";
echo "</div>\n";
echo "<div class=\"b\">\n";
echo "<div class=\"b\">\n";
echo "<div class=\"b\"></div>\n";
echo "</div>\n";
echo "</div>\n";
echo "</div>\n";
</source>

This will make sure that the look and feel is exactly like the backend.

Enjoy the toolbar!!!

'''"New" is a reserved word ergo you can't have a function called "new" you will get a syntax error that wont go away. So you need to change the name of the "task" "new" to something like "mynew" and then the function to "mynew" also.'''

Hey, something is not working with the function name new():

function new()
{
JRequest::setVar('view' , 'new');
parent::display();
}

Parse error: syntax error, unexpected T_NEW, expecting T_STRING in D:\htdocs\cattleinfo\components\com_breed\controller.php on line 7

so..we need to change the function name first, or yu guys have other option to solve this problem.

Its quite confussing where to insert the following form, is it inside default.php

<form action = "index.php" method = "post" id = "adminForm" name = "adminForm" />

<input type = "hidden" name = "task" value = "" />
<input type = "hidden" name = "option" value = "com_yourcom" />
</form>

thukten dendup

== Problem with toolbar and SEO ==

Hi

I was very happy when I saw the chapter on using JToolBar in 1.6 – everything looked so easy! But, although the description is very good and nothing is missing, I needed a long time until it worked as expected in my tests.

My problem was: In my installation, I had SEO (Search Engine Friendly URLs) set to „Yes“ – and this somehow mixed up the parameters sent by the edit form (but not in the list form - these buttons worked): option, task and all the other parameters somehow got lost and were never seen by a controller, so „save“ and „cancel“ never worked correctly. After changing this setting, almost everything worked on first try.

The one exception ist the toolbar title: it is never displayed in the front end. Is this the same for everybody or just another problem with my site only?

Many thanks for this article – having all the toolbar functionality easily available in the frontend helps me a lot.

--[[User:Rolfz|Rolfz]] 13:56, 21 August 2011 (CDT)
'''Added a section on this. The fix is to define your own 'standard' button with a changed HTML function.
--[[User:Daimonie|Daimonie]] 18:07, 8 Octobre 2012 (GMT+1)

== Javascript and Forms ==

You can add the form in the default.php since Joomla builds the view and appends the toolbars from the controller onto one page. When a button on the toolbar is clicked, it submits the form via javascript. To verify view your HTML source. You should see the HTML rendering the toolbars javascript and the form definition on the same page.

The new keyword is reserved. I changed mine to add

--[[User:EduOngeso|EduOngeso]] 17:34, 28 September 2011 (CDT)

== id of adminForm is misleading ==

This documentation helped me show the toolbar on the front end, but when I tried to save the form it just didn't pass any data to the save function in the controller. The cancel button worked well. After days of frustration, the answer turned out to be really simple.

The following comment is very misleading:
"the toolbar MUST be in a form with the id of "adminForm" in order for it to work."

In fact, I found that the form that you need to submit needs to have id="adminForm", and the toolbar itself needs to have a different id (I called mine id="adminForm2"). Now my form actually saves the data, and doesn't just complain about mandatory fields which already have data in them. Hopefully this tip can save someone else hours of frustration.

J1.5 talk:Using the JToolBar class in the frontend

2012-08-10T16:08:02Z

Daimonie: /* Problem with toolbar and SEO */

== javascript ==

Hi,

This is a great article :) However I had a small problem due to my lack of experience... I propose a small change in the javascript part:
Instead of
'''<script type="text/javascript" src="includes/js/joomla.javascript.js"></script>''',
shouldn't it be:
'''<script language="javascript" type="text/javascript" src="includes/js/joomla.javascript.js"></script>'''
?

Since I am quite new to web development (including html and php) it took me some time to understand that the reason behind my buttons inactivity was the language attribute... I do not know if this is a general feature or if it depends on the developer's configurations... either way, probably this should be mentioned on the article.

--[[User:Sbrandao|Sbrandao]] 13:20, 2 March 2009 (UTC)

== Complete the toolbar look and feel ==

Thanks to the original contributor; very nice piece explaining how we can add the menu to the front end. I would like to add the following to give a more complete picture.

'''Changes to CSS'''
Copy the contents from the following CSS into the new CSS you are creating for your component.

From directory /joomla/administrator/templates/khepri/css
# rounded.css or norounded.css as needed (you can copy both if you could be using either of them)
# general.css
# you can ignore the additions for ''table.toolbar a'' and ''table.toolbar a:hover'' they are already in general.css. However, you need to have the code for icons

The code copied from general.css has the styles for ''div.header''. By default the color is #0B55C4, change this to your color of choice

'''Changes to com_yourcomponent.php'''

<source lang="php">
echo "<div id=\"toolbar-box\">\n";
echo "<div class=\"t\">\n";
echo "<div class=\"t\">\n";
echo "<div class=\"t\"></div>\n";
echo "</div></div>\n";
echo "<div class=\"m\">\n";
echo yourcomponentHelperToolbar::getToolbar( );
echo "<div class=\"header\">menu header</div>\n";
echo "<div class=\"clr\"></div>\n";
echo "</div>\n";
echo "<div class=\"b\">\n";
echo "<div class=\"b\">\n";
echo "<div class=\"b\"></div>\n";
echo "</div>\n";
echo "</div>\n";
echo "</div>\n";
</source>

This will make sure that the look and feel is exactly like the backend.

Enjoy the toolbar!!!

'''"New" is a reserved word ergo you can't have a function called "new" you will get a syntax error that wont go away. So you need to change the name of the "task" "new" to something like "mynew" and then the function to "mynew" also.'''

Hey, something is not working with the function name new():

function new()
{
JRequest::setVar('view' , 'new');
parent::display();
}

Parse error: syntax error, unexpected T_NEW, expecting T_STRING in D:\htdocs\cattleinfo\components\com_breed\controller.php on line 7

so..we need to change the function name first, or yu guys have other option to solve this problem.

Its quite confussing where to insert the following form, is it inside default.php

<form action = "index.php" method = "post" id = "adminForm" name = "adminForm" />

<input type = "hidden" name = "task" value = "" />
<input type = "hidden" name = "option" value = "com_yourcom" />
</form>

thukten dendup

== Problem with toolbar and SEO ==

Hi

I was very happy when I saw the chapter on using JToolBar in 1.6 – everything looked so easy! But, although the description is very good and nothing is missing, I needed a long time until it worked as expected in my tests.

My problem was: In my installation, I had SEO (Search Engine Friendly URLs) set to „Yes“ – and this somehow mixed up the parameters sent by the edit form (but not in the list form - these buttons worked): option, task and all the other parameters somehow got lost and were never seen by a controller, so „save“ and „cancel“ never worked correctly. After changing this setting, almost everything worked on first try.

The one exception ist the toolbar title: it is never displayed in the front end. Is this the same for everybody or just another problem with my site only?

Many thanks for this article – having all the toolbar functionality easily available in the frontend helps me a lot.

--[[User:Rolfz|Rolfz]] 13:56, 21 August 2011 (CDT)
'''Added a section on this. The fix is to define your own 'standard' button with a changed HTML function.
--[[User:Daimonie|Daimonie]] 18:07, 8 Octobre 2012 (GMT+1)

== Javascript and Forms ==

You can add the form in the default.php since Joomla builds the view and appends the toolbars from the controller onto one page. When a button on the toolbar is clicked, it submits the form via javascript. To verify view your HTML source. You should see the HTML rendering the toolbars javascript and the form definition on the same page.

The new keyword is reserved. I changed mine to add

--[[User:EduOngeso|EduOngeso]] 17:34, 28 September 2011 (CDT)

== id of adminForm is misleading ==

This documentation helped me show the toolbar on the front end, but when I tried to save the form it just didn't pass any data to the save function in the controller. The cancel button worked well. After days of frustration, the answer turned out to be really simple.

The following comment is very misleading:
"the toolbar MUST be in a form with the id of "adminForm" in order for it to work."

In fact, I found that the form that you need to submit needs to have id="adminForm", and the toolbar itself needs to have a different id (I called mine id="adminForm2"). Now my form actually saves the data, and doesn't just complain about mandatory fields which already have data in them. Hopefully this tip can save someone else hours of frustration.

J1.5:Using the JToolBar class in the frontend

2012-08-10T16:06:47Z

Daimonie: /* Using JToolBar in 1.6 and newer with Search Engine Friendly enabled (SEF) */

== Using JToolBar in 1.6 and newer 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 in 1.6 and newer==
{{JVer|1.6}}{{JVer|1.7}}

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.

== Using JToolBar in 1.5 ==
{{JVer|1.5}}

Anyone whom has used the very useful JToolbarHelper class in an administration component has probably already realised that there is nothing quite so useful for the frontend. The good news is that we can create our own very simply using the JToolbar class.

First lets create the helper class. I tend to make a different helper class for each component as they will each have a different toolbar. I like to keep all my helpers in the administration end as they can often be used for both sides of the component. So firstly create a helpers directory in your component.

/administrator/components/com_yourcom/helpers

and create a file called toolbar.php

The following is an example of a very simple toolbar helper class. Copy and paste this into your toolbar.php file. Don't forget to change 'yourcom' to the name of your component. Notice also that we've included the Jtoolbar class at the top of the file.
<source lang="php">
// no direct access
defined('_JEXEC') or die('Restricted access');
jimport('joomla.html.toolbar');

class YourcomHelperToolbar extends JObject
{
function getToolbar() {

$bar =& new JToolBar( 'My Toolbar' );
$bar->appendButton( 'Standard', 'new', 'New Record', 'new', false );
$bar->appendButton( 'Separator' );
$bar->appendButton( 'Standard', 'delete', 'Delete Record', 'delete', false );

return $bar->render();

}

}

</source>
Lets look at this code. When the 'getToolbar' function is called it creates a new instance of the JToolbar class.
<source lang="php">
$bar =& new JToolBar( 'Associations Toolbar' );

</source>
We can then add buttons to this object.
<source lang="php">
$bar->appendButton( 'Standard', 'new', 'New Record', 'new', false );

</source>
The first parameter is the button type. have a look a the JToolbar or JButton docs for a full list of these.

The second parameter is the class to apply to the button ( this will help us to apply an image to it as in the backend )

The third parameter is the text to display on the button.

The fourth is the task to set. When the button is pressed the javascript submitButton function is called and the hidden field 'task' is set to this value. We will see this later in our template file.

The fifth states whether a selection must be made from an admin list before continuing.

we then simply return our bar object.

We now have a choice of where to render this bar object. You can create it in a view and apply it to a template if you wish. I personally prefer to render it in the entry point file. In this example this would be yourcom.php and would look something like this. Notice that we have also included our helper file here.
<source lang="php">
// no direct access
defined('_JEXEC') or die('Restricted access');

// Require the base controller
require_once (JPATH_COMPONENT.DS.'controller.php');

// Require specific controller if requested
if($controller = JRequest::getVar('controller')) {
require_once (JPATH_COMPONENT.DS.'controllers'.DS.$controller.'.php');
}

// Component Helper
jimport('joomla.application.component.helper');

// Load the toolbar helper
require_once( JPATH_COMPONENT_ADMINISTRATOR.DS.'helpers'.DS.'toolbar.php' );

// render the toolbar on the page. rendering it here means that it is displayed on every view of your component.
echo YourcomHelperToolbar::getToolbar();

// Create the controller
$classname = 'YourcomController'.$controller;
$controller = new $classname( );

// Perform the Request task
$controller->execute( JRequest::getVar('task'));

// Redirect if set by the controller
$controller->redirect();

</source>

Having created this the toolbar you created should render on the page but there are a few more things we need to do to make it work. We need to ensure that every view template page has an admin form for the submitButton function to work.
<source lang="php">
<form action = "index.php" method = "post" id = "adminForm" name = "adminForm" />

<input type = "hidden" name = "task" value = "" />
<input type = "hidden" name = "option" value = "com_yourcom" />
</form>

</source>
Now when one of the buttons is clicked the submitbutton function will set the hidden field 'task' to the task identifier you specified in the toolbar class.
<source lang="php">
$bar->appendButton( 'Standard', 'delete', 'Delete Record', 'new', false );

</source>
In the above button the task would be 'new' ( the fourth parameter );

If this task is going to be run we had better make sure that it's available in our controller. Open up your controller.php and add the following.
<source lang="php">
function new()
{
JRequest::setVar('view' , 'new');

parent::display();
}

</source>
This will display your 'new' view assuming you've already created one. You could put any code in here you like.

There we go that should create a nice easy to use toolbar class. There is one last thing though. You may have noticed that the icons are not displaying as they do in the backend. To make this work we have to 'steal' some images and some CSS from the backend.

open up the folder

administrator/templates/khepri/images

and copy the directory 'toolbar' directory to your frontend templates/rhuk_milkyway/images folder

It should now look like this

templates/rhuk_milkyway/images/toolbar

and be filled with png images

Now you could hunt around through the backend css to find the correct code to display the buttons but I've saved you the trouble. In your templates/css folder create a file called icon.css and paste in the following code.
<source lang="php">
/* toolbar */
div.toolbar { float: right; text-align: right; padding: 0; }

table.toolbar { border-collapse: collapse; padding: 0; margin: 0; }
table.toolbar td { padding: 1px 1px 1px 4px; text-align: center; color: #666; height: 48px; }
table.toolbar td.spacer { width: 10px; }
table.toolbar td.divider { border-right: 1px solid #eee; width: 5px; }

table.toolbar span { float: none; width: 32px; height: 32px; margin: 0 auto; display: block; }

table.toolbar a {
display: block; float: left;
white-space: nowrap;
border: 1px solid #fbfbfb;
padding: 1px 5px;
cursor: pointer;
}

table.toolbar a:hover {
border-left: 1px solid #eee;
border-top: 1px solid #eee;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
text-decoration: none;
color: #0B55C4;
}

/** toolbar icons **/
.icon-32-send { background-image: url(../images/toolbar/icon-32-send.png); }
.icon-32-delete { background-image: url(../images/toolbar/icon-32-delete.png); }
.icon-32-help { background-image: url(../images/toolbar/icon-32-help.png); }
.icon-32-cancel { background-image: url(../images/toolbar/icon-32-cancel.png); }
.icon-32-config { background-image: url(../images/toolbar/icon-32-config.png); }
.icon-32-apply { background-image: url(../images/toolbar/icon-32-apply.png); }
.icon-32-back { background-image: url(../images/toolbar/icon-32-back.png); }
.icon-32-forward { background-image: url(../images/toolbar/icon-32-forward.png); }
.icon-32-save { background-image: url(../images/toolbar/icon-32-save.png); }
.icon-32-edit { background-image: url(../images/toolbar/icon-32-edit.png); }
.icon-32-copy { background-image: url(../images/toolbar/icon-32-copy.png); }
.icon-32-move { background-image: url(../images/toolbar/icon-32-move.png); }
.icon-32-new { background-image: url(../images/toolbar/icon-32-new.png); }
.icon-32-upload { background-image: url(../images/toolbar/icon-32-upload.png); }
.icon-32-assign { background-image: url(../images/toolbar/icon-32-publish.png); }
.icon-32-html { background-image: url(../images/toolbar/icon-32-html.png); }
.icon-32-css { background-image: url(../images/toolbar/icon-32-css.png); }
.icon-32-menus { background-image: url(../images/toolbar/icon-32-menu.png); }
.icon-32-publish { background-image: url(../images/toolbar/icon-32-publish.png); }
.icon-32-unpublish { background-image: url(../images/toolbar/icon-32-unpublish.png);}
.icon-32-restore { background-image: url(../images/toolbar/icon-32-revert.png); }
.icon-32-trash { background-image: url(../images/toolbar/icon-32-trash.png); }
.icon-32-archive { background-image: url(../images/toolbar/icon-32-archive.png); }
.icon-32-unarchive { background-image: url(../images/toolbar/icon-32-unarchive.png); }
.icon-32-preview { background-image: url(../images/toolbar/icon-32-preview.png); }
.icon-32-default { background-image: url(../images/toolbar/icon-32-default.png); }

</source>
We now have to include this css in to your template so add the following line to the top of your template index.php
<source lang="php">
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/rhuk_milkyway/css/icon.css" type="text/css" />

</source>
(if you are using the toolbar on a component that other people will be installing it would be better to use:
<source lang="php">
$mainframe->addCustomHeadTag ('<link rel="stylesheet" href="'.$this->baseurl.'/components/com_**yourcomponent**/filename.css" type="text/css" media="screen" />');

</source>
And finally - you will require the javascript file used in the backend to enable the buttons to work ;-)
<source lang="php">
$mainframe->addCustomHeadTag ('<script type="text/javascript" src="/includes/js/joomla.javascript.js"></script>');

</source>
And that's it. your toolbar should now render exactly as it does in the backend. This is a very simple toolbar helper. You could equally copy the JToolbarHelper class exactly in to your toolbar helper and use the functions in the same way as the backend. This would allow you to reuse your jtoolbar helper in multiple components.

To use JToolbarHelper Class in frontend section of your component, add this code to your component's entry point ( components/com_yourcom/yourcom.php )

<source lang="php">
require_once(JPATH_ADMINISTRATOR.DS.'includes'.DS.'toolbar.php');
$doc =& JFactory::getDocument();
$doc->addScript("includes/js/joomla.javascript.js");
</source>

<noinclude>[[Category:Development]]</noinclude>

J1.5:Using the JToolBar class in the frontend

2012-08-10T16:00:58Z

Daimonie:

== Using JToolBar in 1.6 and newer with Search Engine Friendly enabled (SEF)==

== Using JToolBar in 1.6 and newer==
{{JVer|1.6}}{{JVer|1.7}}

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.

== Using JToolBar in 1.5 ==
{{JVer|1.5}}

Anyone whom has used the very useful JToolbarHelper class in an administration component has probably already realised that there is nothing quite so useful for the frontend. The good news is that we can create our own very simply using the JToolbar class.

First lets create the helper class. I tend to make a different helper class for each component as they will each have a different toolbar. I like to keep all my helpers in the administration end as they can often be used for both sides of the component. So firstly create a helpers directory in your component.

/administrator/components/com_yourcom/helpers

and create a file called toolbar.php

The following is an example of a very simple toolbar helper class. Copy and paste this into your toolbar.php file. Don't forget to change 'yourcom' to the name of your component. Notice also that we've included the Jtoolbar class at the top of the file.
<source lang="php">
// no direct access
defined('_JEXEC') or die('Restricted access');
jimport('joomla.html.toolbar');

class YourcomHelperToolbar extends JObject
{
function getToolbar() {

$bar =& new JToolBar( 'My Toolbar' );
$bar->appendButton( 'Standard', 'new', 'New Record', 'new', false );
$bar->appendButton( 'Separator' );
$bar->appendButton( 'Standard', 'delete', 'Delete Record', 'delete', false );

return $bar->render();

}

}

</source>
Lets look at this code. When the 'getToolbar' function is called it creates a new instance of the JToolbar class.
<source lang="php">
$bar =& new JToolBar( 'Associations Toolbar' );

</source>
We can then add buttons to this object.
<source lang="php">
$bar->appendButton( 'Standard', 'new', 'New Record', 'new', false );

</source>
The first parameter is the button type. have a look a the JToolbar or JButton docs for a full list of these.

The second parameter is the class to apply to the button ( this will help us to apply an image to it as in the backend )

The third parameter is the text to display on the button.

The fourth is the task to set. When the button is pressed the javascript submitButton function is called and the hidden field 'task' is set to this value. We will see this later in our template file.

The fifth states whether a selection must be made from an admin list before continuing.

we then simply return our bar object.

We now have a choice of where to render this bar object. You can create it in a view and apply it to a template if you wish. I personally prefer to render it in the entry point file. In this example this would be yourcom.php and would look something like this. Notice that we have also included our helper file here.
<source lang="php">
// no direct access
defined('_JEXEC') or die('Restricted access');

// Require the base controller
require_once (JPATH_COMPONENT.DS.'controller.php');

// Require specific controller if requested
if($controller = JRequest::getVar('controller')) {
require_once (JPATH_COMPONENT.DS.'controllers'.DS.$controller.'.php');
}

// Component Helper
jimport('joomla.application.component.helper');

// Load the toolbar helper
require_once( JPATH_COMPONENT_ADMINISTRATOR.DS.'helpers'.DS.'toolbar.php' );

// render the toolbar on the page. rendering it here means that it is displayed on every view of your component.
echo YourcomHelperToolbar::getToolbar();

// Create the controller
$classname = 'YourcomController'.$controller;
$controller = new $classname( );

// Perform the Request task
$controller->execute( JRequest::getVar('task'));

// Redirect if set by the controller
$controller->redirect();

</source>

Having created this the toolbar you created should render on the page but there are a few more things we need to do to make it work. We need to ensure that every view template page has an admin form for the submitButton function to work.
<source lang="php">
<form action = "index.php" method = "post" id = "adminForm" name = "adminForm" />

<input type = "hidden" name = "task" value = "" />
<input type = "hidden" name = "option" value = "com_yourcom" />
</form>

</source>
Now when one of the buttons is clicked the submitbutton function will set the hidden field 'task' to the task identifier you specified in the toolbar class.
<source lang="php">
$bar->appendButton( 'Standard', 'delete', 'Delete Record', 'new', false );

</source>
In the above button the task would be 'new' ( the fourth parameter );

If this task is going to be run we had better make sure that it's available in our controller. Open up your controller.php and add the following.
<source lang="php">
function new()
{
JRequest::setVar('view' , 'new');

parent::display();
}

</source>
This will display your 'new' view assuming you've already created one. You could put any code in here you like.

There we go that should create a nice easy to use toolbar class. There is one last thing though. You may have noticed that the icons are not displaying as they do in the backend. To make this work we have to 'steal' some images and some CSS from the backend.

open up the folder

administrator/templates/khepri/images

and copy the directory 'toolbar' directory to your frontend templates/rhuk_milkyway/images folder

It should now look like this

templates/rhuk_milkyway/images/toolbar

and be filled with png images

Now you could hunt around through the backend css to find the correct code to display the buttons but I've saved you the trouble. In your templates/css folder create a file called icon.css and paste in the following code.
<source lang="php">
/* toolbar */
div.toolbar { float: right; text-align: right; padding: 0; }

table.toolbar { border-collapse: collapse; padding: 0; margin: 0; }
table.toolbar td { padding: 1px 1px 1px 4px; text-align: center; color: #666; height: 48px; }
table.toolbar td.spacer { width: 10px; }
table.toolbar td.divider { border-right: 1px solid #eee; width: 5px; }

table.toolbar span { float: none; width: 32px; height: 32px; margin: 0 auto; display: block; }

table.toolbar a {
display: block; float: left;
white-space: nowrap;
border: 1px solid #fbfbfb;
padding: 1px 5px;
cursor: pointer;
}

table.toolbar a:hover {
border-left: 1px solid #eee;
border-top: 1px solid #eee;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
text-decoration: none;
color: #0B55C4;
}

/** toolbar icons **/
.icon-32-send { background-image: url(../images/toolbar/icon-32-send.png); }
.icon-32-delete { background-image: url(../images/toolbar/icon-32-delete.png); }
.icon-32-help { background-image: url(../images/toolbar/icon-32-help.png); }
.icon-32-cancel { background-image: url(../images/toolbar/icon-32-cancel.png); }
.icon-32-config { background-image: url(../images/toolbar/icon-32-config.png); }
.icon-32-apply { background-image: url(../images/toolbar/icon-32-apply.png); }
.icon-32-back { background-image: url(../images/toolbar/icon-32-back.png); }
.icon-32-forward { background-image: url(../images/toolbar/icon-32-forward.png); }
.icon-32-save { background-image: url(../images/toolbar/icon-32-save.png); }
.icon-32-edit { background-image: url(../images/toolbar/icon-32-edit.png); }
.icon-32-copy { background-image: url(../images/toolbar/icon-32-copy.png); }
.icon-32-move { background-image: url(../images/toolbar/icon-32-move.png); }
.icon-32-new { background-image: url(../images/toolbar/icon-32-new.png); }
.icon-32-upload { background-image: url(../images/toolbar/icon-32-upload.png); }
.icon-32-assign { background-image: url(../images/toolbar/icon-32-publish.png); }
.icon-32-html { background-image: url(../images/toolbar/icon-32-html.png); }
.icon-32-css { background-image: url(../images/toolbar/icon-32-css.png); }
.icon-32-menus { background-image: url(../images/toolbar/icon-32-menu.png); }
.icon-32-publish { background-image: url(../images/toolbar/icon-32-publish.png); }
.icon-32-unpublish { background-image: url(../images/toolbar/icon-32-unpublish.png);}
.icon-32-restore { background-image: url(../images/toolbar/icon-32-revert.png); }
.icon-32-trash { background-image: url(../images/toolbar/icon-32-trash.png); }
.icon-32-archive { background-image: url(../images/toolbar/icon-32-archive.png); }
.icon-32-unarchive { background-image: url(../images/toolbar/icon-32-unarchive.png); }
.icon-32-preview { background-image: url(../images/toolbar/icon-32-preview.png); }
.icon-32-default { background-image: url(../images/toolbar/icon-32-default.png); }

</source>
We now have to include this css in to your template so add the following line to the top of your template index.php
<source lang="php">
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/rhuk_milkyway/css/icon.css" type="text/css" />

</source>
(if you are using the toolbar on a component that other people will be installing it would be better to use:
<source lang="php">
$mainframe->addCustomHeadTag ('<link rel="stylesheet" href="'.$this->baseurl.'/components/com_**yourcomponent**/filename.css" type="text/css" media="screen" />');

</source>
And finally - you will require the javascript file used in the backend to enable the buttons to work ;-)
<source lang="php">
$mainframe->addCustomHeadTag ('<script type="text/javascript" src="/includes/js/joomla.javascript.js"></script>');

</source>
And that's it. your toolbar should now render exactly as it does in the backend. This is a very simple toolbar helper. You could equally copy the JToolbarHelper class exactly in to your toolbar helper and use the functions in the same way as the backend. This would allow you to reuse your jtoolbar helper in multiple components.

To use JToolbarHelper Class in frontend section of your component, add this code to your component's entry point ( components/com_yourcom/yourcom.php )

<source lang="php">
require_once(JPATH_ADMINISTRATOR.DS.'includes'.DS.'toolbar.php');
$doc =& JFactory::getDocument();
$doc->addScript("includes/js/joomla.javascript.js");
</source>

<noinclude>[[Category:Development]]</noinclude>

Archived talk:Developing a MVC Component/Basic backend

2012-08-08T13:13:39Z

Daimonie: /* How to access backend component & task icons not displaying */

Items to be adding/changed on this page:

Note that if using core J! javascript in a form, id="adminForm" must also be included.

Shouldn't references to $db->getDBO() be changed to $db->getDbo() ?

And what is this comment referring to? "The _populateState method is, by default, automatically called when a state is read by the getState method."

[[User:Radiant tech|Radiant tech]] 06:37, 1 September 2011 (CDT)

== Admin Forms in J2.5 ==

Aparently, for the JToolbar Icons to work properly in J2.5, the form elements need the id "adminForm" to be assigned to them. I changed this in ''admin/views/helloworlds/tmpl/default.php''. However, it also needs to be changed in the packages...

== JController::display ==
The function declaration has been changed from

public function display($cachable=false)

TO

public function display($cachable=false,$urlparams=false)

== How to access backend component & task icons not displaying ==

The tutorial is unclear on how to access the backend component. I believe it would be helpful to explain that the component can be accessed in 2 ways:

1) URL e.g.
http://localhost/joomla/administrator/index.php?option=com_helloworld

2) The "hello-world" menu item under "Components" of the Administration application

I believe it would also be helpful to note that this component only does 2 things:

a) lists the two options stored in the database: id 1 (Hello World!) and id2 (Good bye World!)

b) allows us to use checkboxes to select one or both options before selecting a task from the toolbar

But this model does not give us a toolbar (i.e. the toolbar is empty without icons) so that we can not do anything with the option item(s) we select. So I can "check" id 1 (Hello World!) and/or id2 (Good bye World!), but then cannot "Delete" them or "Edit" them since there are no task icons.

It was also not clear to me that the option items we create with this backend component are the options that will then be available in the "Required Settings" section when Editing a Menu Item. i.e. when I add a Menu Item and select "Menu Item Type": "COM_HELLOWORLD_HELLOWORLD_VIEW_DEFAULT_TITLE" (part 06 site component), the "Required Settings" drop-down box will contain the options that were created/edited with this backend component (well, at least that WILL be the case when we have a toolbar that gives us a "New" and "Delete" task icons which Part 09 shows us how to do)
SAbboushi 6/25/2012

== Populatestate ==
I'm not sure on how to add to the discussion.

The weird comment here about _populateState() seems to be the introduction to a paragraph about this method; from my understanding, what it will do is be able to select specific fields, limits, additional where clauses,etc (Say, I want this table to display things only from a specific category - that should be done with populate state, it seems).

Taken from com_content/site/models/articles.php if you were wondering,that's what i can read there.