Desarrollo de un Componente MVC/Agregar una vista a la parte del sitio
From Joomla! Documentation
< J3.x:Developing an MVC Component
Artículos de esta Serie
Agregar un tipo de menú a la parte del sitio
Agregar un modelo a la parte del sitio
Agregar una variable de petición en el tipo de menú
Utilizando la base de datos
Lado servidor básico
Agregar gestión de idioma
Agregar acciones del lado servidor
Agregar decoraciones del lado servidor
Agregar verificaciones
Agregar categorías
Agregar configuración
Agregar un archivo de secuencia de comandos instalar-desinstalar-actualizar
Agregar un formulario del lado cliente
Usar la facilidad filtro de idioma
- Agregar una Modal
- Agregar Asociaciones
- Agregar Comprobación
- Agregar Ordenamiento
- Agregar Niveles
- Agregar Control de Versiones
- Agregar Etiquetas
- Agregar Accesos
- Agregar procesos por lote
- Agregar Caché
- Agregar un Canal de Noticias
Agregar un servidor de actualización
Esta es una serie multi-artículos de tutoriales sobre cómo desarrollar un Componente Modelo-Vista-Controlador para Joomla! Versión
.
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
- Este artículo es parte del tutorial Desarrollo de un Componente MVC para Joomla! 3.x. Te invitamos a leer las partes anteriores del tutorial antes de leer esto.
- 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.
- Puedes ver un video (en inglés) asociado con este paso del tutorial en Paso 2, Agregar una vista.
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. |
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.