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-13 07:47:11 +02:00
parent fdf08f9a39
commit ee12da5a7e
1 changed files with 33 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -11,48 +11,66 @@ The feature is there for those who are used to coding in another editor. For exa
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)
### Conventions Used(Insert Code - Replace code)
[00:03:04](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m04s)
There are some conventions and regulations that should be considered when the way to add custom scripting is explained. Let me first show you the conventions. To insert Custom scripting you will use a tag like this(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. Use that place holder(///&ast;&ast;&ast;[INSERT<>$$$$]&ast;&ast;&ast;///) in the beginning of the area, then after a new line, insert the code, and then at the end of the code, 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) There are two ways of adding code. One is to insert code and one is to replace existing code. So 'insert' code would simply at the same line insert that code into the existing code, where is 'replace' code will 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(23) new number at the end. [00:04:28](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m28s)This number is referencing the id of the code in the system.
**NB. Do not change this number.** Component Builder would interpret that it does not have one, and it needs to be created. It will be an error. 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.(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;///). If it needs to be changed at a later stage, just add this diamond(<>), and it will then update the existing code in the database with the changes that had been made.
### Limitations For Inserting And Updating [00:05:30](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m30s)
### 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 has never been intended.
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)
* ### Showing Example With Replace(see video)
[00:08:00](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m00s)
Let's see this in action. Here is Demo Components main document open. Some replacement tags is added. No changes is made but a few lines is added here - ///. Maybe another comment - 'hi it worked', [00:08:34](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m34s) let's do - echo 'hi it worked' and that should do it. This is going to replace this area.
### Recompiling The Demo Component With Replace [00:08:58](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m58s)
### 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. So in the compiler I'm going to compile a component again. It is successfully compiled. Now before it is installed a check may be done to see whether it actually did get the code from the component.
### Checking The Custom Code Tab Before Installing [00:09:24](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m24s)
### Checking The Custom Code Tab Before Installing
The way it's done is to open Custom Codes in a new tab. There the component demo and the path in which the change was made may be seen, and it was a replacement. If it is opened, the code that we want replaced can be seen and the hashtag for the start, the fingerprint and the hashtag for the end. All that need to be done on this area is to click 'Install'. That will be the compiled version. <<<<<<<<<<<<<<<<<<<<<<
[00:09:24](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m24s)
The way it's done is to open Custom Codes in a new tab. There the component demo and the path in which the change was made may be seen, and it was a replacement. If it is opened, the code that we want replaced can be seen and the hashtag for the start, the fingerprint and the hashtag for the end. All that need to be done on this area is to click 'Install'. That will be the compiled version.
### 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 inserted the code in the correct place, moved the other code down the right quantity of lines and it changed it from 'replace' to 'replaced'. It added the ID after it that targets it. If it is not needed in here, like that(See video). [00:10:32](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m32s) Click save then go back to the compiler and compile it again. Install it again. Go back here, refresh this. Do not forget to add in the diamond. If the code is changed, make sure that it is added back in otherwise it will look for it. So we add that back in. It successfully updated the code in the database. Install it and it will get updated in the code. That is how to replace a certain section.
### Inserting Custom Code Via Editor
[00:11:32](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m32s)
Let's look at inserting. Remember, don't put code close to each other within at least eight lines. So 1, 2, 3, 4, 5, 6, 7, 8. From this line another set may be inserted or another section of code may either be inserted or replaced . [00:11:58](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m58s) The reason is that the fingerprint that it creates above the insertion, is sometimes up to 8 lines long. It could happen that it uses from the selected area(see video) and turn out to be an error when changes are made. It will interpret that this code has also been affected and will not find it. That is one of the limitations that these code insertions that is done either by replacing or inserting a portion of text script, can only be inserted up to eight lines apart. Let's do an insertion over here(see video). It is inserted and a comment placed in. Then save and compile.<<<<<<<<<
### Looking at The Replaced Code In Editor [00:10:03](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m03s)
### Checking The Custom Code Tab For New Entry Before New Installation
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. 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.
### Inserting Custom Code Via Editor [00:11:32](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m32s)
Let's look at inserting. Remember as I said, don't put code close to each other within at least eight lines. So 1, 2, 3, 4, 5, 6, 7, 8. I could actually from this line insert, another set or either insert or replace another section of code. [00:11:58](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m58s) The reason is because the fingerprint that it creates above the insertion, is sometimes up to 8 lines long. It could happen that it actually uses from there(see video). And that could possibly be an error when you make a change here. It will think that this code is also been affected and it won't find it. So that is one of the limitations that these code insertions that you do either by replacing or inserting as chunk of text script, can only be inserted up to eight lines apart From each other. Let's do an insertion over here(see video). We got that inserted there. I did put a comment. Let's save and compile.
### Checking The Custom Code Tab For New Entry Before New Installation [00:13:46](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h13m46s)
[00:13:46](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h13m46s)
Before we install it, we can just again go check whether everything was done as expected. Yes the insertion was grabbed. It was added to the database and it is there. [00:14:04](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h14m04s) It has the hash target, with insertion we only need where it starts not where it ends. And so we can close that. Now simply install that component. Let's go look at the code. It did added the replacement script, change it from replace to replaced. It's added the inserted script from insert to inserted. [00:14:34](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h14m34s) If you want to make a change to it, we're again just add these diamonds here(<>). Make our change. Save the file of course, and compile. Let's check whether the work was updated. Great it's updated the work in the database. So let's install the component. Let's go look at the code again. Wonderful it's added it back. All seems well. [00:15:18](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h15m18s)