Use XML/CSS to create dynamic component

Recently, I am working on a new and powerful dynamic UI creation framework component that will allow UI components to be defined entirely in XML and to be decorated with a dictionary /JSON format similar to CSS. It's a hard job.

Of course, you can also use pure Blocky code to create UI components on the fly.

For example,here is a xml document to declare the ui components.


<VerticalArrangement Width="fill" Height="auto"
	Image="http://appinventor.mit.edu/images/logo.png">
	<HorizontalArrangement id="c1" class="container">
		<Label Text="Id:" class="label" />
		<TextBox class="input" />
	</HorizontalArrangement>
	<HorizontalArrangement id="c2" class="container">
		<Label Text="Passward:" class="label" />
		<PasswordTextBox class="input" />
	</HorizontalArrangement>
	<HorizontalArrangement id="c3" class="container">
		<Label Text="Enter Passward:" class="label" />
		<PasswordTextBox class="input" />
	</HorizontalArrangement>
	<Button Text="Register" />
</VerticalArrangement>


And this is a json to set these components' style.

If you've ever developed a web page, which you're probably familiar with, the key for the following json is the CSS selector.


{
	".label": {
		"TextColor": "Black",
		"Height": "auto",
		"Width":"100px",
		"BackgroundColor": "argb(0x7e,128,34,123)",
		"TextAlignment":"center"
	},
	".container":{
		"AlignVertical":"Center"
	},
	".input,.container,Button": {
		"Width": "fill"
	},
	"[Text=Register]":{
		"BackgroundColor":"#7fef0f"
	},
	"#c1": {
		"BackgroundColor": "NAME(69%,Red)"
	},
	"#c2": {
		"BackgroundColor": "hsv(128,0.5,1)"
	},
	"#c3": {
		"BackgroundColor": "#1fff00ff"
	}
} 

By this block it can compile xml and css to the final xml.

The output:

<VerticalArrangement Width="fill" Height="auto"
	Image="http://appinventor.mit.edu/images/logo.png">
	<HorizontalArrangement id="c1" class="container"
		AlignVertical="2" Width="fill" BackgroundColor="NAME(69%,Red)">
		<Label Text="Id:" class="label" TextColor="Black" Height="auto"
			Width="100px" BackgroundColor="argb(0x7e,128,34,123)"
			TextAlignment="center" />
		<TextBox class="input" Width="fill" />
	</HorizontalArrangement>
	<HorizontalArrangement id="c2" class="container"
		AlignVertical="2" Width="fill" BackgroundColor="hsv(128,0.5,1)">
		<Label Text="Passward:" class="label" TextColor="Black"
			Height="auto" Width="100px" BackgroundColor="argb(0x7e,128,34,123)"
			TextAlignment="center" />
		<PasswordTextBox class="input" Width="fill" />
	</HorizontalArrangement>
	<HorizontalArrangement id="c3" class="container"
		AlignVertical="2" Width="fill" BackgroundColor="#1fff00ff">
		<Label Text="Enter Passward:" class="label" TextColor="Black"
			Height="auto" Width="100px" BackgroundColor="argb(0x7e,128,34,123)"
			TextAlignment="center" />
		<PasswordTextBox class="input" Width="fill" />
	</HorizontalArrangement>
	<Button Text="Register" Width="fill" BackgroundColor="#7fef0f" />
</VerticalArrangement>

After use Add block to create all ui components.
image

The UI components will generate automatic.
image

It's also can set/get property,invoke method by reflection.

And it alse can use event and Any Component Blocks.

If the platform support the PR and support intercept the component event in java:

it would be more easily to use dynamic component event as the following:
image

So I hope to this powerful PR will be merged. And is there any method to intercept the component's event?

6 Likes

Love this with all my heart​:heart::heart::heart:

this is good according to me😁

Where is the link of your extension.

Can someone shed some lights on this topic?

It's not that tough by now.
You just need a good xml parser.

hey by this method can we import ui made in adobe xd by this method

Unfortunately no.
You need to recreate that by using App Inventor's visible components.

Oh OKay :ok_hand: