Updated 5. Field Types: 11 23 2018 Work in progress (markdown)

Joseph Geller
2018-11-26 08:38:40 -06:00
parent 8eb11703c5
commit 5ea78f006f

@@ -13,26 +13,28 @@ The Joonla! article title is a text field type; the alias is also a text field t
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's only required for one item. There is a table which is part of the list that Component Builder sets Up. The item list views and edit views are built 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. Let's use Joomla!'s Article Manager as an example. 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's only required for one item. There is a table which is part of the list that Component Builder sets Up. The item list views and edit views are built 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. Let's use Joomla!'s Article Manager as an example.
+ [05:45](https://youtu.be/OhLzvThDXls?list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=5m45s) **Compile error** _Remember to select correct options that suit your build._ + [05:45](https://youtu.be/OhLzvThDXls?list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=5m45s) **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 component and building a local developer environment to run it. After selecting the demo Compile, 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 compiling. It just means it couldn't move the file to the git repository. If we deselect some compile options and start again it doesn't give you the same warning. Click install and compiled component gets installed Into this Joomla site. It doesn't have any images because that we don't ship the images with the components. It's easy to use your own. We could just as well go into Component Builder Since it has the demo application. See a detailed explanation of the demo component and building a local developer environment to run it. After selecting the demo Compile, 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 compiling. It just means it couldn't move the file to the git repository. If we deselect some compile options and start again it doesn't give you the same warning. Click install and compiled component gets installed Into this Joomla site. It doesn't have any images because that we don't ship the images with the components.
### Joomla! Component Builder 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 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](https://github.com/vdm-io/Joomla-Component-Builder/wiki/Using-the-JCB-Demo-Component-While-Building-Your-Local-Development-System) 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. 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](https://github.com/vdm-io/Joomla-Component-Builder/wiki/Using-the-JCB-Demo-Component-While-Building-Your-Local-Development-System) 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 ### How Fields Get Into the Component and Use the Joomla! infrastructure
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 here. Reason why you cannot add using this area is because this is to edit existing fields. Instead of adding them. So, if you were to open a admin view you can edit them from here especially if you Have many components and many fields. This is a way to Sort of just look at the fields related to this components. 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. 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. Reason why you cannot add using this area is because this is to edit existing fields instead of adding them. So, if you were to open a 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 components. 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! ### Field Types are Mapped Into Libraries Inside of Joomla!
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 in our free samples use a checkbox Set Up in Properties. So, you have to be certain when changing properties that you adjust the corresponding field. This applies only to the checkbox field. Most of the time you would never need to do that. 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 scale produced from its use. 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 use a checkbox Set Up in Properties. So, you have to be certain when changing properties that you adjust the corresponding field. This applies only to the checkbox field. Most of the time you would never need to do that. 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 produced from its use.
### Add Your Own Field Type Using JCB ### 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 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. So, we have created tutorials to help you with the learning process. 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 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. So, we have created tutorials to help you with the learning process.
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 Action While recently to all field types which I did ti show and hide fields based on other fields values. An application was replaced in Joomla! Component Builder to take control of the features to show and hide fields. This is an added feature which you might use yourself and add to your component. If you are developing a feature we can add to a Component Builder version I would obviously suggest to do that I would still explain much more on this topic as we continue. Getting back to field types I continue. 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. Joomla! does have the ability to take control of the features to show and hide fields. This is an added feature which you might use yourself and add to your component. If you are developing a feature we can add to a Component Builder version I would obviously suggest to do that I would still explain much more on this topic as we continue. Getting back to field types I continue.
### Using Checkboxes ### Using Checkboxes
There is a name 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 all Fields you just saw in our component. If I was to take the checkbox Up Your 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 here. If we want to add another attribute, click on the + and it creates a new field and we add the name at the value sweet peace which is in correspondence And some information This is really for yourself this information block here We put information there when later when you use this field type you are reminded what this specific at Rip And I I basically took this information Why Copying it right here from To my last website and placed it in there And where I felt there might be more said I added some customs text to it And what these values will do is it'll create an XML string like that In your form Which Joomla then uses to build those forms So Basically we first setup a fuel Type by Telling you Which input Values would be able to use for the specific field type which is the status Checkboxes And then we save this And then later you can reuse this fuel type when you start creating fields So let me just close this check box And go to text field And you'll see that you're is a List of the fields That used text field as its type Now you can open one of these fields And you're the bottom you see very something very similar if I was to go back here And go to text field Humorous website Starting at the top, there is a name 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 check boxes 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.
You see that it shows you examples of how that XML line should look right see Now Yeah In the Field area where you created to field Basically gave the few the name this is just for the system The name used here is the one that is important That should be the correct name the label This name is just that you when you add it to your view You know this is what we used to identify it Weston explain adding it to the view In more detail This diet data type and things were also explain we only go into more depth around What a field is and how to build one I'm simply now looking at few pipes and showing you how the changes that you've made in field type Effects I feel that you would build with that type So here is that Detail that was in field type Member on change And it tells you What is mandatory in what is optional but that's basically because I placed it in the description right I mean let's be country close to go back to that field type And then take on property And we'll see that I added optional and mandatory To the description So that I can know is this option or mandatory Yes you could Possibly argued that I should have done it from here and that it's not true don't be necessary to add it there But you know this is that this The settings here is used when we compile the component Where is this Here is used for you You know what this field attribute is all about And maybe as weak Continue to develop this component I might Make it changed to that But I wouldn't make such a change that it affects anything that already exists Dramatically and anyway Ok so let's go back to a field If we want to add another attribute, click on the + and it creates a new field and we add the name at the value which is in correspondence and some information is really for yourself this information block here. We put information there when when you use this field type you are reminded what this specific at Rip And I I basically took this information by copying it right here from To my last website and placed it in there And where I felt there might be more said I added some customs text to it And what these values will do is it'll create an XML string like that In your form Which Joomla then uses to build those forms So Basically we first setup a fuel Type by Telling you Which input Values would be able to use for the specific field type which is the status check boxes. Save this and later you can reuse this field type when you start creating fields. Close this check box and go to the text field. You'll see that there is a list of the fields that used 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 here and go to the text field on Joomla!'s website.
You see that it shows you examples of how that XML line should look in the field area where you created the field. You gave the field a name and it is just for the system. The name used here is the one that is important. That should be the descriptive name which is the label. This name is just what it is when you add it to your view. This is what we used to identify it. I am explaining how to add it to the view in more detail. This diet data type and things were also explain we only go into more depth around What a field is and how to build one I'm simply now looking at few pipes and showing you how the changes that you've made in field type Effects I feel that you would build with that type So here is that Detail that was in field type Member on change And it tells you What is mandatory in what is optional but that's basically because I placed it in the description right I mean let's be country close to go back to that field type And then take on property. I added optional and mandatory to the description. It could have been done from here and of not true then it's not necessary to add it there. But you know this and the settings here are used when we compile the component where as this here is used for you. You know what this field attribute is and maybe as we continue to develop this component I might change it. I wouldn't make any changes that affects anything that already exists this dramatically.
+ [17:43](https://youtu.be/OhLzvThDXls?list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=17m43s) **XML string within compilier** _How XML string is build and compilied within component builder._ + [17:43](https://youtu.be/OhLzvThDXls?list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=17m43s) **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 done with the description. 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 on 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 parses an area to determine of it is a text field. So, it is dependent on that part which is up dude name come now 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 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 done with the description. 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 on 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 parses an area to determine of it is a text field. So, it is dependent on that part which is up dude name come now 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