Separate ux file not working

Bug Reports
1

Hi guys,

I’m trying to create a separate file wich contain all the ux:classes for my project;

For do that i create a new project (for trying) and i add the MyClasses.ux file.

I have this in my MainView.ux:

<App Theme="Basic">

<ux:Include File="MyClasses.ux" />

    <StackPanel>
        <ActivateButton />
    </StackPanel>
</App>

And this is my MyClasses.ux file:

<Button ux:InnerClass="ActivateButton" Margin="10">
</Button>

The console show me this!

You cannot ux:Include the file 'MyClasses.ux' because it's root node is marked with ux:Class. You can instantiate the class with <ActivateButton /> instead.  - D:\Code\FuseProjects\project\MainView.ux(1:1):E

Anyone can help me? Thanks :slight_smile:

2

While your example blows up in local preview here (due to what seems to be another bug) it works just fine in a regular build.

Which version of Fuse are you using?
And are you sure that your MyClasses.ux does not contain anything else than what you’ve written here?

3

I’m using the last version (0.9.11).

And yes, I am sure that my MyClasses.ux doesn’t contain anything else :/.

Strange, seems like it recognize ux:InnerClass as ux:Class

4

I will create a new Project and I will try again…

5

@Nick: that’s not the latest version - please download 0.10.0 (6044) and retry: https://www.fusetools.com/downloads

6

Oh, i thought that was the last version! D:

Wonderful! Thanks!

7

I have another problem.

In my MyClasses.ux file i have added 2 nodes (2 different classes):

<TextInput ux:Class="InputText" PlaceholderColor="#7e7e7e" TextColor="#006666">
</TextInput>

<Panel ux:Class="Popup">
    <SolidColor Color="Black" />
</Panel>

And i get an error:

There are multiple root elements. Line 5, position 2. - D:\Code\FuseProjects\separate2.0\MyClasses.ux(6:3):E

How can i put all my classes in a file? Is it possible or what?

Thanks

8

Yes, it is possible, but XML documents can only have one root node.

If you are making a library of classes in a single file, you shouldn’t use ux:Include. Make one class your root node, and put the other classes inside. Make it part of your project by adding the file to your .unoproj.

9

Like this?

MyClasses.ux File:

<Panel ux:Class="Classes" >

<TextInput ux:Class="InputText" PlaceholderColor="#7e7e7e" TextColor="#006666">
</TextInput>

<Panel ux:Class="Popup" Layer="Overlay" Opacity=".4">
    <SolidColor Color="#000" />
</Panel>


</Panel>

.unoproj is:

  "Includes": [
    "*",
    "MyClasses.ux"
  ]

It works!

But Which is the best ux node for the root? I add panel, but i dont know…

Thanks y’all! :slight_smile:

10

Panel is fine as a root; a Panel is just the most generic container we have. Since the elements you have inside your panel probably won’t have any specific layout in relation to each other, this is just fine :slight_smile:

I’m a bit confused as to why you needed to add the file to your project explicitly, though? I could’ve sworn “*” took care of including .ux files. Perhaps I’m wrong or that was changed?

11

Yeah I just did a test on this where I put together this tiny project:

MainView.ux:

<App Theme="Basic">
    <SomeClass />
</App>

SomeClass.ux:

<Panel ux:Class="SomeClass">
    <Button Text="This came from SomeClass" />
</Panel>

includetest.unoproj:

...
  "Includes": [
    ""
  ]
...

As you can see you don’t need to explicitly add your .ux file to the project; it’s already covered by the wildcard ("") :slight_smile:

Should serve as a simple example on how to use your class as well.

12

Ah, just read your use case again; my example was a bit too basic, but the whole point is you don’t need to add the ux file to your project specifically :slight_smile:

Panel is also still fine to use as a root.

13

Hi Jake,

Your videos are awesome! :slight_smile:

Yes i delete the file reference from my .unoproj and still works!

Thank you guys

14

Haha thanks! Glad it works for you :slight_smile:

15

Hi guys, im using a Navigator tag for navigation (obviusly), and i have created a custom component for back button, which is using routing with a Javascript variable, and i need to show back button every time that my app navigates throught pages, but how can i do this? i hope you can help me :).

custom component

<Button Opacity="0" ux:Class="BtnAtras" Width="30" Alignment="Right" Text="Atrás">
     <Clicked>
          <Callback Handler="{goBack}" />
     </Clicked>
</Button>

Main.ux

<Router ux:Name="router" />
   <Navigator DefaultTemplate="home">
   <HomePage ux:Template="home" router="router" />
   <ItemDetails ux:Template="item" router="router"  />
</Navigator>

Home.ux

<ScrollView>
    <StackPanel>
        <Each Items="{messages}">
            <DockPanel>
                <Rectangle Height="50" Width="50" Dock="Left" Margin="7,7,0,7" Alignment="TopLeft">
                     <ImageFill Source="{DataToResource icon}" />
                 </Rectangle>...

Details.ux

here i want to show my back button, called

<ScrollView>
    <StackPanel>
        <TextBox Value="{itemDetails.subject}" />
    </StackPanel>
</ScrollView>

i was trying to call ux:Class like

<Set BtnAtras.Opacity="1" />

but is not working, what i’m doing wrong! :c

16

Hi there,

First off, I went ahead and reformatted your post so that the code sections show up properly. You can see how I did this by editing the post yourself :slight_smile:

Secondly, I’m having a bit of trouble understanding what you’re after. Do you want a button that shows up only when your router has some history to navigate back to?

As for why changing the button’s opacity isn’t working, I think I’d have to see more of your code. Is it possible for you to isolate the issue a bit more and send me a project with just the relevant parts? If the code is small enough I’d prefer to see it posted in the forum (makes it a bit easier for both of us), but if not you can send it here and only the Fuse team has access to it: https://www.dropbox.com/request/ZgndLtJQm5eGzG9cicGK