UX include


I was just wondering if there is a way to simply include a UX file in another, to avoid the main ux code growing too much. I know the possibility to just add a but I’m having some reference problem with the compiler in doing this, that I still can’t get rid of.

Thanks Max

Is this the same question as this: https://www.fusetools.com/community/forums/general/app_with_multiple_ux_files ?

Not exactly, I had read that but I was asking for some possibility of low-level file inclusion. I tried with that suggestion, but I can’t get it to work in my situation. Just consider the SocialMedia example and try to get the Grid component in an external file. I can’t understand how to resolve the missing reference for EdgeNavigator.Active once the grid is in a new ux file. What 's the correct way to do it?

Thanks Max

There is no way of reference components in another file. These are like local variables, and not accessible outside. I know that the Fuse Team is working on this. For now you need to solve this with a huge file, JS Observables, or custom Uno code.

There is a new feature on the way that will make splitting UX files much easier, stay tuned :slight_smile:

It won’t be an include-feature, but a way to define classes with external dependencies that will be injected automatically (i.e. automatic dependency injection). In practice, this will make it straight forward to take a subsection of an UX document and put in a seprate file.

any updates on this? I was reading about componentization https://www.fusetools.com/docs/componentization
but there’s doesn’t seem to be any mention of allowing ux files to be included in another.

Basically, I’m trying to include a component (components/CustomBtn.ux):

<Panel ux:Class="CustomBtn" Margin="4" Color="#007bff">

Into another file:

<ux:Include File="components/CustomBtn.ux" />

But it doesn’t seem to be possible.

I’m getting the error:

You cannot ux:Include the file 'components/CustomBtn.ux' because it's root node is marked with ux:Class. You can instantiate the class with <Project_CustomBtn_res /> instead.


You can use your class instance in other files like this:

<CustomBtn />