User

Difference between revisions of "Rvsjoen/tutorial/Developing an MVC Component/Part 02"

From Joomla! Documentation

< User:Rvsjoen‎ | tutorial/Developing an MVC Component
Line 1: Line 1:
 
= Adding a view to the frontend =
 
= Adding a view to the frontend =
  
 +
In order to create a basic view for the frontend, we first need to have some logic in our previously created entry point <tt>site/helloworld.php</tt> that decides how to handle requests which are passed to the component. We will manage this my having the entry point load up a controller and execute it, so the first order of business is creating a controller.
  
 +
== Creating a controller ==
 +
In the core code of Joomla, the class that implements a controller is named ''JController''. In order to save ourselves a lot of work, and prevent having to reinvent the wheel, this class can be extended to be used in our component.
  
 
+
In the file <tt>site/helloworld.php</tt> put the following code
In the Joomla!1.6 framework, third party component authors divide their code into three main parts:
 
* ''models'' They manage the data
 
* ''controllers'' They perform tasks, set and get the states of the models and ask the views to display
 
* ''views'' They display the content according to the type (''error'', ''feed'', ''html'', ''json'', ''raw'', ''xml'') and the layout chosen by the controllers
 
 
 
== Setting the controller ==
 
In the core code of Joomla, there is a class able to manage controllers: ''JController''. This class has to be extended to be used in our component. In the file ''site/helloworld.php'' (entry point of our ''Hello World'' component), put these lines
 
  
 
<span id="site/helloworld.php">
 
<span id="site/helloworld.php">
''site/helloworld.php''
+
'''<tt>site/helloworld.php</tt>'''
 
<source lang="php">
 
<source lang="php">
 
<?php
 
<?php
 
// No direct access to this file
 
// No direct access to this file
defined('_JEXEC') or die('Restricted access');
+
defined('_JEXEC') or die;
  
// import joomla controller library
 
 
jimport('joomla.application.component.controller');
 
jimport('joomla.application.component.controller');
  
Line 29: Line 24:
  
 
// Redirect if set by the controller
 
// Redirect if set by the controller
$controller->redirect();</source>
+
$controller->redirect();
 +
</source>
 
</span>
 
</span>
 +
 
The ''getInstance'' static method of the ''JController'' class will create a controller. In the code above, it will create a controller named ''HelloWorldController'' using the ''controller.php'' file (it's a default behavior)
 
The ''getInstance'' static method of the ''JController'' class will create a controller. In the code above, it will create a controller named ''HelloWorldController'' using the ''controller.php'' file (it's a default behavior)
  

Revision as of 09:36, 10 July 2011

Adding a view to the frontend[edit]

In order to create a basic view for the frontend, we first need to have some logic in our previously created entry point site/helloworld.php that decides how to handle requests which are passed to the component. We will manage this my having the entry point load up a controller and execute it, so the first order of business is creating a controller.

Creating a controller[edit]

In the core code of Joomla, the class that implements a controller is named JController. In order to save ourselves a lot of work, and prevent having to reinvent the wheel, this class can be extended to be used in our component.

In the file site/helloworld.php put the following code

site/helloworld.php

<?php
// No direct access to this file
defined('_JEXEC') or die;

jimport('joomla.application.component.controller');

// Get an instance of the controller prefixed by HelloWorld
$controller = JController::getInstance('HelloWorld');

// Perform the Request task
$controller->execute(JRequest::getCmd('task'));

// Redirect if set by the controller
$controller->redirect();

The getInstance static method of the JController class will create a controller. In the code above, it will create a controller named HelloWorldController using the controller.php file (it's a default behavior)

With your favorite file manager and editor, create a site/controller.php file containing

site/controller.php

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

// import Joomla controller library
jimport('joomla.application.component.controller');

/**
 * Hello World Component Controller
 */
class HelloWorldController extends JController
{
}

When no task is given in the request variables, the default task will be executed. It's the display task by default. The JController class has such a task. In our example, it will display a view named HelloWorld.

Setting the view[edit]

With your favorite file manager and editor, create a file site/views/helloworld/view.html.php able to display the default view and containing

site/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');

/**
 * HTML View class for the HelloWorld Component
 */
class HelloWorldViewHelloWorld extends JView
{
	// Overwriting JView display method
	function display($tpl = null) 
	{
		// Assign data to the view
		$this->msg = 'Hello World';

		// Display the view
		parent::display($tpl);
	}
}

The display method of the JView class is called with the display task of the JController class. In our case, this method will display data using the tmpl/default.php file. With your favorite file manager and editor, create a file site/views/helloworld/tmpl/default.php able to display the default view and containing

site/views/helloworld/tmpl/default.php

<?php
// No direct access to this file
defined('_JEXEC') or die('Restricted access');
?>
<h1><?php echo $this->msg; ?></h1>

This template file will be included by the JView class. Therefore, here, $this refers to the HelloWorldViewHelloWorld class.

Packaging the component[edit]

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!1.6. You can test this basic component by putting index.php?option=com_helloworld in your browser address.

helloworld.xml

<?xml version="1.0" encoding="utf-8"?>
<extension type="component" version="1.6.0" method="upgrade">

	<name>Hello World!</name>
	<!-- The following elements are optional and free of formatting constraints -->
	<creationDate>June 2011</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 stored in the components table -->
	<version>0.0.2</version>
	<!-- The description is optional and defaults to the name -->
	<description>Description of the Hello World component ...</description>

	<!-- 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>
	</files>

	<administration>
		<menu>Hello World!</menu>
		<!-- 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">
			<filename>index.html</filename>
			<filename>helloworld.php</filename>
		</files>
	</administration>

</extension>

Result: You will see by default the message contained in the variable $this->msg in the view.html.php file.

File listing[edit]

Download this part[edit]

com_helloworld-part01.zip

Articles in this series[edit]

This tutorial is supported by the following versions of Joomla!

Joomla 2.5