Dynamic composition of application parts

[oklemencic]

In all the examples I have so far only seen that the UI for the whole application is defined upfront statically. The only dynamic aspects are conditionals and repetition like documented at https://slint-ui.com/releases/0.2.0/docs/cpp/markdown/langref.html#repetition

Is there a way to achieve some truly dynamic composition (other than including all possible widget types and binding the visibility of those).

One of my use cases for this is a kind of "report representation" consisting of multiple elements that are put one after the other. But there are 5-10 different element types (e.g. image, SVG, text, table, chart, etc.). Ideally I can create the widget via code and then attach it in some way in the "main page".

[ogoffart]

Currently this is a bit awkward and we're open to find out what kind of syntax this could have.

Several options are available.

1. Use several for for each kind of elements

property <[ImageInfo]> images;
property <[SvgInfo]> svgs;
property <[TextInfo]> texts;
//...
for it in images : Image { ... }
for it in svgs : Svg { ... }
for it in texts : Text { ... }

2. use a a bunch of if

for it in items : Rectangle {
   // this could clearly benefit to have some C-style `enum` in the language
   if (it.type == 0) : Image { ... }
   if (it.type == 1) : Svg { ... }
   if (it.type == 2) : Text { ... }
}

the if make sure only one element is instantiated.

I was thinking maybe there should be some kind of a switch or something to select an element amongst some.

But what would be the ideal solution that would work for you? What kind of syntax would you use for it.

[akiross]

Option 1 seems ok if the number of types of elements is limited. I couldn't find in the docs a way to push/append something from slint code: in the todo sample that is done via rust (the todo_added adds a TodoItem to the list): is it necessary to do this in the host code (rust/c++)?
That's Ok, but adds a bit to the awkwardness of using that approach.

[tronical]

Yes, adding elements to a model needs to be done in Rust or C++. The VecModel in Rust or VectorModel in C++ have functions for that.

[oklemencic]

I was more thinking of a solution via code, e.g. by providing some way to create a "child control" via code and then add it to the main control. I am not sure if the current approach to generate the item_tree could be adapted to make item nodes dynamically.

The second place where this would be really helpful is for composing whole applications. In my case, I am having 10-30 different screens, where the user can navigate to. Now I would need to add all those screens to the main window and use the "if approach". But additionally this would also require to bind all the properties via the main window (see example code below).

export MainWindowViewModel := {
        property <int> activeScreen;
	property <Screen1ViewModel> screen1Model;
	property <Screen2ViewModel> screen2Model;
	property <Screen3ViewModel> screen3Model;
	...
}

MyWindow := MainWindow  {

	property <MainWindowViewModel> model;

	if (model.activeScreen == 0): Screen1 {
		model: model.screen1Model
	}
	if (model.activeScreen == 1): Screen2 {
		model: model.screen2Model
	}
	if (model.activeScreen == 2): Screen3 {
		model: model.screen3Model
	}
}

Or is there a different way to do that?

[al-sabr]

I would recommend to take a look at how the apache flex framework implements ListView with Item renderers.

https://flex.apache.org/asdoc/spark/components/List.html#includeExamplesSummary

https://flex.apache.org/asdoc/spark/components/supportClasses/ItemRenderer.html

A tutorial can be accessed here : https://www.peachpit.com/articles/article.aspx?p=1676705

YouTube : https://m.youtube.com/watch?v=sXCYFQexAcY