[00:00] Let's take a look at the Template Canvas component. The Template Canvas is similar to the Template Repeater in that it allows you to generate multiple instances of a template but it offers some additional features and functionality. Start here in my designer. I have two templates to work with. I have a numeric display which just has a numeric label and this DisplayNum template parameter that the numeric label is bound to. I also have Text Display which has a label component as well as a Display Text parameter. The value of these parameters determine what value the instances should show. So I'll head back to my window here and we'll drop a Template Canvas component onto my workspace here. Now there's two ways to get Template Instances inside the Template Canvas component. The first is if you right-click on the Template Canvas, go down to Customizers, Template Canvas Customizer and click on that and you'll see the Template Canvas Customizer window appear. Now we can specify some of the properties of our template instance inside of the canvas. So I can give it a name. We'll go ahead and create an instance of our text display so I'll just say how about Text Template. I'll specify which template to use so we'll use Text Display. You'll see when I did that the Parameters section down here appeared and it lists our display text as well as any other template parameters down here. You can go ahead and just type hello and there are these two different positioning options here. We'll talk about Absolute first. This allows you to specify the x y width and height of the template instance inside of the canvas. It's important to note that the x and y positions are relative to the canvas not the window. So we'll just fill this out here. We'll say x is zero, y zero. We'll do 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 but if I go ahead and click Okay we can see it up here. One way that the canvas differs from the template repeater is that you can add multiple different types of templates to the component. So let's add another template instance. I'm going to right-click, go back to that Customizer and we'll go to the Template Canvas Customizer one more time. We'll add a new instance. We'll call this number template and we'll use our numeric display template. Now let's take a look at this Layout Positioning here. I'll click on the little radial button there. Now Layout positioning uses something called MiG Layout. MiG Layout is a layout manager used in Java Swing. It allows it to easily determine the layout of components or in this case templates within a container. Now I'm not going to talk too much about MiG Layout but I do have an example I want to paste in here. Gap top means I want a gap between this current row where this current instance I'm going to create and the row above it or my previous template and I'm specifying 100 pixels. Dock west means dock this to the west side. H 50 or height 50% here is actually a dynamic height. So if I add some tall Template Instances to this Template Canvas it'll actually increase the height of this one instance here. Let's fill in display number here and click Add and there it is. So you can see there's a gap here, it's docked to the west, and its height is about half the entire workspace that's available here. I'll go ahead and click Okay and see what that looks like. Did I mention there's a second way to add Template Instances to the Template Canvas component. If you take a look in the Property Editor under Data there's this Templates property here. If you look at the data set 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 data set as well as specifying which position style the instance should use. So you can see our text template is not using this Layout Collimator here but it is using x, y width and height whereas a Number Template is using this layout column here but it's pretty much ignoring x, y width and height. You can also see that there's a Parameters column that lists all of the template parameters for this particular template instance. So if I had more than one on each one of them you'd see the rest of them listed here in a Python dictionary. Next I want to mention the Layout Constraints property over here. Now the values listed are MiG Layout values and this allows you to apply some sort of constraint or properties to the entire container itself. Now if you're curious to learn more about MiG Layout there's plenty of documentation online. One resource I'm pretty fond of is this MiG Layout 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, descriptions, and then examples of how to use them.