049 The New Library Manager Area

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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 So any any version if you looking at this tutorial after 2.6 - 7 Then the conditional options already working So I'm gonna just demonstrate it briefly The conditional options works in two ways the one is you first need to add some configuration fields now configuration fields Is basically Fields that will be added to the global Options of the component And if those fields are tripped It will have an effect on whatever way you set it 00:09:41 So to show you that If you look here you'd see there is an options area If we click on the options area That's now in a component you would see there is Uikit2 settings And it has a bunch of Buttons here That's basically the kind of buttons That you can build So you first go and create the fields in JCB as you would normally create any other field And then in the library come here and click on getting the configuration fields 00:10:15 So Here I'm just gonna select the anything so I'm just gonna say Add more maybe as an option And I want to Created under the tab called Boot.... strap Just like that So that's gonna be the tab name That's gonna be the the the radio button 00:10:37 Save and close just as a demonstration So now if I change this to configuration And I click on adding a configuration and then I say I want to add the local These two local files I want them to be included When add more is said to Yes That's basically How this configuration of conditions will work 00:11:06 In a relationship so You won't see any option Fields if you haven't created Option fields In the configuration So if you wanna use this area when it is eventually ready You will have an include and exclude option Based on buttons And then you select the files you that you want to Be added or Not not be added 00:11:32 Based on these selections Now these buttons obviously as 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 ok if it's the switch is 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 With the same implementation So that is giving a idea of where this conditional Area is supposed to come into play The area that I have really like more is actually the custom scripting area Which really Is giving us the same behaviour as what we did in the site view right So we basically just add the same Files here And The only thing will change it will add 00:12:38 Component Like that Wherever we have the component name Because we want this to be Dynamic or that needs to be Three of those 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 version 4 It really is using this name here 00:13:05 And it's putting a little - between them and making it lowercase And These two files Are based upon those names there so you basically need to use that name And That name And it will dynamically detect that this is a CSS file I put it in a CSS folder and same the same goes with the JS a file So basically this is how you do a custom scripting for Bootstrap 4 And that will be very similar to Always Add 00:13:39 Because Always Add would basically write that script for you And so you just Add the files you always want to add And the behaviour is like this so Really I'm trying to give you as much Liberty as possible So that you can use libraries in any way you're like Write your own conditions Or your own custom script or just let JCB add it always Now I'm gonna demonstrate how this adding always is gonna work in a moment Can I save and close out of here 00:14:15 So we have basically Bootstrap Always Add and Uikit Always Add And Uikit Version 2 we using a built-in option as same for the food table and the food table Version 3 So the Build-in options are only available for these 1 2 3 4 libraries Not for Bootstrap but for those 4 libraries And any other libraries that you add will not have a Built-in option unless we build one and then it will become available Ok so that is showing all around the libraries now Let's link the library to a view so I'm gonna go to site view I'm gonna go and open looks 00:14:57 As the site view And basically I'm just gonna select Bootstrap 4 That's all the moment I select Bootstrap 4 the Snippets That will show up here will then be the Bootstrap 4 Snippets Since we do not anymore ship Snippets with JCB You'll have to install some Snippets So let me show you that quickly You go to Snippets you don't really need to go to snippets. Ok, so the Uikit Snippets are still being shipped 00:15:32 But not the Bootstrap 4 Snippets You then click on get Snippets Select Bootstrap 4 And it will then load all the Bootstrap 4 Snippets that are available to the community You can deny the user bulk import Or you could import individual Snippets for Bootstrap 4 Once it's ready it will show you which ones are new So let's I'm gonna add That snippet 00:16:02 Say yes I wanna do that So it's basically installing it And then I'm also gonna take that one It says would you like to add it too? say yes ok so I've install to Bootstrap Snippets The way to install all of them since there's so many Is the use the bulk option So you could actually come here to bulk And you see that it has the new and you can click on this and it will install all of the the Bootstrap snippets Ok 00:16:37 So that is the quick way of getting libraries Snippets into your system And installing them Just by clicking on On get snippet And it will basically do that for you Now let's go back to site views And again open the looks area So now if I select Bootstrap 00:17:05 Then you'll see those two Snippets that I've installed And I can Click between them and really that's just for you to get the snippet And to be able to add it into your You know into your code Where ever you would like it to be like that Ok so I'm gonna do that I'm just gonna demonstrate Adding the library so selecting the library here 00:17:29 Is what will add the library to the component and actually to this view So you can select Multiple libraries for one View But there could be a problem with that if you for example want Uikit version 2 and Uikit Version 3 on this page but you want to have it Only use the one or the other based on certain switches in the global options of the component Now Uikit version 2 was set to fall back to the internal Build-in option 00:18:04 And Uikit Version 3 was said to fall back to Always add So if we just look at that Ok so that's Always Add and Built-in Now you want to Actually have both libraries under the page But you wanted to work within some custom implementation the way to do that is to click on new And use the bundle option 00:18:32 Select Those two libraries Like that Decide how you want to do it so it will be possibly a custom script Or it will be a conditional one Which you will then have to create Obviously let me just say this So we could call those Uikit Bundle Let's call it Uikit like that 00:19:06 And save Now Once you've saved it once You should now add the actual files So You would go to folders And then At Uikit 3.... wrong button Uikit 3 and Uikit 2 00:19:39 ......... And you wanna add them to the media folder So You'll have to still link the files remember selecting those libraries Doesn't inherently clone it's Files You'll need to still manually add the files so now we've got version 3...... Why is this so difficult here we go 00:20:07 The screens not working along here Ok you like it Version 3 and version 2 And save and close So now We have The files And here they are as folders And it shows you all the files and folders That are found inside of those two folders that you've added So 00:20:35 Yeah I think it's little difficult you cannot see which version is which here This might be a A good option to add Maybe the folder the name here I think that will be In the next release we will make that change But I think the other option which is also ideal for this kind of implementation is a custom scripting Which you could still create The the the configed files Fields excuse me 00:21:04 So when it when it's this Uikit version 2 is selected it will load the Uikit version 2 files But you must understand if you create the buttons it will be added to the component But if you use custom script And in here in the behaviour you write the custom script You need to Let me just show you in the file So in the file You see that it actually puts the parameters 00:21:36 In params this params So You will need to down here Get The Uikit The switch the the button name That you now Have created to the configed fields You then get the value put it into a variable And then based on that variable 00:21:59 You would either Add the file or not add the file So you'll basically write this script If I was to Just copy this is an example All the way up there And go here paste This is basically what the custom script should look like But that means that you created In the library config you created buttons 00:22:30 With those names right And that the values are related to these values here 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 wanna use the edit check then you just you know just don't use it But you could go and and try and figure out how the HeaderCheck works And then use it 00:23:06 anyway so that is Making a bundle Now let me save this as an example And so now we got this Uikit And it's a bundle If we go back to the site View And we open that up again We will now instead of creating this one and that one we will just create Select that bundle instead And that bundle will give me 00:23:32 Uikit version 2 snippets it and if we have any version 3 snippets installed it will also load that for me So I will be able to work with both libraries Why selecting is bundled Library option and JCB when it compiles He will basically use the custom script that you wrote in the Bundler To add it to the view so let me Show you that so I'll save and close here And let's go back to the library quickly And just do something silly to the code 00:24:10 So that you will actually see it's implementation I am just gonna add These bunch of lines here Save and close And then let's compile this and install Ok let's look at the code So now you see that it's added in this library files Obviously it's also added in The 00:24:43 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 So now You need to change this from adding Uikit version 2 To basically to dynamic 00:25:10 Save and close No if we compile it now you will see it will not add the That Code To the file twice You're basically just add that Uikit bundled Code that we wrote Ok let's look at the code So now We see that it only added the code that we wrote 00:25:38 And then Remember in the file we added this as custom script So we need to go remove this In the View Where we added this in So in the view we added these custom script We actually didn't need to add the spaces And we do have a little bit of a A discrepancy there 00:26:08 Ok I'm gonna escape this just that you can see We don't need to add this in this way anymore We can go here And Basically do that we still want that Bundler in there as well Ok so we don't need to do this anymore We can just 00:26:35 Basically select Bootstrap Save and close And then I'm gonna run the compiler again There we go If you look at it hear we see that there is that escaped code that we removed And here is this code that JCB added remember I said to you that We basically in JCB We are Linked in If we look at the library might not here 00:27:12 Let's go here The Bootstrap 4 library we set Always Add And we basically linking it from a link right and we just said local get Now if we look at the code We see that it wrote For us this Path So now let's check if it actually did add the path correctly So we wanna go to the media area of the 00:27:43 Program And go to ......... Demo And so We see it created the Bootstrap folder And added the files According to the path That it also set here so that it is really implementing the get Option 00:28:07 For the libraries And all you really did is you just linked it to this view This does give another situation where To every view that you want is pacifically library to be available You need to link it To that View Which wouldn't be a problem If you created a view now and just add your library and then add the Snippets Then I mean then you're starting a fresh and you will actually select the right views you want to use But if you since you haven't done this before all the components 00:28:46 If you wanna use a library in the view You have to go and add it Or you just have to Basically in the components area fall back On the old way of implementing The the libraries that are built into JCB so that means the old implementation still work If you If you basically set it here to Add both Uikit version 1 and 2 and 3 00:29:19 And also Maybe to add food table version 2 those Implementations still work And doing that will add it to every custom and admin view where it's used Sorry Custom insite view custom admin view site view template layouts So that that's the old way and that still works it's just that when you want to start using like Bootstrap 4 You'll have to actually link it to the custom admin view or site view or template layout 00:29:53 Where you want That specific library to be available So View link in Bootstrap over here Then it will be available to this layout and to every view where this layout is Used Ok so that's the quick and demonstration of the new Libraries implementation We call it a library manager 00:30:19 Because of The Diverse ways of you linking in the files and so forth We really hope that you Understood then are able to enjoy this new implementation We want to Make it possible for you to add libraries And then basically share that snippets With the rest the community So those of you that interested in doing that Please watch some of the previous tutorials about Snippets and the snippet manager Because 00:30:50 I think doing this will not only help everyone else in the community but also get your name I'm out there I get people connected with with each other Anyway Thank you for watching