Updated 049 The New Library Manager Area (markdown)

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

@@ -1 +1,21 @@
-I'm very excited to announce the Actual Library manager implementation We're busy with a pull request we should have it released within the next hour or so I'm very excited about this, this new improvement Is really gonna make [00:00:22](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m22s) Libraries very Dynamic in JCB Not it has not been dynamic It's just Not everybody realizes how easy it is to add new libraries So What I wanna do is quickly Not to elaborate , show you how it used to be done And then I want to jump into how it work now and you'll see why the new implementation is so much easier So much better and [00:00:50](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m50s) I think everybody's gonna enjoy it Ok so let's get started on how it used to work So if we go to a component and we open a component There are three libraries that are already built into JCB that just works out of the box And those three libraries can be selected With the add UI kit add food table Ok Let me see The other libraries that are being added Is when detects [00:01:22](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m22s) Basically some code in the certain areas of the script I'm not gonna elaborate on that, it's going to take too long Point is this two you could select here simply By selecting You know now there's a new feature called dynamic And that is part of what we will need to look at Dynamic Basically means That it is added in on the basis of the views That are linked to the component [00:01:50](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m50s) So The Old Way You had to come to the component and sort of tell it here ok , I want UiKit and I want food table added And you could tell him you know what version you would like Or if you want it with the UiKit you could actually set that it adds both versions Now with improvements you'd set this to Dynamic which basically turns off The Global adding of the Uikit component And then Falls back Onto the new implementation which I will demonstrate with in a moment So let's leave it on this the way it was [00:02:29](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m29s) That was the first way of actually implementing some library The second way Which was the way that you could now scale it Is if you want to go to settings There is component files and folders that you could add So you could click here and say you know what I want to add a library that isn't already part of JCB Ok so let's say you wanted to add Bootstrap So You would say ok there is a folder in your component on the administrator components [00:03:05](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m05s) Component Builder custom And inside that folder you would place the folder For Bootstrap so I don't have it here Let me quickly do that Just now I'm gonna refresh this page I I quickly went and added a folder to this custom folder Called Bootstrap So let me just refresh this So I'm gonna get in click here And then there we have it, select Bootstrap [00:03:36](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m36s) I want Bootstrap to be added to the media folder And since we do not do any Changing of the folder name will just leave that as it is So basically I move this folder into the media folder That's the way you would have done that in the past So close Now Having added the files to the component You will then Actually have to go to the view [00:04:03](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m03s) So if we go to site view And this looks View You will have to in the looks view you know set That it actually now uses Now this is the new implementations I'm gonna undo that And just say Ok in the custom document script area You would add this snippet in here so you add a script now you know that you add the the Bootstrap 4 Folder to media [00:04:36](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m36s) But when it gets installed to Joomla It actually a creates a component folder and put the A files in there If you do not know how that will work out add the folder install it onto Joomla website and go look in the media folder To get the correct path here And save and close and that's how you would in the past have extended JCB To actually use Other libraries then what's built into JCP And ok I Illustrated that simply so you'll know that we could have done this before But it was a little bit more complicated [00:05:13](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m13s) As the way it's going to work now So now With the new changes we've made You can actually Remove The The files IfLine truncated
+# THE NEW LIBRARY MANAGER AREA
+
+### Libraries Dynamic In JCB
+
+I'm very excited to announce the actual Library manager implementation. We're busy with a pull request, we should have it released within the next hour or so. I'm very excited about this, this new improvement is really going to make [00:00:22](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m22s) Libraries very dynamic in JCB. Not it has not been dynamic. It's just not everybody realizes how easy it is to add new libraries. What I want to do is quickly, not to elaborate, show you how it used to be done, and then I want to jump into how it work now. You'll see why the new implementation is so much easier, so much better and [00:00:50](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m50s) everybody's going to enjoy it. 
+
+### How It Used To Work
+
+Let's get started on how it used to work. If we go to Joomla Component and we open Demo component. There are three libraries that are already built into JCB that works out of the box and those three libraries can be selected with the Add Uikit, Add FooTable. The other libraries that are being added, is when it detects [00:01:22](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m22s) some code in the certain areas of the script. I'm not going to elaborate on that, it's going to take too long. Point is this two you could select here simply by selecting. 
+
+### New Feature Added - Dynamic
+
+There's a new feature called Dynamic. That is part of what we will need to look at. Dynamic means that it is added in on the basis of the views that are linked to the Component. [00:01:50](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m50s) The old way you had to come to the component and sort of tell it here, I want UiKit and I want FooTable added and you could tell him what version you would like, or if you want it with the UiKit you could set that it adds both versions. Now with improvements you'd set this to Dynamic which turns off the global adding of the Uikit Component and then falls back unto the new implementation which I will demonstrate with in a moment. Let's leave it on this the way it was [00:02:29](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m29s) That was the first way of actually implementing some library. 
+
+### Second Way - Scale It
+
+The second way which was the way that you could scale it. If you go to Settings, there is 'Component files folders' that you could add, you could click 'Edit component files folders for this joomla component' and say I want to add a library that isn't already part of JCB. Let's say you wanted to add Bootstrap. You would say  there is a folder in your component on the administrator components, [00:03:05](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m05s) component builder, custom folder, and inside that folder you would place the folder for Bootstrap. I don't have it here. Let me quickly do that. I'm going to refresh this page. I quickly went and added a folder to this custom folder called Bootstrap. Let me refresh this. I'm going to click add and then there we have it, select Bootstrap. [00:03:36](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m36s) I want Bootstrap to be added to the media folder. Since we do not do any changing of the folder name, we will just leave that as it is. So I move this folder into the media folder. That's the way you would have done that in the past. Save and close. 
+
+### 
+???
+Having added the files to the component, you will then have to go to the View. [00:04:03](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m03s) If we go to Site View, and this Looks View, you will have to in the Looks View set that it uses (This is the new implementations I'm going to undo that) and just say in the Add PHP (custom document script) area, you would add this snippet in here so you add a script now you know that you add the the Bootstrap 4 Folder to media [00:04:36](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m36s) But when it gets installed to Joomla It actually a creates a component folder and put the A files in there If you do not know how that will work out add the folder install it onto Joomla website and go look in the media folder To get the correct path here And save and close and that's how you would in the past have extended JCB To actually use Other libraries then what's built into JCP And ok I Illustrated that simply so you'll know that we could have done this before But it was a little bit more complicated [00:05:13](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m13s) As the way it's going to work now So now With the new changes we've made You can actually Remove The The files If you have done this this manual way You can actually remove these files So close [00:05:35](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m35s) You don't need to add them any this way anymore They will be added in another way now I'm gonna demonstrate the other way By actually starting at the libraries area Some closing out of the component I'm going to libraries And you see that with the upgrade There's now a Bootstrap 4 library ,Uikit 3 2, Food table 2 and 3 and a No Library [00:06:06](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m06s) Which is really only necessary when you create a snippet which doesn't belong to any library Just your own snippet that you want to use So The Snippets are now directly linked to these libraries These libraries These six which been shipped with JCB Should not be changed In relation to its name Or it's type [00:06:33](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m33s) But you can change its behavior now the behavior is the file behavior There are an a various file behaviors Let's open Bootstrap to show you some of those The moment Bootstrap is set on always add And it is linking in basically a Content distributed Network link And it says that it it should add it as a link Now you can change that you can say no I don't want to add it as a link [00:07:04](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m04s) And you can edit this And Without Making any changes to the link you can change this to A local And that what JCP will then do Is during compilation he will download these files And add them into the component as local files Which would then be used instead as the link Which I think is quite nice [00:07:32](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m32s) You could also do the same thing here as we did previously you could add Files from the same custom folder And also folders Those are The same kind of implementation except It's now done on a library level So that even library gets added to a view as I will show you in the moment You automatically use this Files So that means [00:08:01](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m01s) You don't need to do it per component You basically do it per library and as you link the libraries to Views It'll automatically incorporate these files into your component which makes it a little bit Less effort you just set it up once And thereafter you could just reuse, reuse Do I'm gonna change this to local So now it will says local get There is an a few behaviours year there is a conditional custom script and do not add Now the conditional Is 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 So for now Skip the conditionals option until you see that when you compile that it doesn't give you a warning at This moment If you compile JCB Your give you a warning that the conditional options are not available yet I'm in fact we're planning to have them released with the next release Which would be 2.6 point 7 [00:09:09](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m09s) So any any version if you looking at this tutorial after 2.6 - 7 Then the conditional opLine truncated