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

Updated 049 The New Library Manager Area (markdown)

Amigo 2019-09-02 10:02:00 +02:00
parent 3f646e27e4
commit 84c17bb8e9
1 changed files with 11 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
049-The-New-Library-Manager-Area.md

@ -56,31 +56,35 @@ The moment Bootstrap is set on 'Always Add' and it is linking in a content distr
[00:07:32](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m32s)
The same can be done with Custom Files and Folders as we did previously. Files can be added from the same Custom Files and Folders. Those are the same kind of implementation except it is now done on a Library level so that even the Library gets added to a View. These files can be used automatically so it is not necessary to do it per Component. [00:08:01](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m01s) As it is done per Library and as the Libraries are linked to Views, will automatically incorporate these files into the component, which makes it easier, since it is set up once and thereafter it could be reused. <<<<<<
The same can be done with Custom Files and Folders as we did previously. Files can be added from the same Custom Files and Folders. Those are the same kind of implementation except it is now done on a Library level so that even the Library gets added to a View. These files can be used automatically so it is not necessary to do it per Component. [00:08:01](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m01s) As it is done per Library and as the Libraries are linked to Views, will automatically incorporate these files into the component, which makes it easier, since it is set up once and thereafter it could be reused.
### Behaviors: Conditions, Custom Script, and Do not Add
[00:08:19](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m19s)
I'm going to change Libraries Files & Folders to Local. It will say Local (get). There are few Behaviors, there are Conditions, Custom Script, and Do not add.
Libraries Files & Folders are going to changed to Local. It will say Local (get). There are few Behaviors, there are Conditions, Custom Script, and 'Do not add'.
### Conditions Under Development
[00:08:31](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m31s)
The Conditions are still under development. [00:08:34](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m34s) All its functionality is already here, so you'll see all the links are showing up here but as related to its implementation in the compiler. It's not ready yet. For now, skip the Conditions option until you see that when you compile that it doesn't give you a warning. At this moment if you compile JCB, they will give you a warning that the Conditions options are not available yet. We're planning to have them released with the next release which would be 2.6.7[00:09:09](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m09s) So any version if you looking at this tutorial after 2.6.7 then the conditions options already working.
The Conditions are still under development. [00:08:34](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m34s) All its functionality is already here, all the links are showing up but as related to its implementation in the compiler, it is not ready yet. For now, skip the Conditions option until you see that when you compile that it does not give a warning. At this moment if you compile JCB, there will be a warning that the Conditions options are not available yet. We are planning to have them released with the next release which would be 2.6.7[00:09:09](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m09s)
### Conditions - Demonstrate Briefly
[00:09:17](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m17s)
I'm going to demonstrate it briefly. The Conditions options work in two ways. The one is you first need to add some Configuration Fields. Configuration Fields are Fields that will be added to the global options of the Component. If those Fields are tripped, it will affect whatever way you set it. [00:09:41](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m41s) To show you that, if you look in Site View you'd see there is an Options area. If we click on the Options area, that's now in Component Builder Configuration. You would see there are Uikit2 Settings. It has a bunch of buttons. That's the kind of buttons that you can build. First, go and create the Fields in JCB as you would normally create any other Field. Then in Editing the Library, click on 'Create' Linking the Configuration Fields. [00:10:15](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m15s) In A New Libraries Config, I'm going to select under Field: Add More, maybe as an option. I want to create under the Tab Name called Bootstrap. Bootstrap is going to be the Tab Name, Add More is going to be the radio button. [00:10:37](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m37s) Save and close. Just as a demonstration. If I change this to Conditions, and I click on adding Conditions. Then I want to add these two local files (URL) bootstrap.min/js-Local, (URL) bootstrap.min/css-Local. I want them to be included when Add More is set to Yes. That's how this configuration of conditions will work [00:11:06](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m06s) in a relationship. You won't see any Option Fields if you haven't created Option Fields in the Configuration. So if you want to use this area, when it is eventually ready, you will have an include and exclude option based on buttons. Then you select the files that you want to be added or not not be added, [00:11:32](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m32s) based on these selections. Now, these buttons are part of your component parameters. And so within your code when you start developing your templates and your layouts, you can draw upon these parameters in your PHP and say if it is this switch says that, then I want this HTML to load, otherwise I want that HTML to load. So you could have Bootstrap alongside Uikit [00:12:02](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m02s) with the same implementation. That is giving an idea of where this Conditions Area is supposed to come into play.
[00:09:17](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m17s)
The Conditions options work in two ways. The one is you first need to add some Configuration Fields. Configuration Fields are Fields that will be added to the global options of the Component. If those Fields are tripped, it will affect whatever way you set it. [00:09:41](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m41s) If you look in Site View there is an Options area. If we click on the Options area, which is in Component Builder Configuration, there are Uikit2 Settings. It has a number of buttons. That is the kind of buttons that you can build. First, go and create the Fields in JCB as you would normally create any other Field. Then in Editing the Library, click on 'Create' Linking the Configuration Fields. [00:10:15](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m15s) In 'A New Libraries Config', select under Field: Add More, maybe as an option. I want to create under the Tab Name called 'Bootstrap'. Bootstrap is going to be the Tab Name, 'Add More' is going to be the radio button. [00:10:37](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m37s) Save and close. Just as a demonstration. If I change this to Conditions, and click on adding Conditions and add these two local files (URL) bootstrap.min/js-Local, (URL) bootstrap.min/css-Local. I want them to be included when Add More is set to 'Yes'. That is how this configuration of conditions will work in a relationship.[00:11:06](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m06s) No Option Fields will be seen if you have not created Option Fields in the Configuration. So if you want to use this area, when it is eventually ready, you will have an 'Include' and 'Exclude' option based on buttons. Then you can select the files that you want to be added or not, based on these selections.[00:11:32](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m32s) Now, these buttons are part of the component parameters. When you start developing templates and layouts in your code, you can draw upon these parameters in your PHP and be able to decide which HTML to load and have Bootstrap alongside Uikit with the same implementation. [00:12:02](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m02s) That is an idea of where this Conditions Area is supposed to work.
### Custom Scripting
[00:12:10](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m10s)
The area that I have like more is the Custom Scripting area. Which is giving us the same behavior as what we did in the Site View. We will add the same files here. The only thing that will change, it will add [00:12:38](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m38s) 'component' like that. Wherever we have the component name because we want this to be Dynamic. So that if it gets added to any component, you'll dynamically update those names as related to the fact that it will use Bootstrap v4. It is using this name Bootstrap v4[00:13:05](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h13m05s) And it's putting a little dash - between them and making it lowercase. These two files bootstrap.min/js, bootstrap.min/css are based upon those names. So you need to use bootstrap.min/js name and bootstrap.min/css name. It will dynamically detect that this is a CSS file and put it in a CSS folder. The same goes with the JS a file. This is how you do Custom Scripting for Bootstrap v4 and that will be very similar to 'Always Add'. [00:13:39](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h13m39s) Because Always Add would write that script for you. You just add the files you always want to add and the behavior is like this. I'm trying to give you as much liberty as possible so that you can use Libraries in any way you like. Write your Conditions or your own Custom Script or just let JCB add it always.
The area that I like more is the Custom Script area which has the same behavior as in the Site View. We will add the same files here. The only thing that will change, we will add 'component' like that. [00:12:38](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m38s) Wherever we have the component name because we want this to be Dynamic. So that if it gets added to any component, it will dynamically update those names as related to the fact that it will use Bootstrap v4.[00:13:05](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h13m05s) It is using this name Bootstrap v4 and it places a little dash - between them and making it lowercase. These two files `bootstrap.min/js, bootstrap.min/css` are based upon those names. So you need to use bootstrap.min/js name and bootstrap.min/css name. It will dynamically detect that this is a CSS file and put it in a CSS folder. This applies to the JS a file as well. This is how you do Custom Scripting for Bootstrap v4 and that will be very similar to 'Always Add'. [00:13:39](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h13m39s) Because 'Always Add' will write that script for you. Just add the files you always want to add and the behavior is like this. You are given as much liberty as possible so that you can use Libraries in any way. Write your Conditions or your own Custom Script or just let JCB add it always. <<<<<<<<<<<<<<<<
### How Always Add Works?