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

Updated 015 Adding Templates and Layouts to a Site View (markdown)

Amigo 2019-06-19 13:23:37 +02:00
parent 18cc3eb791
commit 462bd996d5
1 changed files with 7 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
015-Adding-Templates-and-Layouts-to-a-Site-View.md

@ -14,23 +14,22 @@ The Default file is the main file. [00:01:20](https://www.youtube.com/watch?v=6V
### Location Of Templates ### Location Of Templates
The way it adds to templates, is with this snippet that says 'thisloadtemplatepreacherpanel'. These snippets are at the bottom of the site view. If you scroll down, you first will see the layout snippets and then after them the template snippets. [00:02:19](https://www.youtube.com/watch?v=6VBbi3Rl2eY&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m19s) Then scroll down to the one you that have created by looking at these names. Then it shows 'preacher', 'grid', 'list', 'table', 'panel', 'box', 'small'. That is the snippets that are needed. [00:02:37](https://www.youtube.com/watch?v=6VBbi3Rl2eY&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m37s) You might sometimes change the way, possibly stay in the PHP instead of going out into the HTML. That is what is happening if you look at the code. From time to time, you go out of the PHP '?>', go into the PHP, with that tag '<?php', go out of the PHP with that '>?'. Then go in again '<?', may go out again '>?', and then stay out. [00:03:04](https://www.youtube.com/watch?v=6VBbi3Rl2eY&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m04s) Having here pure HTML,(See video) and then this part here is 'uikit class' and the implementation. Then going back into PHP and go out again, and HTML is found here again. That is how PHP can be used in the view. [00:03:20](https://www.youtube.com/watch?v=6VBbi3Rl2eY&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m20s) It adds to templates with this snippet, 'thisloadtemplatepreacherpanel'. These snippets are at the bottom of the site view. If you scroll down, you will see the layout snippets and after them the template snippets. [00:02:19](https://www.youtube.com/watch?v=6VBbi3Rl2eY&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m19s) Scroll down to the one you created by looking at the names. It shows 'preacher', 'grid', 'list', 'table', 'panel', 'box', 'small'. These are the snippets needed. [00:02:37](https://www.youtube.com/watch?v=6VBbi3Rl2eY&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m37s) You might change this, perhaps stay in the PHP instead of going out into the HTML. That happens if you look at the code. From time to time go out of the PHP '?>', into the PHP with that tag '<?php', out of the PHP with that '>?', go in again '<?', go out again '>?', and then stay out. [00:03:04](https://www.youtube.com/watch?v=6VBbi3Rl2eY&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m04s) Here is pure HTML; this part is 'uikit class' and the implementation. (See video.) Go back into PHP, out again, and HTML is found here. That is how PHP can be used in the view. [00:03:20](https://www.youtube.com/watch?v=6VBbi3Rl2eY&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m20s)
### Default View In Code ### Default View In Code
Look at this in the code, and open that 'default.php' file, and see exactly what is placed there. So we end with PHP'>?' and go into PHP'<?' again. [00:03:45](https://www.youtube.com/watch?v=6VBbi3Rl2eY&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m45s) Here is the same text as in that editor. That text gets placed here and then through these snippets, it includes the template. A global setting is used here. Then check how this global setting is set in the components global settings. Check what type of display has been set. On that basis, either this template is shown or that one etc.(see video) [00:04:22](https://www.youtube.com/watch?v=6VBbi3Rl2eY&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m22s) In the template view you have access to the same global fields or class fields and public class methods as you have in the default view. In the default view we have access to 'this preacher' but the same applies to templates. When templates is opened, 'this params', and 'this preacher' website is going to be used. The same global class fields or values are being used depending on how it is called. [00:05:07](https://www.youtube.com/watch?v=6VBbi3Rl2eY&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m07s) Go back to the interface. Component Builder adds this template to this site view(see video), simply because of this code snippet. Place the code snippet in there, and look in the template list for a template with this name 'loadTemplatepreacherpanel'. It will simply add it to that site view (template in the right folder). [00:05:35](https://www.youtube.com/watch?v=6VBbi3Rl2eY&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m35s) . By doing that, templates can be added to the site view. Look at this in the code. (See video.) Open the 'default.php' file, and see what is placed there. End with PHP'>?' and go into PHP'<?' again. [00:03:45](https://www.youtube.com/watch?v=6VBbi3Rl2eY&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m45s) Here is the same text as in the editor. It gets placed here and through these snippets includes the template. A global setting is used. Check how the global setting is set in the component's global settings. Check the type of display that had been set. On that basis, either this or that template is shown, etc. (See video.) [00:04:22](https://www.youtube.com/watch?v=6VBbi3Rl2eY&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m22s) In the template view you have access to the same global fields, class fields, and public class methods that you have in the default view. In the default view we have access to 'this preacher'; the same applies to templates. When templates is opened, 'this params', and 'this preacher' website is used. The same global class fields or values are used depending on how it is called. [00:05:07](https://www.youtube.com/watch?v=6VBbi3Rl2eY&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m07s) Go back to the interface. Component Builder adds this template to this site view because of this code snippet. (See video.) Place the code snippet in there, and look in the template list for a template, 'loadTemplatepreacherpanel'. It will add it to this site view. (See video.) [00:05:35](https://www.youtube.com/watch?v=6VBbi3Rl2eY&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m35s) By doing this, templates can be added to the site view.
### Quick Layout Example Within View ### Quick Layout Example Within View
Layouts work a little different. Is there a layout in this site view? It seems templates mostly has been used. Templates and layouts can be used in the site view. [00:06:06](https://www.youtube.com/watch?v=6VBbi3Rl2eY&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m06s) As templates mostly has been used it means that possibly the layouts has been used in the templates view. If a layout need to be added to this view, without doing it inside a template, it doesn't matter, it's just a way of bundling your scripts in a more concise manner, so that it is not overwhelming when you look at the code but that you have it broken up. The layout structure is mostly used when you are dealing with a part of the display area that is used across other display areas. [00:06:53](https://www.youtube.com/watch?v=6VBbi3Rl2eY&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m53s) At the moment a piece of code is used in more than one view or in more than one template. [00:07:12](https://www.youtube.com/watch?v=6VBbi3Rl2eY&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m12s) Template can be used in 'templates' but templates cannot be used in the inside of layouts. Layouts can be used in the inside of layouts. This is conventions that are set forth because of the way Joomla implements the structure. These are not limitations because of Component Builder. [00:07:44](https://www.youtube.com/watch?v=6VBbi3Rl2eY&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m44s) Joomla will allow you to add templates to the default site view but it will not allow you to add templates to a layout. Layouts work somewhat differently. Is there a layout in this site view? Mostly templates had been used. (Templates and layouts can be used in the site view.) [00:06:06](https://www.youtube.com/watch?v=6VBbi3Rl2eY&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m06s) As mostly templates had been used, the layouts may have been used in the templates view. In case a layout must be added to the view without doing it inside a template, it doesn't matter; it's only a way of bundling the scripts in a more concise manner so that it is not so overwhelming when looking at the code but that you have it broken up. The layout structure is mostly used when you are dealing with part of the display area used across other display areas. [00:06:53](https://www.youtube.com/watch?v=6VBbi3Rl2eY&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m53s) At the moment a piece of code is used in more than one view or template. [00:07:12](https://www.youtube.com/watch?v=6VBbi3Rl2eY&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m12s) Template can be used in 'templates' but not inside layouts. Layouts can be used inside layouts. These are conventions set forth because of how Joomla implements the structure. These are not limitations because of Component Builder. [00:07:44](https://www.youtube.com/watch?v=6VBbi3Rl2eY&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m44s) Joomla allows adding templates to the default site view but not adding templates to a layout. [00:08:02](https://www.youtube.com/watch?v=6VBbi3Rl2eY&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m02s)
### Explanation Templates / Layouts Within Joomla ### Explanation Templates / Layouts Within Joomla
[00:08:02](https://www.youtube.com/watch?v=6VBbi3Rl2eY&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m02s) Templates have access to the global values, or the class values whereas layouts do not. It is important that this value needs to be passed to the layout because if you look at these snippets, you will see that we're just passing it 'this items'. But you can even pass it just 'this' or you could pass it a specific value. [00:08:29](https://www.youtube.com/watch?v=6VBbi3Rl2eY&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m29s) If you have custom classes, you can pass it that specific value from the custom class. Templates have access to the global values, or the class values, whereas layouts do not. It is important that this value must be passed to the layout. The reason is that if you look at these snippets, we're passing it 'this items'. But you can pass it just 'this' or a specific value. [00:08:29](https://www.youtube.com/watch?v=6VBbi3Rl2eY&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m29s) If you have custom classes, you can pass it the specific value from the custom class.
When a layout is set up there is a area(see video) where the dynamic get is selected that is used in the layout. It is not going to add that dynamic get to the site view or to the model. [00:08:53](https://www.youtube.com/watch?v=6VBbi3Rl2eY&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m53s) It only helps that the snippets can be viewed and it helps to set up this(See video) snippet. If the wrong code is selected in the layout, it will only change the way it looks but it can be overrided. The snippet can be copied and placed in the code where it need to be used. [00:09:18](https://www.youtube.com/watch?v=6VBbi3Rl2eY&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m18s) When a layout is set up this area is where the dynamic get used in the layout is selected. (See video.) It won't add the dynamic get to the site view or the model. [00:08:53](https://www.youtube.com/watch?v=6VBbi3Rl2eY&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m53s) It only helps to view the snippets and set up this snippet. (See video.) If the wrong code is selected in the layout, it will change the way it looks, but it can be overrode. The snippet can be copied and placed in the code where it should be used. [00:09:18](https://www.youtube.com/watch?v=6VBbi3Rl2eY&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m18s)
Then the area can be changed which is passing the information to the layout, because the layout does not have access to it. It needs to be passed through the values that you want to use in it. But this(see video) script renders a layout. This is what Component Builder needs to add a layout to the components layout folder. [00:09:51](https://www.youtube.com/watch?v=6VBbi3Rl2eY&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m51s) It looks for a layout with that 'name' in the layouts list. These layouts need to be set up before it can be included into other views and templates. Do note that the layout concept and implementation together with the template is the same in the custom admin view. It works exactly the same. [00:10:19](https://www.youtube.com/watch?v=6VBbi3Rl2eY&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m19s) By adding the snippet to the default view, Component Builder is able to add that layout to the component, and adds that layout template to that site view. The area passing the information to the layout can be changed because the layout does not have access to it. It should be passed through the values you want to use in it. This script renders a layout. (See video.) Component Builder needs to add a layout to the components layout folder. [00:09:51](https://www.youtube.com/watch?v=6VBbi3Rl2eY&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m51s) It checks for a layout with that 'name' in the layouts list. These layouts must be set up before they can be included into other views and templates. Note that the layout concept and implementation together with the template is the same in the custom admin view. It works exactly the same. [00:10:19](https://www.youtube.com/watch?v=6VBbi3Rl2eY&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m19s) By adding the snippet to the default view Component Builder is able to add the layout to the component and the layout template to the site view. [00:10:50](https://www.youtube.com/watch?v=6VBbi3Rl2eY&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m50s)
[00:10:50](https://www.youtube.com/watch?v=6VBbi3Rl2eY&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m50s) When looking at the code it can be seen how Component Builder builds site views. In the default view 'preacherbox' be seen in both areas; the same applies to ' preacherpanel', 'preachersmall', 'table', 'grid', and 'list'. [00:11:10](https://www.youtube.com/watch?v=6VBbi3Rl2eY&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m10s) This is how the code can be added in smaller portions.
When looking at the code it can be seen how Component Builder builds site views. Looking at the default view, can 'preacherbox' be seen in both areas and the same applies to ' preacherpanel', 'preachersmall', 'table', 'grid', and 'list'. [00:11:10](https://www.youtube.com/watch?v=6VBbi3Rl2eY&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m10s) That is how the code can be added in smaller portions.