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

get('Items');
                $pagination = $this->get('Pagination');
 
                // Check for errors.
                if (count($errors = $this->get('Errors'))) 
                {
                        JError::raiseError(500, implode('
', $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?' ('.$total.')':'')
                        , '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

get('Form');
                $item = $this->get('Item');
 
                // Check for errors.
                if (count($errors = $this->get('Errors'))) 
                {
                        JError::raiseError(500, implode('
', $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:

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

 
        Hello World!
        
        November 2009
        John Doe
        john.doe@example.org
        http://www.example.org
        Copyright Info
        License Info
        
        0.0.10
        
        COM_HELLOWORLD_DESCRIPTION
 
         
                
                        sql/install.mysql.utf8.sql
                
        
         
                
                        sql/uninstall.mysql.utf8.sql
                
        
         
                
                        sql/updates/mysql
                
        
 
        
        
        
                index.html
                helloworld.php
                controller.php
                views
                models
                language
        
 
        
                index.html
                images
        
 
        
                
                COM_HELLOWORLD_MENU
                
                
                
                        
                        index.html
                        helloworld.php
                        controller.php
                        
                        sql
                        
                        tables
                        
                        models
                        
                        views
                        
                        controllers
                
 
                
                        language/en-GB/en-GB.com_helloworld.ini
                        language/en-GB/en-GB.com_helloworld.sys.ini