joomla/Component-Builder
joomla/Component-Builder
38
23
Fork 11
Code Issues 82 Pull Requests Projects 4 Wiki Activity

Updated 032 JCB manual custom code implementation (markdown)

Amigo 2019-07-16 10:05:29 +02:00
parent 23ed1bebfb
commit 50a8db4587
1 changed files with 5 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -46,12 +46,13 @@ If the Custom code is set up, the JCB manual will create the option for you to t
[00:13:52](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h13m52s)
It is a drag and drop field. It is actually a note as may be seen. Some HTML is used in the description and some JavaScript is being added to this footer of wherever this field is being used.[00:14:16](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h14m16s) This code is part of the process, there is much more code but this is what is needed to reuse quite often. I improve this in many areas and then I would always have to come back here(JavaScript). There are certain text that differs from each place. [00:14:37](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h14m37s ) For example: The word 'teaser', needs to be different everywhere else and the word 'image', sometimes it must be 'images' and not just 'image'. This code has been taken and added to a custom code. Set it as JCB manual, and in all places where dynamic script updates are needed, the 'arg' values are added. More info about the 'arg' values may be read in this note above.(See video) [00:15:19](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h15m19s) To make it simply 'arg'. These 'arg' areas is like placeholders. Strings or values may be passed via this Custom code placeholder and it gets updated on the fly during compilation everywhere where it uses this code snippet in JCB. [00:15:44](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h15m44s) This gives me a bit of that object orientated feeling where I write a function or a piece of script once, then I can reuse it everywhere else, and simply update the values being passed to it. It is by far not error proof there, you can not use any commas, and plus signs in these values. [00:16:15](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h16m15s) It needs to be one word. It can have a dollar sign if you want to have it place a dollar sign symbol in the code, but it doesn't execute the string that you pass. It will literally just paste it in wherever you've placed this 'arg' placeholder. You can add as many values to this 'arg' values as you want. Always make sure that the amount of values that is in the code must correspond to the amount of values that you are passing to it. [00:16:54](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h16m54s) 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 it does not have a value for it. Back in the field a placeholder is added. [00:17:28](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h17m28s) Since it is 'id 1', three values gets passed to it, 'image', 'image' and 'teaser'. Which will then correspond to the replacing arg values. So that '0' would be 'image', this '1' value here would be 'image', and this '2' would be 'teaser'. It will actually replace it on compilation. Now it is possible to reuse this code anywhere else in JCB. It had been saved previously, so I am going to close it and open another one. [00:18:03](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h18m03s)<<<<<<<<<<<<<<<<<<
It is a drag and drop field. It is actually a note as may be seen. Some HTML is used in the description and some JavaScript is being added to this footer of wherever this field is being used.[00:14:16](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h14m16s) This code is part of the process, there is much more code but this is what is needed to reuse quite often. I improve this in many areas and then I would always have to come back here(JavaScript). There are certain text that differs from each place. [00:14:37](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h14m37s ) For example: The word 'teaser', needs to be different everywhere else and the word 'image', sometimes it must be 'images' and not just 'image'. This code has been taken and added to a custom code. Set it as JCB manual, and in all places where dynamic script updates are needed, the 'arg' values are added. More info about the 'arg' values may be read in this note above.(See video) [00:15:19](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h15m19s) To make it simply 'arg'. These 'arg' areas is like placeholders. Strings or values may be passed via this Custom code placeholder and it gets updated on the fly during compilation everywhere where it uses this code snippet in JCB. [00:15:44](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h15m44s) This gives me a bit of that object orientated feeling where I write a function or a piece of script once, then I can reuse it everywhere else, and simply update the values being passed to it. It is by far not error proof there, you can not use any commas, and plus signs in these values. [00:16:15](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h16m15s) It needs to be one word. It can have a dollar sign if you want to have it place a dollar sign symbol in the code, but it doesn't execute the string that you pass. It will literally just paste it in wherever you've placed this 'arg' placeholder. You can add as many values to this 'arg' values as you want. Always make sure that the amount of values that is in the code must correspond to the amount of values that you are passing to it. [00:16:54](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h16m54s) 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 it does not have a value for it. Back in the field a placeholder is added. [00:17:28](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h17m28s) Since it is 'id 1', three values gets passed to it, 'image', 'image' and 'teaser'. Which will then correspond to the replacing arg values. So that '0' would be 'image', this '1' value here would be 'image', and this '2' would be 'teaser'. It will actually replace it on compilation. Now it is possible to reuse this code anywhere else in JCB. It had been saved previously, so I am going to close it and open another one. [00:18:03](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h18m03s) Here is one called; 'poster', which is doing the same thing. Now passing 'image', 'image' and then 'poster'. That means on this area it will change that '2 arg' value which is actually the third one. It will update it to 'poster' instead and so there is the functionality to have dynamic code in custom code, which can be reused all over JCB.
### Difference Between Editor Changes And Custom Code Changes
[00:18:39](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h18m39s)<<<<<<<<<<<<<<<
I've got one here called poster. Which is basically doing the same thing. Now I'm also passing image, image and then poster. That means on this area it will change that 2 arg value which is actually the third one. It will update it to poster instead and so I have [00:18:29](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h18m29s) the ability to have dynamic code in custom code, which can be reused all over JCB.
### Differnce Between Editor Changes And Custom Code Changes
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)