Developing a MVC Component/Example of menu parameters and stylesheets

From Joomla! Documentation

< J2.5:Developing a MVC Component(Redirected from J2.5:Developing a Model-View-Controller Component/Example of menu parameters and stylesheets)

The "J2.5" namespace is a namespace scheduled to be archived. This page contains information for a Joomla! version which is no longer supported. It exists only as a historical reference, it will not be improved and its content may be incomplete and/or contain broken links.

This Page Needs Your Help

This page is tagged because it NEEDS TECHNICAL REVIEW. You can help the Joomla! Documentation Wiki by contributing to it.
More pages that need help similar to this one are here. NOTE-If you feel the need is satistified, please remove this notice.

Reason: This article needs to be reviewed by someone who knows what they're doing.


This tutorial is part of the Developing a Model-View-Controller (MVC) Component for Joomla!2.5 tutorial. You are encouraged to read the previous parts of the tutorial before reading this.

Update the view

With your favorite file manager and editor, update the file site/views/updhelloworld/view.html.php to include setting the state. For the stylesheet, include the import of the html class, and add a new function for including the stylesheet file.-


// No direct access to this file
defined('_JEXEC') or die('Restricted access');
// import Joomla view library
// import Joomla html for use with stylesheets
// jimport('joomla.html.html'); Probably already triggered in a html view
 * HTML View class for the UpdHelloWorld Component
class HelloWorldViewUpdHelloWorld extends JView
	// Overwriting JView display method
	function display($tpl = null) 
		$app		= JFactory::getApplication();
		$params		= $app->getParams();
		$dispatcher = JDispatcher::getInstance();

		// Get some data from the models
		$state		= $this->get('State');
		$item		= $this->get('Item');
		$this->form	= $this->get('Form');
		$this->state = $this->get('State');

		// Check for errors.
		if (count($errors = $this->get('Errors'))) 
			JError::raiseError(500, implode('<br />', $errors));
			return false;

		// get the stylesheet (with automatic lookup, possible template overrides, etc.)
		JHtml::stylesheet('com_helloworld/site.stylesheet.css', array(), true);

		// Display the view


Update the layout

In Joomla, views display data using a layout. With your favorite file manager and editor, edit your file site/views/updhelloworld/tmpl/default.php to get the parameter values


// No direct access to this file
defined('_JEXEC') or die('Restricted access');


// get the menu parameters for use
$menuparams = $this->state->get("menuparams");
$headingtxtcolor = $menuparams->get("headingtxtcolor");
$headingbgcolor = $menuparams->get("headingbgcolor");

    <h2 style="color:<?php echo $headingtxtcolor; ?>; background-color:<?php echo $headingbgcolor; ?>;">Update the Hello World greeting</h2>

    <form class="form-validate" action="<?php echo JRoute::_('index.php'); ?>" method="post" id="updhelloworld" name="updhelloworld">
          	    <dt><?php echo $this->form->getLabel('id'); ?></dt>
             	<dd><?php echo $this->form->getInput('id'); ?></dd>
        	    <dt><?php echo $this->form->getLabel('greeting'); ?></dt>
        	    <dd><?php echo $this->form->getInput('greeting'); ?></dd>
            	<dd><input type="hidden" name="option" value="com_helloworld" />
            	    <input type="hidden" name="task" value="updhelloworld.submit" />
                <dd><button type="submit" class="button"><?php echo JText::_('Submit'); ?></button>
			                <?php echo JHtml::_('form.token'); ?>
    <div class="clr"></div>

This layout utilises the forms design which resides with the related model. The getLabel and getInput will pickup the xml fields defined and display appropriately. More on the xml file within the models section of this tutorial.

Update the file site/views/updhelloworld/tmpl/default.xml to include the definitions of the parameter fields.


<?xml version="1.0" encoding="utf-8"?>
    <fields name="params">
        <fieldset name="request">
            <field name="headingtxtcolor" type="text" default="#ff0000" size="40"
            <field name="headingbgcolor" type="text" default="#0000ff" size="40"

This defines the parameter fields and allows for default values to be set amongst any other JForms elements.

Update the model

The UpdHelloWorld model sets up the data sent from the related form and allows for saving the data from the form into the database. In the getItem method we will get the values from the parameters.


// No direct access to this file
defined('_JEXEC') or die('Restricted access');
// Include dependancy of the main model form
// import Joomla modelitem library
// Include dependancy of the dispatcher

 * UpdHelloWorld Model
class HelloWorldModelUpdHelloWorld extends JModelForm
	 * @var object item
	protected $item;

	 * Get the data for a new qualification
	public function getForm($data = array(), $loadData = true)

        $app = JFactory::getApplication('site');

        // Get the form.
		$form = $this->loadForm('com_helloworld.updhelloworld', 'updhelloworld', array('control' => 'jform', 'load_data' => true));
		if (empty($form)) {
			return false;
		return $form;


	 * Get the message
	 * @return object The message to be displayed to the user
	function &getItem()

		if (!isset($this->_item))
			$cache = JFactory::getCache('com_helloworld', '');
			$id = $this->getState('helloworld.id');
			$this->_item =  $cache->get($id);
			if ($this->_item === false) {

                // Menu parameters
		$input = JFactory::getApplication()->input;
                $menuitemid = $input->getInt( 'Itemid' );  // this returns the menu id number so you can reference parameters
                $menu = JSite::getMenu();
                if ($menuitemid) {
                   $menuparams = $menu->getParams( $menuitemid );
                   $headingtxtcolor = $menuparams->get('headingtxtcolor');  // This shows how to get an individual parameter for use
                   $headingbgcolor = $menuparams->get('headingbgcolor');  // This shows how to get an individual parameter for use
                $this->setState('menuparams', $menuparams);  // this sets the parameter values to the state for later use

		return $this->_item;


	public function updItem($data)
        // set the variables from the passed data
        $id = $data['id'];
        $greeting = $data['greeting'];

        // set the data into a query to update the record
		$db		= $this->getDbo();
		$query	= $db->getQuery(true);
		$query->update(' #__helloworld ');
		$query->set(' greeting = '.$db->Quote($greeting) );
		$query->where(' id = ' . (int) $id );


        if (!$db->query()) {
            JError::raiseError(500, $db->getErrorMsg());
        	return false;
        } else {
        	return true;

Add a stylesheet file

Create a new stylesheet file to contain the css code you want to use on your component.


p {
   color: #000000;

Adding some language keys

Add the last 4 lines to the admin/language/en-GB/en-GB.com_helloworld.sys.ini file to provide the text link for the parameter type display. And being for the backend, it resides in the admin language folder.


COM_HELLOWORLD_DESCRIPTION="This is the Hello World description"
COM_HELLOWORLD_HELLOWORLD_VIEW_DEFAULT_DESC="This view displays a selected message"
COM_HELLOWORLD_INSTALL_TEXT="HelloWorld Install script"
COM_HELLOWORLD_POSTFLIGHT_DISCOVER_INSTALL_TEXT="HelloWorld postlight discover install script"
COM_HELLOWORLD_POSTFLIGHT_INSTALL_TEXT="HelloWorld postflight install script"
COM_HELLOWORLD_POSTFLIGHT_UNINSTALL_TEXT="HelloWorld postflight uninstall script"
COM_HELLOWORLD_POSTFLIGHT_UPDATE_TEXT="HelloWorld postflight update script"
COM_HELLOWORLD_PREFLIGHT_DISCOVER_INSTALL_TEXT="HelloWorld preflight discover install script"
COM_HELLOWORLD_PREFLIGHT_INSTALL_TEXT="HelloWorld preflight install script"
COM_HELLOWORLD_PREFLIGHT_UNINSTALL_TEXT="HelloWorld preflight uninstall script"
COM_HELLOWORLD_PREFLIGHT_UPDATE_TEXT="HelloWorld preflight update script"
COM_HELLOWORLD_UNINSTALL_TEXT="HelloWorld Uninstall script"
COM_HELLOWORLD_UPDATE_TEXT="HelloWorld Update script"
COM_HELLOWORLD_UPDHELLOWORLD_FIELD_HEADINGBGCOLOR_DESC="Set the colour of the background on the heading"

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-

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.

Be sure to update your manifest to include the stylesheet folder within the media section.


<?xml version="1.0" encoding="utf-8"?>
<extension type="component" version="2.5.0" method="upgrade">
	<!-- The following elements are optional and free of formatting conttraints -->
	<creationDate>November 2009</creationDate>
	<author>John Doe</author>
	<copyright>Copyright Info</copyright>
	<license>License Info</license>
	<!--  The version string is recorded in the components table -->
	<!-- The description is optional and defaults to the name -->
	<!-- Runs on install/uninstall/update; New in 2.5 -->
	<install> <!-- Runs on install -->
			<file driver="mysql" charset="utf8">sql/install.mysql.utf8.sql</file>
	<uninstall> <!-- Runs on uninstall -->
			<file driver="mysql" charset="utf8">sql/uninstall.mysql.utf8.sql</file>
	<update> <!-- Runs on update; New in 2.5 -->
			<schemapath type="mysql">sql/updates/mysql</schemapath>
	<!-- 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">

	<media destination="com_helloworld" folder="media">
		<!-- 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 -->
			<!-- SQL files section -->
			<!-- tables files section -->
			<!-- models files section -->
			<!-- views files section -->
			<!-- controllers files section -->
			<!-- helpers files section -->
		<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>
		<!-- Note: No spaces or linebreaks allowed between the server tags -->
		<server type="extension" priority="1" name="HelloWorld Update Site">http://yourdomain.com/update/helloworld-update.xml</server>

Now when you view your hello-world update function via the front-end menu option, you will see the colours of the text and background being utilised.


Prev: Example of a Frontend Update Function