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

Updated 049 The New Library Manager Area (markdown)

Amigo 2019-09-02 11:32:09 +02:00
parent 84c17bb8e9
commit 227842a41a
1 changed files with 8 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -62,7 +62,7 @@ The same can be done with Custom Files and Folders as we did previously. Files c
[00:08:19](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m19s) [00:08:19](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m19s)
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'. Libraries Files & Folders are going to change to Local. It will say Local (get). There are few Behaviors, there are Conditions, Custom Script, and 'Do not add'.
### Conditions Under Development ### Conditions Under Development
@ -74,35 +74,32 @@ The Conditions are still under development. [00:08:34](https://www.youtube.com/w
[00:09:17](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m17s) [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. 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 several 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 ### Custom Scripting
[00:12:10](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m10s) [00:12:10](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m10s)
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. <<<<<<<<<<<<<<<< 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 wherever we have the component name because we want this to be Dynamic. [00:12:38](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m38s) 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` and `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) '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. Save and close.
### How Always Add Works? ### How Always Add Works?
[00:14:07](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h14m07s) [00:14:07](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h14m07s)
I'm going to demonstrate how this adding always is going to work in a moment. I'm going to save and close out of here. [00:14:15](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h14m15s) We have Bootstrap Always Add, and Uikit v3 Always Add, and Uikit v2 we using a Build-in option, as same for the FooTable v2 and the FooTable v3. The Build-in options are only available for these 4 Libraries. Not for Bootstrap but for those 4 Libraries. Any other Libraries that you add will not have a Build-in option unless we build one and then it will become available. That is showing you a little around the Libraries. How this 'Always add' is going to work. [00:14:15](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h14m15s) We have Bootstrap Always Add, and Uikit v3 Always Add, and for Uikit v2 we are using a Build-in option, the same as for the FooTable v2 and the FooTable v3. The Build-in options are only available for these 4 Libraries. Not for Bootstrap but for those 4 Libraries. Any other Libraries that you add will not have a Build-in option unless we build one and then it will become available.
### Linking Libraries To A View ### Linking Libraries To A View
[00:14:50](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h14m50s) [00:14:50](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h14m50s)
Let's link the Library to a View. I'm going to go to Site View. I'm going to go and open Looks [00:14:57](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h14m57s) as the Site View. I'm just going to select Bootstrap v4. That's all. The moment I select Bootstrap v4, the Snippets that will show up here will then be the Bootstrap v4 Snippets. Since we do not any more ship Snippets with JCB you'll have to install some Snippets. Let's link the Library to a View. Go to Site View and open 'Looks' and select Bootstrap v4. The moment Bootstrap v4 is selected, the Snippets that will show up here will then be the Bootstrap v4 Snippets. Since we do not ship Snippets with JCB anymore, you will have to install some Snippets.
### Installing Library Snippets ### Installing Library Snippets
[00:15:19](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h15m19s) [00:15:19](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h15m19s)
Let me show you that quickly. You can go to Snippets, you don't need to go to Snippets. The Uikit Snippets are still being shipped, [00:15:32](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h15m32s) but not the Bootstrap v4 Snippets. You then click on Get Snippets, select Bootstrap v4 and it will then load all the Bootstrap v4 Snippets that are available to the community. You can then either use bulk import or you could import individual Snippets for Bootstrap v4. Once it's ready it will show you which ones are new. I'm going to add Bootstrap v4 - (Alert)Alerts - Heading, Get snippet. [00:16:02](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h16m02s) Say yes I want to do that. It's installing it. I'm also going to take that one Bootstrap v4 - (Alert)Alerts - Danger, It says would you like to add it? Yes OK. I've installed two Bootstrap Snippets. The way to install all of them since there's so many, Is the use of the bulk option. So you could come here to Bulk. You will see that it has the Get All New Snippets and you can click on it and it will install all of the Bootstrap Snippets. [00:16:37](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h16m37s) That is the quick way of getting Libraries Snippets into your system and installing them just by clicking on Get Snippet. It will do that for you. This is how it is done. Click on Get Snippets, select Bootstrap v4 and it will then load all the Bootstrap v4 Snippets that are available to the community. It may be imported in bulk or individual Snippets may be imported for Bootstrap v4. Once it is ready it will indicate which ones are new. I am going to add 'Bootstrap v4 - (Alert)Alerts - Heading', Get snippet. [00:16:02](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h16m02s) Say 'Yes' and it will be installed. I am also going to take 'Bootstrap v4 - (Alert)Alerts - Danger', It askes if it should be added? Indicate 'OK'. Two Bootstrap Snippets have been installed. Since there are so many the best way to install all of them is to use the 'Bulk' option. There is 'Get All New Snippets' ,If it is clicked it will install all of the Bootstrap Snippets. [00:16:37](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h16m37s) That is the quick way of getting Libraries Snippets into your system and installing them just by clicking on 'Get Snippet'. <<<<<<<<<<
### Site View - Looks - Libraries - Bootstrap ### Site View - Looks - Libraries - Bootstrap