ToolkitOptions container

Questions
1

Hey, it’s me again.
In this guide: haxeui-html5 - HaxeUI API Docs it’s described that via ToolkitOptions it’s possible to set another element as the root container of the application.

This is my body in the index.html:

...
<body>
    <div id="haxeui-container" class="mycustomclass"></div>
    <script src="Main.js"></script>
</body>
...

And here is the init part in my Main.hx (as seen in the source code this is also a way to insert the options):

var app = new HaxeUIApp({
    container: Browser.document.getElementById("haxeui-container")
});
  1. It also takes the correct container, but when I use the ID “app” in both locations only a white screen is shown.
  2. CSS-Styling of the whole app through #haxeui-container or .mycustomclass is not possible because the container div is not present on the screen (only the components inside of it, obeservable with browsers inspection tools)

Am I doing things right?
Is HaxeUI intended for full screen use only?

Cheers
Max

2
  1. It also takes the correct container, but when I use the ID “app” in both locations only a white screen is shown.

Im not really sure I understand, can you expand on what you mean?

  1. CSS-Styling of the whole app through #haxeui-container or .mycustomclass is not possible because the container div is not present on the screen (only the components inside of it, obeservable with browsers inspection tools)

If im getting what you mean, its because “haxeui css” is very different to “web page css”, and haxeui css wont work on anything outside of its container (including the container itself), so you would have to style that with “web page css” that is in the web page and not inside your haxeui app (not sure if ive understood correctly though?)

3

Maybe I try to explain what my goal is:

I want to have a website (build/index.html) that has some other things going on (normal html) and centered inside is the the HaxeUI application. See graphic below.

grafik
grafik1105×730 15.4 KB

So I can embed an HaxeUI application into an existing frontend (not only centered but on any location I want).

I thought of something like that in build/index.html:

<!-- centered and with another background color -->
<div style="margin: 0 auto;width: 800px;background-color: coral;">
    <div id="haxeui-container" class="mycustomclass"></div>
</div>
<script src="Main.js"></script>

and the Main.hx from my previous post but it has no effect.

Maybe it’s just not the intended use of HaxeUI-html5 then I just want to know :smiley:

4

So you can certainly “embed” a haxeui into another web page, as you have done. Im just not sure what the issue is after that. If you are saying you cant use “mycustomclass” or “#haxeui-container” in haxeui css that, yeah, thats normal haxeui css isnt browser wide, its just for its UI (haxeui css != w2c css3
in implementation or scope), which is starts after the container (ie, the first child of the container will be a haxeui-component, not the container itself).

5

Thanks for the explanation, I’ll try further understanding HaxeUI :slight_smile:

1 Like