000. Creating a Simple Component for Joomla! 4.x Introduction

Creating a Simple Component for Joomla! 4.x - Introduction

Note

If you are new to Joomla!, please read Absolute Basics of How a Component Functions.

This tutorial is for Joomlaǃ 4. For creating a component for Joomlaǃ 3 see Developing a Model-View-Controller Component/3.x.

You need Joomla! 4.x for this tutorial (as of writing currently Joomla! 4.0.0-alpha11-dev). You can download Joomla! 4 at GitHub, on the Developer Website or you can create a free website at https://launch.joomla.org.

Who is this tutorial for

This tutorial does not create a practical example. I intentionally kept everything general. My main concern is to show you how Joomla! is working. At the end you can replace the name 'foo' in all files with the name of your component and you have a basis for your work.

Thus, this tutorial is primarily for programmers who want to create a new component.
The tutorial is also a help for programmers of a Joomla! 3 component if you want to expand your component for Joomla! 4. For example, if you want to work on the validation, then in Chapter 11 you'll find what you need - nothing more, nothing less.

The structure of this tutorial

Each chapter builds on the previous builds. However, if you are interested in a particular topic, you can look at a separate chapter.

You can see many examples of components in the standard Joomla! install. For example

• Content
• Banners
• Tags or
• Contact

In each component you can see certain implementations. Each component is complex, and finding and separating certain elements of implementation, such as page numbering, Custom Fields ... is laborious and cumbersome.

The purpose of this tutorial is to help you create a component for Joomla! 4, using the many built-in Joomla implementations. You do not reinvent the wheel at everything. Joomla! offers quite a lot of standard features out of the box.

This tutorial will explain how to go about creating a simple component. Through this tutorial you will learn the basic file structure of a Joomlaǃ4 component. This basic structure can then be expanded to produce more complex components.

If you want to get started right away, go to chapter Developing a Basic Component. Below are a few theoretical comments on Joomla! 4, which you can read later.

Asides

The file autoload_psr4.php

During the installation entries are made in /libraries/autoload_psr4.php. That is new in Joomla 4.

Namespace

Notice the namespace tag in the top of each file

namespace Joomla\Component\Foos\Administrator\View\Foos;

and as a tag in the manifest file

<namespace>Joomla\Component\Foos</namespace>.

Why use namespaces?

• Organizing classes in a defined structure
• Auto loaded through the classloader, no manual include or require anymore
• Example ContentModelArticles becomes \Joomla\Component\Content\Administrator\Model\ArticlesModel
• JLoader can handle the namespaces automatically
• We can distinguish between front end and back end classes
• Files can be found in /libraries/src

Capitalisation of folder names

You may notice that some of the Joomla! 4.x folder and file names begin with upper case letters and others begin with lower case letters. At first, this seems messy. At second glance, this makes sense.

The folders with upper case do contain namespaced PHP classes. The ones with lower case XML files, templates files, etc. There are a few ones with lower case because of BC like the helpers.

For more information see: https://github.com/joomla/joomla-cms/issues/22990

The classes get more meaningful names

The component MVC classes have more meaningful names in Joomla 4. For example the Controllers will have now Controller as suffix to their class name. So Joomla\Component\Foos\Administrator\Controller\Foos becomes Joomla\Component\Foos\Administrator\Controller\FoosController.

Additionally the default controller which is called just Controller in Joomla 3 gets the name DisplayController, to better reflect what the class does.

See: https://github.com/joomla/joomla-cms/pull/17624

Do you need an empty index.html file in every folder of your component?

The index.html is no longer necessary as the directory listings is disallowed in default config..
If your are interested: Here's the discussion in the Google Group.