Absolute Basics of How a Component Functions/es: Difference between revisions

Latest revision as of 20:05, 12 December 2023

Este artículo está pensado para principiantes en Joomlaǃ; está diseñado para explicar que es un componente en Joomlaǃ y cómo funciona. Como un componente específico de ejemplo beneficiará el tutorial, este artículo se refiere al ejemplo del componente llamado Hello Worldǃ.

¿Qué es un Componente de Joomla!?

Un componente es un tipo de extensión de Joomla! . Los componentes son las principales unidades funcionales de Joomla!; pueden verse como mini-aplicaciones. Una analogía fácil sería considerar que Joomla! es el sistema operativo y los componentes son las aplicaciones de escritorio. Creado por un componente, se muestra en el centro del área de contenido principal de una plantilla (dependiendo de la plantilla).

La mayoría de los componentes tienen dos partes principales: la parte de administración y la parte del sitio o interfaz pública. La parte del sitio es lo que se usa para generar las páginas de su sitio web cuando lo solicitan los visitantes, durante una operación normal del sitio web. La parte de administración es la que proporciona una interfaz para configurar y gestionar los distintos aspectos del componente y es accesible a través de la aplicación de administración de Joomla!.

Joomla! viene "de serie" con varios componentes básicos, como el sistema de gestión de contenidos, formularios de contacto y enlaces web.

Ver también: Módulo, Plugin, Plantilla

En el framework de Joomla!, los componentes pueden ser diseñados utilizando un simple modelo (devuelve código HTML de la página solicitada) o el patrón Modelo-Vista-Controlador (en adelante, MVC).

Introducción a MVC

MVC es un patrón de diseño de software que puede ser utilizado para organizar el código de tal manera que la lógica de negocio y la presentación de datos esten separados. La premisa detrás de este enfoque es que si la lógica de negocios se agrupa en una sección, a continuación, la interfaz y la interacción con el usuario que rodea a los datos puede ser modificada y personalizada sin tener que reprogramar la lógica de negocio. MVC fue desarrollado originalmente para el mapa de la entrada tradicional, procesamiento, roles de salida dentro de una lógica de la arquitectura GUI.

Modelo

El modelo es la parte del componente que encapsula los datos de la aplicación. A menudo proporciona rutinas para manejar y manipular este tipo de datos de una manera significativa, además de las rutinas que recuperar los datos desde el modelo. En general, la técnica de acceso a los datos subyacentes debe ser encapsulada en el modelo. De esta manera, si una aplicación se mueve de un sistema que utiliza un archivo plano para almacenar su información a un sistema que utiliza una base de datos, el modelo es el único elemento que necesita ser cambiado, no la vista o el controlador.

Vista

La vista es la parte del componente que se utiliza para presentar los datos a partir del modelo de una manera que sea adecuada para la interacción. Para una aplicación basada en la web, la vista general sería una página HTML que se devuelve al usuario. La vista extrae los datos del modelo (que se pasan desde el controlador) y alimenta los datos en una plantilla que se rellena y se presentan al usuario. La vista no provoca que los datos sean modificados de ninguna manera, sólo se muestran los datos recibidos del modelo.

Controlador

El controlador es responsable de responder a las acciones del usuario. En el caso de una aplicación web, una acción del usuario es generalmente una solicitud de página. El controlador determinará qué solicitud ha sido realizada por el usuario y responderá de forma adecuada mediante la activación del modelo para manipular los datos de forma adecuada y pasar el modelo a la vista. El controlador no mostrará los datos en el modelo, sólo activa los métodos del modelo que modifican los datos y, a continuación, pasan del modelo a la vista que muestra los datos.

Explicación sobre el componente en el Framework de Joomla!

Modelo

En el framework Joomla, los modelos son responsables de la gestión de los datos. La primera función que se debe escribir en un modelo es una función get. Esta devuelve los datos a quien la llame. En nuestro caso, el que llama será la vista HelloWorldViewHelloWorld. De forma predeterminada, el modelo denominado HelloWorldModelHelloWorld que reside en site/models/helloworld.php es el modelo principal asociado a esta vista.

Así que vamos a echar un vistazo rápido a las convenciones de nomenclatura con un ejemplo, ya que la convención de nomenclatura es la magia, que hace todo el trabajo:

La clase HelloWorldViewHelloWorld reside en site/views/helloworld/view.html.php y hará uso de la clase HelloWorldModelHelloWorld en el archivo site/models/helloworld.php

Así que vamos a suponer que queremos utilizar una vista imaginaria fluffy', tendría que tener:

La clase HelloWorldViewFluffy, que reside en site/views/fluffy/view.html.php. La vista va a hacer uso de HelloWorldModelFluffy en el archivo site/models/fluffy.php. Nota: la pantalla de la vista: site/views/fluffy/tmpl/default.php es necesaria para que este ejemplo funcione. Romper cualquiera de estas convenciones en negrita dará lugar a errores o una página en blanco.

Acceso a un Componente Joomlaǃ

En primer lugar, debemos acceder a la plataforma de Joomla!, a la que siempre se accede a través de un único punto de entrada. Utilizando tu navegador web preferido, ve a la siguiente URL:

1	acceso de usuario	`<tusitio>/joomla/index.php`
2	acceso de administrador	`<tusitio>/joomla/administrator/index.php`

Ejemplo Hola Mundo!: localhost/joomla/index.php Puedes utilizar la dirección URL del componente, o un Menú con el fin de navegar al componente. En este artículo vamos a discutir el uso de la dirección URL.

1	acceso de usuario	`<tusitio>/joomla/index.php?option=com_<nombre_componente>`
2	acceso de administrador	`<tusitio>/joomla/administrator/index.php?option=com_<nombre_componente>`

Ejemplo Hola Mundo!: localhost/joomla/index.php?option=com_helloworld

MVC Estructura Básica de Directorios

Los componentes se almacenan en un directorio dentro de la instalación de tu sitio Joomla!, específicamente en:

htdocs/<ruta_a_joomla>/components/com_<nombre_componente>/ .

El componente Hello World! debe ser almacenado en htdocs/<ruta_a_joomla>/components/com_helloworld/.

Un componente básico contendrá los siguientes archivos dentro de su directorioː

Un archivo html que es sólo un archivo de seguridad con un color de fondo: index.html

Un archivo php que representa el controlador en si mismo: controller.php

Un archivo php que carga la clase del controladorː <nombre_componente>.php

Un archivo php que representa al modelo itselfː models/<nombre_componente>.php

Otro archivo html para el control del acceso directo: models/index.html

Un archivo php que contiene la vista predeterminada: views/<nombre_componente>/tmpl/default.php

Un archivo xml para agregar los ítems del menú tipo: views/<nombre_componente>/tmpl/default.xml

Otro archivo html para el control del acceso directo: views/<nombre_componente>/tmpl/index.html

Otro archivo html para el control del acceso directo: views/<nombre_componente>/index.html

Un archivo php para mostrar la vistaː views/<nombre_componente>/view.html.php

JEXEC

La siguiente línea se encuentra comúnmente en el inicio de los archivos PHP de Joomla!:

<?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.

Tutoriales sobre el Diseño de un Componente MVC

Para aprender a diseñar tu propio Componente MVC, por favor estudia el tutorial para tu versión de Joomla!.

Joomla! 3.x

@@ Line 1: / Line 1: @@
 <noinclude><languages /></noinclude>
-This article is designed for Joomlaǃ beginners; it is designed to explain what a Joomlaǃ component is, and how it functions. When a specific component example will benefit the tutorial, this article will refer to an example component named Hello Worldǃ.
+<div class="mw-translate-fuzzy">
+Este artículo está pensado para principiantes en Joomlaǃ; está diseñado para explicar que es un componente en Joomlaǃ y cómo funciona. Como un componente específico de ejemplo beneficiará el tutorial, este artículo se refiere al ejemplo del componente llamado ''Hello Worldǃ''.
-==What is a Joomlaǃ Component==
+</div>
-A component is a kind of Joomla! extension. Components are the main functional units of Joomla!; they can be seen as mini-applications. An easy analogy would be that Joomla! is the operating system and the components are desktop applications. Created by a component, content is usually displayed in the center of the main content area of a template (depending on the template).
+==¿Qué es un Componente de Joomla!?==
+{{Chunk:Component/es}}
-Most components have two main parts: an administrator part and a site part. The site part is what is used to render pages of your site when they are requested by your site visitors during normal site operation. The administrator part provides an interface to configure and manage different aspects of the component and is accessible through the Joomla! administrator application.
+En el framework de Joomla!, los componentes pueden ser diseñados utilizando un simple modelo (devuelve código HTML de la página solicitada) o el patrón Modelo-Vista-Controlador (en adelante, MVC).
+==Introducción a MVC==
-In the Joomla! framework, components can be designed using a flat model(returns HTML code for the requested page) or Model-View-Controller (herein referred to as MVC) pattern.
+<div class="mw-translate-fuzzy">
+MVC es un patrón de diseño de software que puede ser utilizado para organizar el código de tal manera que la lógica de negocio y la presentación de datos esten separados. La premisa detrás de este enfoque es que si la lógica de negocios se agrupa en una sección, a continuación, la interfaz y la interacción con el usuario que rodea a los datos puede ser modificada y personalizada sin tener que reprogramar la lógica de negocio. MVC fue desarrollado originalmente para el mapa de la entrada tradicional, procesamiento, roles de salida dentro de una lógica de la arquitectura GUI.
-==Introduction to MVC==
+</div>
-MVC is a software design pattern that can be used to organize code in such a way that the business logic and data presentation are seperate. The premise behind this approach is that if the business logic is grouped into one section, then the interface and user interaction that surrounds the data can be revised and customized without having to reprogram the business logic. MVC was originally developed to map the traditional input, processing, output roles into a logical GUI architecture.
+===Modelo===
+El modelo es la parte del componente que encapsula los datos de la aplicación. A menudo proporciona rutinas para manejar y manipular este tipo de datos de una manera significativa, además de las rutinas que recuperar los datos desde el modelo. En general, la técnica de acceso a los datos subyacentes debe ser encapsulada en el modelo. De esta manera, si una aplicación se mueve de un sistema que utiliza un archivo plano para almacenar su información a un sistema que utiliza una base de datos, el modelo es el único elemento que necesita ser cambiado, no la vista o el controlador.
-===Model===
+===Vista===
-The model is the part of the component that encapsulates the application's data. It will often provide routines to manage and manipulate this data in a meaningful way in addition to routines that retrieve the data from the model. In general, the underlying data access technique should be encapsulated in the model. In this way, if an application is to be moved from a system that utilizes a flat file to store its information to as system that uses a database, the model is the only element that needs to be changed, not the view or the controller.
+La vista es la parte del componente que se utiliza para presentar los datos a partir del modelo de una manera que sea adecuada para la interacción. Para una aplicación basada en la web, la vista general sería una página HTML que se devuelve al usuario. La vista extrae los datos del modelo (que se pasan desde el controlador) y alimenta los datos en una plantilla que se rellena y se presentan al usuario. La vista no provoca que los datos sean modificados de ninguna manera, sólo se muestran los datos recibidos del modelo.
+===Controlador===
-===View===
+El controlador es responsable de responder a las acciones del usuario. En el caso de una aplicación web, una acción del usuario es generalmente una solicitud de página. El controlador determinará qué solicitud ha sido realizada por el usuario y responderá de forma adecuada mediante la activación del modelo para manipular los datos de forma adecuada y pasar el modelo a la vista. El controlador no mostrará los datos en el modelo, sólo activa los métodos del modelo que modifican los datos y, a continuación, pasan del modelo a la vista que muestra los datos.
-The view is the part of the component that is used to render the data from the model in a manner that is suitable for interaction. For a web-based application, the view would generally be an HTML page that is returned to the user. The view pulls data from the model (which is passed to it from the controller) and feeds the data into a template which is populated and presented to the user. The view does not cause the data to be modified in any way, it only displays the data received from the model.
+== Explicación sobre el componente en el Framework de Joomla! ==
+=== Modelo ===
-===Controller===
+<div class="mw-translate-fuzzy">
-The controller is responsible for responding to user actions. In the case of a web application, a user action is generally a page request. The controller will determine what request is being made by the user and respond appropriately by triggering the model to manipulate the data appropriately and passing the model into the view. The controller does not display the data in the model, it only triggers methods in the model which modify the data, and then pass the model into the view which displays the data.
+En el framework Joomla, los modelos son responsables de la gestión de los datos. La primera función que se debe escribir en un modelo es una función ''get''. Esta devuelve los datos a quien la llame. En nuestro caso, el que llama será la vista ''HelloWorldViewHelloWorld''. De forma predeterminada, el modelo denominado ''HelloWorldModelHelloWorld'' que reside en ''site/models/helloworld.php'' es el modelo principal asociado a esta vista.
+</div>
-== Joomla! Component Framework Explained ==
+<div class="mw-translate-fuzzy">
+Así que vamos a echar un vistazo rápido a las convenciones de nomenclatura con un ejemplo, ya que la convención de nomenclatura es la magia, que hace todo el trabajo:
-=== Model ===
+</div>
-In the Joomla framework, models are responsible for managing the data. The first function that has to be written for a model is a get function. It returns data to the caller. For this example, the caller will be the HelloWorldViewHelloWorld view. By default, the model named HelloWorldModelHelloWorld residing in site/models/helloworld.php is the main model associated to this view.
+La clase ''HelloWorldView'''HelloWorld''''' reside en ''site/views/'''helloworld'''/view.html.php'' y hará uso de la clase ''HelloWorldModel'''HelloWorld''''' en el archivo ''site/models/'''helloworld'''.php''
+<div class="mw-translate-fuzzy">
-So let's have a quick look at the naming conventions with an example, since the naming convention are the actual magic, that make everything work:
+Así que vamos a suponer que queremos utilizar una vista imaginaria ''fluffy', tendría que tener:
+</div>
-The class ''HelloWorldView'''HelloWorld''''' resides in ''site/views/'''helloworld'''/view.html.php'' and will make use of the class ''HelloWorldModel'''HelloWorld''''' in the file ''site/models/'''helloworld'''.php''
+La clase ''HelloWorldView'''Fluffy''''', que reside en ''site/views/'''fluffy'''/view.html.php''. La vista va a hacer uso de ''HelloWorldModel'''Fluffy''''' en el archivo ''site/models/'''fluffy'''.php''. Nota: la pantalla de la vista: ''site/views/'''fluffy'''/tmpl/default.php'' es necesaria para que este ejemplo funcione.
+Romper cualquiera de estas convenciones en negrita dará lugar a errores o una página en blanco.
-Do let's just assume we want to use an imaginary view ''fluffy'', you would have to have:
+==Acceso a un Componente Joomlaǃ==
+En primer lugar, debemos acceder a la plataforma de Joomla!, a la que siempre se accede a través de un único punto de entrada. Utilizando tu navegador web preferido, ve a la siguiente URL:
-The class ''HelloWorldView'''Fluffy''''' which resides in ''site/views/'''fluffy'''/view.html.php''. The view will make use of ''HelloWorldModel'''Fluffy''''' in the file ''site/models/'''fluffy'''.php''. Note: the actual screen of the view: ''site/views/'''fluffy'''/tmpl/default.php'' is required as well to make this example work.
-Breaking any of these bold conventions will lead to errors or a blank page.
-==Accessing a Joomlaǃ Component==
-First we need to access the Joomla! platform, which is always accessed through a single point of entry. Using your preferred web browser, navigate to the following URL:
 {| border=1
   | 1
-  | user access
+  | acceso de usuario
-  | <tt><yoursite>/joomla/index.php</tt>
+  | <div class="mw-translate-fuzzy">
+<tt><tusitio>/joomla/index.php</tt>
+</div>
   |-
   | 2
-  | administrator access
+  | acceso de administrador
-  | <tt><yoursite>/joomla/administrator/index.php</tt>
+  | <div class="mw-translate-fuzzy">
+<tt><tusitio>/joomla/administrator/index.php</tt>
+</div>
   |}
+Ejemplo Hola Mundo!: ''localhost/joomla/index.php''
-Hello World! example: <tt>localhost/joomla/index.php</tt>
+Puedes utilizar la dirección URL del componente, o un [[#Menu| Menú]] con el fin de navegar al componente. En este artículo vamos a discutir el uso de la dirección URL.
-You can use the URL of the component, or a [[#Menu| Menu]] in order to navigate to the component. In this article we will discuss using the URL.
 {| border=1
   | 1
-  | user access
+  | acceso de usuario
-  | <tt><yoursite>/joomla/index.php?option=com_<component_name></tt>
+  | <div class="mw-translate-fuzzy">
+<tt><tusitio>/joomla/index.php?option=com_<nombre_componente></tt>
+</div>
   |-
   | 2
-  | administrator access
+  | acceso de administrador
-  | <tt><yoursite>/joomla/administrator/index.php?option=com_<component_name></tt>
+  | <div class="mw-translate-fuzzy">
+<tt><tusitio>/joomla/administrator/index.php?option=com_<nombre_componente></tt>
+</div>
   |}
+Ejemplo Hola Mundo!: ''localhost/joomla/index.php?option=com_helloworld''
-Hello World! example: <tt>localhost/joomla/index.php?option=com_helloworld</tt>
+==MVC Estructura Básica de Directorios==
+<div class="mw-translate-fuzzy">
-==MVC Basic Directory Structure==
+Los componentes se almacenan en un directorio dentro de la instalación de tu sitio Joomla!, específicamente en:
-Components are stored in a directory within your Joomla! installation, specifically at:
+*<tt>htdocs/<ruta_a_joomla>/components/com_<nombre_componente>/</tt> .
-*<tt><path_to_joomla>/htdocs/components/com_<component_name>/</tt> .
+</div>
+<div class="mw-translate-fuzzy">
-The Hello World! component would be stored in <tt> <path_to_joomla>/htdocs/components/com_helloworld/</tt>.
+El componente ''Hello World!'' debe ser almacenado en <tt>htdocs/<ruta_a_joomla>/components/com_helloworld/</tt>.
+</div>
-A basic component will contain the following files within its directoryː
+Un componente básico contendrá los siguientes archivos dentro de su directorioː
-*A html file that allows control of the background colorː <tt>index.html</tt>
+<div class="mw-translate-fuzzy">
-*A php file that represents the controller itselfː <tt>controller.php</tt>
+*Un archivo html que es sólo un archivo de seguridad con un color de fondo: <tt>index.html</tt>
-*A php file that loads the controller classː <tt><component_name>.php</tt>
+</div>
-*A php file that represents the model itselfː <tt>models/<component_name>.php</tt>
+<div class="mw-translate-fuzzy">
-*Another html file for background controlː <tt>models/index.html<tt>
+*Un archivo php que representa el controlador en si mismo: <tt>controller.php</tt>
-*A php file containing the default viewː <tt>views/<component_name>/tmpl/default.php</tt>
+</div>
-*A xml file for adding a menu item typeː <tt>views/<component_name>/tmpl/default.xml</tt>
+<div class="mw-translate-fuzzy">
-*Another html file for background controlː <tt>views/<component_name>/tmpl/index.html</tt>
+*Un archivo php que carga la clase del controladorː <tt><nombre_componente>.php</tt>
-*Another html file for background controlː <tt>views/<component_name>/index.html</tt>
+</div>
-*A php file for displaying the viewː <tt>views/<component_name>/view.html.php</tt>
+<div class="mw-translate-fuzzy">
+*Un archivo php que representa al modelo itselfː <tt>models/<nombre_componente>.php</tt>
+</div>
+<div class="mw-translate-fuzzy">
+*Otro archivo html para el control del acceso directo: <tt>models/index.html</tt>
+</div>
+<div class="mw-translate-fuzzy">
+*Un archivo php que contiene la vista predeterminada: <tt>views/<nombre_componente>/tmpl/default.php</tt>
+</div>
+<div class="mw-translate-fuzzy">
+*Un archivo xml para agregar los ítems del menú tipo: <tt>views/<nombre_componente>/tmpl/default.xml</tt>
+</div>
+<div class="mw-translate-fuzzy">
+*Otro archivo html para el control del acceso directo: <tt>views/<nombre_componente>/tmpl/index.html</tt>
+</div>
+<div class="mw-translate-fuzzy">
+*Otro archivo html para el control del acceso directo: <tt>views/<nombre_componente>/index.html</tt>
+</div>
+<div class="mw-translate-fuzzy">
+*Un archivo php para mostrar la vistaː <tt>views/<nombre_componente>/view.html.php</tt>
+</div>
 ==JEXEC==
-The following line is commonly found at the start of Joomla! PHP files:
+La siguiente línea se encuentra comúnmente en el inicio de los archivos PHP de Joomla!:
+<syntaxhighlight lang="php" line>
-<source lang="php">
 <?php
      defined('_JEXEC') or die('Restricted Access');
-</source>
+</syntaxhighlight>
+<div class="mw-translate-fuzzy">
-This enables for a secure entry point into the Joomla! platform. [[S:MyLanguage/JEXEC| JEXEC]] contains a detailed explanation.
+Esto permite un punto de entrada seguro a la plataforma de Joomla!. [[S:MyLanguage/JEXEC| JEXEC]] contiene una explicación detallada.
+</div>
-==Tutorials on Designing a MVC Component==
+==Tutoriales sobre el Diseño de un Componente MVC==
-To learn how to design your own MVC Component, please complete the tutorial for your Joomla! version.
+Para aprender a diseñar tu propio Componente MVC, por favor estudia el tutorial para tu versión de Joomla!.
 * [[S:MyLanguage/J1.5:Developing_a_MVC_Component/Introduction| Joomla! 1.5]]
 * [[S:MyLanguage/J2.5:Developing_a_MVC_Component| Joomla! 2.5]]
+<div class="mw-translate-fuzzy">
 * [[S:MyLanguage/J3.x:Developing_an_MVC_Component/Introduction| Joomla! 3.x]]
+</div>
 <noinclude>
-[[Category:Tutorials]]
+[[Category:Tutorials{{#translation:}}]]
-[[Category:Explanations]]
+[[Category:Explanations{{#translation:}}]]
-[[Category:Component Development]]
+[[Category:Component Development{{#translation:}}]]
-[[Category:Beginner Development]]
+[[Category:Beginner Development{{#translation:}}]]
-[[Category:Development Recommended Reading]]
+[[Category:Development Recommended Reading{{#translation:}}]]
 </noinclude>

Absolute Basics of How a Component Functions/es: Difference between revisions

From Joomla! Documentation

Latest revision as of 20:05, 12 December 2023

Contents

¿Qué es un Componente de Joomla!?

Introducción a MVC

Modelo

Vista

Controlador

Explicación sobre el componente en el Framework de Joomla!

Modelo

Acceso a un Componente Joomlaǃ

MVC Estructura Básica de Directorios

JEXEC

Tutoriales sobre el Diseño de un Componente MVC