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 15:24:22 +02:00
parent c3cffacc2a
commit 4d39a3ca31
1 changed files with 10 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -117,41 +117,37 @@ By selecting the Library, the Library will be added to the Component and this V
[00:18:04](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h18m04s)
Uikit v2 was set to fall back to the internal Build-in option, and Uikit v3 was set to fall back to 'Always Add'. If we just look at that, Uikit v3 - Always Add and Uitkit v2 - Build-in. If you want to have both Libraries unto the page, but you want to work within some Custom Implementation. The way to do that is to click on 'New' and use the 'Bundle' option. [00:18:32](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h18m32s) Select those two libraries, Uikit v2, Uikit v3, like that. Decide how you want to do it. It will possibly be a Custom Script or it will be a Conditions one which you will then have to create. Let me just say this, so we could call this Uikit and save. [00:19:06](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h19m06s) Once you have saved it once, you should add the files and go to folders and then add Uikit v3 and Uikit v2 and add them to the media folder.[00:19:39](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h19m39s) These files still have to be linked, selecting those Libraries does not inherently clone its files. The files still need to be added manually. We have got Uikit v3 and Uikit v2. [00:20:07](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h20m07s) Save and close. Now we have the files, and here in Conditions, they are, like folders. It shows you all the files and folders that are found in those two folders that you have added. [00:20:35](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h20m35s) It is not clear which version is which here and it might be a good option to add maybe the folder name here. Possibly it will be changed in the next release. The other option which is also ideal for this kind of implementation is a Custom Scripting which you could still create the Config Fields. [00:21:04](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h21m04s) When this Uikit v2 is selected, it will load the Uikit v2 files. If you create the buttons, it will be added to the component.<<<<<<<<<
Uikit v2 was set to fall back to the internal Build-in option, and Uikit v3 was set to fall back to 'Always Add'. If we just look at that, Uikit v3 - Always Add and Uitkit v2 - Build-in. If you want to have both Libraries unto the page, but you want to work within some Custom Implementation. The way to do that is to click on 'New' and use the 'Bundle' option. [00:18:32](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h18m32s) Select those two libraries, Uikit v2, Uikit v3, like that. Decide how you want to do it. It will possibly be a Custom Script or it will be a Conditions one which you will then have to create. Let me just say this, so we could call this Uikit and save. [00:19:06](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h19m06s) Once you have saved it once, you should add the files and go to folders and then add Uikit v3 and Uikit v2 and add them to the media folder.[00:19:39](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h19m39s) These files still have to be linked, selecting those Libraries does not inherently clone its files. The files still need to be added manually. We have got Uikit v3 and Uikit v2. [00:20:07](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h20m07s) Save and close. Now we have the files, and here in Conditions, they are, like folders. It shows you all the files and folders that are found in those two folders that you have added. [00:20:35](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h20m35s) It is not clear which version is which here and it might be a good option to add maybe the folder name here. Possibly it will be changed in the next release. The other option which is also ideal for this kind of implementation is a Custom Scripting which you could still create the Config Fields. [00:21:04](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h21m04s) When this Uikit v2 is selected, it will load the Uikit v2 files. If you create the buttons, it will be added to the component.
### Using Custom Script In Behavior
[00:21:19](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h21m19s)
But if you use Custom Script, and in the Behavior, you write the custom script, you will need to, let me just show you in the file, you will see that it puts the parameters [00:21:36](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h21m36s) in $this->params. You will need to go down to >get('uikit'), the switch, the button name, that you have created to the Config Fields. You then get the value, put it into a variable, and then based on that variable [00:21:59](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h21m59s) you would either add the file or not add the file. You'll write this script(see video). Just copy this is an example, all the way up there, and go to Editing the Library, paste. This is what the custom script should look like, but that means that you created in the Library Config, you created buttons [00:22:30](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h22m30s) with those names and that the values are related to these values.
If you want to use Custom Script, open the PHP-Setdocument()* by clicking on 'Behavior'. It can be seen in the file that it puts the parameters in `$this->params`. [00:21:36](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h21m36s) Go down to `>get('uikit')`, and get the button name, that you have created in the Config Fields. You then get the value, put it into a variable, and then based on that variable you would either add the file or not add the file. [00:21:59](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h21m59s) You will write this script(see video). For example, I will copy this, and go to Editing the Library and paste it there. This is what the custom script should look like, but that means that you have created buttons in the Library Config, with those names and that the values are related to the values here(Please follow on video).
### HeaderCheck
[00:22:38](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h22m38s)
The HeaderCheck option is something that if you go into the file, you go look at the PHP, you might understand how to use this, and so the HeaderCheck at this stage always being loaded. If you don't want to use the HeaderCheck then you don't use it. But you could go and try and figure out how the HeaderCheck works and then use it. [00:23:06](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h23m06s) That is making a bundle. Let me save this as an example.
The HeaderCheck option is something that if you go into the file, and look at the PHP, you might understand how to use this, and so the HeaderCheck at this stage is always being loaded. It is not necessary to use the HeaderCheck but you can try and figure out how the HeaderCheck works and then use it. [00:23:06](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h23m06s) That is making a bundle and is saved just as an example.
### Uikit Bundle
[00:23:13](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h23m13s)
We got this Uikit and it is a bundle. If we go back to the Site View and we open Looks again. We will now instead of creating Uikit v2 and Uikit v3, we will just create select Uikit bundle instead and that bundle will give me [00:23:32](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h23m32s) Uikit v2 Snippets. If we have any v3 Snippets installed, it will also load that for me. I will be able to work with both Libraries by selecting Uikit bundled Library option. JCB when it compiles, it will use the Custom Script that you wrote in the Bundle to add it to the view. Let me show you that. I'll save and close. Let's go back to the Library. Do something silly to the code [00:24:10](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h24m10s) so that you will see it's implementation. I am going to add these bunch of lines/////////. Save and close. Let's compile and install. Let's look at the code. Now you will see that it is added in this Library files. It's also added in the [00:24:43](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h24m43s) originals because we haven't set that button to show. Let me just show you what I mean. In the component, you need to change the version of the old library implementation. You need to change that. You need to change this from Add Uikit v2 to Dynamic. [00:25:10](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h25m10s) Save and close. If we compile it, you will see it will not add that code to the file twice. You just add that Uikit bundled code that we wrote. Let's look at the code. We see that it only added the code that we wrote. [00:25:38](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h25m38s) Remember in the file we added this(see video) as Custom Script. We need to remove this in the view where we added this in. In the view, we added this custom script. We didn't need to add the spaces. We do have a little bit of a discrepancy there. [00:26:08](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h26m08s)
We got this Uikit and it is a bundle. If we go back to the Site View and we open 'Looks' again. We will now instead of creating Uikit v2 and Uikit v3, we will just select that Uikit bundle instead and that bundle will give me Uikit v2 Snippets. [00:23:32](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h23m32s) If we have any v3 Snippets installed, it will also load that. Now it is possible to work with both Libraries by selecting Uikit bundled Library option. JCB when it compiles it will use the Custom Script that you wrote in the Bundle to add it to the view. Let me show you that. Save and close. I will go back to the Library and add a bunch of lines `/////////` to the code to see its implementation. [00:24:10](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h24m10s) Save and close. Compile and install. In the code, it may be seen that it has been added in this Library files. It has also been added to the originals because that button was not set to show. [00:24:43](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h24m43s) In the component, you need to change the version of the old library implementation and change this from Add Uikit v2 to Dynamic. [00:25:10](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h25m10s) Save and close. If it is compiled, it will not add that code to the file twice. Just add that Uikit bundled code that we wrote. Looking at the code it only added the code that we wrote. [00:25:38](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h25m38s) Remember in the file we added this(see video) as Custom Script. This must be removed in the view where we added it in. We have added this custom script in the view and did not need to add the spaces. There is a little bit of a discrepancy there. [00:26:08](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h26m08s)
I'm going to escape ///$this just that you can see we don't need to add $this in this way anymore. We can go to Details and close Uikit v2 and v3. We still want that Bundle in there as well. We don't need to do custom script anymore. We can [00:26:35](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h26m35s) select Bootstrap v4. Save and close. I'm going to run the compiler again. There we go. If you look at it(see video), here we see that there is that escaped code that we removed. Here is the code that JCB added.
I am going to escape `///$this` just that you can see that it is not necessary to add `$this` in this way anymore. Go to Details and close Uikit v2 and v3. That Bundle in there is still needed. It is not necessary to do a custom script anymore. [00:26:35](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h26m35s) Select Bootstrap v4. Save and close. Run the compiler again. If you look at it(see video), there is that escaped code that we removed and here is the code that JCB added.
### Implementing the get option For The Libraries
[00:27:02](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h27m02s)
Remember I said to you that in JCB, we are linked in. If we look at the Bootstrap v4 Library, [00:27:12](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h27m12s) we set Always Add and we linking it from a link. We just set Local(get). If we look at the code, we see that it wrote for us this path: */media/com_demo/bootstrap-v4/js/bootstrap.min.js'. Let's check if it did add the path correctly. We want to go to the media area of the [00:27:43](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h27m43s) program and go to demo. We see it created the Bootstrap folder and added the files according to the path that is also set. That it is implementing the get option [00:28:07](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h28m07s) for the Libraries. All you did is you just linked it to this view.
NB. In JCB, we are linked in. If we look at the Bootstrap v4 Library, we set 'Always Add' and are linking it from a link and set Local(get). It may be seen in the code that this path has been written for us: `*/media/com_demo/bootstrap-v4/js/bootstrap.min.js'`. Check if it did add the path correctly.<<<<<<<
We want to go to the media area of the program and go to demo.[00:27:43](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h27m43s) We see it created the Bootstrap folder and added the files according to the path that is also set. That it is implementing the get option [00:28:07](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h28m07s) for the Libraries. All you did is you just linked it to this view.
### Linking To Views