joomla/Component-Builder
joomla/Component-Builder
39
23
Fork 11
Code Issues 80 Pull Requests Projects 4 Wiki Activity
Page: 017 Layout Setup
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
18 017 Layout Setup
Amigo edited this page 2019-08-15 16:44:17 +02:00
Table of Contents

LAYOUT SETUP

Layouts

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

With setting up layouts there are some nice ways to reuse code across multiple templates or site views. We need to know which site view is calling the layout and on which basis we can use global settings related to that specific site view.

How Layouts Work With Dynamic Gets

00:00:34

I've added a little string in the dynamic get since each dynamic get targets only a specific site view. Open sermon (preacher.id) which would primarily be used in preacher side view. Look at the custom script, where I added a view key called Preacher. Since this dynamic get is only used in the preacher view, when the layout is called and you in your component, you'd only pass one item, not the whole list of items. 00:00:59 This specific item calls from Preacher, on which basis you can do a certain implementation to ensure that the layout displays the way you expected. 00:01:24

How Templates Call Layouts

00:01:39

Open the template that calls the layout. We want to see the initial setup. One of the templates that illustrate this well is the sermon list. 00:01:54 Open sermon list where you'd see that I'm looping through the items then adding some parameters to the item object. One of them is the params, the other takes the description, making sure that it's escaped and no longer than 90 characters. 00:02:26 I add that back to the description without the full name, then add the item to the 'JlayoutHelper::render(study class render)(sermonlist item)' as the layout name which will populate the script between the list items that will be placed in an unordered list on the sermon list page. 00:02:46

Sermon List - Item Layout

00:03:08

Let's look at this specific layout: 'JlayoutHelper::render(study class render)(sermonlist item)'. Look for Sermon list item in layouts. In sermon list item you will see that I'm using the global; the item being passed is placed inside the displayed data. Display data is the item object. 00:03:43 Since the parameters are placed in it, you can use the get method with the specific global field name, set in the components global settings.

Using The View Key

00:03:56

Since I'm targeting a specific view, I use the view key, adding it to the string, checking the value for this specific view in the global of the component. 00:04:02 On that basis I'm able to make this view dynamic; and can use it through multiple layouts based on that view key. If others want to use the layout in their components extending this one might not work too well, but since we use it for our own component and implementation, it's not too big of a deal. 00:04:31 At the same token I am able to check what the view key is. Is it preacher, series, or category? On that basis, I ask different questions and have different implementation of certain values like series name, preacher name, and category.

Layout To Template Custom Scripting

00:05:11

In the template, go back here and go to custom scripting. (See video.) There is the ''[sview]' placeholder. The ''[sview]' placeholder will be replaced with the actual view's name. This is a template since we use a template here. 00:05:32 I'm adding the template (this sermon list) to multiple site views, not to one site view. A template can be build and reused in multiple site views simply with this place holder,''[sview]' which is called site view.

Dynamic Custom Views using Template

00:05:46

Since this template has to be dynamic it should dynamically add the site view's name wherever it is added. 00:05:57 From the global parameters get the site view 'sermon_list_style'. It will add 'preacher','series', or 'category'. It displays 'category', 'sermons', 'list', 'style'.

Above In The Code

00:06:25

Look at it in the code, 'category', 'preacher' and 'series' open. 'Sermon-grid', 'sermon-list', and 'sermon-table' are added to them all. If 'sermon-list' in 'series' is opened, the 'name' had been changed to 'series'. If 'sermon-list' in 'preacher' is opened, it had been changed to 'preacher'. 00:06:53 If it is opened in 'category', 'category' has been added to it. Consequently, the place holder had been dynamically updated by Component Builder.

Config.xml

00:07:17

Where is it getting these values? In the component in the back end open 'config file' and scroll down. An area called 'preacher_custom_config' can be seen, which is a tab, 'preacher'. 00:07:48 In this tab there are 'value_preacher_display', 'preacher_box_contrast', 'preacher_list_style'. Scroll down, and see 'preachers_sermon_count', 'preacher_email', 'preacher_website', 'preacher_sermon_display', and 'preacher_sermon_list_display'. Take the 'sermon_list_display' and search for it across the file. 00:08:13 Make it cap sensitive. There are 3 matches: 'Category' 'Series' and 'Preacher', the three different views making use of the 'series list-style'. 00:08:33 The 'series list-style' is then implemented on the basis of the dynamic updating of the string. It gets the style, does a switch statement, and sets it accordingly. This is a nice tool to make a template more dynamic. 00:08:57 As already mentioned a template can be built and reused in multiple site views with this place holder,''[sview]' called site view.

Layout Concept

00:09:26

The layout concept is more or less the same as with templates. It has a layout area in which you place your script; here the key replacing is used. (See video.) If certain Dynamic gets are selected, the liberty is taken to show that we start with display data. But these snippets might not correspond to what you're doing because you can pass anything to a layout. (See video.) We assume that if you're using the dynamic get, you might pass it in this or that way. 00:10:06 You can't necessarily copy and paste this. At least when you look at a specific dynamic get you'd know the values in it and can try figuring out which ones to use. You can only use this if you are aware that PHP will do the implementations. 00:10:34 If you are not familiar with it, it is not necessary to use layouts. The entire front end may be built in the site view. It will work, although it might be a lengthy script. Layouts and templates had been added for convenience.

Layout Custom Script Area

00:11:02

In Layouts the same concept of adding custom scripting which will be placed in the head of the file is found. Remember that the global data or the data being passed is in 'display data.' 00:11:14 This is an HTML area but you can go into PHP and check some values, on the basis of which you can do the necessary implementations.

A Note: Use Layout in a Layout

00:11:32

A layout can be used in a layout. You can pass any value. 00:11:42 Keep in mind that 'this' does not exist on the layout page. The display data needs to be used as the 'global' or as the 'main object' from which to start your implementation.