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

Updated 031 Automatic import of custom code during compilation in JCB (markdown)

Amigo 2019-07-12 12:08:00 +02:00
parent 323c65fc04
commit 31e8e1ffb3
1 changed files with 9 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
031-Automatic-import-of-custom-code-during-compilation-in-JCB.md

@ -4,15 +4,15 @@
A very smart new feature has lately been added to Component Builder that's called custom code.[00:00:12](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m12s) It is stored next to Dynamic Get. You'd hardly ever need to go in here, unless you want to look at what is already been stored and make changes in the UI. Most of the time the changes will be done in the editor.
**What is the purpose of this new feature?**[00:00:39](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m39s)
**What is the purpose of this new feature?**
[00:00:39](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m39s)
The feature is there for those who are used to coding in another editor. For example, they create a component in Component Builder, then once it is created, they do a compile and install it onto the same website as Component Builder to test it. [00:01:13](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m13s) Then during testing, code is added into that compiled version that are installed onto the website. The new feature is able to, on compilation to extract that custom code , store it in this custom code area, and add it back into the component on the fly. Since there are some limitations, a demonstration of some rules and guidelines is necessary. [00:01:45](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m45s) This is still in beta and quite a few improvements still need to be done. I would like it to be tested and would appreciate some feedback from you.
I'm going to compile the demo component since most of you might already have this component installed and can then use this as sort of a test area. I'm going to install it on to this current site and explain how to add custom scripting to that component by going to an editor.
### Editing Code In The Editor[00:02:28](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m28s)
### Editing Code In The Editor [00:02:28](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m28s)
Here in the editor can this root directory of the website be seen. Go to the back end of the components. Open administrator, components and then the demo component. To demonstrate: On the main index page some custom scripting is added. .
### Conventions Used(Insert Code - Replace code) [00:03:04](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m04s)
@ -23,9 +23,9 @@ There are some conventions and regulations that should be considered when the wa
### Limitations For Inserting And Updating [00:05:30](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m30s)
There are a few limitations. Code can not be added closer to each other than about 6 lines. If there are going to be code closer to each other and it ends and starts within the parameter of 6 lines, you will end up with a problem, especially at the end. [00:06:14](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m14s) The reason is Component Builder doesn't only use the line in which this is found to remember where to place it, but actually creates a fingerprint of the code above this insertion and the code below this insertion, to accurately insert it in the future. If that code changes, Component Builder will give notice and will not insert the code. That is due to the nature of JCB. It is constantly being improved and therefore its code moves around quite a lot.[00:06:48](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m48s) It had been impossible to automate this, because code may accidentally be overwritten which was never intended.
There are a few limitations. Code can not be added closer to each other than about 6 lines. If there are going to be code closer to each other and it ends and starts within the parameter of 6 lines, you will end up with a problem, especially at the end. [00:06:14](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m14s) The reason is Component Builder doesn't only use the line in which this is found to remember where to place it, but actually creates a fingerprint of the code above this insertion and the code below this insertion, to accurately insert it in the future. If that code changes, Component Builder will give notice and will not insert the code. That is due to the nature of JCB. It is constantly being improved and therefore its code moves around quite a lot.[00:06:48](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m48s) It had been impossible to automate this, because code may accidentally be overwritten which has never been intended.
The only way to solve this was create what is called a "fingerprint", a few lines above the insertion of the replacement and a few lines below the replacement. To insert new code this will be used(///&ast;&ast;&ast;[INSERT<>$$$$]&ast;&ast;&ast;///). To replace new code or initially use that(///&ast;&ast;&ast;[REPLACE<>$$$$]&ast;&ast;&ast;///) [00:07:25](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m25s) At the end of the code add these corresponding placeholders(///&ast;&ast;&ast;[INSERT<>$$$$]&ast;&ast;&ast;///) and(///&ast;&ast;&ast;[REPLACE<>$$$$]&ast;&ast;&ast;///) . This little block(see video)is placed into the comments of this tutorial. If any of you need to copy it get it from here. When Component Builder adds it back, it will look like this(///&ast;&ast;&ast;[INSERT<>$$$$]&ast;&ast;&ast;///23) for the inserted and like this(///&ast;&ast;&ast;[INSERT<>$$$$]&ast;&ast;&ast;///25) for the replaced. Just add that diamond(<>) in there for it to be updated in the database.
The only way to solve this was to create what is called a "fingerprint", a few lines above the insertion of the replacement and a few lines below the replacement. To insert new code this will be used(///&ast;&ast;&ast;[INSERT<>$$$$]&ast;&ast;&ast;///). To replace new code or if it is initially done, use that(///&ast;&ast;&ast;[REPLACE<>$$$$]&ast;&ast;&ast;///) [00:07:25](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m25s) At the end of the code add these corresponding placeholders(///&ast;&ast;&ast;[INSERT<>$$$$]&ast;&ast;&ast;///) and(///&ast;&ast;&ast;[REPLACE<>$$$$]&ast;&ast;&ast;///) . This little block(see video)is placed into the comments of this tutorial. If any of you need to copy it get it from here. When Component Builder adds it back, it will look like this(///&ast;&ast;&ast;[INSERT<>$$$$]&ast;&ast;&ast;///23) if it is inserted and like this(///&ast;&ast;&ast;[INSERT<>$$$$]&ast;&ast;&ast;///25) when it is replaced. Just add that diamond(<>) in there for it to be updated in the database. <<<<<<<<<<<<<<<<<<<<<
* ### Showing Example With Replace(see video)[00:08:00](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m00s)
@ -33,13 +33,13 @@ Let's see this in action. So here we have that demo components main document ope
### Recompiling The Demo Component With Replace [00:08:58](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m58s)
Let's go to the compiler and compile the component. See what happens. So in the compiler I'm going to compile a component again. It successfully compiled. Now before I install it I could do a check to see whether it actually did get the code from the component. [00:09:24](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m24s)
Let's go to the compiler and compile the component. See what happens. So in the compiler I'm going to compile a component again. It successfully compiled. Now before I install it I could do a check to see whether it actually did get the code from the component.
### Checking The Custom Code Tab Before Installing
### Checking The Custom Code Tab Before Installing [00:09:24](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m24s)
The way I'll do that is I'm just going to open custom codes in a new tab. And low and behold there is says component demo and the path in which the change was made, and it was a replacement. We can open that and there is the code that we want replaced. And there is the hashtag for the start, the fingerprint and the hashtag for the end. The lines it's in a replacement and everything seems quite great. All we will need to do on this area is click install. [00:10:00](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m00s) Then that'll be the compiled version.
The way I'll do that is I'm just going to open custom codes in a new tab. And low and behold there is says component demo and the path in which the change was made, and it was a replacement. We can open that and there is the code that we want replaced. And there is the hashtag for the start, the fingerprint and the hashtag for the end. The lines it's in a replacement and everything seems quite great. All we will need to do on this area is click install. Then that'll be the compiled version.
### Looking at The Replaced Code In Editor
### Looking at The Replaced Code In Editor [00:10:03](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m03s)
Now let's go back to the code. It actually inserted the code in the correct place, it moved the other code down enough lines, and it changed it from replace to replaced. It added the id after it. That targets it. I could go and say I don't actually want this in here, like that, click save, [00:10:32](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m32s) and then go back to the compiler, compile it again. Here we go, install it again. Go back here, refresh this. Oeps it didn't change let me quickly go see why. I forgot to add in the diamond. You want to change the code you need to ensure that you add this back in, otherwise it will not even look for it. So we add that back in. Let's try again. [00:11:18](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m18s) It worked it updated the code in the database. Let's install it. It updated in the code. So that's how easy it is to replace a certain section.