[00:00] In this video, we are going to take a look at the Template Canvas. The Template Canvas is similar to the Template Repeater in that it allows you to generate multiple instances of a template. However, it does offer some additional features. Most notably the ability to display multiple instances of multiple different templates. Here in myDESIGNER, I have two templates to work with. I have a numeric display template, which just has a numeric label, and a display num template parameter that the numeric label is bound to. I also have a text display template, which has a label component as well as a display text parameter that the label is bound to. The value of these parameters, determine what value the instances will show. So, I'll head back to my window and we'll drop a Template Canvas component onto it.

[01:06] Now there's two ways to get template instances inside the Template Canvas. The first is to use the Template Canvas customizer. If you right, click on the Template Canvas, go down to customizers, Template Canvas Customizer, you'll see the Template Canvas Customizer window appear. Here, we can add a new template instance and specify some of its properties. First, I can give it a name. I'll call it, test 1. There is this Z index property that will determine the Z order of the instances within the canvas. Instances with a lower number, will sit in front of instances with higher numbers. Instances with the same Z index value, will use the order that they are in the Canvas to determine which one is on top. If left blank, the instance will automatically be assigned a Z index of zero.

[02:03] We can then specify which template to use. So I'll use text display. You'll see when I did that, the parameter section down here appeared, and it lists our display text parameter as well as any other template parameters that the template has. I will go ahead and just type in hello as my parameter. Finally, there are these two different positioning options. I'll talk about absolute first for the display text template. This allows you to specify the X and Y coordinates of the template instance, as well as its width and height inside the Canvas. It's important to note that the X and Y positions are relative to the Canvas not the window. And they correspond to the upper left-hand corner of the template. So I'll say my X is zero, Y is zero. I'll give my template a width of 100 and a height of 50. Now, if I click add, it'll give me a little preview here without filling in the display text parameter.

[03:07] But if I go ahead and click OK, we can see it up here in my Template Canvas. Let's go ahead and add an instance of my other template. I'm going to right click and go back to that customizer. I'll call this test 2, and we'll use the numeric display template this time. I'll give the display num parameter, a value of 50, and then this time I'm going to use the layout positioning. I'll click on the little radio button there to switch to layout positioning. Layout positioning uses something called MigLayout. MigLayout is a layout manager used in Java Swing. It can easily determine the layout of components or in this case, template instances within a container. Now I'm not gonna talk too much about MigLayout, but there are a lot of resources online that describe all of the options you can use. I'm going to paste in an example here.

[04:04] Gaptop means I wanna gap between the current row where this instance I'm going to create is, and the row above it, where my previous instance is, and I'm specifying a hundred pixels. Dock west means dock this to the west side of the Canvas, and H 50% or height 50% here is actually a dynamic height meaning that it will change depending on the templates that are within the Canvas. I'll go ahead and click add to see the preview, and then we can see it within our Template Canvas. So we can see there's a gap between the top of the first template and the top of my new template, that's exactly a hundred pixels. The new template is docked to the west hand side, and its height is exactly half of the entire workspace that's being used within the Canvas, a hundred pixels out of the total 200. Now I did mention there's a second way to add template instances to the Template Canvas component.

[05:07] If you take a look in the property editor under data, there's this templates property here. If you look at the dataset viewer, you can see that both of our template instances are listed here. So when we add a new instance using the customizer, all we're really doing is adding a new row to this dataset, as well as specifying which position style the instance should use. We can see our test 1 instance, which is the text display template is using X, Y width and height columns, whereas the test two instance, which is our numeric display template is using this layout column but it's ignoring the X, Y width and height columns. You can also see that there's a column that holds the Z index, as well as a parameters column that lists all of the template parameters being passed into that particular instance in the form of a dictionary. Lastly, I want to mention the layout constraints property on the Template Canvas.

[06:06] Now the values listed here are MigLayout values, and this allows you to apply some sort of constraint or properties to the entire container itself. Now, again, if you're curious to learn more about MigLayout, there's plenty of documentation online. One resource I'm pretty fond of, is this MigLayout cheat sheet. It's at miglayout.com/cheatsheet.html. If I scroll down here just a little bit, we can take a quick look and you can see there's plenty of documentation on the constraints, their descriptions, and then examples on how to use them.