J1.5:How to create a custom button

Revision as of 12:42, 22 July 2008

This Namespace has been archived - Please Do Not Edit or Create Pages in this namespace. Pages contain information for a Joomla! version which is no longer supported. It exists only as a historical reference, will not be improved and its content may be incomplete.

This article is a small, well-defined item that could be completed by someone with a reasonable knowledge of the subject matter and a modest time commitment. If you would like to try writing this article you're welcome to do so. The subject may be self-evident, but if not then further details should be available on the discussion page. Please add {{inuse}} at the top of this page while editing. For other small, well-defined tasks, please look in the Cookie jar. ---Thank you. This article was last edited by Mole84 (talk| contribs) 4 years ago. (Purge)

The code below is used for adding buttons to the back-end toolbar when developing components and modules.

Explanation of JToolBarHelper button functionality

• When you add a JToolBarHelper function into an admin view it will display the icon and preform the corresponding function listed in the controller when pressed.
• You can modify the default function that is run by using the $this->registerTask('add', 'edit'); to redirect logic, in this example a call from the default button add is directed to the edit function.

Default Buttons Included with Joomla 1.5

JToolBarHelper::send();
JToolBarHelper::delete();
JToolBarHelper::help();
JToolBarHelper::cancel();
JToolBarHelper::config();
JToolBarHelper::apply();
JToolBarHelper::back();
JToolBarHelper::forward();
JToolBarHelper::save();
JToolBarHelper::edit();
JToolBarHelper::copy();
JToolBarHelper::move();
JToolBarHelper::new();
JToolBarHelper::upload();
JToolBarHelper::assign();
JToolBarHelper::html(); 
JToolBarHelper::css();
JToolBarHelper::menus();
JToolBarHelper::publish();
JToolBarHelper::unpublish ();
JToolBarHelper::restore();
JToolBarHelper::trash(); 
JToolBarHelper::archive(); 
JToolBarHelper::unarchive(); 
JToolBarHelper::preview(); 
JToolBarHelper::default();

• The icons associated with these functions are stored at:

www/administrator/templates/khepri/images

Custom button

• The syntax for a custom button that can be added into a view

JToolBarHelper::custom( 'task', 'icon', 'icon over', 'alt', boolean, boolean );

• The Default Admin Toolbar Icons are stored at:

www/administrator/templates/khepri/images

• From here you will notice that the icons are linked to display through the CSS file at:

www/administrator/templates/khepri/css/icon.css

• This icon CSS file is automatically included through the admin template. If we would like to add a custom toolbar icon into an installable component it is useful to follow the same structure. We will have to manually include our new CSS file.

• An example of the icon CSS statement:

.icon-32-iconname       { 
        background-image: url(../../images/icon-32-iconfile.png); 
}

• As you can see iconname and iconfile do not necessarily have to be the same.
  • JToolBarHelper will look for the iconname at the end of .icon-32- and the filename must be preceded by icon-32-

• The following would create this custom toolbar icon, notice the iconname dose not correspond to the actual file name but the CSS allows the reference.

JToolBarHelper :: custom( 'someFunction', 'iconname.png', 'iconname.png', 'alt text', true, true );

• You can place your icon file and css file at any point in your installable component, which will allow it to be easily transferable.

• To include a new CSS file to your entire admin side it may be useful to include it in the entry point.

JHTML::_('stylesheet', THISCOMPONENTNAME.css', 'components/THISCOMPONENT/assets/css/');

Upload button

• Method 1:

// Add an upload button and view a popup screen width 550 and height 400
$alt = "Upload";
$bar=& JToolBar::getInstance( 'toolbar' );
$bar->appendButton( 'Popup', 'upload', $alt, 'index.php', 550, 400 );

• Method 2:

// You view button for popup media manager tools
JToolBarHelper::media_manager( '/' );