External Styling

How-to Discussions
1

Hello,

So I am building an app using my own GraphicsTheme, I read that in here:

https://www.fusetools.com/learn/fuse#creating-your-own-graphicstheme

My code looks like this:

<GraphicsTheme ux:Class="MyGraphicsTheme">
    <Button>
        <!-- how a button looks goes here -->
    </Button>
</GraphicsTheme>

The thing is my MainView.ux file is really large and I´d like to keep my styling on a different page. For example, in order to have my JS on another file I would write something like:

<JavaScript File="MainView.js" />

Is there a way to link another UX file with only the styling on it? Thank You.

2

Hi!

It is not recommended to make a custom GraphicsTheme. Custom themes are just for fundamental bootstrapping differences, e.g. native controls or GL-based controls.

Instead, just make your own classes for different controls, e.g.

In MyButton.ux do:

<Panel ux:Class="MyButton">
    <!-- what a button looks like goes here -->
</Panel>

Then when you want to use this:

<MyButton />

You can always put an ux:Class in a separate file :slight_smile:

3

That is perfect. Thank you very much!

4

Me again, I hate to be a burden but I´m having issues styling TextInputs. Following the same example as above I get the following errors:

'MyTextInput' does not have a property called 'PlaceholderText'

I don´t think MainView.ux is the problem

<MyTextInput PlaceholderText="Log In" />

Apperently I can´t use PlaceholderText and several other features.

5

Hi!

Sorry for the late reply!

I assume that means you are using TextEdit instead of TextInput as base class. It is true that you won’t get PlaceholderText then. That’s part of the theme’s style for the textinput.

You can use the trigger <WhileContainsText> to decide what you want to happen when the TextEdit contains/doesn’t contain text, e.g.

<WhileContainsText Invert="true">
    <Text>Placeholder goes here</Text>
</WhileContainsText>