User

Rvsjoen/tutorial/Developing an MVC Component/Part 02

From Joomla! Documentation

< User:Rvsjoen‎ | tutorial/Developing an MVC Component
Revision as of 03:51, 11 July 2011 by Rvsjoen (talk | contribs) (→‎Testing your component)

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 telling the entry point what to do, and then 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.

With your favorite editor, create the following file

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 static getInstance 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 in the same location as the entry point. This means that we have to create this controller so that it has something to load.

With your favorite editor, create the following file

site/controller.php 

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

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

class HelloWorldController extends JController
{

}

Yes really, that is it. We do not have to provide any code in our controller except for this. This is because the default behavior of JController is to call the display task if not other task is given, and the display task will look for the name of the view to load in the view request variable. If no view name is given, it will load the view with the same name as the component, namely helloworld.

Creating a view[edit]

Now that we have a controller that will load and display our views, we need to give it a view to display.

With your favorite editor, create the following file

site/views/helloworld/view.html.php 

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

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

class HelloWorldViewHelloWorld extends JView
{
	function display($tpl = null) 
	{
		// Assign data to the view
		$this->item = 'Hello World';

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

Now, the most important two bits of this file are line 12, in which we assign a string to the member variable item, this variable will then be available in the view template (which we will create in a minute). On line 15 there is a call to the parent display function, now this is in fact where a lot of the logic happens as that is the display function of JView, we will not go into detail on this except to tell you that it is responsible for loading up and displaying the view template.

The view templates are stored in the tmpl folder inside each view, so let us go ahead and create a view template for our view (View templates are also called layouts).

With your favorite editor, create the following file

site/views/helloworld/tmpl/default.php 

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

?>

<h1><?php echo $this->item; ?></h1>

Installation manifest[edit]

In our manifest, as you can see, we have added the newly created files and folders in the site files section on line 23 and 24. We have also updated the component version number on line 13.

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>

Testing your component[edit]

For details on how to install the component into your Joomla! site, refer to the information provided in Part 01.

In order to test this component, open up index.php?option=com_helloworld in your browser, and see that the text displayed will be the same text that you assigned to $this->item in your view.

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

Retrieved from "https://docs.joomla.org/index.php?title=User:Rvsjoen/tutorial/Developing_an_MVC_Component/Part_02&oldid=60321"