In this episode we will use Component Generator to build our example event schedule component.

Our journey until now

In this series we want to show some tools that can help to build components for Joomla. 

The first two episodes were mainly to introduce the example and show some implementations of it without building a component.

• In episode one we introduced our example, an event schedule, for instance for a Joomla Day. We explored the basic entities and made an implementation with core functionality (mainly additional fields ¹). We were not yet building a component and didn’t use any tools other than Joomla itself.
• In episode two we showed an embedded implementation, using a Content Construction Kit (CCK) and Application Builder (Seblod and Fabrik). So, we still didn’t build a component, but we used some tools.

In episode three and four we built a component, without using much tools. 

• In episode three we finally started building a component. We did that “by hand”, not using specific tools to build Joomla components. We also spent some time on relationships between entities and how those are implemented in Joomla.
• In episode four we listed additional features, built-in into Joomla, that you can use in your component. And showed some smaller tools to help create a component.

From episode five on we show the major tools you can use to build a component.

• In episode five we used Component Creator to build our example event schedule component.

Component Generator

In this episode we’re going to look at Component Generator, an online Joomla scaffolding tool, comparable with Component Creator, featured in our last episode. 

The recipe is simple: you define what tables you need and what fields they have. Then you indicate what views you want to have with them. There is a fine concise navigation menu.

The generated code mostly follows the current Joomla style of coding, as seen in the core components. Although you’ll get an installable and working component, in most cases you’ll still have to do some customisation, especially on the front end view templates.

Component Generator is a product of Kinda Creative, founded by Johnny Drud. He created the system because he couldn’t find a tool that met his needs as a Joomla developer. It started as a hobby project but has grown over the years. He ended up spending a lot of time on the system, and since the demand was high, it became necessary to implement a subscription model to support full-time development and maintenance of the system.

The free version lets you create three components with a maximum of one table and 30 fields each. You can also create three modules with the free tier. In the paid version you don’t have those limits and you also have the possibility to create a component with frontend editing, SQL import and extra template layouts. We could use the premium version to implement our multi-table example component.

At the moment Component Generator generates Joomla 3, 4 & 5 components and modules. As soon as a new version comes out you can easily regenerate the same component again for the newer version. With Component Generator this has its limitations, just like currently with Component Creator, because you’ll have to re-apply your customisations to the newly generated component. 

Our example: event schedule

See our last episode for an overview of our event schedule example.  The component is intended to display time-schedules on tabs (containers), with events vertically at a specific time of a day. Concurrent events are displayed in parallel tracks (sections). Events can be of an event type and are done by actors.

Per Event Schedule we have this Entity-Relationship Diagram (ERD):

Event schedule example in Component Generator

In Component Generator I followed the same steps as with Component Creator:

1. Fill in the basic information for a component, like its name, your name, the licence, and which language files you want to add (all will be filled with English texts). 
   
   One detail is missing: you cannot define your own namespace prefix. Components and modules are made with the Joomla namespace prefix. Have reported it as a bug, so it might be repaired by the time you read this.
   
   
2. Create tables and fields for all entities. You can use most Joomla fields, including SQL-fields (to refer to other tables with a foreign key) or their own foreign key field.
   
   Not all attributes of each field are listed, but you can add extra attributes to a field when needed. So you have to know or look up what extra attributes there are and then you can add them. For instance if you want a “multiple” attribute with an SQL-field, you’ll have to add that yourself. In our example with multiple actors doing an event:
   
   
   
   By default Component Generator adds an id and some standard fields (ordering, state, created_by) that can be removed.The id is not shown, because it is only important for the system, not for the user when setting up the tables. I like that: it keeps the interface clean.
   
   A category field uses the categories of com_content, not  their own categories specific for your custom component.
   
   
3. Check for each table what views and view templates you want:
   • admin list of items
   • admin single item
   • frontend list of items (view templates: single item, empty item, contact form, data form)
   • frontend single item (view templates: list of items, empty list)
   
   
   
   
   
4. In Component Generator a subform is embedded. It is not possible to define a subform that can be used in several tables. Not all fields are available in Component Generator for such a subform: for instance a foreign key or SQL-field are not possible. In our event schedule example we had a container and a section foreign key in our locator subform.
   
   The implementation of our event schedule example with Component Generator uses the fields for container, section, start time and end time directly in the event form, not in a (repeatable) subform. An event can then only be programmed once in a time schedule.
   
   
5. Build & Download the component. You get a fully functional component, ready to install.
   
   
6. If you want a nice schedule as output, you’ll have to make a special view template for it, for instance based on the events list view. You can also make an “empty view template”, then you have the model, view and controller, but an empty view (to override). Of course an override is not shipped with an update and has to be uploaded to the site after you have installed the update.

Future enhancements

The Component Generator team is working on expanding the custom view templating system with galleries and other ready-made options. 

There is also the intention to implement many-to-many relationships using an extra table.

“Bells & Whistles” used in Component Generator

In the episode 4 of this series I listed features that are built-in into Joomla and can be used in our own component. What of that is being used by Component Generator?

Similar to Component Creator

Component Generator is in many ways similar to Component Creator.

So both can be used for:

• Bulk work setup, especially for the tables and their data entry.
• Migration help with the SQL-import.
• Learning tool by studying the generated output.

 Some differences with Component Creator

Component Generator has a few extra possibilities: 

• Component Generator allows users to create contact forms that send emails or data forms that save custom field data in the database, including data from advanced fields like foreign key and subform fields. For example, data forms could let users of a radio station request (add) songs to a playlist. The admin can then review, approve, or edit the songs in the Joomla backend depending on the system’s requirements. You can see more examples of this on the homepage of the Component Creator website.
• Component Generator has some extra view templates.

Several features of Component Creator are lacking in Component Generator:

• No update SQL: you cannot automatically update the database tables of an installed component.
• No separate subform. A subform can only be embedded and has no SQL-field or other possibility for foreign keys.
• No general parameters. You’ll have to give some extra fields to a general table.
• No standard nested set table, like we have with menu items, categories and tags.
• No content versioning.
• No web services.

But some developers might not need those features.

 Nice user interface

Component Generator has  a nice and authentic user interface that is enjoyable to see and use.

• The side menu interface (you see the green arrow: I was working on the actors field):
  
   
  
  
• The symbols for the field types:
  
  
  
  
• Popup with informative images to select view templates:
  
  

In the coming episodes we will show some more tools to make Joomla components. At the end of this series we can compare all of them and list some pros and cons. 

Next month

In the next episode (January 2025 edition) we will look at a completely free and open source tool:
Joomla Component Builder.

In February we’ll show another free tool. So, stay tuned to see them all!

Resources

Component Generator:

• https://componentgenerator.com/ 
• Quick Start Guide

Building a component:

• Joomla! Programmers Documentation, our ever expanding online source of information.
• Book: “Developing Extensions for Joomla! 5” by Carlos Cámara.
• Online book: "Joomla Extension Development"by Nicholas Dionysopoulos.
• Robbie Jackson’s tutorial: “Developing an MVC Component”. Made for Joomla 3, but there is a lot that is still useful.
• Look at core components. They are supposed to be an example for your own code.
• Book: "Developing Extensions: Step by step to an working Joomla extension" by Astrid Günther. Out of sale at the moment; hopefully a new version will be published.

Articles in this series about Tools to build a Component:

• Episode 1: Introduction and Core Solution
• Episode 2: An Embedded Application in Joomla
• Episode 3: Creating a Component
• Episode 4: Built-in extras and some setup tools
• Episode 5: Component Creator
• Episode 6: Component Generator  (this article)

Extra material like the code for our example event schedule component can be found in the repository for this series.

 Notes

1. In episode one I explained why I use the term “additional fields” instead of  “custom fields”. I use “form fields” for the fields that we use in our forms in the components we build. Both additional fields and form fields can be standard and custom.