setPropertiesFromJSON - childComponents

[Lindon]

Can I not use the childComponents attribute when doing setPropertiesFromJSON, like this:

	Content.setPropertiesFromJSON( "BckBack",{"x": 190,"y": 210,"width": 650,"height": 500,
		    "itemColour": "0xFF000000",
		    "itemColour2": "0xFF000000",
		    "borderSize": 1.0,
		    "childComponents": [
		      {
		        "type": "ScriptLabel", "id": "LFOBackLabel1","x": 157.0, "y": 73.0,
		        "parentComponent": "BckBack", "fontName": "Gobold Thin",
		        "textColour": "0xFFAAAAAA", "text": "Speed", "height": 14.0,"width": 40.0, "editable": "0" },
		      {
		        "type": "ScriptLabel","id": "LFOBackLabel2", "x": 211.0,"y": 73.0,
		        "parentComponent": "BckBack",   "fontName": "Gobold Thin",
		        "textColour": "0xFFAAAAAA",  "text": "Fade In",  "height": 14.0, "width": 44.0,"editable": "0"  }
		    ]
});

I get a component but none of its children show up... or am I just doing it wrong?

[Lindon]

@Lindon back here again........ any possible answer to this?

[d.healey]

@Lindon You can't create children dynamically like this. What's your end goal here?

[Lindon]

@d-healey ... to create components from the JSON - so I can copy and paste my complex panels JSON into a script that I can use in another project.

Its really about saving the hassel of going through every one of my child components and declaring it then "FromJSONing" it...

[d.healey]

@Lindon said in setPropertiesFromJSON - childComponents:

so I can copy and paste my complex panels JSON into a script that I can use in another project.

If you add a panel in your component list of your new project, hit J to open the JSON editor, and paste in your JSON, that might create the child components - I haven't tested.

If you want to do it from scripting then you will need a function that goes through the JSON and constructs the UI... I happen to have such a script:

/*
* Author: David Healey
* License: CC0
* Last updated: 08/12/2024
*/

namespace LayoutBuilder
{
	const data = [];

	inline function add(arr: Array)
	{
		data.concat(arr);
	}

	inline function process()
	{
		if (isDefined(freezeUi) && freezeUi)
			return;

		local stack = data.clone();
		
		while (stack.length > 0)
		{
			local node = stack.shift();
			
			if (!isDefined(node.type) || !isDefined(node.id))
				continue;

			addComponent(node.id, node);

			if (!isDefined(node.childComponents))
				continue;

			for (x in node.childComponents)
				x.parentComponent = node.id;

			stack.concat(node.childComponents);
		}
	}
	
	inline function: object addComponent(id: string, properties: JSON)
	{
		local c;

		if (!Content.componentExists(id))
		{
			local type = properties.type.replace("Scripted").replace("Script");

			switch (type)
			{
				case "Slider": c = Content.addKnob(id, properties.x, properties.y); break;
				case "Button": c = Content.addButton(id, properties.x, properties.y); break;
				case "Table": c = Content.addTable(id, properties.x, properties.y); break;
				case "ComboBox": c = Content.addComboBox(id, properties.x, properties.y); break;
				case "Label": c = Content.addLabel(id, properties.x, properties.y); break;
				case "Image": c = Content.addImage(id, properties.x, properties.y); break;
				case "Viewport": c = Content.addViewport(id, properties.x, properties.y); break;
				case "Panel": c = Content.addPanel(id, properties.x, properties.y); break;
				case "AudioWaveform": c = Content.addAudioWaveform(id, properties.x, properties.y); break;
				case "SliderPack": c = Content.addSliderPack(id, properties.x, properties.y); break;
				case "WebView": c = Content.addWebView(id, properties.x, properties.y); break;
				case "FloatingTile": c = Content.addFloatingTile(id, properties.x, properties.y); break;
			}
		}
        else
        {
            c = Content.getComponent(id)
        }
		
		local allProperties = c.getAllProperties();
	
		for (x in properties)
		{
			if (!allProperties.contains(x) || ["id"].contains(x))
				continue;

			c.set(x, properties[x]);
		}

		return c;
	}
}

Call LayoutBuilder.add() and pass in your JSON within square brackets (so it's an array). Then call LayoutBuilder.process()

[Lindon]

@d-healey oh, nice... I will give it a go...