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 91% complete.

Outdated translations are marked like this.
Other languages:
العربية • ‎Deutsch • ‎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").



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 componentel Hello World!, o puedes descargar directamente el 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.

Important! Around version 3.8 the Joomla developers started changing the naming of Joomla classes and where they were stored in the directory structure. Many of the tutorial steps and videos refer to the old naming convention. To find the equivalent new class and where it's stored, look in your libraries/classmap.php file.

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