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

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

Amigo 2019-07-12 09:14:26 +02:00
parent 63a359b5be
commit a234a194fb
1 changed files with 7 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,7 +2,11 @@
### Custom Code
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. [00:00:39](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m39s) What is the purpose of this new feature? 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.
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. [00:00:39](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m39s)
**What is the purpose of this new feature?**
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.
* ### Example Demonstration Compiled
@ -15,11 +19,11 @@ Here in the editor can this root directory of the website be seen. Something is
### Conventions Used(Insert Code - Replace code)
Let me first show you the conventions. To insert custom scripting you will use a tag like so(see video). You will use asterisks(*) instead of the X's that are in the code. The code has the X's in it but the actual way would be with the asterisks(*). So that will be to insert a new code. You use that place holder(///***[INSERT<>$$$$]***///) in the beginning of the area, then after a new line, you will insert your code, and then at the end of the code, you will insert this one(///***[/INSERT<>$$$$]***///), to close the code. [00:03:50](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m50s) Then there are two ways of adding code. One is to insert code and one is to replace existing code. So inserting code would simply at the same line insert that code into the existing code, where is replacing code will literally remove the old code and add the new code in its place, So these are the two conventions. Once component builder adds the code back, the tag will change to inserted, and will have this new number at the end. This number is referencing the id of the [00:04:28](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m28s) code in the system. Now don't ever change this number or component builder would think that it doesn't have one, and it needs to be created. It will be an error. It won't work, so don't take this number out. It will add this at the end. After compiling it and adding this string in, it won't compile it again, because of these opening and closing [00:04:56](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m56s) brackets not being there and the greater and lesser than signs. They are the ones that activate it and makes it be parsed again. When component builder places the code back, it looks like this(///***[INSERT<>$$$$]***///). When you then later come and want to change it again you would add this diamond(<>) in there, and it will then update the existing code in the database with the changes that you've made. [00:05:30](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m30s)
Let me first show you the conventions. To insert custom scripting you will use a tag like so(see video). You will use asterisks(&ast;) instead of the X's that are in the code. The code has the X's in it but the actual way would be with the asterisks(&ast;). So that will be to insert a new code. You use that place holder(///&ast;&ast;&ast;[INSERT<>$$$$]&ast;&ast;&ast;///) in the beginning of the area, then after a new line, you will insert your code, and then at the end of the code, you will insert this one(///&ast;&ast;&ast;[INSERT<>$$$$]&ast;&ast;&ast;///), to close the code. [00:03:50](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m50s) Then there are two ways of adding code. One is to insert code and one is to replace existing code. So inserting code would simply at the same line insert that code into the existing code, where is replacing code will literally remove the old code and add the new code in its place, So these are the two conventions. Once component builder adds the code back, the tag will change to inserted, and will have this new number at the end. This number is referencing the id of the [00:04:28](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m28s) code in the system. Now don't ever change this number or component builder would think that it doesn't have one, and it needs to be created. It will be an error. It won't work, so don't take this number out. It will add this at the end. After compiling it and adding this string in, it won't compile it again, because of these opening and closing [00:04:56](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m56s) brackets not being there and the greater and lesser than signs. They are the ones that activate it and makes it be parsed again. When component builder places the code back, it looks like this(///&ast;&ast;&ast;[INSERT<>$$$$]&ast;&ast;&ast;///). When you then later come and want to change it again you would add this diamond(<>) in there, and it will then update the existing code in the database with the changes that you've made. [00:05:30](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m30s)
### Limitations For Inserting And Updating
There are a few limitations. You cannot add code close to each other than I would say 6 lines. So if there are going to be code close to each other and it ends and starts within the parameter of 6 lines, you end up with a problem, especially at the end. I will demonstrate that somehow in our actual doing of this. 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 [00:06:14](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m14s) below this insertion, to accurately insert it in the future. So that code changes and then Component Builder will give you a notice and will not insert the code. This is because of the nature of JCB. It is constantly being improved and that therefore it's code is moving around quite a lot. There was no other way for us to try and automate this, [00:06:48](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m48s) because if we use the line it could possibly cause an accident by overwriting code you never intended it to overwrite. So the only way we could solve this was creating what we call a fingerprint. A few lines above the insertion or the replacement and a few lines below the replacement. I'll demonstrate this in our demonstration in a moment. Just a heads up about that. To insert new code you will use this(///***[INSERT<>$$$$]***///). To replace new code or for the first time you would use that(///***[REPLACE<>$$$$]***///) [00:07:25](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m25s) At the end of the code you would add these corresponding placeholders(///***[INSERT<>$$$$]***///) and (///***[REPLACE<>$$$$]***///). I'll put these this little block(see video) into the comments of this tutorial. If any of you need to copy it down you could just copy it from there. When component builder adds it back, it will look like this(///***[INSERT<>$$$$]***///23) for the inserted and this///***[INSERT<>$$$$]***///25) for the replaced. If you then come back all you need to do is just add that diamond(<>) in there for it to be updated in the database. [00:08:00](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m00s)
There are a few limitations. You cannot add code close to each other than I would say 6 lines. So if there are going to be code close to each other and it ends and starts within the parameter of 6 lines, you end up with a problem, especially at the end. I will demonstrate that somehow in our actual doing of this. 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 [00:06:14](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m14s) below this insertion, to accurately insert it in the future. So that code changes and then Component Builder will give you a notice and will not insert the code. This is because of the nature of JCB. It is constantly being improved and that therefore it's code is moving around quite a lot. There was no other way for us to try and automate this, [00:06:48](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m48s) because if we use the line it could possibly cause an accident by overwriting code you never intended it to overwrite. So the only way we could solve this was creating what we call a fingerprint. A few lines above the insertion or the replacement and a few lines below the replacement. I'll demonstrate this in our demonstration in a moment. Just a heads up about that. To insert new code you will use this(///&ast;&ast;&ast;[INSERT<>$$$$]&ast;&ast;&ast;///). To replace new code or for the first time you would 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 you would add these corresponding placeholders(///&ast;&ast;&ast;[INSERT<>$$$$]&ast;&ast;&ast;///) and(///&ast;&ast;&ast;[REPLACE<>$$$$]&ast;&ast;&ast;///) . I'll put these this little block(see video) into the comments of this tutorial. If any of you need to copy it down you could just copy it from there. When component builder adds it back, it will look like this(///&ast;&ast;&ast;[INSERT<>$$$$]&ast;&ast;&ast;///23) for the inserted and this(///&ast;&ast;&ast;[INSERT<>$$$$]&ast;&ast;&ast;///25) for the replaced. If you then come back all you need to do is just add that diamond(<>) in there for it to be updated in the database. [00:08:00](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m00s)
* ### Showing Example With Replace(see video)