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 10:05:16 +02:00
parent e983f75693
commit dd29efe9e7
1 changed files with 9 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -18,34 +18,20 @@ The way it adds to templates, is with this snippet that says 'thisloadtemplatepr
### 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.<<<<<<<<<<<<<<<< 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.
In the default view we have access to 'this preacher' but the same is true of templates. These are the templates that I've just opened. And you see I'm using the same 'this params' here, and 'this preacher' website. I am using the same global class fields or values depends on how you want to call it. That is true of your templates. [00:05:07](https://www.youtube.com/watch?v=6VBbi3Rl2eY&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m07s) So If we go back to our interface the way that component builder knows that it needs to add this template to this site view(see video), is simply because of this code snippet. You place code snippet in there, and you'll go look in the template list for a template with this name(loadTemplatepreacherpanel). It will simply add it to that site view. What I mean add, add it to this [00:05:35](https://www.youtube.com/watch?v=6VBbi3Rl2eY&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m35s) template in the right folder. You can by doing that, add your templates to the site view. We will look at setting up templates.
### Quick Layout Example Within View ### Quick Layout Example Within View
We also look at setting up layouts. Layouts work a little different. Let me see do I have a layout here in this site view? It seems I'm mostly using templates, you can use templates and layouts in the site view. [00:06:06](https://www.youtube.com/watch?v=6VBbi3Rl2eY&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m06s) I have just used templates mostly it seems. And that means that possibly the layouts I've used in the templates view. If I wanted to add a layout to this view, without doing it inside a template, which doesn't matter, it's just a way of bundling your scripts in a more concise manner, so that he doesn't be overwhelming when you look at the code but that you have it broken up in pieces. The layout structure is mostly used when you are dealing with a part of the display area [00:06:53](https://www.youtube.com/watch?v=6VBbi3Rl2eY&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m53s) that is used across other display areas. I usually used the layout structure. At the moment I'm using a piece of code in more than one view or in more than one template. The reality is you could [00:07:12](https://www.youtube.com/watch?v=6VBbi3Rl2eY&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m12s) use template inside of templates. You cannot use templates inside of layouts. You can use layouts inside of layouts. These are all conventions that are set forth because of the way Joomla implements the structure. These are not limitations because of component builder. This is just how Joomla does it, it will allow you to add templates to [00:07:44](https://www.youtube.com/watch?v=6VBbi3Rl2eY&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m44s) the default site view. It will not allow you to add templates to a layout. It will just scream at you, and why? 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 needs 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. Joomla will allow you to add templates to [00:07:44](https://www.youtube.com/watch?v=6VBbi3Rl2eY&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m44s) the default site view but it will not allow you to add templates to a layout.
### Explanation Templates / Layouts Within Joomla ### Explanation Templates / Layouts Within Joomla
The easiest way to put this, templates [00:08:02](https://www.youtube.com/watch?v=6VBbi3Rl2eY&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m02s) have access to the global values, or the class values. Where as layouts do not. You need to pass layout the value that you want to give it. Now that's important point, 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) You have your custom classes, you can pass it that specific value from your custom class. It all depends and when you setup the layout. You have an area just like this(see video) where you select the dynamic get that you are using in the layout. Now that is not going to add that dynamic get to your side view or to the model. [00:08:53](https://www.youtube.com/watch?v=6VBbi3Rl2eY&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m53s) It just helps you to see the snippets. It helps us to set up the snippet for you. If you've selected the wrong code here in your layout, we'll talk about that again when we get to layouts. It will actually just changed the way it looks here. But you can obviously override it. You can copy this snippet like that. Put it in your code where you want to use it. [00:09:18](https://www.youtube.com/watch?v=6VBbi3Rl2eY&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m18s) [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. <<<<<<<
Now that's important point, 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) You have your custom classes, you can pass it that specific value from your custom class. It all depends and when you setup the layout. You have an area just like this(see video) where you select the dynamic get that you are using in the layout. Now that is not going to add that dynamic get to your side view or to the model. [00:08:53](https://www.youtube.com/watch?v=6VBbi3Rl2eY&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m53s) It just helps you to see the snippets. It helps us to set up the snippet for you. If you've selected the wrong code here in your layout, we'll talk about that again when we get to layouts. It will actually just changed the way it looks here. But you can obviously override it. You can copy this snippet like that. Put it in your code where you want to use it. [00:09:18](https://www.youtube.com/watch?v=6VBbi3Rl2eY&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m18s)
Then you can just change that area that is passing the information to the layout, because the layout has not got access to this. You need to pass it through the values that you want to use in it. It will still look at how exactly that is done and possibly I will explain it again. But this(see video) script renders a layout. This is also how component builder knows it should 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 your layouts list. You need to have these layouts set up before hand. Before you can include them 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) And just by adding the snippet to the default view, component builder know it needs to add that layout to the component, and it knows it need to add that layout template to that site view. That is adding templates and layouts to a site view. And looking at the code seeing component builder builds these site views, because when we look at the default view, [00:10:50](https://www.youtube.com/watch?v=6VBbi3Rl2eY&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m50s) they are actually loaded here(see video), you see preacherbox, and there is preacherbox. There preacherpanel, there is preacherpanel. There is preachersmall and there is preachersmall. There is table, grid, and list. There is table, [00:11:10](https://www.youtube.com/watch?v=6VBbi3Rl2eY&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m10s) grid, and list. That is how you can add your code into smaller chunks. Next up we will look at setting up a template and making use of this implementation understanding the difference. That is adding templates and layouts to site views. Then you can just change that area that is passing the information to the layout, because the layout has not got access to this. You need to pass it through the values that you want to use in it. It will still look at how exactly that is done and possibly I will explain it again. But this(see video) script renders a layout. This is also how component builder knows it should 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 your layouts list. You need to have these layouts set up before hand. Before you can include them 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) And just by adding the snippet to the default view, component builder know it needs to add that layout to the component, and it knows it need to add that layout template to that site view. That is adding templates and layouts to a site view. And looking at the code seeing component builder builds these site views, because when we look at the default view, [00:10:50](https://www.youtube.com/watch?v=6VBbi3Rl2eY&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m50s) they are actually loaded here(see video), you see preacherbox, and there is preacherbox. There preacherpanel, there is preacherpanel. There is preachersmall and there is preachersmall. There is table, grid, and list. There is table, [00:11:10](https://www.youtube.com/watch?v=6VBbi3Rl2eY&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m10s) grid, and list. That is how you can add your code into smaller chunks. Next up we will look at setting up a template and making use of this implementation understanding the difference. That is adding templates and layouts to site views.