Show the views in a list. Incomplete and slightly borked.

public/posts/2024-03-20.md

@@ -1039,8 +1039,153 @@ function View:getOuterWidth()
 end
 ```
 
-Now we need to get the correct width and height for our view when it is passed an array of views. 
+Now we need to get the correct width and height for our view when it is passed an array of views.
 
+For now we are going to focus on a list that goes from top to bottom with our array of view. Eventually we'll need to 
+modal both directions but this seems an ideal place to start. To do so we'll need to do a couple of things. First we'll 
+need to get the height of all our views and add them together for our parent view and secondly we'll need to get the widest
+width and use that as our parent width.
 
+```lua
+function View:getInnerHeight()
+
+    local height = 0
+
+    height = height + self.params.borderTopWidth
+    height = height + self.params.borderBottomWidth
+    height = height + self.params.paddingTop
+    height = height + self.params.paddingBottom
+
+    if (type(self.content) == "table") then
+
+        if (is_array(self.content)) then
+
+            for key, value in pairs(self.content) do
+                height = height + value:getOuterHeight()
+            end
+
+        else
+            height = height + self.content:getHeight();
+        end
+    end
+
+    if (type(self.content) == "string") then
+        local font <const> = gfx.getFont()
+        height = height + font:getHeight()
+    end
+
+    return height
+end
+
+function View:getInnerWidth()
+
+    local width = 0
+
+    width = width + self.params.borderLeftWidth
+    width = width + self.params.borderRightWidth
+    width = width + self.params.paddingLeft
+    width = width + self.params.paddingRight
+
+    -- Assume view for now
+    if (type(self.content) == "table") then
+
+        if (is_array(self.content)) then
+
+            local maxWidth = 0
+
+            for key, value in pairs(self.content) do
+
+                local outerWidth <const> = value:getOuterWidth()
+
+                if outerWidth > maxWidth then
+                    maxWidth = outerWidth
+                end
+
+            end
+
+            width = width + maxWidth
+            -- Do stuff
+        else
+            width = width + self.content:getWidth();
+        end
+
+    end
+
+    if (type(self.content) == "string") then
+        local font <const> = gfx.getFont()
+        width = width + font:getTextWidth(self.content)
+    end
+
+    return width
+end
+```
+
+For the height we simply loop through our contents and get the outerHeight, this is important as otherwise margins won't
+work correctly, and add it on to the height. For the width we do a loop but instead of adding everything on we find the 
+largest and just add this to our width.
+
+Now if we run this we'll get something that looks like the following.
+
+![alt text](
+https://corofides.github.io/images/2024-03-25_21.10.49.png "List of views not displaying the items.")
+
+Okay, so far so good but now we need to start displaying our views in the list. To begin with let's just add the drawView
+to our loop in the drawView method. This won't work correctly at present but it's as good a place to start as any.
+
+```lua
+if (type(self.content) == "table") then
+
+    if (is_array(self.content)) then
+        for key, value in pairs(self.content) do
+            value:drawView()
+        end
+    else
+        self.content:drawView();
+    end
+
+end
+```
+
+![alt text](
+https://corofides.github.io/images/2024-03-25_21.15.48.png "Just display all the views.")
+
+
+Okay, kind of entertained as that wasn't what I expected. I get why it happened but it's kind of fun when something 
+unexpected happens. I was expecting it to be in the container amusingly enough. Since that's funny we should probably 
+start by fixing it, right?
+
+So the issue is currently the inner items don't have the location of our list. We need to fix this so it's drawn to the 
+correct position. To do this we need to modify the top and left properties of our parameters table for the child elements.
+Let's add a method to modify the parameters in our views.
+
+```lua
+function View:setParam(name, value)
+
+    self.params[name] = value;
+
+end
+```
+
+Now in our loop when we draw the views we need to position the child view. However we also need to account for the padding
+and border so that we are positioned in the 'content' area to do this we'll add some logic surrounding our drawView
+
+![alt text](
+https://corofides.github.io/images/2024-03-25_21.30.10.png "Well it's in the list now..")
+
+```lua
+local positionX = self.params.left + self.params.borderLeftWidth + self.params.paddingLeft;
+local positionY = self.params.top + self.params.borderTopWidth + self.params.paddingTop;
+
+for key, value in pairs(self.content) do
+
+    value:setParam("top", positionY)
+    value:setParam("left", positionX)
+
+    value:drawView()
+end
+```
+
+It's inside the list. (Okay, so this is the second weird thing which is a sign that I'm getting tired so I'm going to 
+leave it here for tonight.)