joomla/Component-Builder
joomla
/
Component-Builder
38
20
Fork 11
Code Issues 53 Pull Requests Projects 3 Releases Wiki Activity

Updated 032 JCB manual custom code implementation (markdown)

Amigo 2019-07-16 12:28:32 +02:00
parent 50a8db4587
commit 770163aa29
1 changed files with 10 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
032-JCB-manual-custom-code-implementation.md

@ -50,12 +50,18 @@ It is a drag and drop field. It is actually a note as may be seen. Some HTML is
### Difference Between Editor Changes And Custom Code Changes
[00:18:39](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h18m39s)<<<<<<<<<<<<<<<
[00:18:39](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h18m39s)
The only negative thing currently is that this kind of code that has dynamic values past to it, will not be updated by any changes which is made in the editor outside of JCB. [00:18:58](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h18m58s) The two functions do not fully merge at this stage. A snippet of code which has none of these 'arg', for example: If it is only used like this, without any extra values, that code will be replaced, if any changes is been made to it in the editor. [00:19:32](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h19m32s) It will start behaving like the initial implementation. It will be placed back into the component with that inserted tag above it, and if the diamond is placed in like it has been explained, it will get this inserted tag. If you have a custom code to which no values are being passed, it will add this '[inserted$$$]' around it, and then a diamond may be added in the editor. On compilation it will update that code in JCB and place it back into the new compiled component. [00:20:16](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h20m16s)
Amazingly it still works, but unfortunately the moment any arguments are passed to it,(see video) then we know that there are 'arg' placeholders in the Script like that. Since the script is now being used at multiple areas with multiple values. Say for instance, one of them is changed, it is not desirable that the database script is being replaced, because there would not be any indication as to where these 'arg' placeholders should be placed. [00:20:53](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h20m53s) The code at that stage has no reference whatsoever to these 'arg' values. The ideal is that all the 'arg' values
should be moved above the script.(see video)[00:21:14](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h21m14s) Perhaps to put some "convention of arg's", like that and then 'arg' and then 'equal' and then change this to value 'var', in this case, because it's JavaScript and that could possibly resolve the issue. [00:21:45](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h21m45s)
The only negative thing currently is that this kind of code that has dynamic values past to it, will not be updated by any changes you make in the editor outside of JCB. If you think about the [00:18:58](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h18m58s) two functions you'd realize that they do not fully merge at this stage. 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 extra values, that code will be replaced, if you make any changes to it in the editor. [00:19:32](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h19m32s) So it will start behaving like the initial implementation. It will place it back into the component with that inserted tag above it, and if you put the diamond in like we explained, it will get this inserted tag. 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. And then on compilation it will update that code in JCB and then place it back into the new compiled component. [00:20:16](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h20m16s)
While it is in the process of improvement, this area should not be updated in the database but the rest should be updated. In that case use 'value' wherever 'arg0' is to be found. (see video) Then only care should be taken of this area and this area can be dynamically updated. [00:22:22](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h22m22s) Development is being done in order to make it possible that if a change is made in the editor, that it should also get updated in the database.
If there is any change to these limitations, these notes(See video) will change. [00:22:56](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h22m56s) That is the other feature that has been added and that is to create custom code and then to reuse it across multiple areas of your component, without the complexity to update it every where again. You must be familiar with PHP or whatever language you are targeting with this custom code so that by this placeholders and by everything else may determine if that it actually works. [00:23:28](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h23m28s) Unfortunately if it does not work that debugging etc. is your responsibility.
That still works, and I think it's amazing that it does, but unfortunately the moment you pass any arguments to it, like so(see video), 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 database script, because how will we know where these arg placeholders should be placed. [00:20:53](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h20m53s) The code at that stage has 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. (see video)Like this maybe put some [00:21:14](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h21m14s) convention of arg's, like that and then arg and then equal and then change this to value var, in this case, because it's JavaScript and that could possibly start resolving the issue. [00:21:45](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h21m45s) I'm still working on it. Which then we would only really not update this area in the database. But update the whole rest so you would then in that case use value where ever arg0 is to be found. (see video)Then we need only take care of this area and this area can be dynamically updated. I haven't actually find a complete satisfaction with this solution. [00:22:22](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h22m22s) 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 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. 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](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h22m56s) advance. 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 the old complexity of needing to update it every where again. You need to know your PHP and whatever language you are targeting with this custom [00:23:28](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h23m28s) code well enough so that you by this placeholders and by everything else that it actually works. If it does not work that debugging and everything unfortunately is your responsibility.
### The Component placeholder, and the View placeholder
There is another thing that is still functional though. I think I didn't mention it yet, that's the component placeholder, and the view placeholder. If this specific script is going to end up somewhere under a specific view, [00:24:02](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h24m02s) because your field script, this field script gets added to the view footer. Then you have a view placeholder which basically is just also (((view))). So that's how you could then do a view dynamic update of anything, if you need to use the view string name any where in the script. That means you have component with the uppercase[[[Component]]] [00:24:39](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h24m39s) and 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 placeholder in lowercase. [00:25:11](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h25m11s) I will compile this now and then in the code show you where it's been added. A component that it's using that at the moment is registry. I'm going to install it now. Let's go look at the code where it should have been added. [00:25:41](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h25m41s) 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. The code itself has been inserted in the correct area. That is custom code in a little different implementation of it we've called that the [00:26:14](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h26m14s) JCB manual option. If you want to know more about the hash automation option, then please watch the previous Tutorial On YouTube.
[00:23:43](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h23m43s)
The component placeholder, and the view placeholder is still functional. If this specific script is going to end up somewhere under a specific view, because the field script gets added to the view footer, then you have a view placeholder which basically is just also (((view))). So that is how a view dynamic update can be done of anything, if you need to use the view string name any where in the script. That means you have component with the uppercase[[[Component]]] [00:24:39](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h24m39s) and 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 placeholder in lowercase. [00:25:11](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h25m11s) I will compile this now and then in the code show you where it's been added. A component that it's using that at the moment is 'registry'. I'm going to install it now. Let's go look at the code where it should have been added. [00:25:41](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h25m41s) So in the code we see there the image is being updated with 'image', 'teaser' and 'images' has been placed there, as well as in all the other areas where we had those 'arg' placeholders, all have been updated. The code itself has been inserted in the correct area. That is custom code in a different implementation which is called the JCB manual option.[00:26:14](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h26m14s) If you want to know more about the 'hash' automation option, then watch the previous tutorial on YouTube.