UX include

General
1

Hello,

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

2

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

3

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

4

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.

5

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.

6

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">
</Panel>

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.
7

Hey!

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

<CustomBtn />