J3.x:Developing an MVC Component/Basic backend/es

Joomla! 

3.x

Tutorial

Desarrollo de un Componente MVC

Artículos de esta Serie

1. Introducción
2. Desarrollo de un Componente Básico

Agregar una vista a la parte del sitio

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

1. Agregar ACL

Agregar un archivo de secuencia de comandos instalar-desinstalar-actualizar

Agregar un formulario del lado cliente

1. Agregar una imagen
2. Agregar un mapa
3. Agregar AJAX
4. Agregar un alias

Usar la facilidad filtro de idioma

1. Agregar una Modal
2. Agregar Asociaciones
3. Agregar Comprobación
4. Agregar Ordenamiento
5. Agregar Niveles
6. Agregar Control de Versiones
7. Agregar Etiquetas
8. Agregar Accesos
9. Agregar procesos por lote
10. Agregar Caché
11. Agregar un Canal de Noticias

Agregar un servidor de actualización

1. Agregar campos personalizados
2. Upgrading to Joomla4

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

Introducción

Este artículo es parte del tutorial Desarrollo de un Componente MVC para Joomla! 3.2. Te invitamos a leer las partes anteriores del tutorial antes de leer esto.

Hay 2 videos (en inglés) asociados con este paso del tutorial, que cubren Estructura y paginación MVC y elementos HTML y código Javascript.

Lado servidor básico

El diseño de la interfaz del lado servidor nos lleva a crear al menos un tríptico Modelo-Vista-Controlador. Tenemos que modificar el punto de entrada del administrador de de nuestro componente, el archivo admin/helloworld.php.

admin/helloworld.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');

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

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

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

Crear el contralor general

El punto de entrada ahora recibe una instancia de un controlador HelloWorld prefijado. Vamos a crear un controlador básico para la parte del administrador:

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

/**
 * General Controller of HelloWorld component
 *
 * @package     Joomla.Administrator
 * @subpackage  com_helloworld
 * @since       0.0.7
 */
class HelloWorldController extends JControllerLegacy
{
	/**
	 * The default view for the display method.
	 *
	 * @var string
	 * @since 12.2
	 */
	protected $default_view = 'helloworlds';
}

Este controlador mostrará la vista 'HelloWorlds' de forma predeterminada.

Crear la vista

Con tu administrador y editor de archivos favoritos, crea un archivo de admin/views/helloworlds/view.html.php que contenga:

admin/views/helloworlds/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');

/**
 * HelloWorlds View
 *
 * @since  0.0.1
 */
class HelloWorldViewHelloWorlds 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)
	{
		// Get data from the model
		$this->items		= $this->get('Items');
		$this->pagination	= $this->get('Pagination');

		// Check for errors.
		if (count($errors = $this->get('Errors')))
		{
			JError::raiseError(500, implode('<br />', $errors));

			return false;
		}

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

En Joomla, las vistas muestran los datos en la pantalla usando el diseño. Con tu administrador y editor de archivos favoritos, coloca un archivo admin/views/helloworlds/tmpl/default.php que contenga

admin/views/helloworlds/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');
?>
<form action="index.php?option=com_helloworld&view=helloworlds" method="post" id="adminForm" name="adminForm">
	<table class="table table-striped table-hover">
		<thead>
		<tr>
			<th width="1%"><?php echo JText::_('COM_HELLOWORLD_NUM'); ?></th>
			<th width="2%">
				<?php echo JHtml::_('grid.checkall'); ?>
			</th>
			<th width="90%">
				<?php echo JText::_('COM_HELLOWORLD_HELLOWORLDS_NAME') ;?>
			</th>
			<th width="5%">
				<?php echo JText::_('COM_HELLOWORLD_PUBLISHED'); ?>
			</th>
			<th width="2%">
				<?php echo JText::_('COM_HELLOWORLD_ID'); ?>
			</th>
		</tr>
		</thead>
		<tfoot>
			<tr>
				<td colspan="5">
					<?php echo $this->pagination->getListFooter(); ?>
				</td>
			</tr>
		</tfoot>
		<tbody>
			<?php if (!empty($this->items)) : ?>
				<?php foreach ($this->items as $i => $row) : ?>

					<tr>
						<td>
							<?php echo $this->pagination->getRowOffset($i); ?>
						</td>
						<td>
							<?php echo JHtml::_('grid.id', $i, $row->id); ?>
						</td>
						<td>
							<?php echo $row->greeting; ?>
						</td>
						<td align="center">
							<?php echo JHtml::_('jgrid.published', $row->published, $i, 'helloworlds.', true, 'cb'); ?>
						</td>
						<td align="center">
							<?php echo $row->id; ?>
						</td>
					</tr>
				<?php endforeach; ?>
			<?php endif; ?>
		</tbody>
	</table>
</form>

COM_HELLOWORLD_HELLOWORLDS_NAME, COM_HELLOWORLD_ID y los otros son los marcadores de posición que más tarde serán reemplazados con un texto del idioma específico. JText::_ método de traducir una cadena en el idioma actual.

checkAll es una función javascript definida en el núcleo de Joomla capaz de controlar todos los elementos.

JHtml::_ es una función auxiliar capaz de mostrar varias salidas HTML. En este caso, se mostrará una casilla de verificación para el elemento.

JPagination es una clase de Joomla capaz de gestionar y mostrar el objeto pagination.

Crear el modelo

La vista HelloWorlds consulta al modelo por los datos. En Joomla, hay una clase capaz de gestionar una lista de datos: JModelList. la clase JModelList y sus clases heredadas sólo necesitan de un método:

• getListQuery que construye una consulta SQL

y dos estados:

• list.start para la determinar la salida de la lista
• list.limit para la determinar la longitud de la lista

Los métodos getItems y getPagination se definen en la clase JModelList. Ellos no necesitan ser definidos en la clase HelloWorldModelHelloWorlds.

admin/models/helloworlds.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');

/**
 * HelloWorldList Model
 *
 * @since  0.0.1
 */
class HelloWorldModelHelloWorlds extends JModelList
{
	/**
	 * Method to build an SQL query to load the list data.
	 *
	 * @return      string  An SQL query
	 */
	protected function getListQuery()
	{
		// Initialize variables.
		$db    = JFactory::getDbo();
		$query = $db->getQuery(true);

		// Create the base select statement.
		$query->select('*')
                ->from($db->quoteName('#__helloworld'));

		return $query;
	}
}

El método _populateState es, de forma predeterminada, llamado automáticamente cuando un estado es leído por el método getState.

Empaquetado del componente

El contenido de tu directorio de código

• helloworld.xml
• site/helloworld.php
• site/index.html
• site/controller.php
• site/views/index.html
• site/views/helloworld/index.html
• site/views/helloworld/view.html.php
• site/views/helloworld/tmpl/index.html
• site/views/helloworld/tmpl/default.xml
• site/views/helloworld/tmpl/default.php
• site/models/index.html
• site/models/helloworld.php
• admin/index.html
• admin/helloworld.php
• admin/controller.php
• admin/sql/index.html
• admin/sql/install.mysql.utf8.sql
• admin/sql/uninstall.mysql.utf8.sql
• admin/sql/updates/index.html
• admin/sql/updates/mysql/index.html
• admin/sql/updates/mysql/0.0.1.sql
• admin/sql/updates/mysql/0.0.6.sql
• admin/models/index.html
• admin/models/fields/index.html
• admin/models/fields/helloworld.php
• admin/models/helloworlds.php
• admin/views/index.html
• admin/views/helloworlds/index.html
• admin/views/helloworlds/view.html.php
• admin/views/helloworlds/tmpl/index.html
• admin/views/helloworlds/tmpl/default.php
• admin/tables/index.html
• admin/tables/helloworld.php

Crea un archivo comprimido de este directorio o descarga directamente el archivo e instálalo con el gestor de extensiones de Joomla. Puedes agregar un elemento de menú de este componente usando el gestor de menús en el lado del servidor.

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.7</version>
	<!-- The description is optional and defaults to the name -->
	<description>Description of the Hello World component ...</description>

	<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 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>
		<folder>models</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>
			<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>
		</files>
	</administration>

</extension>

Ahora puedes ver en tu componente hello-world un array con dos columnas, dos filas y casillas de verificación. Puede hacer clic en las casillas de verificación para seleccionar las diferentes opciones que desees.

General Information

Colaboradores

• Gunjan Patel
• Christophe Demko
• Ozgur Aksu
• Preston Smith
• Scionescire

Prev: Utilizando la base de datos

Sig: Agregagar gestión de idioma