Skip to content

015 Adding Templates and Layouts to a Site View

Amigo edited this page Jun 19, 2019 · 16 revisions

ADDING TEMPLATES AND LAYOUTS TO A SITE VIEW

Relationship Between Templates/Layouts In Views

Now that we added a dynamic get to a site view and looked at how to access the data sets through the examples snippets, we need to understand how layouts and templates link into site views; to know what the site view in the code, the templates, and the layout in the code itself is and how Joomla do load these things. 00:00:21

Preacher View Example

If we go to our example, (component, sermon distributor, view, preacher, and template or Tmpl) there are default.php, default_preacherbox.php, default_preacherpanel.php, and default_preachersmall.php files. 00:00:58 There is a whole list of them.They are all templates. They are called templates because of the method by which they are included into the default file.

Preacher Site View Example

The Default file is the main file. 00:01:20 We call this the site view. (See video.) Everything in this file is built in the side view. Open the site view. This code here is in default view. This is added to that default file. (See video.) It says default view. 00:01:50

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 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 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 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

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 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 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 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 . By doing that, templates can be added to the site 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 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 At the moment a piece of code is used in more than one view or in more than one template. 00:07:12 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 Joomla will allow you to add templates to the default site view but it will not allow you to add templates to a layout.

Explanation Templates / Layouts Within Joomla

00:08:02 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 If you have custom classes, you can pass it that 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 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

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 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 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.

00:10:50 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 That is how the code can be added in smaller portions.

Clone this wiki locally