# Separate ux file not working

**URL:** <https://forums.fusetools.com/t/separate-ux-file-not-working/6805>\
**Category:** Bug Reports\
**Created:** [March 9, 2016, 5:02pm UTC](https://forums.fusetools.com/t/separate-ux-file-not-working/6805 "2016-03-09T17:02:27Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![nico.ronconi](https://avatars.discourse-cdn.com/v4/letter/n/ecd19e/32.png) [@nico.ronconi](https://forums.fusetools.com/u/nico.ronconi)\
**Post date:** [March 9, 2016, 5:02pm UTC](https://forums.fusetools.com/t/separate-ux-file-not-working/6805/1 "2016-03-09T17:02:27Z")

</div>

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:

```auto
<App Theme="Basic">

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

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

```

And this is my MyClasses.ux file:

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

```

The console show me this!

```auto
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 🙂

---

<div class="post-metadata">

**Author:** ![Remi\_Pedersen](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/remi_pedersen/32/432_2.png) [@Remi\_Pedersen](https://forums.fusetools.com/u/Remi_Pedersen)\
**Post date:** [March 9, 2016, 5:34pm UTC](https://forums.fusetools.com/t/separate-ux-file-not-working/6805/2 "2016-03-09T17:34:39Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![nico.ronconi](https://avatars.discourse-cdn.com/v4/letter/n/ecd19e/32.png) [@nico.ronconi](https://forums.fusetools.com/u/nico.ronconi)\
**Post date:** [March 9, 2016, 6:14pm UTC](https://forums.fusetools.com/t/separate-ux-file-not-working/6805/3 "2016-03-09T18:14:53Z")

</div>

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`

---

<div class="post-metadata">

**Author:** ![nico.ronconi](https://avatars.discourse-cdn.com/v4/letter/n/ecd19e/32.png) [@nico.ronconi](https://forums.fusetools.com/u/nico.ronconi)\
**Post date:** [March 9, 2016, 6:17pm UTC](https://forums.fusetools.com/t/separate-ux-file-not-working/6805/4 "2016-03-09T18:17:20Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Bent](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/bent/32/157_2.png) [@Bent](https://forums.fusetools.com/u/Bent)\
**Post date:** [March 9, 2016, 6:19pm UTC](https://forums.fusetools.com/t/separate-ux-file-not-working/6805/5 "2016-03-09T18:19:12Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![nico.ronconi](https://avatars.discourse-cdn.com/v4/letter/n/ecd19e/32.png) [@nico.ronconi](https://forums.fusetools.com/u/nico.ronconi)\
**Post date:** [March 9, 2016, 6:22pm UTC](https://forums.fusetools.com/t/separate-ux-file-not-working/6805/6 "2016-03-09T18:22:38Z")

</div>

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

Wonderful! Thanks!

---

<div class="post-metadata">

**Author:** ![nico.ronconi](https://avatars.discourse-cdn.com/v4/letter/n/ecd19e/32.png) [@nico.ronconi](https://forums.fusetools.com/u/nico.ronconi)\
**Post date:** [March 9, 2016, 7:34pm UTC](https://forums.fusetools.com/t/separate-ux-file-not-working/6805/7 "2016-03-09T19:34:12Z")

</div>

I have another problem.

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

```auto
<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

---

<div class="post-metadata">

**Author:** ![Anders\_Lassen](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/anders_lassen/32/522_2.png) [@Anders\_Lassen](https://forums.fusetools.com/u/Anders_Lassen)\
**Post date:** [March 9, 2016, 8:16pm UTC](https://forums.fusetools.com/t/separate-ux-file-not-working/6805/8 "2016-03-09T20:16:22Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![nico.ronconi](https://avatars.discourse-cdn.com/v4/letter/n/ecd19e/32.png) [@nico.ronconi](https://forums.fusetools.com/u/nico.ronconi)\
**Post date:** [March 9, 2016, 8:28pm UTC](https://forums.fusetools.com/t/separate-ux-file-not-working/6805/9 "2016-03-09T20:28:18Z")

</div>

Like this?

MyClasses.ux File:

```auto
<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:

```auto
  "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! 🙂

---

<div class="post-metadata">

**Author:** ![Jake\_Taylor](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/jake_taylor/32/512_2.png) [@Jake\_Taylor](https://forums.fusetools.com/u/Jake_Taylor)\
**Post date:** [March 9, 2016, 8:33pm UTC](https://forums.fusetools.com/t/separate-ux-file-not-working/6805/10 "2016-03-09T20:33:18Z")

</div>

`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 🙂

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?

---

<div class="post-metadata">

**Author:** ![Jake\_Taylor](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/jake_taylor/32/512_2.png) [@Jake\_Taylor](https://forums.fusetools.com/u/Jake_Taylor)\
**Post date:** [March 9, 2016, 8:38pm UTC](https://forums.fusetools.com/t/separate-ux-file-not-working/6805/11 "2016-03-09T20:38:16Z")

</div>

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

MainView.ux:

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

```

SomeClass.ux:

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

```

includetest.unoproj:

```auto
...
  "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 (`"`_`"`) 🙂

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

---

<div class="post-metadata">

**Author:** ![Jake\_Taylor](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/jake_taylor/32/512_2.png) [@Jake\_Taylor](https://forums.fusetools.com/u/Jake_Taylor)\
**Post date:** [March 9, 2016, 8:40pm UTC](https://forums.fusetools.com/t/separate-ux-file-not-working/6805/12 "2016-03-09T20:40:52Z")

</div>

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 🙂

`Panel` is also still fine to use as a root.

---

<div class="post-metadata">

**Author:** ![nico.ronconi](https://avatars.discourse-cdn.com/v4/letter/n/ecd19e/32.png) [@nico.ronconi](https://forums.fusetools.com/u/nico.ronconi)\
**Post date:** [March 9, 2016, 8:43pm UTC](https://forums.fusetools.com/t/separate-ux-file-not-working/6805/13 "2016-03-09T20:43:15Z")

</div>

Hi Jake,

Your videos are awesome! 🙂

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

Thank you guys

---

<div class="post-metadata">

**Author:** ![Jake\_Taylor](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/jake_taylor/32/512_2.png) [@Jake\_Taylor](https://forums.fusetools.com/u/Jake_Taylor)\
**Post date:** [March 9, 2016, 8:43pm UTC](https://forums.fusetools.com/t/separate-ux-file-not-working/6805/14 "2016-03-09T20:43:59Z")

</div>

Haha thanks! Glad it works for you 🙂

---

<div class="post-metadata">

**Author:** ![contacto](https://avatars.discourse-cdn.com/v4/letter/c/dbc845/32.png) [@contacto](https://forums.fusetools.com/u/contacto)\
**Post date:** [June 7, 2016, 4:38am UTC](https://forums.fusetools.com/t/separate-ux-file-not-working/6805/15 "2016-06-07T04:38:59Z")

</div>

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

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

```

Main.ux

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

```

Home.ux

```auto
<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

```auto
<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

---

<div class="post-metadata">

**Author:** ![Jake\_Taylor](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/jake_taylor/32/512_2.png) [@Jake\_Taylor](https://forums.fusetools.com/u/Jake_Taylor)\
**Post date:** [June 7, 2016, 2:39pm UTC](https://forums.fusetools.com/t/separate-ux-file-not-working/6805/16 "2016-06-07T14:39:27Z")

</div>

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 🙂

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](https://www.dropbox.com/request/ZgndLtJQm5eGzG9cicGK)