Adding some icons
With your favorite file manager put a 16×16 image and a 48×48 image (I choose tux) in a media/images/ folder and add a media tag in your install file. Modify the menu tag in order to use the new icon.
Modifying the views
In the admin/views/helloworlds/view.html.php file put these lines:
admin/views/helloworlds/view.html.php
<?php // No direct access to this file defined('_JEXEC') or die('Restricted access'); // import Joomla view library jimport('joomla.application.component.view'); /** * HelloWorlds View */ class HelloWorldViewHelloWorlds extends JView { /** * HelloWorlds view display method * @return void */ function display($tpl = null) { // Get data from the model $items = $this->get('Items'); $pagination = $this->get('Pagination'); // Check for errors. if (count($errors = $this->get('Errors'))) { JError::raiseError(500, implode('<br />', $errors)); return false; } // Assign data to the view $this->items = $items; $this->pagination = $pagination; // Set the toolbar and number of found items $this->addToolBar($this->pagination->total); // Display the template parent::display($tpl); // Set the document $this->setDocument(); } /** * Setting the toolbar */ protected function addToolBar($total=null) { JToolBarHelper::title(JText::_('COM_HELLOWORLD_MANAGER_HELLOWORLDS'). //Reflect number of items in title! ($total?' <span style="font-size: 0.5em; vertical-align: middle;">('.$total.')</span>':'') , 'helloworld'); JToolBarHelper::deleteListX('', 'helloworlds.delete'); JToolBarHelper::editListX('helloworld.edit'); JToolBarHelper::addNewX('helloworld.add'); } /** * Method to set up the document properties * * @return void */ protected function setDocument() { $document = JFactory::getDocument(); $document->setTitle(JText::_('COM_HELLOWORLD_ADMINISTRATION')); } }
This view uses a second parameter for the JToolBarHelper::title function. It will be used to construct the css class for the title. The _setDocument method sets the browser title.
In admin/views/helloworld/view.html.php, put these lines:
admin/views/helloworld/view.html.php
<?php // No direct access to this file defined('_JEXEC') or die('Restricted access'); // import Joomla view library jimport('joomla.application.component.view'); /** * HelloWorld View */ class HelloWorldViewHelloWorld extends JView { /** * View form * * @var form */ protected $form = null; /** * display method of Hello view * @return void */ public function display($tpl = null) { // get the Data $form = $this->get('Form'); $item = $this->get('Item'); // Check for errors. if (count($errors = $this->get('Errors'))) { JError::raiseError(500, implode('<br />', $errors)); return false; } // Assign the Data $this->form = $form; $this->item = $item; // Set the toolbar $this->addToolBar(); // Display the template parent::display($tpl); // Set the document $this->setDocument(); } /** * Setting the toolbar */ protected function addToolBar() { $input = JFactory::getApplication()->input; $input->set('hidemainmenu', true); $isNew = ($this->item->id == 0); JToolBarHelper::title($isNew ? JText::_('COM_HELLOWORLD_MANAGER_HELLOWORLD_NEW') : JText::_('COM_HELLOWORLD_MANAGER_HELLOWORLD_EDIT'), 'helloworld'); JToolBarHelper::save('helloworld.save'); JToolBarHelper::cancel('helloworld.cancel', $isNew ? 'JTOOLBAR_CANCEL' : 'JTOOLBAR_CLOSE'); } /** * Method to set up the document properties * * @return void */ protected function setDocument() { $isNew = ($this->item->id < 1); $document = JFactory::getDocument(); $document->setTitle($isNew ? JText::_('COM_HELLOWORLD_HELLOWORLD_CREATING') : JText::_('COM_HELLOWORLD_HELLOWORLD_EDITING')); } }
This view also uses the second parameter of the JToolBarHelper::title function and set the browser title
Modifying the main entry file
In the admin/helloworld.php file, put these lines in order to use the 48×48 icon:
<?php // No direct access to this file defined('_JEXEC') or die('Restricted access'); // Set some global property $document = JFactory::getDocument(); $document->addStyleDeclaration('.icon-48-helloworld {background-image: url(../media/com_helloworld/images/tux-48x48.png);}'); // import joomla controller library jimport('joomla.application.component.controller'); // Get an instance of the controller prefixed by HelloWorld $controller = JController::getInstance('HelloWorld'); // Perform the Request task $input = JFactory::getApplication()->input; $controller->execute($input->getCmd('task')); // Redirect if set by the controller $controller->redirect(); Adding some strings in the language file
Modify the admin/language/en-GB/en-GB.com_helloworld.ini and put these lines
admin/language/en-GB/en-GB.com_helloworld.ini
COM_HELLOWORLD_ADMINISTRATION="HelloWorld - Administration" COM_HELLOWORLD_HELLOWORLD_CREATING="HelloWorld - Creating" COM_HELLOWORLD_HELLOWORLD_DETAILS="Details" COM_HELLOWORLD_HELLOWORLD_EDITING="HelloWorld - Editing" COM_HELLOWORLD_HELLOWORLD_FIELD_GREETING_DESC="This message will be displayed" COM_HELLOWORLD_HELLOWORLD_FIELD_GREETING_LABEL="Message" COM_HELLOWORLD_HELLOWORLD_HEADING_GREETING="Greeting" COM_HELLOWORLD_HELLOWORLD_HEADING_ID="Id" COM_HELLOWORLD_MANAGER_HELLOWORLD_EDIT="HelloWorld manager: Edit Message" COM_HELLOWORLD_MANAGER_HELLOWORLD_NEW="HelloWorld manager: New Message" COM_HELLOWORLD_MANAGER_HELLOWORLDS="HelloWorld manager" COM_HELLOWORLD_N_ITEMS_DELETED_1="One message deleted" COM_HELLOWORLD_N_ITEMS_DELETED_MORE="%d messages deleted"
Packaging the component
Content of your code directory
- helloworld.xml
- site/index.html
- site/helloworld.php
- site/controller.php
- site/views/index.html
- site/views/helloworld/index.html
- site/views/helloworld/view.html.php
- site/views/helloworld/tmpl/index.html
- site/views/helloworld/tmpl/default.xml
- site/views/helloworld/tmpl/default.php
- site/models/index.html
- site/models/helloworld.php
- site/language/index.html
- site/language/en-GB/index.html
- site/language/en-GB/en-GB.com_helloworld.ini
- admin/index.html
- admin/helloworld.php
- admin/controller.php
- admin/sql/index.html
- admin/sql/install.mysql.utf8.sql
- admin/sql/uninstall.mysql.utf8.sql
- admin/sql/updates/index.html
- admin/sql/updates/mysql/index.html
- admin/sql/updates/mysql/0.0.1.sql
- admin/sql/updates/mysql/0.0.6.sql
- admin/models/index.html
- admin/models/fields/index.html
- admin/models/fields/helloworld.php
- admin/models/forms/index.html
- admin/models/forms/helloworld.xml
- admin/models/helloworld.php
- admin/models/helloworlds.php
- admin/views/index.html
- admin/views/helloworlds/index.html
- admin/views/helloworlds/view.html.php
- admin/views/helloworlds/tmpl/index.html
- admin/views/helloworlds/tmpl/default.php
- admin/views/helloworlds/tmpl/default_head.php
- admin/views/helloworlds/tmpl/default_body.php
- admin/views/helloworlds/tmpl/default_foot.php
- admin/views/helloworld/index.html
- admin/views/helloworld/view.html.php
- admin/views/helloworld/tmpl/index.html
- admin/views/helloworld/tmpl/edit.php
- admin/tables/index.html
- admin/tables/helloworld.php
- admin/language/en-GB/en-GB.com_helloworld.ini
- admin/language/en-GB/en-GB.com_helloworld.menu.ini
- admin/controllers/index.html
- admin/controllers/helloworld.php
- admin/controllers/helloworlds.php
- language/en-GB/en-GB.ini
- media/index.html
- media/images/index.html
- media/images/tux-16×16.png
- media/images/tux-48×48.png
Create a compressed file of this directory or directly download the archive and install it using the extension manager of Joomla. You can add a menu item of this component using the menu manager in the backend.
helloworld.xml
<?xml version="1.0" encoding="utf-8"?> <extension type="component" version="2.5.0" method="upgrade"> <name>Hello World!</name> <!-- The following elements are optional and free of formatting constraints --> <creationDate>November 2009</creationDate> <author>John Doe</author> <authorEmail>john.doe@example.org</authorEmail> <authorUrl>http://www.example.org</authorUrl> <copyright>Copyright Info</copyright> <license>License Info</license> <!-- The version string is recorded in the components table --> <version>0.0.10</version> <!-- The description is optional and defaults to the name --> <description>COM_HELLOWORLD_DESCRIPTION</description> <install> <!-- Runs on install --> <sql> <file driver="mysql" charset="utf8">sql/install.mysql.utf8.sql</file> </sql> </install> <uninstall> <!-- Runs on uninstall --> <sql> <file driver="mysql" charset="utf8">sql/uninstall.mysql.utf8.sql</file> </sql> </uninstall> <update> <!-- Runs on update; New in 2.5 --> <schemas> <schemapath type="mysql">sql/updates/mysql</schemapath> </schemas> </update> <!-- Site Main File Copy Section --> <!-- Note the folder attribute: This attribute describes the folder to copy FROM in the package to install therefore files copied in this section are copied from /site/ in the package --> <files folder="site"> <filename>index.html</filename> <filename>helloworld.php</filename> <filename>controller.php</filename> <folder>views</folder> <folder>models</folder> <folder>language</folder> </files> <media destination="com_helloworld" folder="media"> <filename>index.html</filename> <folder>images</folder> </media> <administration> <!-- Administration Menu Section --> <menu img="../media/com_helloworld/images/tux-16x16.png">COM_HELLOWORLD_MENU</menu> <!-- Administration Main File Copy Section --> <!-- Note the folder attribute: This attribute describes the folder to copy FROM in the package to install therefore files copied in this section are copied from /admin/ in the package --> <files folder="admin"> <!-- Admin Main File Copy Section --> <filename>index.html</filename> <filename>helloworld.php</filename> <filename>controller.php</filename> <!-- SQL files section --> <folder>sql</folder> <!-- tables files section --> <folder>tables</folder> <!-- models files section --> <folder>models</folder> <!-- views files section --> <folder>views</folder> <!-- controllers files section --> <folder>controllers</folder> </files> <languages folder="admin"> <language tag="en-GB">language/en-GB/en-GB.com_helloworld.ini</language> <language tag="en-GB">language/en-GB/en-GB.com_helloworld.sys.ini</language> </languages> </administration> </extension>