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.
The UI components will generate automatic.
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:
So I hope to this powerful PR will be merged. And is there any method to intercept the component's event?
