joomla/Component-Builder
joomla/Component-Builder
39
23
Fork 11
Code Issues 83 Pull Requests Projects 4 Wiki Activity

Updated 044 Hello World Component with Joomla Component Builder Creator Extended (markdown)

Amigo 2019-08-21 12:05:45 +02:00
parent 94bc77b01b
commit 3d6d5a33ed
1 changed files with 9 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
044-Hello-World-Component-with-Joomla-Component-Builder-Creator-Extended.md

@ -10,7 +10,7 @@ This is a tutorial on how to build a Hello World Component with Joomla Component
[00:00:41](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m41s)
For example: Since there are a lot of concepts in components that are built for Joomla, which may be called Conventions or Boilerplate Implementation. These things are always the same. I wanted something like a wireframe that could just take care of that for me all the time.If we were to have manually written this without any boilerplate tool or wire script that could help us write all the classes and tables and stuff and it took us 25 hours.[00:01:09](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m09s) Even if Joomla was to change, to be able to make a change in one place, and then compile it into all the components that I have developed. Then have them run stable again on Joomla, instead of having to go to every one of those components. We have gone beyond developing the most basic parts of a Component and ventured into some of its complexities.[00:01:40](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m40s) That is why showing a Hello World Component being built by Joomla Component Builder. It is going to end up being quite an advanced Component.
For example: Since there are a lot of concepts in components that are built for Joomla, which may be called Conventions or Boilerplate Implementation. These things are always the same. I wanted something like a wireframe that could just take care of that for me all the time. If we were to have manually written this without any boilerplate tool or wire script that could help us write all the classes and tables and stuff and it took us 25 hours.[00:01:09](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m09s) Even if Joomla was to change, to be able to make a change in one place, and then compile it into all the components that I have developed. Then have them run stable again on Joomla, instead of having to go to every one of those components. We have gone beyond developing the most basic parts of a Component and ventured into some of its complexities.[00:01:40](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m40s) That is why showing a Hello World Component being built by Joomla Component Builder. It is going to end up being quite an advanced Component.
### Become A Community Project
@ -46,13 +46,13 @@ There are two principals to mention before we start. One is patience, the other
[00:08:01](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m01s)
The basic steps. You would need a Joomla website. This Joomla website would preferably be on a developing environment, which is either offline or on a server which is not necessarily used in production. [00:08:30](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m30s) Not because JCB itself is unsafe. It is simply just more convenient. If it is offline, the code can be opened in your IDE. JCB has the feature to extract this customized code out of your component and put it back on compilation, a feature that does exist but which will not be discussed during this tutorial.
The basic steps. You would need a Joomla website. This Joomla website would preferably be on a developing environment, which is either offline or on a server which is not necessarily used in production. [00:08:30](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m30s) Not because JCB itself is unsafe. It is simply just more convenient. If it is offline, the code can be opened in your IDE. JCB has the feature to extract this customized code out of your component and put it back on the compilation, a feature that does exist but which will not be discussed during this tutorial.
### Local Environment Is Ideal
[00:09:06](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m06s)
A local developing environment is most ideal for this. By using certain protocol, a tunnel may be set up between your desktop and live server and still have this kind of interaction of editing code live and then compiling and seeing changes. That may be done if you are able to manage any kind of complexity; [00:09:27](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m27s) It is suggested that if JCB is installed, and there are some limitations in a shared hosting environment, to first resolve that or move development offline.
A local developing environment is most ideal for this. By using a certain protocol, a tunnel may be set up between your desktop and live server and still have this kind of interaction of editing code live and then compiling and seeing changes. That may be done if you are able to manage any kind of complexity; [00:09:27](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m27s) It is suggested that if JCB is installed, and there are some limitations in a shared hosting environment, to first resolve that or move development offline.
### Ways To Install JCB - Download Package - URL From GitHub - Install From The Web
@ -124,7 +124,7 @@ Most of the time you can simply start with Fields. There are already quite a few
[00:18:24](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h18m24s)
To give a quick demonstration: If I click on this button(pencil), and say; change this(ValueExample) to text'tt' and save and close and return to Fields and click 'New', then select 'Text field' again.[00:18:53](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h18m53s) Three t's has been added in there. Since this whole structure has been built from the Fieldtypes Default Settings, which we just looked at. I am going to change that back quickly, and for example, put something in the Description. [00:19:22](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h19m22s) I am going to take text again, and you will see those oooo's are showing up here. This means that this whole area is dynamically populated from the values that are put up in the Fieldtype and so does this XML(field definition) structure usually populates the demo or default values that you have added when you created the Fieldtype.[00:19:57](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h19m57s) JCB ships with most Fieldtypes already in place, it appears like this is something we have done, but it is something that you can extend and even change. For example: If you know that the Text Fieldtype has more properties than we have set up, you can add more to it and simply click on this 'edit' or before creating a Field, you can go to the Field types, and open the Text Fieldtype and click on the green button and add more Properties.[00:20:34](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h20m34s) Those Properties will dynamically also appear within the area where the Fields are created. [00:20:57](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h20m57s) Things in JCB has not been set hard into code but is movable, easy to scale and easy to customize.
To give a quick demonstration: If I click on this button(pencil), and say; change this(ValueExample) to text'tt' and save and close and return to Fields and click 'New', then select 'Text field' again.[00:18:53](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h18m53s) Three t's has been added in there. Since this whole structure has been built from the Fieldtypes Default Settings, which we just looked at. I am going to change that back quickly, and for example, put something in the Description. [00:19:22](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h19m22s) I am going to take text again, and you will see those 'oooo's' are showing up here. This means that this whole area is dynamically populated from the values that are put up in the Fieldtype and so does this XML(field definition) structure usually populates the demo or default values that you have added when you created the Fieldtype.[00:19:57](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h19m57s) JCB ships with most Fieldtypes already in place, it appears like this is something we have done, but it is something that you can extend and even change. For example: If you know that the Text Fieldtype has more properties than we have set up, you can add more to it and simply click on this 'edit' or before creating a Field, you can go to the Field types, and open the Text Fieldtype and click on the green button and add more Properties.[00:20:34](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h20m34s) Those Properties will dynamically also appear within the area where the Fields are created. [00:20:57](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h20m57s) Things in JCB has not been set hard into code but is movable, easy to scale and easy to customize.
### Creating A Field
[00:21:18](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h21m18s)
@ -153,7 +153,7 @@ First Admin View. The System Name is to identify the View. If there be more than
[00:26:48](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h26m48s)
There will be a 'Name(single record)' and a 'Name(list records)'. Single record is also the Edit View. That is when you are looking at one record, and are editing that record in the Admin area, that is the single record. That is also what will be used when you tweak JCB to add an Edit option to the Site area of your Website. [00:27:22](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h27m22s) Since JCB can do that on the fly, this single record would also affect the front end of your component in that case which will be demonstrated later on. I am going to call the single record 'Greeting' and the list record 'Greetings'.
There will be a 'Name(single record)' and a 'Name(list records)'. 'Single Record' is also the 'Edit View'. That is when you are looking at one record, and are editing that record in the Admin area, that is the single record. That is also what will be used when you tweak JCB to add an Edit option to the Site area of your Website. [00:27:22](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h27m22s) Since JCB can do that on the fly, this single record would also affect the front end of your component in that case which will be demonstrated later on. I am going to call the single record 'Greeting' and the list record 'Greetings'.
### Type: Read And Write
@ -283,7 +283,7 @@ In this area is the full greeting. An Edit button is going to be added and a Cre
[00:50:23](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h50m23s)
First, use a Back-end View which is related to the component. Select that Back-end View, It shows Greetings(first). The system name is what is used in the dropdowns. Select Greetings(first). This one(getType) is going to bring back a 'getlistQuery'. We do not want any Pagination.(See video) We do not need the 'asset id'. [00:50:59](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h50m59s) Leave the 'created by' and the 'created', take out the 'modified', the 'version' may be left. The 'hits' and the 'ordering' are fine. The greeting is most certainly not needed in a list, only the name is needed. Give it a 'Name' as identification when the Site View is set up. Call this List Greetings and in brackets (Name only) so that weArea will know this is what it is. Although it can be saved it is not necessary to do it.
First, use a Back-end View which is related to the component. Select that Back-end View, It shows Greetings(first). The system name is what is used in the dropdowns. Select Greetings(first). This one(getType) is going to bring back a 'getlistQuery'. We do not want any Pagination. (See video) We do not need the 'asset id'. [00:50:59](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h50m59s) Leave the 'created by' and the 'created', take out the 'modified', the 'version' may be left. The 'hits' and the 'ordering' are fine. The greeting is most certainly not needed in a list, only the name is needed. Give it a 'Name' as identification when the Site View is set up. Call this 'List Greetings' and in brackets (Name only) so that 'weArea' will know this is what it is. Although it can be saved it is not necessary to do it.
### Tweaking The Data Without Saving
@ -357,7 +357,7 @@ We want the 'Listgreetings' and so this 'Listgreetings' gives us a few Snippets.
[01:03:58](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h03m58s)
By looping through those items, these two strings that have been found is all we need. A List View may be selected. ( _We are busy working on adding the Bootstrap Library to JCB. At the moment we got UIkit version 2 linked to JCB and I have selected the List option for this Uikit. Uikit is a library developed by YOOtheme. Bootstrap has been decided on and so we are migrating to Bootstrap_ ). Loop over the items. Nothing is yet clickable, nothing is editable. It is only an introduction to Site Views. Save and close.
By looping through those items, these two strings that have been found is all we need. A ListView may be selected. ( _We are busy working on adding the Bootstrap Library to JCB. At the moment we got UIkit version 2 linked to JCB and I have selected the List option for this Uikit. Uikit is a library developed by YOOtheme. Bootstrap has been decided on and so we are migrating to Bootstrap_ ). Loop over the items. Nothing is yet clickable, nothing is editable. It is only an introduction to Site Views. Save and close.
### Back To Component Add Site View
@ -388,13 +388,13 @@ Without any concerns, the Component can be Compiled and re-installed and then be
**NB - Default only gets set the first time a component is installed**
When you add a front end Site View and set that default to be public and if it is not the first time you have installed the component then that default cannot be set to the Database because it is a default that only gets set the first time the component gets installed. [01:09:11](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h09m11s) You can go into the components Script File and search through it to see that it is a function that is added to the Script File and only gets implemented on the first installation of the Component.
When you add a front end Site View and set that default to being public and if it is not the first time you have installed the component then that default cannot be set to the Database because it is a default that only gets set the first time the component gets installed. [01:09:11](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h09m11s) You can go into the components Script File and search through it to see that it is a function that is added to the Script File and only gets implemented on the first installation of the Component.
### Adding The Greetings To A Site View
[01:09:53](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h09m53s)
Before Greetings can be added to the Site Menu let us first write a few greetings. With at least four Greetings in place, continue then and add that List View to a Front end Site View. Then go to Menus and to Main Menu. Select the Menu Type. Click on the previous Component; 'Hello World Greetings'. Greeting is set as the HOME of this website. Save and close. [01:10:54](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h10m54s) There are HOME and Hello World Greetings. That should mean that if we click on this preview(demonstration button) of the front end of the Site, the Greetings should be seen . It will show that 'The page isn't redirecting properly'.
Before Greetings can be added to the Site Menu let us first write a few greetings. With at least four Greetings in place, continue then and add that ListView to a Front end Site View. Then go to Menus and to Main Menu. Select the Menu Type. Click on the previous Component; 'Hello World Greetings'. Greeting is set as the HOME of this website. Save and close. [01:10:54](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h10m54s) There are HOME and Hello World Greetings. That should mean that if we click on this preview(demonstration button) of the front end of the Site, the Greetings should be seen. It will show that 'The page isn't redirecting properly'.
### Set Front Site View To Have Access Control
[01:11:13](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h11m13s)