Updated 5. Field Types (markdown)
@@ -3,11 +3,11 @@
|
|||||||
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 a model, view and controller you 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 start with field types, then see them in action using Joomla! article list views and edit views.
|
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 a model, view and controller you 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 start with field types, then see them in action using Joomla! article list views and edit views.
|
||||||
|
|
||||||
### Views, field types, and fields
|
### Views, field types, and fields
|
||||||
+ [01:05](https://youtu.be/OhLzvThDXls?list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=1m5s) **Field Types and Fields** _Create Field Types Using basic joomla article to explain field types and their relationship within views_
|
+ [01:05](https://youtu.be/OhLzvThDXls?list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=1m5s) **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.
|
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](https://youtu.be/OhLzvThDXls?list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=1m57s) **List and Edit Views** _Difference between list view and edit view. Plural and single_
|
+ [01:57](https://youtu.be/OhLzvThDXls?list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=1m57s) **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 in 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.
|
If you close this article view you'll see a list of articles created in 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.
|
||||||
|
|
||||||
@@ -17,12 +17,12 @@ The Joonla! article title is a text field type; the alias is also a text field t
|
|||||||
### Joomla! Articles List and Article Edit Views
|
### 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's 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 edit 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.
|
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 view. Component Builder sets up the item list views and edit 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](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 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](https://youtu.be/OhLzvThDXls?list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=6m35s) **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 does't ship the images with the demo component.
|
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](https://youtu.be/OhLzvThDXls?list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=6m35s) **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 does't ship the images with the demo component.
|
||||||
|
|
||||||
### 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 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.
|
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
|
||||||
@@ -45,7 +45,7 @@ We have not implemented all the attributes that can be targeted though. You migh
|
|||||||
|
|
||||||
Here is a complete list of [form fields](https://docs.joomla.org/Standard_form_field_types). 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 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 form.
|
Here is a complete list of [form fields](https://docs.joomla.org/Standard_form_field_types). 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 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 form.
|
||||||
|
|
||||||
If we want to add another attribute, click on the + and it creates a new field and we add the name at the value, tweak these switches to be in correspondence and some information. This information block here is for you to use. We put information there when when you use this field type you are reminded what this specific attribute is for. I took this information by copying it right here from Joomla!'s website and placed it in there where I felt there could be more said I added some custom text to it and 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](https://youtu.be/OhLzvThDXls?list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=14m05s) **XML string format for joomla** _Reusable field types_ We first setup a field type by telling you which input values you can 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. [14:45](https://youtu.be/OhLzvThDXls?list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=14m45s) **Text field type example** _Fields within Text field type_ 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.
|
If we want to add another attribute, click on the + and it creates a new field and we add the name at the value, tweak these switches to be in correspondence and some information. This information block here is for you to use. We put information there when when you use this field type you are reminded what this specific attribute is for. I took this information by copying it right here from Joomla!'s website and placed it in there where I felt there could be more said I added some custom text to it and 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](https://youtu.be/OhLzvThDXls?list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=14m05s) **XML string format for joomla** _Reusable field types_. We first setup a field type by telling you which input values you can 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. [14:45](https://youtu.be/OhLzvThDXls?list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=14m45s) **Text field type example** _Fields within Text field type_. 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.
|
||||||
|
|
||||||
+ [15:15](https://youtu.be/OhLzvThDXls?list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=15m15s) **Joomla XML example Text Field** _XML example_
|
+ [15:15](https://youtu.be/OhLzvThDXls?list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=15m15s) **Joomla XML example Text Field** _XML example_
|
||||||
|
|
||||||
@@ -53,7 +53,7 @@ You see that it shows you examples of how that XML line should look in the field
|
|||||||
|
|
||||||
We won't go into more depth about what a field is and how to build one. We are looking at a few types and showing you the effects of a few changes I feel that you would 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 property. I added optional and mandatory to the description. It could have been done from here and 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 where as 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 affects anything that already exists this dramatically.
|
We won't go into more depth about what a field is and how to build one. We are looking at a few types and showing you the effects of a few changes I feel that you would 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 property. I added optional and mandatory to the description. It could have been done from here and 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 where as 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 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 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.
|
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 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.
|
||||||
|
|
||||||
|
Reference in New Issue
Block a user