015 Adding Templates and Layouts to a Site View

Hi 00:00:02 Now that we've added a dynamic get to A site view And we have looked at how to access the data sets Through the Examples snippets We need to understand How layouts and templates Link into site views basically to know 00:00:21 What is the site view in the code And what is the templates What is the layout In the code itself And how Joomla load those things Well If we go to our example component Sermon 00:00:39 distributer And then View And preacher Template or Tmpl You see that there is a Default File PHP 00:00:58 And there is a default underscore preacher Box preacher panel preacher small dot PHP files A whole list of them Now those are all templates The reason why we call them templates It's because of the method by which they are included into the default File The Default file is the main file 00:01:20 And That's what we call the site View So everything inside of this file Is actually build In the side view so let's open the site View So all this code here in default View From here to there Is added To that default File So you see it says default View 00:01:50 And the way it adds to templates It's with this snippet that says this load Template Preacher panel And you can get these snippets At the bottom of the Site View So if you were to scroll down You first with see the layout Snippets and then after them that template snippet And scroll down to the one you have 00:02:19 Made by Looking at these names And then here Is a Preacher grid List Table Panel box Small So That is the snippet that you will use 00:02:37 You might sometimes Change the way possibly stay in the PHP instead of going out into the HTML So by the way that is what is happening up here If you look at the code From time to time I go out of the PHP I go into the PHP with that tag And I go out of the PHP with that Then I go in again may go out again 00:03:04 And then I stay out that I'm Basically in HTML So here is pure HTML And Then Ok this part here is obviously Uikit Class and the implementation And then I go back into 00:03:20 PHP And I go out again and here is HTML again So that is a way that you can work with with PHP In the view so if we are going to look at this in the code And we open that default file you see that exactly what is placed there cimit So basically we End with PHP there 00:03:45 Then we go into PHP again And here is the same text that we just looked at in that Editor So that text gets placed here and then it through these Snippets it includes the template so basically I'm using a global setting here And I'm checking now this Global setting is set in the components Global settings And I'm checking what type of display has been set And then on the basis of that I either show this template or That one or that one 00:04:22 in your Template view you have access to the same Global Fields or Class Fields and public class methods As you have in the default View So 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 This preacher website so I am using the same Global Class Fields or values depends on how you wanna call it And that is true of your templates 00:05:07 So if we go back to our Interface the way that component builder knows that it needs to add this template to To this site View Is simply because of this code snippet so you place code snippet in there and you'll go look in the template List For a template with this name and it will simply add it To that site View now so what I mean I mean add it to this 00:05:35 Template with the In the right folder So You can you can by doing that Add your Templates to the site View And will look at setting up templates 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 I have just used Templates mostly it seems And that means that possibly the layouts I've used in the templates View But if I wanted to add a template sorry 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 That is used across Other Display areas So I usually used the layout structure 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 You could use Template inside of templates You cannot use templates inside of layout But you can use templates inside of templates And you can use layouts inside of layouts But you cannot use templates in layouts and so but 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 The default Site view But It will not Allow you to add templates to a layout it will just scream at you And why Well the easiest way to put this Templates 00:08:02 Have access to the global values All the class values Where is layouts do not You need to pass layout the value that you wanna give it Now that's important Point because if you look at these Snippets You 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 You have your custom classes And 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 where you select The The Dynamic get that you were using in the layout Now that is not gonna add that dynamic get to your side view or to the model 00:08:53 It just helps you to see the Snippets And it helps us to set up The snippet for you So 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 wanna use it 00:09:18 And then you can just change that Area that Is passing the information to the layout because the layout has not got access to this And so you need to pass it through it 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 just script Basically renders a layout And this is also how component builder knows it should add a layout to the components layout folder 00:09:51 And it looks for a layout with that name in your layouts list So you need to have these layouts set up before hand Before you can include them Into other Views and Tablets And 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 And just by adding the snippet to the default View Component builder know it needs to add that layout to the component and knows at least Add that layout template to that site View Ok so that is adding Site views Sorry templates and layouts to a site View And Looking at the code seeing ok so Component builder builds these site views because when We look at the default View 00:10:50 They are actually Loaded here you see Preacherbox and there is preacherbox This preacher panel preacher panel There is Preacher small And there is preacher small and there is Table grid list there is Table 00:11:10 grid and list So that is how you can Add your code into Smaller chunks And next up will look at setting up a template And Making use of this implementation Understanding the difference So That is adding templates and layouts to site views