Basic backend
Designing the backend interface leads us to create at least a Model-View-Controller triptych. We have to modify the administrator entry point of our component, the admin/helloworld.php file
admin/helloworld.php
<?php // No direct access to this file defined('_JEXEC') or die('Restricted access'); // import joomla controller library jimport('joomla.application.component.controller'); // Get an instance of the controller prefixed by HelloWorld $controller = JController::getInstance('HelloWorld'); // Get the task $jinput = JFactory::getApplication()->input; $task = $jinput->get('task', "", 'STR' ); // Perform the Request task $controller->execute($task); // Redirect if set by the controller $controller->redirect();
Create the general controller
The entry point now gets an instance of a HelloWorld prefixed controller. Let’s create a basic controller for the administrator part:
admin/controller.php
<?php // No direct access to this file defined('_JEXEC') or die('Restricted access'); // import Joomla controller library jimport('joomla.application.component.controller'); /** * General Controller of HelloWorld component */ class HelloWorldController extends JController { /** * display task * * @return void */ function display($cachable = false, $urlparams = false) { // set default view if not set $input = JFactory::getApplication()->input; $input->set('view', $input->getCmd('view', 'HelloWorlds')); // call parent behavior parent::display($cachable); } }
This controller will display the ‘HelloWorlds’ view by default.
Create the view
With your favorite file manager and editor, create a file admin/views/helloworlds/view.html.php containing:
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; // Display the template parent::display($tpl); } }
In Joomla, views display data using layout. With your favorite file manager and editor, put a file admin/views/helloworlds/tmpl/default.php containing
admin/views/helloworlds/tmpl/default.php
<?php // No direct access to this file defined('_JEXEC') or die('Restricted Access'); // load tooltip behavior JHtml::_('behavior.tooltip'); ?> <form action="<?php echo JRoute::_('index.php?option=com_helloworld'); ?>" method="post" name="adminForm"> <table class="adminlist"> <thead><?php echo $this->loadTemplate('head');?></thead> <tfoot><?php echo $this->loadTemplate('foot');?></tfoot> <tbody><?php echo $this->loadTemplate('body');?></tbody> </table> </form>
This layout calls several sub-layout (head, foot and body). Each sub-layout corresponds to a file prefixed by the name of the main layout (default), and an underscore.
Put a file admin/views/helloworlds/tmpl/default_head.php containing
admin/views/helloworlds/tmpl/default_head.php
<?php // No direct access to this file defined('_JEXEC') or die('Restricted Access'); ?> <tr> <th width="5"> <?php echo JText::_('COM_HELLOWORLD_HELLOWORLD_HEADING_ID'); ?> </th> <th width="20"> <input type="checkbox" name="toggle" value="" onclick="checkAll(<?php echo count($this->items); ?>);" /> </th> <th> <?php echo JText::_('COM_HELLOWORLD_HELLOWORLD_HEADING_GREETING'); ?> </th> </tr>
COM_HELLOWORLD_HELLOWORLD_HEADING_ID and COM_HELLOWORLD_HELLOWORLD_HEADING_GREETING are placeholders which will later be replaced with language-specific text. The JText::_ method translates a string into the current language.
checkAll is a javascript function defined in the Joomla core able to check all items.
Put a file admin/views/helloworlds/tmpl/default_body.php containing
admin/views/helloworlds/tmpl/default_body.php
<?php // No direct access to this file defined('_JEXEC') or die('Restricted Access'); ?> <?php foreach($this->items as $i => $item): ?> <tr class="row<?php echo $i % 2; ?>"> <td> <?php echo $item->id; ?> </td> <td> <?php echo JHtml::_('grid.id', $i, $item->id); ?> </td> <td> <?php echo $item->greeting; ?> </td> </tr> <?php endforeach; ?>
JHtml::_ is a helper function able to display several HTML output. In this case, it will display a checkbox for the item.
Put a file admin/views/helloworlds/tmpl/default_foot.php containing
admin/views/helloworlds/tmpl/default_foot.php
<?php // No direct access to this file defined('_JEXEC') or die('Restricted Access'); ?> <tr> <td colspan="3"><?php echo $this->pagination->getListFooter(); ?></td> </tr>
JPagination is a Joomla class able to manage and display pagination object.
Create the model
The HelloWorlds view asks the model for data. In Joomla, there is a class able to manage a list of data: JModelList. Class JModelList and inherited classes need only one method:
getListQuery which constructs an SQL query and two states:
- list.start for determining the list offset
- list.limit for determining the list length
The getItems and getPagination methods are defined in JModelList class. They don’t need to be defined in the HelloWorldModelHelloWorlds class.
admin/models/helloworlds.php
<?php // No direct access to this file defined('_JEXEC') or die('Restricted access'); // import the Joomla modellist library jimport('joomla.application.component.modellist'); /** * HelloWorldList Model */ class HelloWorldModelHelloWorlds extends JModelList { /** * Method to build an SQL query to load the list data. * * @return string An SQL query */ protected function getListQuery() { // Create a new query object. $db = JFactory::getDBO(); $query = $db->getQuery(true); // Select some fields $query->select('id,greeting'); // From the hello table $query->from('#__helloworld'); return $query; } }
The _populateState method is, by default, automatically called when a state is read by the getState method.
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
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/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/tables/index.html
admin/tables/helloworld.php
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> <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> <version>0.0.7</version> <description>Description of the Hello World component ...</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> <files folder="site"> <filename>index.html</filename> <filename>helloworld.php</filename> <filename>controller.php</filename> <folder>views</folder> <folder>models</folder> </files> <administration> <menu>Hello World!</menu> <files folder="admin"> <filename>index.html</filename> <filename>helloworld.php</filename> <filename>controller.php</filename> <folder>sql</folder> <folder>tables</folder> <folder>models</folder> <!-- views files section --> <folder>views</folder> </files> </administration> </extension>
Now you can see in your component hello-world an array with two colums, two rows and checkboxes. You can click the checkboxes in order to select the different options you want.