joomla/Component-Builder
joomla
/
Component-Builder
38
19
Fork 11
Code Issues 53 Pull Requests Projects 3 Releases Wiki Activity

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

Amigo 2019-08-16 09:55:12 +02:00
parent 1289cdb5d2
commit 08f29e12ff
1 changed files with 7 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -112,7 +112,7 @@ Here you can see all the Fieldtypes that I have set up in JCB already. You could
[00:16:14](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h16m14s)
The way a Fieldtype work is that it helps you set up what is known as the Properties. The property has a Name, it has a Default value, it is either Adjustable or not Adjustable. It is Mandatory or not Mandatory and Translatable. It can be given a Description, that when the Fieldtype is used you can always come back to this. This information can be gathered from going through the Joomla Core Libraries. [00:16:49](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h16m49s) Because Fieldtypes are only mapping Joomla's own implementation of Fieldtypes. If a Fieldtype is opened that has already been created like the Text field, it may be seen that these properties are already there and in place. The Fieldtype is 'text'. The 'name' is 'any text'. When we say that the type is 'text', then this is not adjustable, but if it is adjustable, it can be ticked.[00:17:18](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h17m18s) It is most certainly Mandatory. Most of the Fieldtypes had been created already and are ready to be used.
The way a Fieldtype work is that it helps you set up what is known as the Properties. The property has a Name, it has a Default value, it is either Adjustable or not Adjustable. It is Mandatory or not Mandatory and Translatable. It can be given a Description, that when the Fieldtype is used you can always come back to this. This information can be gathered from going through the Joomla Core Libraries. [00:16:49](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h16m49s) Because Fieldtypes are only mapping Joomla's own implementation of Fieldtypes. If a Fieldtype is opened that has already been created like the Text field, it may be seen that these properties are already there and in place. The Fieldtype is 'text'. The 'name' is 'any text'. When we say that the type is 'text', then this is not adjustable, but if it is adjustable, it can be ticked. [00:17:18](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h17m18s) It is most certainly Mandatory. Most of the Fieldtypes had been created already and are ready to be used.
### Creating Fieldstypes
@ -135,7 +135,7 @@ The first field that we are going to create is a Text field, which we will call
[00:22:19](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h22m19s)
Now in regards to the Database, that is what these features are all about. Since Text Fields can differ, not all of them are going to be this size. It is up to you to decide what kind of Text Field this is going to be. A bit more knowledge about MySQL and Databases is necessary to effectively use this. [00:22:49](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h22m49s) If you do not know what would be the best for a Text Field or a Date Field, Google that or simply look at Joomla's own implementation. It has an article Manager, and you can go into its XML Database and look at what Database Values was used and just use the same whatever be the case.[00:23:14](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h23m14s) Because these values are all movable, and by setting them wrong, could break things. Having created our first field, we can reuse Name and maybe also Description. [00:24:23](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h24m23s) Those are part of the Demo Component. Since Fields can be linked into any Admin View and therefore belong to any Component, it does not matter if it is already linked to the Demo Component. Although, if it is changed, it will affect both Components.
Now in regards to the Database, that is what these features are all about. Since Text Fields can differ, not all of them are going to be this size. It is up to you to decide what kind of Text Field this is going to be. A bit more knowledge about MySQL and Databases is necessary to effectively use this. [00:22:49](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h22m49s) If you do not know what would be the best for a Text Field or a Date Field, Google that or simply look at Joomla's own implementation. It has an article Manager, and you can go into its XML Database and look at what Database Values was used and just use the same whatever be the case.[00:23:14](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h23m14s) Because these values are all movable, and by setting them wrong, could break things. Having created our first field, we can reuse Name and maybe also Description. [00:24:23](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h24m23s) Those are part of the Demo Component. Since Fields can be linked into any Admin View and therefore belong to any Component, it does not matter if it is already linked to the Demo Component. Although, if it is changed, it will affect both Components.
### Creating an Admin View - Preparations - Object Orientated Development
@ -183,7 +183,7 @@ We're just going to create a Linked Fields. Linked Fields are the Fields that we
[00:30:30](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h30m30s)
There is the Name Field and that is a text field. We want it to show in the Admin List View and to show first in the Order in List views. I should behave as a Title and must be Sortable, Searchable not Filterable, because then every name would be a filter, but definitely Linkable. This means if someone clicks on the Name, it will open the Greeting, and can then be edited. There are only two Tabs at this stage. [00:31:07](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h31m07s) If you want to know more about the Tabs, please go through the tutorials and look up Tabs to see more on this subject. I am going to let it be Left in the Tab and in the Tab(Order in Edit) and let it to be the first item. No Permissions will be added to this, but there is an Editing Permission available at this stage. [00:31:33](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h31m33s) That would create Permissions around this Field, which can be tweaked, as to who can edit it, and who can not. This can also be controlled from a Global view perspective or on a field level. These are some of the hidden advantages the JCB has in handling permissions across your component quite easily.
There is the Name Field and that is a text field. We want it to show in the Admin List View and to show first in the Order in List views. I should behave as a Title and must be Sortable, Searchable not Filterable, because then every name would be a filter, but definitely Linkable. This means if someone clicks on the Name, it will open the Greeting, and can then be edited. There are only two Tabs at this stage. [00:31:07](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h31m07s) If you want to know more about the Tabs, please go through the tutorials and look up Tabs to see more on this subject. I am going to let it be Left in the Tab and in the Tab(Order in Edit) and let it be the first item. No Permissions will be added to this, but there is an Editing Permission available at this stage. [00:31:33](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h31m33s) That would create Permissions around this Field, which can be tweaked, as to who can edit it, and who can not. This can also be controlled from a Global view perspective or on a field level. These are some of the hidden advantages the JCB has in handling permissions across your component quite easily.
* ### Example Greetings Field
@ -231,15 +231,15 @@ The 'Has Metadata' adds the metadata Fields to the view. You do not need to add
[00:38:55](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h38m55s)
This View has an Access function, here all these Access levels can be set which are Public, Special or Registered. Do you want to implement these levels of access to this view? Usually, this is used if you want the view to be editable on the front end of the Site because then you will use the Access to control some of these. More of that as we continue. If you need an Import/Export function, tick it accordingly and likewise do if we want to add an Edit/Create Site View for this Admin View. [00:39:38](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h39m38s) If we want it to be first, then set it in the 'Order' column. This Admin View has all the features that an Admin View can have by Default in JCB. The code that JCB is going to write to do this implementation, is quite stable, and yet dynamic, that as Joomla evolves and changes, we can tweak these codes in the Compiler and make sure that it remains stable this way. [00:40:15](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h40m15s) Save and close. Now that this Admin View has been linked to the Component, we can go to Admin Views and see this Admin View as well the Icon. Click on this pencil and it will take you to the Admin View. Make sure that all your work has been saved in this area, click OK, if it is, and it opens the Admin View where we linked the Fields. [00:40:48](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h40m48s) and You can work in the Admin View from the Component. <<<<
This View has an Access function, here all these Access levels can be set which are Public, Special or Registered. Do you want to implement these levels of access to this view? Usually, this is used if you want the view to be editable on the front end of the Site because then you will use the Access to control some of these. More of that as we continue. If you need an Import/Export function, tick it accordingly and likewise do if we want to add an Edit/Create Site View for this Admin View. [00:39:38](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h39m38s) If we want it to be first, then set it in the 'Order' column. This Admin View has all the features that an Admin View can have by Default in JCB. The code that JCB is going to write to do this implementation, is quite stable, and yet dynamic, that as Joomla evolves and changes, we can tweak these codes in the Compiler and make sure that it remains stable this way. [00:40:15](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h40m15s) Save and close. Now that this Admin View has been linked to the Component, we can go to Admin Views and see this Admin View as well the Icon. Click on this pencil and it will take you to the Admin View. Make sure that all your work has been saved in this area, click OK, if it is, and it opens the Admin View where we linked the Fields. [00:40:48](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h40m48s) and You can work in the Admin View from the Component.
### Adding Permissions
[00:41:03](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h41m03s)
I'm just going to add some Permissions because I want to demonstrate the Permission Structure regarding the front end Management of Editing these items. I'm just going to use the Core. There is the option of using what is known as the view.edit [00:41:22](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h41m22s) instead of core.edit then it means its relationship is just for this view. If I want it to be related to the Core which means that it's not going to be only related to this view, but whatever I change in the Core will affect this view. For more explanation on the permissions, there is this tutorial which is available in the Description. You can go watch this tutorial and also maybe do some changes. Compile the Component and look at the code. [00:41:54](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h41m54s) Look at the code and look at the code. That's all I can say for most questions being asked because the code really tells you what has been done. There are many ways for you to learn how JCB does things by making changes and then compiling your component and looking at what changed. Usually using something like Git will be very useful in discovering the changes. There's also a way for you to know where in the Compiler specific code is being created which I will show you as we continue.
I am adding some Permissions to demonstrate the Permission Structure regarding the front end Management of Editing these items. I am going to use the Core. There is the option of using what is known as the 'view.edit' [00:41:22](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h41m22s) instead of 'core.edit' then it means its relationship is just for this view. If I want it to be related to the Core which means that it is not going to be only related to this view, but whatever I change in the Core will affect this view. For more explanation on the permissions, there is this tutorial which is available in the Description. Watch this tutorial and also maybe do some changes. Compile the Component and look at the code. [00:41:54](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h41m54s) The code really tells you what has been done. There are many ways to learn how JCB does things when you make changes and then to compile the component and to look at what has changed. Usually using something like Git will be very useful in discovering the changes. There is also a way for you to know where in the Compiler's specific code is being created which I will show you as we continue.
Since we've made changes, I'll simply click on save and close. [00:42:36](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h42m36s) This will take us back to the Component. Being back in the component, we'll see that everything is still the way we left it. There are quite a few things around the Admin View which I'm not going to go into depth during this tutorial. I would encourage you to watch the tutorials that are already online for an actual explanation on all these features. [00:43:04](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h43m04s) But to demonstrating a Hello World Component we have done quite enough regarding the back end. All that now remains is to compile, so we'll click save and close and we'll go to the Compiler. Select our Component and Compile. That means we've just written 9000 lines of code, [00:43:36](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h43m36s) created 51 folders and 122 files. 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 5 seconds to write one line, it would have taken us 25 hours or about three 8 hour days. [00:44:07](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h44m07s) That's a long it would have taken you to do this manually. So just right there JCB has already saved you quite a lot of time.
Since changes were made, save and close it. [00:42:36](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h42m36s) This will take us back to the Component where everything is still the way we left it. [00:43:04](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h43m04s) In the demonstration of a Hello World Component we have done quite enough regarding the back end. All that now remains is to compile. Click Save and Close, go to the Compiler and select the Component and Compile. That means that 9000 lines of code have just been written, 51 folders and 122 files were created.[00:43:36](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h43m36s) 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:44:07](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h44m07s) That's a long it would have taken you to do this manually. So just right there JCB has already saved you quite a lot of time.
### Installing The Component
@ -526,4 +526,4 @@ Going back to greetings. Let's add an option to create an item. If I go and add
We have within this tutorial demonstrated to you how to create a Hello World Component. List its items, open individual items, edit those items, as well as creating new items. All based on the permissions of structures of the Component. [01:46:40](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h46m40s) If we where to change these permissions back to not allowed and we now refresh the front, we'll see that we can only view the items. Even more if we go back and we want to control the actual viewing of the Greeted items, not be visible to the public but maybe only to managers we could do that. [01:47:06](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h47m06s) You can manage that kind of control over your items without a lot of custom code. If you click on it, it will tell you don't have authority to view it. You can add Custom Scripting to remove the link that it doesn't even look clickable if the person doesn't have access to view it. [01:47:32](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h47m32s)
We gone so far over the time trying to demonstrate to you some of the basic principles of setting up a Hello Component in JCB. I trust you've enjoyed this tutorial. By far it doesn't usually take this long to build a Hello World Component. In fact there is a older tutorial where we managed to build a Hello World Component in a very shorter time. [01:48:02](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h48m02s) I illustrated and demonstrated and explain it a little more here to help you guys along to build components with JCB and that you'd realize that JCB is a very powerful application. I mean I haven't even gone to the code this time, and shown you all that it's written, but I mean just from the compiler we already got 13000 lines of code. Which would have taken you 5-8 hour days to write. [01:48:37](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h48m37s) Which is about 39 hours and I think for a basic component that's quite a lot of code and it's because that it's already integrating a lot of permissions structures and version control. I mean if I was to open the Greetings and open James, [01:49:03](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h49m03s) remember we added that little exclamation mark. We could check the version. We can see the changes and when it was made. We can review some of the previous versions and we can even go back to those versions. That kind of integration with your History Component is done automatically by just adding history. And so is many of the other features [01:49:30](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h49m30s) that JCB is adding to your Component. Like export and import of data. Batch changes that you can make. As well as a whole lot of other concepts which is beyond the scope of what we had time for today. Well enjoy coding and yes if you have any issues, please go to GitHub. [01:49:58](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h49m58s) First check out the wiki page, check the tutorials and if you think you've discovered a bug, you're most welcome to open an issue and we'll see what we can do in trying to resolve that for you. We would like to invite other PHP Programmers to get involved on the JCB GitHub [01:50:22](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h50m22s) Community and help us improve JCB so that it can become a home for us to manage the troubled waters of open-source development. Thank you.
We gone so far over the time trying to demonstrate to you some of the basic principles of setting up a Hello Component in JCB. I trust you've enjoyed this tutorial. By far it doesn't usually take this long to build a Hello World Component. In fact there is a older tutorial where we managed to build a Hello World Component in a very shorter time. [01:48:02](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h48m02s) I illustrated and demonstrated and explain it a little more here to help you guys along to build components with JCB and that you'd realize that JCB is a very powerful application. I mean I haven't even gone to the code this time, and shown you all that it's written, but I mean just from the compiler we already got 13000 lines of code. Which would have taken you 5-8 hour days to write. [01:48:37](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h48m37s) Which is about 39 hours and I think for a basic component that's quite a lot of code and it's because that it's already integrating a lot of permissions structures and version control. I mean if I was to open the Greetings and open James, [01:49:03](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h49m03s) remember we added that little exclamation mark. We could check the version. We can see the changes and when it was made. We can review some of the previous versions and we can even go back to those versions. That kind of integration with your History Component is done automatically by just adding history. And so is many of the other features [01:49:30](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h49m30s) that JCB is adding to your Component. Like export and import of data. Batch changes that you can make. As well as a whole lot of other concepts which is beyond the scope of what we had time for today. Well enjoy coding and yes if you have any issues, please go to GitHub. [01:49:58](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h49m58s) First check out the wiki page, check the tutorials and if you think you've discovered a bug, you're most welcome to open an issue and we'll see what we can do in trying to resolve that for you. We would like to invite other PHP Programmers to get involved on the JCB GitHub [01:50:22](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h50m22s) Community and help us improve JCB so that it can become a home for us to manage the troubled waters of open-source development. Thank you.