joomla/Component-Builder
joomla
/
Component-Builder
38
19
Fork 11
Code Issues 42 Pull Requests Projects 3 Releases Wiki Activity
Page: 015 Adding Templates and Layouts to a Site View
Pages
001 Hello World with Joomla Component Builder 002 Intro to JCB 003 Installation of JCB 004 General Planning 005 Field Types 006 Basic Fields 007 Admin Views 008 Advanced Fields 009 Adding Admin Views to a Component 010 Component Settings 011 Component Scripts 012 Component FTP and more 013 dynamicGet 014 Adding dynamicGet to a Site View 015 Adding Templates and Layouts to a Site View 016 Template Setup 017 Layout Setup 018 Custom Admin Views 019 Adding Site Views to a Component 020 Adding Custom Admin Views to a Component 021 Tweaking MySQL Demo Data 022 Global Settings of Component Builder 023 Adding a custom time field 024 How to integrate the Create User Helper Method in your Components 025 How to use email helper in your components 026 How to setup a store message method along side the email helper class 027 How to ensure that a field is not escaped when added to list views 028 How to change exported values and setup custom import options 029 How to overwrite the custom fields 030 How to filter a list field based on association with another field 031 Automatic import of custom code during compilation in JCB 032 JCB manual custom code implementation 033 Export Import of fully mapped components 034 How to add Custom Buttons in JCB to your component Admin Area 035 Translation Mananger in JCB explained 036 Setting Site View Permission 037 Auto create SQL updates for Componets in JCB 038 Setup Site Edit View in JCB 039 Automated backup system in JCB 040 Adding Helper Structures to any JCB component 041 Upgrade to JCB v2.5.8 and using the new Admin View and Admin Fields 042 How to setup tabs after upgrade to v2.5.8 in JCB 043 Major Release of JCB v2.6.0 044 Hello World Component with Joomla Component Builder Creator Extended 045 Adding your own rule validation to a field in JCB 046 General overview of how community snippets work 047 Tutorial on forking JCB snippets so you can share your snippets with the rest of the Community 048 Tutorial on making a pull request at Joomla Component Builder Snippets 049 The New Library Manager Area 050 Easy Translation via excel 051 Dynamic Router Implementation Explained 052 Automated database updates in Joomla during development of a component 053 Quick Subform Demonstration 054 VDM Package Import Option 055 Dynamic File and Folder Inclusion concept 056 How to use the file field type to upload a file in JCB 057 Drag and Drop Upload functionality in JCB 058 The Quick Hello Word with JCB 059 Adding none database fields to an admin view 060 The custom dashboard option in JCB 061 Add or Remove Prefix to Component Name in Joomla Menu 062 Add your own JCB packages to the JCB Communty Directory 063 Proposed Collaborative Workflow in JCB 064 How to install jcb packages 065 JAB18 Using Joomla Component Builder 066 The new fields Area to make things easier 067 Adding Language String to your Component and get the Language Placeholder for dynamic use 068 Library Manager Anticipated Functionality 069 Join Fields in the admin list view with field relations 070 How to change the License Template in JCB 071 Reuse Custom Code 072 Setup Local Development Environment with Bitnami 073 JCB Fields Type Extended 074 How to add Joomla Custom Fields 075 Expand Custom Field Type Beyond The Default 076 A Quick Demonstration to Load a List of Items in a Site View 077 Run Expansion Explained 078 How to Add a Form to a Site View 079 Update the Site Form Field via URL Parameter 080 How to Add More Helper Methods to Your Components Helper Class 081 Easy Validation Rules for Fields in JCB 082 New Placeholders Feature 083 Manage a Components Global Config Option Field in Relation With Menu Params 084 Default Database Values can be set per Field Type Beta Testing Component Settings Develop a Joomla Component Guide to use the Component Builder Developing with Joomla Component Builder Home PHP Settings TIPS: Custom Code Using the JCB Demo Component While Building Your Local Development System
16 015 Adding Templates and Layouts to a Site View
Amigo edited this page 2019-08-15 16:51:12 +02:00
Table of Contents

ADDING TEMPLATES AND LAYOUTS TO A SITE VIEW

Relationship Between Templates/Layouts In Views

00:00:00 (Click on these time links to see Youtube video)

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.

Preacher View Example

00:00:33

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 in the default file.

Preacher Site View Example

00:01:18

The Default file is the main file. 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 the default view. This is added to that default file. (See video.) It says default view.

Location Of Templates

00:01:50

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 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 You might change this, perhaps stay in the PHP instead of going out into the HTML. What 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 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

Default View In Code

00:03:31

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 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 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 are 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 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 By doing this, templates can be added to the site view.

Quick Layout Example Within View

00:05:52

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 As most 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 At the moment a piece of code is used in more than one view or template. 00:07:12 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 Joomla allows adding templates to the default site view but not adding 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 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 If you have custom classes, you can pass it the specific value from the custom class.

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 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 overridden. The snippet can be copied and placed in the code where it should be used. 00:09:18

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 It checks for a layout with that 'name' in the layouts list. These layouts must be set up before they can be included in other views and templates. Note that the layout concept and implementation together with the template are 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 the layout to the component and the layout template to the site view. 00:10:50

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 This is how the code can be added in smaller portions.