J3.x

Desarrollo de un Componente MVC/Desarrollo de un Componente Básico

From Joomla! Documentation

< J3.x:Developing an MVC Component
This page is a translated version of the page J3.x:Developing an MVC Component/Developing a Basic Component and the translation is 100% complete.
Other languages:
Deutsch • ‎English • ‎Nederlands • ‎español • ‎français • ‎italiano • ‎português do Brasil • ‎русский • ‎العربية • ‎中文(中国大陆)‎ • ‎中文(台灣)‎
Joomla! 
3.x
Tutorial
Desarrollo de un Componente MVC

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



Notas

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.

Si has usado Joomla! antes de leer este tutorial, has notado que las extensiones se instalan mediante un archivo comprimido que contiene todas las cosas necesarias para la instalación y desinstalación de ellas.

Puedes seguir los pasos que hay a continuación para crear e componente Hello World!, o puedes descargar los archivos desde el repositorio git archivo

Estas son algunas de las diapositivas en base a estos documentos para explicar una creación básica para avanzar con componentes Joomla!.
Ayuda sobre Componente Joomla! Básico (en inglés)
Ayuda sobre Componente Joomla! Avanzado (en inglés)

También hay una serie de videos que acompañan los pasos del tutorial, comenzando por
Step 1, Desarrollando un componente básico (en inglés) y puedes acceder a las diapositivas (en inglés) que se utilizan en la serie de presentaciones de video en Slides.

¡Importante! Alrededor de la versión 3.8, los desarrolladores de Joomla comenzaron a cambiar el nombre de las clases de Joomla y el lugar donde se almacenaban en la estructura de directorios. Muchos de los pasos y videos del tutorial se refieren a la antigua convención de nomenclatura. Para encontrar la nueva clase equivalente y dónde está almacenada, busque en el archivo library/classmap.php.

Cómo añadir un componente para Joomla!

En este artículo vamos a cubrir cómo crear e instalar un componente Joomla! básico. Para este ejemplo vamos a trabajar con el componente Hello World!.

Para empezar, debes usar tu administrador de archivos preferido para crear un directorio para el componente Hello World!. Este directorio puede estar en cualquier lugar en el sistema de archivos, mientras que sea fuera de tu directorio de instalación de Joomla!. Para este ejemplo vamos a nombrar el directorio com_helloworld, pero este directorio puede tener cualquier nombre.

Lo siguiente, dentro de este directorio, tenemos que crear algunos archivos. Utilizando tu administrador de archivos preferido, crea los siguientes archivos; luego de crear los archivos, agrega el código fuente para cada archivo que se encuentra en Detalle de los 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 admin/index.html evita que se liste el contenido del directorio del servidor web
5 admin/helloworld.php este es el punto de entrada del componente Hello World! en el administrador
6 admin/sql/index.html evita que se liste el contenido del directorio del servidor web
7 admin/sql/updates/index.html evita que se liste el contenido del directorio del servidor web
8 admin/sql/updates/mysql/index.html evita que se liste el contenido del directorio del servidor web
9 admin/sql/updates/mysql/0.0.1.sql es un archivo que permite inicializar el esquema de versiones del componente com_helloworld.

Instalación del Componente Hello World!

Utilizando tu administrador de archivos preferido, crea un archivo .zip de este directorio. Para este ejemplo vamos a nombrar el archivo com_helloworld.zip, de nuevo, este archivo podría tener cualquier nombre.

Ahora necesitamos instalar el componente Hello World!. Hay dos maneras de hacer esto, ambos están cubiertos en Instalar una Extensión. Aquí vamos a cubrir el método mediante el Gestor de Extensiones de Joomla!.

  • Con tu navegador web preferido, ve al panel del Administrador de tu sitio Joomla!. La dirección sería <tusitio>/joomla/administrator/index.php. Para este ejemplo vamos a navegar a localhost/joomla/administrator/index.php.
  • Has clic en Extensiones    Gestionar    Instalar    Subir Paquete    Examinar...
  • Desplázate y Selecciona el Archivo
  • Has clic en Subir e instalar

Nota: Debes ver un mensaje que te permite saber si la instalación se realizó correctamente o no.

Puedes probar esta función básica del componente entrando en la página Hello World! del sitio y del administrador de tu sitio web Joomla!.

  • Utilizando tu navegador web preferido, ve a la página del componente Hello World! que se encuentra del lado cliente de tu sitio web. La dirección sería <tusitio>/joomla/index.php?option=com_helloworld. Para este ejemplo vamos a navegar a localhost/joomla/index.php?option=com_helloworld.
  • Utiliza tu navegador web preferido, ve a la página del componente Hello World! situado del lado administrador de tu sitio web. La dirección sería <tusitio>/joomla/administrator/index.php?option=com_helloworld. Para este ejemplo vamos a navegar a localhost/joomla/administrator/index.php?option=com_helloworld.

También se puedes ver que el componente Hello World! esta presente en el administrador del sitio de tu instalación de Joomla! dentro del menú Componentes.

Detalle de los Archivos

admin/sql/updates/mysql/0.0.1.sql es un archivo vacío que permite inicializar el esquema de versiones del componente com_helloworld.

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.1</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>
	</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>

site/helloworld.php

Hello World

admin/helloworld.php

Hello World administration

index.html

común a todas las carpetas

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


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 admin/index.html evita que se liste el contenido del directorio del servidor web
5 admin/helloworld.php este es el punto de entrada del componente Hello World! en el administrador
6 admin/sql/index.html evita que se liste el contenido del directorio del servidor web
7 admin/sql/updates/index.html evita que se liste el contenido del directorio del servidor web
8 admin/sql/updates/mysql/index.html evita que se liste el contenido del directorio del servidor web
9 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

Un repositorio de git actualizado que se encuentra a lo largo de este tutorial está disponible en https://github.com/Stevec4/Joomla-HelloWorld para cualquier discrepancia de código o ediciones, por favor realiza una solicitud de extracción.