J3.x

Desarrollo de un Componente MVC/Agregar una vista a la parte del sitio

From Joomla! Documentation

< J3.x:Developing an MVC Component
This page is a translated version of the page J3.x:Developing an MVC Component/Adding a view to the site part and the translation is 100% complete.

Other languages:
العربية • ‎English • ‎español • ‎français • ‎Nederlands • ‎português do Brasil • ‎русский
Joomla! 
3.x
Tutorial
Desarrollo de un Componente MVC


Esta es una serie multi-artículos de tutoriales sobre cómo desarrollar un Componente Modelo-Vista-Controlador para Joomla! VersiónJoomla 3.x.

Comenzar con la Introducción, y navegar por los artículos de esta serie usando el botón de navegación en la parte inferior o en el cuadro de la derecha (los "Artículos de esta serie").



Nota

  • Puedes seguir los pasos que hay a continuación para agregar una vista al componente Hello World! o puedes descargar directamente el archivo
  • A medida que sigas los pasos del tutorial, puedes encontrar problemas. En este caso, puede resultarte útil leer la página de Joomla en Cómo depurar tu código.

Agregar una Vista a Hello World!

En este artículo vamos a cubrir cómo añadir una vista a un componente básico de Joomla!. Para este ejemplo vamos a continuar nuestro trabajo con el componente Hello World!.

Hay varias formas de actualizar un componente Joomla!. En este tutorial nos vamos a centrar en la opción 2.

1 Agregar manualmente los archivos en <path_to_joomla>/
2 Actualizar usando el Gestor de Extensiones de Joomla! y el directorio original, no comprimido, utilizado a la instalación de componentes
3 Actualizar usando el Gestor de Extensiones de Joomla! y un Servidor de Actualización

Para agregar una vista necesitas navegar a com_helloworld, que es el directorio original que hemos hecho para nuestro componente. Utilizando tu administrador de archivos preferido, crea o actualiza los siguientes archivos; tanto crear como actualizar los archivos, es agregar el código fuente para cada archivo que se encuentra en Detalles de los Archivos.

1 Actualizar: helloworld.php <path_to_com_helloworld>/site/helloworld.php
2 Crear: controller.php <path_to_com_helloworld>/site/controller.php
3 Crear: index.html <path_to_com_helloworld>/site/views/index.html
4 Crear: index.html <path_to_com_helloworld>/site/views/helloworld/index.html
5 Crear: view.html.php <path_to_com_helloworld>/site/views/helloworld/view.html.php
6 Crear: default.php <path_to_com_helloworld>/site/views/helloworld/tmpl/default.php
7 Crear: index.html <path_to_com_helloworld>/site/views/helloworld/tmpl/index.html
8 Actualizar: helloworld.xml <path_to_com_helloworld/helloworld.xml

Actualizar el Componente Hello World!

Para actualizar el Componente Hello World! en el sitio web Joomla!, por favor, sigue los mismos pasos que para la instalación original.


Detalle de los Archivos

site/helloworld.php (Note that some browsers may not copy and paste highlighted text correctly into a text editor. If you find this, then please try a different browser).

<?php
/**
 * @package     Joomla.Administrator
 * @subpackage  com_helloworld
 *
 * @copyright   Copyright (C) 2005 - 2018 Open Source Matters, Inc. All rights reserved.
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 */

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

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

// Perform the Request task
$input = JFactory::getApplication()->input;
$controller->execute($input->getCmd('task'));

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

site/controller.php

<?php
/**
 * @package     Joomla.Administrator
 * @subpackage  com_helloworld
 *
 * @copyright   Copyright (C) 2005 - 2018 Open Source Matters, Inc. All rights reserved.
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 */
// No direct access to this file
defined('_JEXEC') or die('Restricted access');
/**
 * Hello World Component Controller
 *
 * @since  0.0.1
 */
class HelloWorldController extends JControllerLegacy
{
}

site/views/helloworld/view.html.php

<?php
/**
 * @package     Joomla.Administrator
 * @subpackage  com_helloworld
 *
 * @copyright   Copyright (C) 2005 - 2018 Open Source Matters, Inc. All rights reserved.
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 */

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

/**
 * HTML View class for the HelloWorld Component
 *
 * @since  0.0.1
 */
class HelloWorldViewHelloWorld extends JViewLegacy
{
	/**
	 * Display the Hello World view
	 *
	 * @param   string  $tpl  The name of the template file to parse; automatically searches through the template paths.
	 *
	 * @return  void
	 */
	function display($tpl = null)
	{
		// Assign data to the view
		$this->msg = 'Hello World';

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

site/views/helloworld/tmpl/default.php

<?php
/**
 * @package     Joomla.Administrator
 * @subpackage  com_helloworld
 *
 * @copyright   Copyright (C) 2005 - 2018 Open Source Matters, Inc. All rights reserved.
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 */
 
// No direct access to this file
defined('_JEXEC') or die('Restricted access');
?>
<h1><?php echo $this->msg; ?></h1>

index.html Nota - el mismo código se utiliza para todas las carpetas

<html><body bgcolor="#FFFFFF"></body></html>

helloworld.xml

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

	<name>Hello World!</name>
	<!-- The following elements are optional and free of formatting constraints -->
	<creationDate>January 2018</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.2</version>
	<!-- The description is optional and defaults to the name -->
	<description>Description of the Hello World component ...</description>

	<update> <!-- Runs on update; New since J2.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>
		<folder>views</folder>
	</files>

	<administration>
		<!-- Administration Menu Section -->
		<menu link='index.php?option=com_helloworld'>Hello World!</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>helloworld.php</filename>
			<!-- SQL files section -->
			<folder>sql</folder>
		</files>
	</administration>

</extension>


Explicación del Código

En caso que seas curioso en cuanto a por qué esto funciona de la manera que lo hace.

helloworld.php

defined('_JEXEC') or die('Restricted access');

Esto permite un punto de entrada seguro a la plataforma de Joomla!. JEXEC contiene una explicación detallada.

$controller = JControllerLegacy::getInstance('HelloWorld');

JControllerLegacy es una clase base para un Controlador de Joomla!. Ya que nuestra página web utiliza controladores, debemos extender esta clase en nuestro componente. El método estático getInstance de la clase JControllerLegacy va a crear un controlador. En el código anterior, crea una instancia de un objeto del controlador de una clase denominada HelloWorldController. Joomla buscará la declaración de la clase en <ruta_a_joomla>/htdocs/components/com_helloworld/controller.php.

$input = JFactory::getApplication()->input;
$controller->execute($input->getCmd('task'));

Después que el controlador se crea, se indica al controlador que ejecute la tarea, tal como se define en la URL: <tusitio>/joomla/index.php?option=com_helloworld&task=<nombre_tarea>. Si no hay ninguna tarea, se asume la tarea predeterminada: 'mostrar'. Cuando se utiliza la visualización, la variable 'view' va a decidir lo que va a ser visualizado. Otras tareas comunes son guardar, editar, nuevo, etc.

$controller->redirect();

El controlador podría decidir redirigir la página, generalmente después de que una tarea como 'guardar', ha concluido. Esta última estamento se ocupa de la real redirección.

El principal punto de entrada, helloworld.php, esencialmente le pasa el control al controlador, el cual se encarga de la realización de la tarea que se ha especificado en la solicitud. Nuestro componente específico del controlador no hace nada más que lo que ya se hace la clase de padre, es por eso que nuestra clase controller está vacía.

controller.php

class HelloWorldController extends JControllerLegacy
{
}

Cuando una tarea no está dada en la variable de solicitud, el valor predeterminado de la tarea será ejecutado. Es la pantalla de tareas predeterminada. La clase JControllerLegacy tiene una tarea. En nuestro ejemplo, se mostrará una vista denominada HelloWorld.

view.html.php

class HelloWorldViewHelloWorld extends JViewLegacy
{
	function display($tpl = null)
	{
		// Assign data to the view
		$this->msg = 'Hello World';
 
		// Display the view
		parent::display($tpl);
	}
}

La vista establece el texto de salida y entonces llama a la clase base de pantalla. JViewLegacy es una clase base para la Vista Joomla!. En nuestro caso, es el método de visualización de datos mediante el archivo tmpl/default.php.

Advertencia: Si tu vista necesita cargar o insertar código JavaScript individual, no hagas eso en la vista, ya que el código podría no estar incluido cuando el almacenamiento en caché esté habilitado. Carga esos scripts en el controlador. Mira el problema relacionado con el rastreador de problemas.

default.php

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

Este archivo de plantilla será incluido por la clase JViewLegacy. Por lo tanto, aquí, $this se refiere a la clase HelloWorldViewHelloWorld.

helloworld.xml

<version>0.0.2</version>

Actualiza el número de versión.

<filename>controller.php</filename>
<folder>views</folder>

Le dice al instalador de la aplicación que agregue controller.php y los directorios de las vistas

Contenidos del componente

En este punto del tutorial, el componente debe contener los siguientes archivos:

1 helloworld.xml este es un archivo XML (manifiesto) que le indica a Joomla! cómo instalar nuestro componente.
2 site/helloworld.php este es el punto de entrada del componente Hello World! en el sitio
3 site/index.html evita que se liste el contenido del directorio del servidor web
4 site/controller.php archivo que representa al controlador
5 site/views/index.html evita que se liste el contenido del directorio del servidor web
6 site/views/helloworld/index.html evita que se liste el contenido del directorio del servidor web
7 site/views/helloworld/view.html.php archivo que representa la vista
8 site/views/helloworld/tmpl/index.html evita que se liste el contenido del directorio del servidor web
9 site/views/helloworld/tmpl/default.php la vista predeterminada
10 admin/index.html evita que se liste el contenido del directorio del servidor web
11 admin/helloworld.php este es el punto de entrada del componente Hello World! en el administrador
12 admin/sql/index.html evita que se liste el contenido del directorio del servidor web
13 admin/sql/updates/index.html evita que se liste el contenido del directorio del servidor web
14 admin/sql/updates/mysql/index.html evita que se liste el contenido del directorio del servidor web
15 admin/sql/updates/mysql/0.0.1.sql es un archivo que permite inicializar el esquema de versiones del componente com_helloworld.
Info non-talk.png
General Information

Por favor, crea una petición o tema en https://github.com/joomla/Joomla-3.2-Hello-World-Component para cualquier discrepancia en el código o para la edición de cualquier parte del código fuente de esta página.