Actions

J2.5

Difference between revisions of "Developing a MVC Component/Example of menu parameters and stylesheets"

From Joomla! Documentation

< J2.5:Developing a MVC Component
(Update the view: Changed stylesheet inserting with Jhtml::stylesheet function for better template (and such) overriding + commented out double import)
(2 intermediate revisions by 2 users not shown)
Line 8: Line 8:
 
== Update the view ==
 
== 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.
+
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.-
  
 
<span id="site/views/updhelloworld/view.html.php">
 
<span id="site/views/updhelloworld/view.html.php">

Revision as of 14:46, 3 May 2013

Copyedit.png
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.



Introduction

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.-

site/views/updhelloworld/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');
// 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
                parent::display($tpl);
        }
 
}

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

site/views/updhelloworld/tmpl/default.php

<?php
// No direct access to this file
defined('_JEXEC') or die('Restricted access');
 
JHtml::_('behavior.keepalive');
JHtml::_('behavior.formvalidation');
JHtml::_('behavior.tooltip');
 
// 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">
                <fieldset>
                <dl>
                    <dt><?php echo $this->form->getLabel('id'); ?></dt>
                <dd><?php echo $this->form->getInput('id'); ?></dd>
                <dt></dt><dd></dd>
                    <dt><?php echo $this->form->getLabel('greeting'); ?></dt>
                    <dd><?php echo $this->form->getInput('greeting'); ?></dd>
                <dt></dt><dd></dd>
                <dt></dt>
                <dd><input type="hidden" name="option" value="com_helloworld" />
                    <input type="hidden" name="task" value="updhelloworld.submit" />
                </dd>
                <dt></dt>
                <dd><button type="submit" class="button"><?php echo JText::_('Submit'); ?></button>
                                        <?php echo JHtml::_('form.token'); ?>
                </dd>
                </dl>
        <fieldset>
    </form>
    <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.

site/views/updhelloworld/tmpl/default.xml

<?xml version="1.0" encoding="utf-8"?>
<metadata>
    <layout title="COM_HELLOWORLD_UPDHELLOWORLD_VIEW_DEFAULT_TITLE">
        <message>COM_HELLOWORLD_UPDHELLOWORLD_VIEW_DEFAULT_DESC</message>
    </layout>
    <fields name="params">
        <fieldset name="request">
            <field name="headingtxtcolor" type="text" default="#ff0000" size="40"
                label="COM_HELLOWORLD_UPDHELLOWORLD_FIELD_HEADINGTXTCOLOR_LABEL"
                description="COM_HELLOWORLD_UPDHELLOWORLD_FIELD_HEADINGTXTCOLOR_DESC" />
            <field name="headingbgcolor" type="text" default="#0000ff" size="40"
                label="COM_HELLOWORLD_UPDHELLOWORLD_FIELD_HEADINGBGCOLOR_LABEL"
                description="COM_HELLOWORLD_UPDHELLOWORLD_FIELD_HEADINGBGCOLOR_DESC" />
        </fieldset>
    </fields>
</metadata>

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.

site/models/updhelloworld.php

<?php
// No direct access to this file
defined('_JEXEC') or die('Restricted access');
 
// Include dependancy of the main model form
jimport('joomla.application.component.modelform');
// import Joomla modelitem library
jimport('joomla.application.component.modelitem');
// Include dependancy of the dispatcher
jimport('joomla.event.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->clear();
                $query->update(' #__helloworld ');
                $query->set(' greeting = '.$db->Quote($greeting) );
                $query->where(' id = ' . (int) $id );
 
                $db->setQuery((string)$query);
 
        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.

media/css/site.stylesheet.css

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.

admin/language/en-GB/en-GB.com_helloworld.sys.ini

COM_HELLOWORLD="Hello World!"
COM_HELLOWORLD_DESCRIPTION="This is the Hello World description"
COM_HELLOWORLD_HELLOWORLD_VIEW_DEFAULT_DESC="This view displays a selected message"
COM_HELLOWORLD_HELLOWORLD_VIEW_DEFAULT_TITLE="Hello World"
COM_HELLOWORLD_INSTALL_TEXT="HelloWorld Install script"
COM_HELLOWORLD_MENU="Hello World!"
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_VIEW_DEFAULT_TITLE="Update the Greeting"
COM_HELLOWORLD_UPDHELLOWORLD_VIEW_DEFAULT_DESC="Update greeting here"
COM_HELLOWORLD_UPDHELLOWORLD_FIELD_HEADINGTXTCOLOR_LABEL="Colour of Text"
COM_HELLOWORLD_UPDHELLOWORLD_FIELD_HEADINGTXTCOLOR_DESC="Set the colour of the text on the heading"
COM_HELLOWORLD_UPDHELLOWORLD_FIELD_HEADINGBGCOLOR_LABEL="Colour of Background"
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 [1] 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.

helloworld.xml

<?xml version="1.0" encoding="utf-8"?>
<extension type="component" version="2.5.0" method="upgrade">
 
        <name>COM_HELLOWORLD</name>
        <!-- The following elements are optional and free of formatting conttraints -->
        <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.19</version>
        <!-- The description is optional and defaults to the name -->
        <description>COM_HELLOWORLD_DESCRIPTION</description>
 
        <!-- Runs on install/uninstall/update; New in 2.5 -->
        <scriptfile>script.php</scriptfile>
 
        <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>
                <filename>updhelloworld.php</filename>
                <folder>views</folder>
                <folder>models</folder>
                <folder>controllers</folder>
                <folder>language</folder>
        </files>
 
        <media destination="com_helloworld" folder="media">
                <filename>index.html</filename>
                <folder>css</folder>
                <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>config.xml</filename>
                        <filename>access.xml</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>
                        <!-- helpers files section -->
                        <folder>helpers</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>
 
        <!-- UPDATESERVER DEFINITION -->
        <updateservers>
                <!-- 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>
        </updateservers>
 
</extension>

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.

Navigate

Prev: Example of a Frontend Update Function

Contributors