JsonUI Example 2

{
  "start": [
    { "window": "Primary" },
    { "window": "WindowDock" }
  ],
  "windows": {
    "Primary": {
      "parent": "default:fixed_window",
      "body": [
        {
          "type": "default:window_root",
          "prop:layoutFunc": {
            "function": "default:flow/vertical"
          },
          "prop:children": [
            {
              "type": "default:button/text",
              "prop:text": "Window 1 - Paragraphs",
              "events": {
                "onClick": [{
                  "function": "default:add_window",
                  "param:window": "Window1"
                }]
              }
            },
            {
              "type": "default:button/text",
              "prop:text": "Window 2 - Images",
              "events": {
                "onClick": [{
                  "function": "default:add_window",
                  "param:window": "Window2"
                }]
              }
            },
            {
              "type": "default:button/text",
              "prop:text": "Window 3 - Scrolling list",
              "events": {
                "onClick": [{
                  "function": "default:add_window",
                  "param:window": "Window3"
                }]
              }
            },
            {
              "type": "default:button/text",
              "prop:text": "Window 4 - Inventory",
              "events": {
                "onClick": [{
                  "function": "default:add_window",
                  "param:window": "Window4"
                }]
              }
            }
          ]
        }
      ],
      "properties": {
       "position": ["default:centralize_x", "default:centralize_y"],
       "dimensions": ["C2/3Width", "C3/5Height"]
      }
    },
    "WindowDock": {
      "parent": "default:window_dock",
      "properties": {
        "position": ["default:centralize_x", "default:align_bottom_y"],
        "dimensions": "inherit"
      }
    },
    "Window1": {
      "parent": "default:dockable_window",
      "properties": {
        "position": ["default:centralize_x", "default:align_bottom_y"],
        "dimensions": ["Literal200", "Literal200"],
        "dock": "WindowDock"
      },
      "body": [
        {
          "type": "default:window_root",
          "prop:children": [
            {
              "type": "default:paragraph",
              "prop:lines": [
                "This is the first line of a paragraph",
                "Second line",
                "",
                "Finishing sentence"
              ],
              "prop:textAlign": "left",
              "prop:dimensions": ["default:100%", "default:100%"]
            }
          ]
        }
      ]
    },
    "Window2": {
      "parent": "default:dockable_window",
      "properties": {
        "position": ["default:centralize_x", "default:align_bottom_y"],
        "dimensions": ["Literal200", "Literal200"],
        "dock": "WindowDock"
      },
      "body": [
        {
          "type": "default:window_root",
          "prop:children": [
            {
              "type": "default:image",
              "prop:resLoc": "jsonuiexample:textures/gui/haha.png"
            }
          ]
        }
      ]
    },
    "Window3": {
      "parent": "default:dockable_window",
      "properties": {
        "position": ["default:centralize_x", "default:align_bottom_y"],
        "dimensions": ["Literal200", "Literal200"],
        "dock": "WindowDock"
      },
      "body": [
        {
          "type": "default:window_root",
          "prop:children": [
            {
              "type": "default:list_view",
              "prop:id": "ScrollingList",
              "prop:width": "default:100%",
              "prop:height": "default:100%",
              "prop:scrollBarPos": "inside",
              "prop:scrollBarStyle": "vanilla",
              "prop:children": [
              ],
              // Add elements using function, avoid copying the same line 64 times
              "events": {
                "onCreated": [{
                  "function": "default:repeat",
                  "param:times": 64,
                  "param:execute": {
                    "function": "default:add_child_to",
                    "param:target": ["Window3", "ScrollingList"],
                    "param:childVal": {
                      "function": "default:create_widget",
                      "param:type": "default:text_label",
                      "param:props": {
                        "prop:text": "Entry"
                      }
                    }
                  }
                }]
              }
            }
          ]
        }
      ]
    },
    "Window4": {
      "parent": "default:dockable_window",
      "properties": {
        "position": ["default:centralize_x", "default:align_bottom_y"],
        "dimensions": ["Literal200", "Literal200"],
        "dock": "WindowDock"
      },
      "body": [
        {
          "type": "default:window_root",
          "prop:children": [
            {
              "type": "default:inventory_panel",
              "prop:inventory": { "function": "default:player_inventory" },
              "prop:setup": [
                { "width": 9, "height": 3 },
                { "margin-vertical": 20 },
                { "width": 9, "height": 1}
              ]
            }
          ]
        }
      ]
    }
  },
  "functions": {
    "C2/3Width": {
      "function": "default:calculate",
      "param:expr": ["*", "$SCREEN_WIDTH", ["/", 2, 3]],
      "param:return": "int"
    },
    "C3/5Height": {
      "function": "default:calculate",
      "param:expr": ["*", "$SCREEN_HEIGHT", ["/", 3, 5]],
      "param:return": "int"
    },
    "Literal200": {
      "function": "default:literal",
      "param:val": 200
    }
  }
}