Will threepenny-gui have abstractions to hide underlying HTML?

[yuvallanger]

It is supposed to be a GUI-ish module, but to be using it, one has to know and use HTML.

Will it have at a future point some abstraction hiding the underlying HTML?

Many thanks!

[HeinrichApfelmus]

(UPDATED 10 Dec 2016)

The intention is indeed to hide HTML at some point, replacing it with a declarative language for specifying GUI layout. A very first step in this direction are the existing table, column and row combinators.

Unfortunately, translating this language into HTML is difficult, because HTML/CSS has a poor box model. There are several options:

• Translate into the CSS 3 flexbox model. This only works in newer browsers, and I am not entirely sure how well it translates.
• Translate into a different layout engine, e.g. XUL. This has other benefits, see also issue Native shells and app deployment #52. However, this would give up browser compatibility.
• Translate into a JavaScript library. For example, the qooxdoo framework allows you to create user interfaces from JavaScript alone, without touching HTML at all. This seems very promising!

In the foreseeable future, you'll have to deal with HTML.

Note that HTML/CSS does offer good support for paragraph formatting and text layout, at least it's far better than what native GUI frameworks currently offer. (They usually embed HTML for these tasks.) I wouldn't want to lose that anymore.

[jerbaroo]

Translate into the CSS 3 flexbox model.

I've written a library for writing Flexbox layouts for Threepenny. It's in Stack.

https://github.com/barischj/threepenny-gui-flexbox

Update: The API went through a few iterations but I think I'm finally happy with it. In short the library provides a simple way of writing Flexbox CSS properties (leverages the clay package) and applying them to Threepenny elements. Also a couple of utility functions.

To achieve:

<div style="flex-grow: 1;">foo</div>

Write:

UI.div # set UI.text "foo" # setFlex (flexGrow 1)