032 JCB manual custom code implementation

Automatic import of custom code during compilation This is one of our latest features that's been added to the JCB component 00:00:16 And I'm happy to demonstrate it to you now since all it's functionality is in place Also explain to you some of the limitations that currently still exist And hope that it will become A very useful tool To all of you out there Ok so First what does it do Well Is actually a little mutated from what it's original intent was And it's become two things really so the first thing is And this is obviously what was initially 00:00:52 Intended Is that you would be able To add Code To your component once it's been compiled and installed into that same Joomla website That you be able to Go into that code And with a few placeholders Actually add code 00:01:21 That once you compile the component again JCB with dynamically grab that code extracted into It's database store it there And from there on forward Continue to add it back in Into the component every time Now The way we've done that As we have not used the line numbers As the main 00:01:50 Way of determining where that code must be added because of the reality that line numbers Always will change You know you might have let's say let's say the custom code that you're adding You said line 105 or something And if you make it change at line 20 Then that Means all the code moves down of course and now we don't know where to add your code 00:02:19 Without either writing over or placing it before and You know there's all kinds of complications So the only way we could resolve that Is to create What we initially called the fingerprint But later became a Hash Reference of the code a few lines of code above the The the custom script And a few lines of code below the customs 00:02:50 Now It varies from how many lines it Uses And there is a reason for it I'm not gonna Bore you with the The detail If you want to see how we do it there is actually The code is open source so you can actually go look at it So there is a function In the A get file which is part of the 00:03:22 Compiler a set of Files So The functions name is Search file content And it's in this function that it really goes through every line of the code That is already on The Joomla website and then when it finds it it's adds it to in array which eventually gets safe to do they device So this is the lines that actually does the work 00:03:53 Obviously there's lots of things that works With this this function But this is the Yeah this is the centre of Of everything Obviously I'm very sure there are better ways to do this And so we will constantly improve this as others makes suggestions And Make sure that it remains stable But to to explain why it sometimes 00:04:27 Uses more or less of the lines above it should never use more than 8 lines Because basically Here it is packing the fingerprint Taking the line content putting it into an array And every time It passes it shakes where that array You know if it's greater than 10 We cut it down to 6 Ok 00:04:54 And this continues to happen over and over and over because we don't want this fingerprint array to become bigger Then let's say 10 lines And at some point when we find A placeholder we actually take that Fingerprint Array And we we create A a hash From it And then we store that hash into the database 00:05:24 So that means That amount of lines are changing Because it could be or we have just cleared the array and we are at 6 lines And then we add a 7th and now we find a place holder and everything happens Obviously there are two ways in which the code is added Ok and I think I have Explain that in the Previous tutorial but I can do that again here Quickly Let's see where is it 00:05:56 Oh here we go In that same file there is a comment Way at the top Which gives their explanation Of the place holders Now obviously the place holders these these These X s here Must be Asterixs There like that one And they get 00:06:26 This is the one with which you would start either to insert or to replace There is also note on GitHub about this which may be Would See more logical Let's go there So here we are at Github It's on issue 37 if you want to go look at it Under the Joomlal component On GitHub 00:06:55 The component Builder on GitHub so Basically to start Inserting code you would use this as a placeholder And then your code Obviously on a new line And then when you're finished this would close that code block but sometimes you don't want it insert code You wanna actually Place code that was generated by JCB And then you'd use the replace code placeholder And then again Use this one to end the code block 00:07:25 Now when component Builder On compilation discovers these tags They get converted to from insert to inserted and from replaced from Replace to be replaced And It adds it back with out this diamond In between those You know dollar signs And inserted Text or replaced text 00:07:55 It removes them because basically by doing that it means that this code doesn't need to be updated The moment to add those two back In there between those 2 Values Then the next time component Builder compiles It actually knows ok this piece of code I need to check again and update Whatever is in the database because it's been changed 00:08:25 This diamond here tells it There is a change you need to update Now You will see that now there is this new number being added next to the The code That number Is actually the ID Of the data Database Column sorry Row the database row 00:08:49 That JCB Is Actually stored the code in So if you change this number You gonna Yeah you gonna have a problem So don't change this number JCB put this number in So that he can Basically know where to go update the code in the database so Once you've made any changes to the code you would simply at this diamond back in that's quite important otherwise it will not be 00:09:18 Be parsed and it will be overwritten by what's in the Database So That's really it that was the initial purpose of this new feature was to be able to in the Editor create code and then on the fly have it become part of the JCB Infrastructure For your component And then in the future it will continue adding that code back in Without you having to write it Or 00:09:47 Remembered or in anyway And if you wanna change the code you just add these Diamonds either for the insert or for the replace depending on what you did And it will automatically then know there's been a change and it will first update what is in the data Base and then store it back Into the new compiled version So That is exciting in itself I realize 00:10:12 It's a It's a real stunning new feature We have been doing some teething on some of its implementation if you even read down here There's some comments and things we are at the moment at version 2.3.2 which is not yet released I'm busy working on it Because this new version 2 3. Sorry 2.3.2 Will include 00:10:41 The extra feature which wasn't Ever Really discussed here on the Forum Because it was a feature that I've been Hoping for Quite some time You know I've actually build quite a number of components with JCB by now And I've always had this issue that I would develop a very smart Function A custom script obviously inside of some view or some field or somewhere In JCB and then I would like to use it again elsewhere 00:11:15 But then I have to copy it And go pasted there And it will happen that I would improve it there you know it Add this little thing there and I Sort of debug this Improve the whole function the whole maybe just pieces script or whatever I just improves it And then it where I took it from does I need to know copy again back there and it It's always this Copy and move and then obviously there's variables inside that needs To be different names 00:11:47 And This always been a Yeah Very unpleasant Experience And so since I know of object orientated concepts I've always wondered Is there a way for me to with JCB create the Same kind of In a small way of course But give that some kind of functionality 00:12:09 And so when this new improvement came along Immediately thought Well yes there is actually there is a Way for us to make this work for both both of these aspects so what did we do Well I Let me see where we I created The option for you to Either I used the hash automation Which is the one I've just explained or to use the JCB manual 00:12:47 Now JCB manual if you setup custom code The JCB manual Will do exactly that It will literally create The option For you To take This place holder For example And I have a field let me open it 00:13:47 Ok sorry about that Where Have a few jumps there I had to open the field So basically I have a field here with which I upload images so that will drag and drop Field is actually and note as you can see but I'm using some HTML in the Description and I've added some JavaScript To this footer of wherever does field is being used So Basically this code 00:14:16 Is used to upload Or to it's part of the process this much more code but this is what I need to Reuse quite often And so Improve this in many areas and then I would always have to come back here and there are certain Ask a sorry text The differs from each Place for example that word teaser It's a bit different Everywhere else and the word image sometimes it must be 00:14:48 Images and not just image And so what I've done now is I've actually taken This code I've added it to a custom code Obviously I have set this is JCB manual And I everywhere where I want Dynamic Script updates I've added the Arg values If You Wanna understand and more about the Arg values Just read this note above here for basically in To make to say it simply 00:15:19 Arg These arg areas is like placeholders And I can pass strings or Values Via this custom Code placeholder and it gets updated on the fly during Compliation everywhere where I used this Code snippet else in elsewhere in in JCB So this 00:15:44 This gives me a little bit of that Object orientated Feeling where I write a function or a piece of script once And then I can reuse it everywhere else And simply update the values being passed to it so it's it's by far not Not error proof there if you Obviously you can't use any commas in these values and you can't use any plus signs In these values It needs to be 00:16:15 One word It can have a dollar sign if you wanna actually have it Place A Dollar Sign symbol in the code but it obviously doesn't Execute the string that you pass so it will literally just pasted in Wherever you've placed this arg place holder So you have got you can add as many Values to this custom code I'm in arg values As you want but always make sure that they're mounted values that is in the code must Correspond to the amount of values that you are passing to it 00:16:54 Otherwise you would end up having a certain Area of the code the arg Placeholder will not be replaced With anything it will stay Like that If there doesn't have a value for it Ok so now what I'm doing is back into the field I basically Add the place holder here Since it is Id1 obviously it's that one number one and I am passing three values to it 00:17:28 Image image and teaser Which will then correspond to the replacing arg values here So that 01 would be image This one value here would be image and this one would be teaser So it will actually replace it on compilation and now I'm able To reuse this code anywhere else In in JCB So far I obviously have saved this previously I'm gonna just close it now and just open another one 00:18:03 I've got one here called poster Which is basically doing the same thing And so now I'm also passing image image and then poster so That means now on this Area It will actually Change that second Arg value which is actually the third one It will update it to poster instead And so I have 00:18:29 Somehow the ability to now have dynamic Code in custom code which can be reused all over JCB The only negative thing currently Is that This kind of code that actually has Dynamic values past To it Will not be updated By any changes you make in the editor outside of JCB so if you think about the 00:18:58 Two functions you'd realize that they do not fully merge at this stage But Let me say this if you Have a snippet of code which has None of these Arg For example if you only used It like this Without any place holders like that Sorry without any extra values now that code will be actually Replaced If you make any changes to it in the editor 00:19:32 So it will Start behaving like the initial implementation it it will place it back into the component With that inserted tag above it and if you put the diamond in like we explained you know it will get this inserted tag sorry not that one this one So if you if you have a custom code To which you not passing any values Then it will add this inserted around it and you can then in the editor Add a diamond in there so that looks like this And then on compilation it will update that code in JCB and then place it back into The new compiled component 00:20:16 So That still works And I think it's amazing that it does but Unfortunately the moment you pass any arguments to it Like so then we know that there are Arg placeholders in the Script like that And since the script is now being used at multiple areas with multiple values Now let's say you change one of them You don't really want it to replace the the database script because How will we know where these arg placeholders should be placed 00:20:53 The code at that stage has nothing, no reference whatsoever to these arg values Now there is an idea busy formulating Which we would Ideally Move All the arg values Up Above your script Like this Maybe put some 00:21:14 Convention of arg's you know, wait Like that and then arg and then equal And then wait sorry Then change this to Value Bar in this case because it's JavaScript And That could possibly start resolving the issue 00:21:45 I'm still working on it which then we would only really not update this area In the data in the database But update the whole rest so you would then in that case use value Where ever arg0 is to be found Like that Then we need only take care of this area and this area can be done dynamically updated I haven't actually Find a complete Satisfaction with this solution 00:22:22 I'm still working on it But I can guarantee you That it is something I would like to be able to do is to make a change to it in the editor and it Also updates it here in the database I think that would be excellent But for now Any code with args As long as this note remains here I think we said here that if there is any change to these limitations These notes will change So the next time you open it and you see the note is different you would be as happy as we are with the 00:22:56 Advance and so that that is really the other Feature that we've now add Basically creating custom code and then reusing it across Multiple areas of your component Without Without the The old complexity of needing to update it every where again obviously you need to know your PHP and whatever language you are Targeting with this custom 00:23:28 Code well enough So that you By this place holders and by everything else that it actually works If it does not work that debugging and everything unfortunately is is your responsibility there is another thing that is still functional though I think I didn't mention it Yet and that's the component placeholder And the view placeholder if if this specific script Is gonna end up somewhere under a specific View This one actually doesn't 00:24:02 Wait it does actually because your field script this field script it gets added to the view footer right so Then you have a view placeholder which basically is just also three brackets View Like that and three brackets So that's how you could then do a view Dynamic update Of anything you know if you if you need to use to view a string name any where in the script okay so that means you have component Obviously with the uppercase 00:24:39 And the all uppercase and all that Variations And you have the view unfortunately only That current view that is being targeted Will be added to that place holder In lowercase so that that is Demonstrating the Well I've demonstrated actually actually demonstrated So we have got these there I'm just gonna not save it because None of the changes here is relevant 00:25:11 And then I will compile this now And then In the code show you where it's been added Ok A component that it's Using That at the moment is registry Ok so I'm gonna install it now So let's go look at the code where it should have been added 00:25:41 So in the code we see there the image is being updated with image Teasers have been placed there images been placed There As well as in all the other areas where we had those arg placeholders they've all been updated And the code itself has been inserted in the correct area Well That is custom code in a little different implementation of it We've called that The 00:26:14 JCB manual option If you wanna know more about the hash automation option Then please watch the previous Tutorial On YouTube Thank you for watching