joomla/Component-Builder
joomla
/
Component-Builder
38
19
Fork 11
Code Issues 53 Pull Requests Projects 3 Releases Wiki Activity

Updated 017 Layout Setup (markdown)

Amigo 2019-06-20 08:51:16 +02:00
parent ee89f41d2c
commit 30d627f123
1 changed files with 8 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
017-Layout-Setup.md

@ -2,7 +2,7 @@
### Layouts
Let's look at setting up layouts. Setting up layouts there are some nice ways to reuse code across multiple templates or site views. We want to know which side view is calling the layout on which basis we can use global settings related to that specific site view. [00:00:31](https://www.youtube.com/watch?v=52OLSZio0F8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m31s)
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. [00:00:31](https://www.youtube.com/watch?v=52OLSZio0F8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m31s)
### How Layouts Work With Dynamic Gets
@ -18,31 +18,26 @@ Let's look at this specific layout: 'JlayoutHelper::render(study class render)(s
### Using The View Key
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](https://www.youtube.com/watch?v=52OLSZio0F8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m02s) On that basis I'm able to make this view dynamic; I 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](https://www.youtube.com/watch?v=52OLSZio0F8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m31s) 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.
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](https://www.youtube.com/watch?v=52OLSZio0F8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m02s) 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](https://www.youtube.com/watch?v=52OLSZio0F8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m31s) 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
In the template, go back here and go to custom scripting. (See video.) [00:05:11](https://www.youtube.com/watch?v=52OLSZio0F8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m11s) 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](https://www.youtube.com/watch?v=52OLSZio0F8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m32s) I'm adding the template (this sermon list) to multiple site views, not to one site view.
<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
### Dynamic Custom Views using Template
Since I want this template again to be dynamic, so wherever I add it, I want it to dynamically add to that site views name. [00:05:57](https://www.youtube.com/watch?v=52OLSZio0F8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m57s) Then as you can see I'm actually asking the global parameters for that site view sermon list style. That means it is going to add for example preacher there, or it's going to add series there, or it is going to add category there. It will say category, sermons, list, style.
Since this template again need to be dynamic, so wherever it is added, it should dynamically add that site view's name. [00:05:57](https://www.youtube.com/watch?v=52OLSZio0F8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m57s) Then get from the global parameters that site view 'sermon_list_style'. It is going to add: 'preacher', or it's going to add 'series', or it is going to add 'category' . Then it displays: 'category', 'sermons', 'list', 'style'.
### Above In The Code
Let me show you that in the code. I have category open, I've got preacher open, as well as series. [00:06:30](https://www.youtube.com/watch?v=52OLSZio0F8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m30s) You can see that I'm adding sermon-grid, sermon-list, sermon-table to them all. If I was to open sermon-list in series, you will see that name was changed to series. If I was going to open sermon-list in preacher, [00:06:53](https://www.youtube.com/watch?v=52OLSZio0F8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m53s) you will see it was changed preacher. If I open it in category, you will see that it added category. That means that our little place holder was dynamically updated by component builder on the build, then it behaves as you expect.
Looking to that in the code. With 'category', 'preacher' and 'series' open. [00:06:30](https://www.youtube.com/watch?v=52OLSZio0F8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m30s) Then 'sermon-grid', 'sermon-list', 'sermon-table' is added to them all. If 'sermon-list' in 'series' is opened, it will be seen that 'name' has been changed to 'series'. If 'sermon-list' in 'preacher' is opened, it has been changed to 'preacher'. [00:06:53](https://www.youtube.com/watch?v=52OLSZio0F8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m53s) If it is opened in 'category', it can be seen that 'category' has been added to it. Consequently the place holder has been dynamically updated by Component Builder.
### Config.xml
Now you would know where is it getting these values? [00:07:20](https://www.youtube.com/watch?v=52OLSZio0F8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m20s) If we go to the component in the back end, a we can open it's config file. Scroll down. We get an area called 'preacher_custom_config' which is a tab, and the tab's name is preacher. In this tab we have these: value_preacher_display, [00:07:48](https://www.youtube.com/watch?v=52OLSZio0F8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m48s) preacher_box_contrast, preacher_list_style. We scroll down, we see preachers_sermon_count, preacher_email, preacher_website, and then preacher_sermon_display, and preacher_sermon_list_display. Now if we take that sermon_list_display, and search for it across the file, say I make it [00:08:13](https://www.youtube.com/watch?v=52OLSZio0F8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m13s) cap sensitive, we see that it has 6 matches. That means there is 6 places, actually 3. Because one of the other 6 are in the comments, one is category one is series and one is preacher. [00:08:33](https://www.youtube.com/watch?v=52OLSZio0F8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m33s) Those are the three different views. Let make use of that series list style. Now the series list style is then being implemented on the basis of that dynamic updating of the string here. It's simply getting the style. Then doing a switch when setting it accordingly. that is another nice [00:08:57](https://www.youtube.com/watch?v=52OLSZio0F8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m57s) to have tool. To again make a template more dynamic. You can build a template and you can reuse it in multiple site views. Simply with this place holders which is called site view. I should have mentioned that in the templates explanation, but since we only came across it now I mentioning it here.
Where is it getting these values? [00:07:20](https://www.youtube.com/watch?v=52OLSZio0F8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m20s) Go to the component in the back end, and open it's 'config file' and scroll down. An area called 'preacher_custom_config' can be seen, which is a tab, and the tab's name is 'preacher'. [00:07:48](https://www.youtube.com/watch?v=52OLSZio0F8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m48s) 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', and then 'preacher_sermon_display', and 'preacher_sermon_list_display'. Now if we take that 'sermon_list_display', and search for it across the file. [00:08:13](https://www.youtube.com/watch?v=52OLSZio0F8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m13s) Make it cap sensitive. There are 3 matches: 'Category' 'Series' and 'Preacher' which are the 3 different views.<<<<<<<<<<<<<<<<<
[00:08:33](https://www.youtube.com/watch?v=52OLSZio0F8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m33s) Those are the three different views. Let make use of that series list style. Now the series list style is then being implemented on the basis of that dynamic updating of the string here. It's simply getting the style. Then doing a switch when setting it accordingly. that is another nice [00:08:57](https://www.youtube.com/watch?v=52OLSZio0F8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m57s) to have tool. To again make a template more dynamic. You can build a template and you can reuse it in multiple site views. Simply with this place holders which is called site view. I should have mentioned that in the templates explanation, but since we only came across it now I mentioning it here.
### Layout Concept