joomla/Component-Builder
joomla/Component-Builder
39
23
Fork 11
Code Issues 80 Pull Requests Projects 4 Wiki Activity

Updated 017 Layout Setup (markdown)

Amigo 2019-06-19 14:01:20 +02:00
parent efad8ade27
commit d2ccfc389c
1 changed files with 15 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
017-Layout-Setup.md

@ -2,28 +2,36 @@
### Layouts ### Layouts
We going to look at setting up layouts. We setting up layouts you have some nice ways to reuse code across multiple templates or site views. One of the things that I found is that I would like to know which side view is actually calling the layout. So that all the bases of that I could use global settings that are related to that specific site view. [00:00:31](https://www.youtube.com/watch?v=52OLSZio0F8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m31s) 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)
### How Layouts Work With Dynamic Gets ### How Layouts Work With Dynamic Gets
What I've done, in the dynamic get I've added a little string. Since each dynamic get targets only a specific site view. If I was to open sermon (preacher.id) which is primarily going to be used in preacher side view. If I look at the custom script, you will see that I added a view key called preacher. By doing that I know since this dynamic get [00:00:59](https://www.youtube.com/watch?v=52OLSZio0F8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m59s) is only used in the preacher view, that when the layout is called and I'm in my component, I'm only passing the item. So not the whole list of items, but just one item to the layout that helps me to know. This specific item is calling from preacher, and I can on that basis do certain implementation [00:01:24](https://www.youtube.com/watch?v=52OLSZio0F8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m24s) to ensure that the layout displays in the way I expected. That's just a little heads up on making your layouts even more dynamic then going to the template. 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](https://www.youtube.com/watch?v=52OLSZio0F8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m59s) 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](https://www.youtube.com/watch?v=52OLSZio0F8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m24s)
### How Templates Call Layouts ### How Templates Call Layouts
We will open your template that calls the layout. We want to see that initial setup and one of the templates that really illustrates this very well [00:01:54](https://www.youtube.com/watch?v=52OLSZio0F8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m54s) is this sermon list. So I'm going to open sermon list. In sermon list you see that I'm looping through the items. Then I am adding some parameters to the item object. One of them is the params, the other is I'm taking the description and making sure that it's escaped, and it is no longer than 90 characters. [00:02:26](https://www.youtube.com/watch?v=52OLSZio0F8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m26s) Then I'm adding that back to the description without the full name, and then adding that item to the 'JlayoutHelper::render(study class render)(sermonlist item)' [00:02:46](https://www.youtube.com/watch?v=52OLSZio0F8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m46s) as the layout name, and that basically is going to populate the script between the list items that is going to be placed in an unordered list on the sermon list page. Open the template that calls the layout. We want to see the initial setup. One of the templates that illustrates this well is the sermon list. [00:01:54](https://www.youtube.com/watch?v=52OLSZio0F8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m54s) 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](https://www.youtube.com/watch?v=52OLSZio0F8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m26s) 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](https://www.youtube.com/watch?v=52OLSZio0F8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m46s)
### Sermon List - Item Layout ### Sermon List - Item Layout
Now let's go look at this specific layout 'JlayoutHelper::render(study class render)(sermonlist item)'. [00:03:15](https://www.youtube.com/watch?v=52OLSZio0F8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m15s) Let's look at this specific layout: 'JlayoutHelper::render(study class render)(sermonlist item)'. [00:03:15](https://www.youtube.com/watch?v=52OLSZio0F8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m15s) 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](https://www.youtube.com/watch?v=52OLSZio0F8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m43s) 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.
In layouts look for sermon list item. In sermon list item you will see that I'm using that global, the item that is being passed is placed inside of displayed data. Display data is basically the item object. [00:03:43](https://www.youtube.com/watch?v=52OLSZio0F8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m43s) Since I placed the parameters in it, I can use the get method with the specific global field name, which is set in the components global settings.
### Using The View Key ### Using The View Key
Since I'm targeting a specific view, [00:04:02](https://www.youtube.com/watch?v=52OLSZio0F8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m02s) I'm using the view key, adding it to the string and checking what is the value for this specific view in the global of the component. On the basis of this I'm actually able to make this view very dynamic, and can use it through multiple layouts, based on that view key. I know if others want to use the layout in their components extending this one it possibly will not work that well. [00:04:31](https://www.youtube.com/watch?v=52OLSZio0F8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m31s) But since we are using it for our own component and really for our own implementation, I don't think that's too big a deal. At the same token I am able to check. Simply what is the view key? Is it preacher, series, or category? On a basis of that 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; 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.
### Layout To Template Custom Scripting ### Layout To Template Custom Scripting
There is another convention that I think is very worthwhile mentioning here, and that is the convention of actually [00:05:11](https://www.youtube.com/watch?v=52OLSZio0F8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m11s) in the template, we go back here(editing the template). We go to custom scripting. There is the [[[sview]]] placeholder. The [[[sview]]] placeholder will be replaced with the actual views name. Since we using a template here, you see this is a template. [00:05:32](https://www.youtube.com/watch?v=52OLSZio0F8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m32s) This sermon list, that one, I'm adding that template to multiple site views. I'm not just adding it to one site view, I'm adding it to multiple site views. 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 ### Dynamic Custom Views using Template