Component-Builder

Table of Contents

Component, Form, Fields, Field Types, API, Model, View, Controller, and the XML File
Views, field types, and fields
All Fields Live In Views
Joomla! Articles List and Article Edit Views
Joomla! Component Builder Demo Component
How Fields Get Into the Component and Use the Joomla! infrastructure
Field Types are Mapped Into Libraries Inside of Joomla!
Add Your Own Field Type Using JCB
Using Form Fields
Format of XML String in Form Used by Joomla! to Build the Form
Optional and Mandatory Values for Field Type Member On Change
How Demo Data Populates New Field From Values Added During Field Type Creation

Component, Form, Fields, Field Types, API, Model, View, Controller, and the XML File

If you have a good understanding of the Joomla! API you'll know it can build forms that can be used in a component; it's done using an XML file. Joomla! Component Builder builds the XML file and places it in a location your model, view, and the controller can access using the Joomla! API. JCB builds the fields which you define in a view containing the fields displayed by the component you are building using JCB. These and other terms will be defined as we proceed. Let's start with field types, then see them in action using Joomla! article list views and edit views.

Views, field types, and fields

01:05 Field Types and Fields Create Field Types Using basic Joomla article to explain field types and their relationship within views.

A field type is needed if you are building a field. Use of views, field types, and fields can be seen when you create a Joomla! article. When you do, the first thing you see is the view. Scroll down and you'll see a URL displaying View = article indicating this is an article view.

01:57 List and Edit Views Difference between list view and edit view. Plural and single.

If you close this article view you'll see a list of articles created on the web site. You won't see any articles here if it's a blank website. The list of articles is also called a list view. If you click on a row in the list you will see the edit or single view. Components you build using JCB will build these views for you, usually two, in the admin area to list and edit your different data sets. Let's take a look at the views and the fields they display.

All Fields Live In Views

The Joomla! article title is a text field type; the alias is also a text field type. The editor block is a text editor field. There are others like list, radio, tag, text, date, user, text-area, and label. You will see JCB has placed all these in the component for you. You can make use of each of these different types by applying one to a field. All fields live in views which is an important concept to understand. Now, you might not think that a list view has fields and you are partly right. It does do more than just display these fields. Let's create a test article here to show what we mean.

Joomla! Articles List and Article Edit Views

After adding some content, save and close the article so we have a list item. That is also a field and if you click on search all those options are fields. So, your list has certain fields which are only available in the list view. This is also the place where we do most of our features for multiple items where opening one item does what are only required for one item. There is a table which is part of the list view. Component Builder sets up the item list views and edits views for you, based on the fields and input value mapped to them in the view. We will look at these other concepts more deeply but I need to have you understand this concept clearly. We will try and show you that inside of this article you will be creating fields you can place in different tabs, which will have been rendered in a specific order by the Joomla! component after it's been compiled using Joomla! Component Builder. That example used Joomla's Article Manager.

05:45 Compile error Remember to select correct options that suit your build.

We could just as well go into Component Builder Since it has the demo application. See a detailed explanation of the demo application and building a local developer environment to compile it into a component and run it. After selecting the compile option for the JCB demo application, it displays a warning because we haven't set some options in the global settings. It doesn't mean that there's been an error in the compile. It just means it couldn't move the file to the Git repository which was one of the default options selected. Installing from within component builder, If we deselect some compile options and start again it doesn't give you the same warning. 06:35 Install compiled component Installing from within component builder, quick link. Click install and compiled component gets installed Into this Joomla site. It doesn't have any images because JCB doesn't ship the images with the demo component.

Joomla! Component Builder Demo Component

If you click on add a Look It will open the edit and it keeps you on the Look. It also opens a list view where the list of Looks will be displayed. We added an import feature which the standard Joomla! components don't have. We will explain that later. If it's new you can add also text to your radio button. If I add something to the text field it opens an alias field which is also a text field. There is a new Joomla! repeatable field and you can add information to it. This was a quick look at the features in the demo component included with the Joomla! Component Builder when it is installed. The APPENDIX has a very detailed, technical explanation of the demo component installation and inner workings plus code, along with step by step instructions on building a local development LAMP environment to run Joomla!, and JCB on. It also explains how to compile and install the demo component using JCB.

How Fields Get Into the Component and Use the Joomla! infrastructure

08:04 Admin fields-views edit explanation of adding-editing fields

If we go to Admin views and select Look Open look you'll find the fields we just looked at. The name is used to map the field into the view using the field add button here. The reason why you cannot add using this area is that this is to edit existing fields instead of adding them. So, if you were to open an admin view you can edit them from here especially if you have many components and many fields. This is a way to look at the fields related to this component's view. If you were to add more fields you would open this box and this is where you'll be adding them. Let's get back to field types because that's really where it all starts. We've already added all the field types to JCB that I think you will need.

Field Types are Mapped Into Libraries Inside of Joomla!

09:26 Default field-types Default field-types that come shipped within Component

Joomla! has many field types and for each field type which you build, you need to set certain values in an XML document. These values are for example if you use a checkbox, set up in properties. So, you have to be certain when changing properties that you adjust the corresponding field. Note, in this example, these changes only apply to the checkbox field. Most of the time you would never need to do this. An exception is adding more field types which we haven't covered, or if you want to extend the existing field types. For the most part, you should not tinker with field types. I hope this explains where the field type comes from and the amazing scalability you obtain by using it.

Add Your Own Field Type Using JCB

With most other Component Builders you need to wait for the developer to add a new field type. With Component Builder, you can add your own field type which only requires mapping it to the Joomla! library. Joomla! has their field type set to certain types now such as a repeatable field which is quite tricky and needs special attention even in the code of the JCB compiler. But the majority of field types are very straight forward and simple to implement.

We have not implemented all the attributes that can be targeted though. You might need to add them if you want to use them. For example, I added this Show On option recently to all field types which I did to show and hide fields based on other fields values. It's in JCB but Joomla! does have the ability to take control of the features to show and hide fields. This is an added feature and it may be preferable to use Joomla!'s yourself and add it to your component. But this shows if you are developing a feature we can add it to a Component Builder version. I would obviously suggest doing that I would still explain much more on this topic as we continue. Getting back to field types I continue.

Using Form Fields

12:29 Joomla standard form fields Joomla website for standards regarding form fields

Here is a complete list of form fields. There is a column which is called type and a value for checkbox and it must be set to not adjustable because that is the way it is expected. If you don't understand any of this information that I'm showing you here then a place to go to is to open the form fields and you'll see a whole list of form fields. These are the same for the fields you just saw in our component. If I was to take the checkbox in the list of checkboxes and open that you'd see that they give you a list of those fields. Next type name and JCB tells you what is mandatory and what is optional and basically, we are just mapping that data into this form.

Format of XML String in Form Used by Joomla! to Build the Form

If we want to add another attribute, click on the + and it creates a new field and we can add the name for the value then tweak some of the switches requiring synchronization and provide some other information. The information block here is for you to use. We put information there when you use this field type so you are reminded what this specific attribute is for. I added this information by copying it from Joomla!'s website and placed it in the provided area where I felt there could be more information. I added some custom text to it indicating what these values will do. They will create an XML string like that in your form which Joomla! then uses to build those forms 14:05 XML string format for Joomla Reusable field types. We first set up a field type by telling you which input values you can use for the specific field type which is indicated using the status checkboxes. Save this and later you can reuse this field type when you start creating fields. Close this checkbox and go to the text field. 14:45 Text field type example Fields within Text field type. You'll see that there is a list of the fields that used the text field as its type. You can open one of these fields and at the bottom, you see very something very similar if I was to go back to the text field on Joomla!'s website.

15:15 Joomla XML example Text Field XML example

You see that it shows you examples of how that XML line should look in the field area where you created the field. The field has a name which is just for the system. The other field used here is the one that is important. That should be descriptive text which is the field label. This is what displays when you add it to your view. This is what we use to identify it. I am explaining how to add it to the view in more detail. The data type and other things were also shown to explain them.

Optional and Mandatory Values for Field Type Member On Change

We won't go into more depth about what a field is and how to build one. We have looked at a few field types and shown the effects of changes I feel that you would probably make using those types. This is the detail that was in field type Member On Change and it tells you what is mandatory and what is optional because I placed it in the description. Click close to go back to that field type and then click on the property. I added optional and mandatory to the description. It could have been done from here so if not true then it's not necessary to add it there. But you know the settings here are used when we compile the component whereas this here is used for you to know what this field attribute is. Maybe as we continue to develop this component I might change it. I wouldn't make any changes that affect anything that already exists this dramatically.

17:43 XML string within compilier How XML string is build and compilied within component builder.

The way the compiler works it is doesn't really grab the string and just put it into the XML. In fact, if I show you how a string looks that the compiler is built, the assessment type, you see that it is completely reformatted. The label is turned into a translatable string. It's been done with the description also. It also tells you where in the compiler. We'll still look at that because this might show sometimes and you can use apply a JCB tweak to your component so it doesn't show it. But it tells you which line in the compiler it was built in and also in what file which is very nice. I think those of you that are developers will appreciate this feature tremendously. It also tells you the field type and you can see it as we scroll through it. You can see that Component Builder really goes way out of its way to reconstruct that field. It is not using this directly. In fact, it grabs that part and that area to determine if it is a text field. So, it is dependent on that part which is up to name and that part there. The opening exclamation and the closing one and the value in between them is what is used. If you prefer or by accident drop off this or that it will still work perfectly.

How Demo Data Populates New Field From Values Added During Field Type Creation

These are really the only things needed to understand using field types. Eventually, these may become input fields in one big text area that leaves us with a lot of room and freedom to adjust easily without major complications. In any case, if you start a new field, which we'll look at later, it populates this with the demo data and the demo data is actually values that you added when you created the field type. You see in the demo it is this value from the example that is placed here. It's from these values that the region is in if you create a new text field. It grabs these values as the values which you can then adjust to suit your purpose. If you know implementation for that specific field at that moment and if you leave it blank it will also build it without any value between those two estimation marks that are looking at field types.

Most field types have been set up for you and you hardly ever would need to come here except for a deeper understanding of how field types work and how Joomla! and JCB implement them. You do not need to change things unless you wish to. You may be interested in my next tutorial on how to use field types in fields.