032 JCB manual custom code implementation

Automatic import of customer code during compilation This is one of our latest features there's been added to the JCB Component And I'm happy to demonstrate it to you now since all it's functionality is in place Also explain to use 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 in it Intended Is that you would be able To add Code To your component once it's been compiled and installed Called into that same Jamila website That you be able to Go into that code And with a few placeholders Actually add code That once you compile the component again JCB with dynamically grab that code extracted into It's database stored there F&i 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 Way of determining whether at code must be at it because of the reality that line numbers Always will change You know you might have let's say It's a daylight let's say the custom code that you're adding You said line Hundred 5 And if you make it change it lying 20 Then that Means all the code moves down of course and now we don't know where to add your code Without either riding over or pressing it before and You know there's all kinds of complication So the only way we could resolve that Is to create What we initially call the fingerprint But later became Hash Reference of the code a few lines of code above the The the custom script And a few lines of code below the gases Now It varies from how many lines it Uses And there is a reason for it I'm not gonna Boy 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 I get file which is part of the Compile 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 2 in a row which eventually gets safe to do they device So this is the airlines that actually does the work 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 make And Make sure that it remains stable But to to explain why it sometimes Uses more or less of the lines above it should never use more than 8 lines Because basically Yeah it is packing the fingerprint Taking the line content putting it into an array And every time It passes it shakes where the letter A You know if it's greater than 10 We cut it down to 6 Ok 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 has into the database So that means That amount of lines are changing Because it could be a with just cleared the air a and we are at 6 lines And then we had a 7th and now we find a place holder and everything happens Obviously there are two ways in which the code is add it Ok and I think I think Explain that in the Privacy tauriel but I can do that again here Quickly It's Oh here we go In that same file there is a comment With top Which gives their explanation Of the place holders How busy the place holders these these This Axis year Must be Asterix I like that one And they get This is the one with which you would start either to insert or to replace there There is also no time get up about this which may be Wood See more logical Let's go there So here we are and Get up It's an issue 37 if you want to go look at it Under the Joomla component I'm good up The component Builder on get up 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 to replace code placeholder And then again Use this one to end the code block 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 Rihanna dollar signs And inserted Text or replace text It removes them because basically by doing that it means that this Score doesn't need to be updated The moment to add those Tupac 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 This diamond here tells it There is a change you need to update Now You 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 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 Totally can Basically know where to go update the code in the database so The 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 Be passed 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 air 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 Remembered When anyway And if you wanna change the code you just add 2 Is diamonds I therefore the insert or for the replace depending on what you did And it will automatically there no there's been a change and it will first update what is in the data Bass and then store it back Into the new compiled version So That is exciting in itself I realise 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 To which is not yet released I'm busy working on it Because this new version 2 Sea Point Sorry 2.3.2 Will include 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 Tracy CB 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 But then I have to copy it And your pasted there And it will happen that I would improve it there you know it At this through thing there and I Sort of debug version 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 in it Let's always this Copy and move and then obviously there's variables inside that needs To be different names And This always been a Yeah Very unpleasant Experience And so since I know of object-oriented 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 And so when this new improvement came along Immediately thought Well yes there is actually there is a Is a way for us to make this work for both both of these are aspects so what did we do Well I See where we I created The option for you too Hi there I used the hash ordination Which is the one I've just explained or to use the JCB manual JCB manual to 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 a field let me open it Ok sorry about that Where Have You jumped there I had to open the field So basically have a field here with which I upload images cereal drag and drop Field is actually and note as you can see but I'm using some HTML in the Das Description and I've added some JavaScript To this footer of wherever does field is being used So Basically this code Is used to upload Or two it's part of the process this much more code but this is what I need to read Use 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 difference from each Place for example that word Pisa It's a bit different Everywhere else and the word image sometimes it must be him 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 said this is Jason B manual And I everywhere where I want Dynamic Script updates I've added the Arc values If You Wanna Waste and more about the Ark value Just read this note above here for basically in To make to say it simply Arc These are areas alike 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 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 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 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 our place holder So you have got you can add as many Values to this custom code I'm in our values As you want but always make sure that they're mounted values that is in the code must Correspond to the Mount of Ali's that you are passing to it Otherwise you would end up having a certain Area of the code the art 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 At the place holder here Since it is Id1 obviously it's that one number one and I am passing three values to it Image image and teaser Which will then correspond to the replacing art 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 N j c b So far I obviously have saved this previously I'm gonna just close it now and just open another one 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 Arc value which is actually the third one It will update it 2 poster instead And so I have Somehow the ability to now Add 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 it Two functions you'd realise 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 Ark 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 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 in her Forget this insert it 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 insert it 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 So That still works And I think it's amazing that it does but Unfortunately the moment you pass any arguments to it Bikes so then we know that there are Ark 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 are placeholders should be placed The code at that stage has nothing no reference whatsoever to these are values Now there is an idea busy formulating Which we would Ideally Move All the Arc values Up Above your script Like this Maybe put some Convention of Arcs Hero weight Like that and then ask and then equal And then wait sorry Then change this to Value Bar this case because it's JavaScript And That could possibly start resolving the issue 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 ask 0 is to be found Like that Then we need only take care of this area and this area can be done Weekly updated I haven't actually Find a complete Satisfaction with a solution 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 all Also updates it here in the database I think that would be excellent What for now Any scored with arcs As long as this note remains here I think we reset here that if there is any change to these aromatase Oceans These notes will change So the next time you open it and you see the notice different you would be as happy as we are with the Advance and so that that is really the other Feature that we've now add Basically creating custom code and then we using it across Multiple areas of your component Without Without the opener the The old hole complexity of Reading to updated every where again obviously you need to know your pH P and whatever language you are Targeting with this custom Code well enough So did you Buy this place holders and buy everything else But it actually works If it does not work that debugging and everything unfortunately is is your response 30 there is another thing that is still functional though I think I didn't mention it Yet and that's the component placeholder And of this the view placeholder if if this specific script Is gonna end up somewhere under a specific View This one actually doesn't Wait it does actually because your field script this field script it gets ad Add it to the view footer right so Then you have a view placeholder which basically is just also three brackets View Like that Am3 bracket 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 anyway Where in the script ok so that means you have component Obviously with the uppercase And the op 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 haven't 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 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 His registry Ok so I'm gonna install it now So let's go look at the code where it should have been added So in the code we see there the image is being updated with image Teazers been placed there images been placed There As well as in all the other areas where we had those are placeholders they've all been updated And the code itself has been inserted And the correct area Well That is custom code in a little different implementation of it We've called that The JCB manual option If you wanna know more about the hash automation option Then please watch the previous two Tutorial On YouTube Thank you for watching